1. What is the component
Component system is an important concept of Vue, because it is an abstraction, which allows us to build large-scale applications with small, independent and usually 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 id="app">
<!-- Use the name of the global component as HTML Label -->
<myzujian></myzujian>
</div>
</body>
<script>
//Set global components
Vue.component("myzujian",{
template:"<h2>I am a global component</h2>"
});
var app=new Vue({
el:"#app",
});
</script>
Local components
<body>
<div id="app">
<!-- Use the name of the local component as HTML Label -->
<zu-jian></zu-jian>
</div>
</body>
<script>
var app=new Vue({
el:"#app",
components:{
zuJian:{
template:"<h1>I am a partial component</h1>",
}
}
});
</script>
1.2 precautions for use of components
If the component name is named by hump method, change the uppercase letter to lowercase when using the component, and add - the template 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 id="app">
<mytemp></mytemp>
</div>
</body>
<script>
var app=new Vue({
el:"#app",
data:{},
components:{
mytemp:{
data(){
return {
msg:"123456789",
}
},
methods: {
cli(){
alert(this.msg);
}
},
template:'<h1 @click="cli">you{{msg}} very good</h1>',
}
}
});
</script>
1.4 parent component value transfer
<body>
<div id="app">
<my :cc="msg"></my>
</div>
</body>
<script>
var app = new Vue({
el:'#app',
data:{msg:'Have nothing to do'},
components:{
my:{
props:['cc'],
template:"<s>{{cc}}</s>"
}
}
})
</script>
2. Use of routes
Vue router is a routing plug-in, which should be introduced in advance.
<body>
<div id="app">
<ul>
<li> <router-link to="/login">Sign in</router-link> </li>
<li> <router-link to="/reg">register</router-link> </li>
</ul>
<router-view></router-view>
</div>
</body>
<script>
// Get Route Object
var ro = new VueRouter({
// Define routing rules
routes:[
// Specific matching rules
// {path: Match address bar routing changes,component:To show components}
{path:'/reg',component:{template:"<s>I am registered.</s>"}},
{path:'/login',component:{template:"<s>I am logging in.</s>"}},
]
})
var app = new Vue({
el: '#app',
data: {},
router:ro
})
</script>
2.1 dynamic route matching
<body>
<div id="app">
<!-- Transfer data is written directly in / behind -->
<router-link to="/user/10">hfhg</router-link>
<router-view></router-view>
</div>
</body>
<script>
var router = new VueRouter({
routes: [
{
// Get data is the name of the variable preceded by:
path: "/user/:id", component: {
mounted(){
// router Would be vue Add public attribute $route ，Use $route To get data
console.log(this.$route.params.id)
},
template: "<s>Master{{$route.params.id}}Seceded country</s>"
}
}
]
})
var app = new Vue({
el: '#app',
data: {},
router,
})
</script>