Vue中的組件及路由使用
1.組件是什么
組件系統是 Vue 的一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可復用的組件構建大型應用。通常一個應用會以一棵嵌套的組件樹的形式來組織；
1.1組件的聲明及使用
全局組件
<body>
<div id="app">
<!-- 用全局組件的名稱作為HTML的標簽 -->
<myzujian></myzujian>
</div>
</body>
<script>
//設置全局組件
Vue.component("myzujian",{
template:"<h2>我是全局組件</h2>"
});
var app=new Vue({
el:"#app",
});
</script>
局部組件
<body>
<div id="app">
<!-- 用局部組件的名稱作為HTML的標簽 -->
<zu-jian></zu-jian>
</div>
</body>
<script>
var app=new Vue({
el:"#app",
components:{
zuJian:{
template:"<h1>我是局部組件</h1>",
}
}
});
</script>
1.2組件使用注意事項
1.3組件中數據及方法
<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父級組件傳值
<body>
<div id="app">
<my :cc="msg"></my>
</div>
</body>
<script>
var app = new Vue({
el:'#app',
data:{msg:'沒事干'},
components:{
my:{
props:['cc'],
template:"<s>{{cc}}</s>"
}
}
})
</script>
2.路由的使用
Vue在使用路由插件Vue-router，要提前引入。
<body>
<div id="app">
<ul>
<li> <router-link to="/login">登錄</router-link> </li>
<li> <router-link to="/reg">注冊</router-link> </li>
</ul>
<router-view></router-view>
</div>
</body>
<script>
// 獲取路由對象
var ro = new VueRouter({
// 定義路由規則
routes:[
// 具體匹配規則
// {path：匹配地址欄路由變化,component:要展示組件}
{path:'/reg',component:{template:"<s>我是注冊</s>"}},
{path:'/login',component:{template:"<s>我是登錄</s>"}},
]
})
var app = new Vue({
el: '#app',
data: {},
router:ro
})
</script>
2.1動態路由匹配
<body>
<div id="app">
<!-- 傳遞數據直接寫在 / 后面 -->
<router-link to="/user/10">hfhg</router-link>
<router-view></router-view>
</div>
</body>
<script>
var router = new VueRouter({
routes: [
{
// 獲取數據是變量的名字前面加:
path: "/user/:id", component: {
mounted(){
// router會為vue添加公有屬性 $route ，使用$route來獲取數據
console.log(this.$route.params.id)
},
template: "<s>就大師{{$route.params.id}}分離開國家</s>"
}
}
]
})
var app = new Vue({
el: '#app',
data: {},
router,
})
</script>