1.組件是什么
組件系統(tǒng)是 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組件使用注意事項
組件名如果是駝峰法命名，使用組件時要將大寫字母改為小寫，并且在前面加上 - 組件中的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:'<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>
新聞熱點
疑難解答
圖片精選
