您好,登錄后才能下訂單哦!
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:"<h3>我是全局組件</h3>" }); 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:"<h2>我是局部組件</h2>", } } }); </script>
1.2組件使用注意事項(xiàng)
組件名如果是駝峰法命名,使用組件時要將大寫字母改為小寫,并且在前面加上 - 組件中的tamplate屬性必須有一個唯一的根元素,否則會報錯
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:'<h2 @click="cli">you{{msg}} very good</h2>', } } }); </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)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。