Write a vue component
What I wrote below is the writing of a single file component ending in .vue, which is a project built on webpack. If you don't know how to build a vue project using webpack, you can move to vue-cli.
A complete vue component will include the following three parts:
- template: template
- js: logic
- css: style
Each component has its own template, js and styles. If a page is compared to a house, the components are the living room, bedroom, kitchen, and toilet in the house. If the kitchen is taken out separately, the components can be knife, range hood, etc. That is to say, the page is composed of components, and components can also be composed of components. This allows for very flexible and very low coupling.
Let’s first look at how a component is written in a file that is not a .vue:
('simple-counter', {
template: '<div ><input type="text"></div>',
data () { // data return {
counter: 0
}
},
methods: {
// How to write something },
created () {
// Life hook },
computed: {
// Calculate properties }
})
What is template used for?
<template> <div > <input type="text"> </div> </template> <!-- templateIt's this componenthtml，That is the following part（vue-loaderWill betemplateThe content under the tag is parsed）： --> <div > <input type="text"> </div> <!-- Corresponding to native writing，that istemplateInsidedomString -->
js part
export default {
data () {
return {
counter: 0
}
},
methods: {
// method },
created () {
// Life hook },
computed: {
// Calculate properties }
}
// It is obvious here that the js part is the non-template part in the corresponding native writing method.// export defaultThis ises6Module writing，If you don't understand, you can understand firstes6Modularity
CSS part
<style lang="scss" scoped> ...style </style>
<!-- Here you can use scss (CSS extension language) just install the two npm packages "sass-loader" and "node-sass". Vue-cli has already equipped with relevant parameters. If you want to use less or other css extension voice, just install your own compilation package. scoped is to make the scope of css only under this file. -->
Introduced
How to reference the component in other components?
Component One ()
<template>
<div class="button">
<button @click="onClick">{{text}}</button>
</div>
</template>
<script>
export default {
props: ['text'], // Get the passed value of the parent component data () {
return {
}
},
methods: {
onClick () {
('Clicked on the child component')
}
}
}
</script>
<style lang="scss" scoped>
.button {
button {
width: 100px;
}
}
</style>
Component Two ()
<template>
<div class="box">
<v-button :text="text"></v-button> <!--Use components and pass values（text）-->
</div>
</template>
<script>
import Button from './' // Introduce subcomponentsexport default {
components: {
'v-button': Button
},
data () {
return {
text: 'Key name'
}
},
methods: {
}
}
</script>
Summarize
The above is the vue group that the editor introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!