Estoy aprendiendo Vue js. Creé una aplicación Vue JS con enlace cdn y quiero saber cómo agregarle un estilo de elemento.
Puedo escribir plantilla como plantilla: <div>Vue js 3</div> pero ¿se puede escribir el estilo así?
Me gusta -
export default { data() { return { count: 0 } }, methods: { increment() { this.count++ }, }, template : `<button @click="increment">count is: {{ count }}</button>`, //can style be written like it? style : { button { background : red; } } mounted() { console.log(`The initial count is ${this.count}.`) } }```Creo que esto debería funcionar para ti.
<style> @import './yourStyles.css'; </style>Si los estilos son específicos de este botón de componente, entonces puede usar el estilo con scoped .
<style scoped> button { background : red; } </style> Si desea aplicar un estilo común para todos los buttons de una aplicación, puede crear un archivo de estilo común y luego importarlo donde desee acceder.
<style> @import './button.css'; </style>demostración:
new Vue({ el: '#app', data: { count: 0 }, methods: { increment() { this.count++ } } }) button { background : red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button @click="increment">count is: {{ count }}</button> </div>En su archivo de índice, agregue un js principal con módulo de tipo de script
En su componente, por ejemplo, counter.js agregue
importar hoja de './styles.css' afirmar { tipo: 'css' };