Data-driven and componentization are the two most important features. Componentization is to facilitate code reuse and improve development efficiency. There are four common ways to write vue components, each with its own characteristics and is suitable for different scenarios.
1. Global components
structure:
// Component registration( 'componentName', {
template: // The html structure of the component, data(){
return{
// Properties in the component }
},
method: {
// Methods in components }
...... // Other properties and methods of components})
// Use of componentsnew Vue({
el: '#app'
})
Define a global component in the script tag through () and apply the component to the tag in the html file with the id app through the new Vue() instance.
Features:
<1> It can be directly defined and used in the script tag in the html file;
<2>The components defined by this method are global components and can be used under any Vue instance, which is suitable for simpler projects;
<3>Reuse() every time a component is defined, and the component name cannot be the same;
Example:
Welcome component
2. Local components
structure:
// Construct component objectsconst componentName = {
template: // The html structure of the component, data(){
return{
// Properties in the component }
},
method: {
// Methods in components }
...... // Other properties and methods of components}
// Use of componentsnew Vue({
el: '#app',
components: {
// Component registration and call componentName
}
})
In the script tag, the component is registered and called by defining a component object and using the components attribute in the Vue instance.
Features:
<1> Similar to components defined globally, components can be written and used directly in script tags in html files;
<2>This component can only be used in registered Vue instances;
Example:
Welcome component
3. Use template tags
structure:
<template >
// component html structure</template>
// Registration and use of global components( 'componentName', {
template: '#component',
data(){
return{
// Properties in the component }
},
method: {
// Methods in components }
...... // Other properties and methods of components})
new Vue({
el: '#app'
})
// Registration and use of local componentsconst componentName = {
template: '#component',
data(){
return{
// Properties in the component }
},
method: {
// Methods in components }
...... // Other properties and methods of components}
new Vue({
el: '#app',
components: {
// Component registration and call componentName
}
})
Use the template tag to write the html structure in the component inside the body tag, and register and use it in the script tag in the way of global components and local components. The difference is that the template attribute in the component is referenced by id.
Features:
<1>JS file does not contain html structure content, so that structure and logic are separated;
Example:
Welcome component
4. Single file component
structure:
<template lang="html">
// html structure in component</template>
<script>
//Component logic export default {
// Component properties and methods }
</script>
<style lang="css" scoped>
// Component style</style>
Create a file with the suffix vue, and the file name is the component name. The component contains three parts: html structure, js logic, and css style, which correspond to different tags. When using components, they can be used through import.
Features:
<1>Components do not affect each other, and they have high reusability, and their html, css, and js can be reused;
<2>The structure and logic of the components are clear;
<3> Suitable for large and complex projects, suitable for multi-person development;
Example:
Welcome component
! ! ! It should be noted that all tags must be wrapped with one tag in the template tag, otherwise an error will be reported.
Correct writing:
<template> <div> <div></div> ...... <div></div> </div> </template>
Wrong writing:
<template> <div></div> <div></div> ...... <div></div> </template>
Summarize
The above is the writing method of vue components introduced to you by the editor. 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!