HTML特性： 1.空白摺疊現象 1.文字間折為一個空格 <p>hello world!</p> 2.標簽內壁空白忽略 <p> hello world! </p> 2.轉義字元 <p>小於號<</p> <p>大於號></p> <p>空格 </p> <p>版權號©</p ...
概述
Vue 非單文件組件的創建與使用。
知識點
- 組件的定義 ：組件是能實現某個功能或具有某種屬性的代碼和資源集合。
- 創建非單文件組件需要3個步驟：
- 創建組件
- 註冊組件
- 使用組件
創建組件
使用Vue.extend(options)創建，格式與new Vue時幾乎一樣，但是這裡有兩點要註意；
- 不需要寫el,因為組件是可復用的，不能固定在某一容器內。
- data必須寫成函數,如果寫成對象，這樣組件復用時會引用同一個數據，所以只能寫成函數形式，不同的組件data數據才會互不幹擾。
- 如下圖創建了2個組件：school 組件和student組件
1 //創建school組件 2 const school =Vue.extend({ 3 template:`<div> 4 <h2>學校：{{schoolName}}</h2> 5 <h2>地址：{{address}}</h2> 6 </div>`, 7 data(){ 8 return{ 9 schoolName:'城西小學', 10 address:'南京市鼓樓區' 11 } 12 13 } 14 }); 15 //創建student 組件 16 const student =Vue.extend({ 17 template:`<div> 18 <h2>學生：{{studentName}}</h2> 19 <h2>年齡：{{age}}</h2> 20 <h2>成績：{{score}}</h2> 21 <button @click=add>請點擊我，成績加一</button> 22 </div>`, 23 data(){ 24 return{ 25 studentName:'李在容', 26 age:14, 27 score:56 28 } 29 }, 30 methods:{ 31 add(){ 32 this.score++; 33 } 34 } 35 });
註冊組件
- 註冊局部組件
- 在new Vue中使用components選項實現組件局部註冊。
- 如下圖，我們在容器root 和root2上註冊了相同的局部組件。
var vm=new Vue( { el:'#root', //註冊局部組件 components:{ xuexiao:school, xuesheng:student } } ) var vm2=new Vue( { el:'#root2', //註冊局部組件 components:{ xuexiao:school, xuesheng:student } } )
- 註冊全局組件
- 使用Vue.component(組件名,組件)。
- 如下圖, 定義了一個組件，然後註冊成全局組件。
1 //創建hello組件 2 const hello =Vue.extend({ 3 template:`<div> 4 hello 5 </div>`, 6 data(){ 7 return{ 8 msg:'我是hi組件', 9 } 10 }, 11 methods:{ 12 add(){ 13 this.score++; 14 } 15 } 16 }); 17 //註冊全局組件 18 Vue.component('hello',hello);
使用組件
- 如下代碼: 創建了3個組件student, school , hello組件
- student 和 school組件被註冊成局部組件，hello組件註冊成全局組件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root" style="border: 1px solid yellow; margin-top: 50px;"> <!-- 編寫組件標簽 --> 我使用的是局部組件 <xuexiao></xuexiao> <hr> <xuesheng></xuesheng> </div> <div id="root3" style="border: 1px solid rgb(17, 0, 255); margin-top: 50px;"> 使用全局組件 <hello></hello> </div> <div id="root2" style="border: 1px solid red; margin-top: 50px;"> <!-- 編寫組件標簽 --> 我使用的是局部組件 <xuexiao></xuexiao> <hr> <xuesheng></xuesheng> </div> </body> <script type="text/javascript"> Vue.config.productionTip=false;//阻止Vue在啟動時生成生產提示 //創建school組件 const school =Vue.extend({ template:`<div> <h2>學校：{{schoolName}}</h2> <h2>地址：{{address}}</h2> </div>`, data(){ return{ schoolName:'城西小學', address:'南京市鼓樓區' } } }); //創建student 組件 const student =Vue.extend({ template:`<div> <h2>學生：{{studentName}}</h2> <h2>年齡：{{age}}</h2> <h2>成績：{{score}}</h2> <button @click=add>請點擊我，成績加一</button> </div>`, data(){ return{ studentName:'李在容', age:14, score:56 } }, methods:{ add(){ this.score++; } } }); var vm=new Vue( { el:'#root', //註冊局部組件 components:{ xuexiao:school, xuesheng:student } } ) var vm2=new Vue( { el:'#root2', //註冊局部組件 components:{ xuexiao:school, xuesheng:student } } ) var vm3=new Vue( { el:'#root3', } ) //創建hello組件 const hello =Vue.extend({ template:`<div> hello </div>`, data(){ return{ msg:'我是hi組件', } }, methods:{ add(){ this.score++; } } }); //註冊全局組件 Vue.component('hello',hello); </script> </html>
效果圖
- 使用上面的代碼執行後的效果如下
- 如下圖，雖然root和root2使用了相同的組件，但是每個組件互不影響。第一個組件里的年齡是59，第二個組件的年齡是56：
