1. What is the component
Component systems are an important concept in Vue because they are an abstraction that allows us to build large applications using small, independent and often reusable components. Usually an application is organized in the form of a nested component tree;
1.1 Declaration and use of components
Global Components
<body>
<div >
<!-- Use the global component name asHTMLTags -->
<myzujian></myzujian>
</div>
</body>
<script>
//Set global components ("myzujian",{
template:"<h2>I am a global component</h2>"
});
var app=new Vue({
el:"#app",
});
</script>
Local components
<body>
<div >
<!-- Use the name of the local component asHTMLTags -->
<zu-jian></zu-jian>
</div>
</body>
<script>
var app=new Vue({
el:"#app",
components:{
zuJian:{
template:"<h1>I am a local component</h1>",
}
}
});
</script>
1.2 Notes on components
If the component name is named after the camel method, the uppercase letters should be changed to lowercase when using the component, and the - Tamplate attribute in the component must have a unique root element, otherwise an error will be reported.
1.3 Data and methods in components
<body>
<div >
<mytemp></mytemp>
</div>
</body>
<script>
var app=new Vue({
el:"#app",
data:{},
components:{
mytemp:{
data(){
return {
msg:"123456789",
}
},
methods: {
cli(){
alert();
}
},
template:'<h1 @click="cli">you{{msg}} very good</h1>',
}
}
});
</script>
1.4 Parent component passes value
<body>
<div >
<my :cc="msg"></my>
</div>
</body>
<script>
var app = new Vue({
el:'#app',
data:{msg:'Nothing to do'},
components:{
my:{
props:['cc'],
template:"<s>{{cc}}</s>"
}
}
})
</script>
2. Use of routing
Vue is using the routing plug-in Vue-router and needs to be introduced in advance.
<body>
<div >
<ul>
<li> <router-link to="/login">Log in</router-link> </li>
<li> <router-link to="/reg">register</router-link> </li>
</ul>
<router-view></router-view>
</div>
</body>
<script>
// Get the routing object var ro = new VueRouter({
// Define routing rules routes:[
// Specific matching rules // {path: match the address bar route changes, component: to display the component} {path:'/reg',component:{template:"<s>I am registering</s>"}},
{path:'/login',component:{template:"<s>I am logged in</s>"}},
]
})
var app = new Vue({
el: '#app',
data: {},
router:ro
})
</script>
2.1 Dynamic routing matching
<body>
<div >
<!-- Pass the data directly in / later -->
<router-link to="/user/10">hfhg</router-link>
<router-view></router-view>
</div>
</body>
<script>
var router = new VueRouter({
routes: [
{
// Get the data as the name of the variable is preceded by: path: "/user/:id", component: {
mounted(){
// router will add public attribute $route to vue, and use $route to get data (this.$)
},
template: "<s>Just a master{{$}}Separate the country</s>"
}
}
]
})
var app = new Vue({
el: '#app',
data: {},
router,
})
</script>
Summarize
The above is a detailed explanation of the components and routing usage example codes in Vue 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!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!