1.組件是什么
組件系統(tǒng)是 Vue 的一個重要概念，因?yàn)樗且环N抽象，允許我們使用小型、獨(dú)立和通常可復(fù)用的組件構(gòu)建大型應(yīng)用。通常一個應(yīng)用會以一棵嵌套的組件樹的形式來組織；
1.1組件的聲明及使用
全局組件
<body> <div id="app"> <!-- 用全局組件的名稱作為HTML的標(biāo)簽 --> <myzujian></myzujian> </div> </body><script> //設(shè)置全局組件 Vue.component("myzujian",{ template:"<h2>我是全局組件</h2>" }); var app=new Vue({ el:"#app", });</script> 局部組件
<body> <div id="app"> <!-- 用局部組件的名稱作為HTML的標(biāo)簽 --> <zu-jian></zu-jian> </div> </body><script> var app=new Vue({ el:"#app", components:{ zuJian:{ template:"<h1>我是局部組件</h1>", } } });</script>1.2組件使用注意事項(xiàng)
組件名如果是駝峰法命名，使用組件時要將大寫字母改為小寫，并且在前面加上 - 組件中的tamplate屬性必須有一個唯一的根元素，否則會報(bào)錯
1.3組件中數(shù)據(jù)及方法
<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({ // 定義路由規(guī)則 routes:[ // 具體匹配規(guī)則 // {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動態(tài)路由匹配
<body> <div id="app"> <!-- 傳遞數(shù)據(jù)直接寫在 / 后面 --> <router-link to="/user/10">hfhg</router-link> <router-view></router-view> </div></body><script> var router = new VueRouter({ routes: [ { // 獲取數(shù)據(jù)是變量的名字前面加: path: "/user/:id", component: { mounted(){ // router會為vue添加公有屬性 $route ，使用$route來獲取數(shù)據(jù) console.log(this.$route.params.id) }, template: "<s>就大師{{$route.params.id}}分離開國家</s>" } } ] }) var app = new Vue({ el: '#app', data: {}, router, })</script>總結(jié)
以上所述是小編給大家介紹的Vue中的組件及路由使用實(shí)例代碼詳解,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
新聞熱點(diǎn)
疑難解答
