Vue--公有組件以及組件的使用和特點
阿新 • • 發佈：2017-11-19
html initial 特點 密碼 -name end 首字母 管理 -c
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="../vue2.4.4.js"></script> 9</head> 10 11 <body> 12 <!-- 定義一個vue的管理區塊，（MVVM中的View） --> 13 <div id="app"> 14 <!-- <login></login> --> 15 16 <template id="tlogin"> 17 <div> 18 用戶名: <input type="text"> 19 密碼： <input type="text"> 20</div> 21 </template> 22 23 <!--<script type="x-template" id="tlogin"> 24 <div> 25 用戶名: <input type="text"> 26 密a碼： <input type="text"> 27 </div> 28 </script>--> 29</div> 30 31 32 </body> 33 34 <script> 35 //公有組件 36 //註意: 37 // 1.所有的模板代碼都必須要有一個根標簽 38 // 2.如果組件的名稱如果首字母大寫 39 // a.所有的字母全部小寫 40 // b.如果首字母和內部如果也有大寫將大寫字母改為小寫並且在這個字母之前加上一個"-" 41 //UserName -> user-name 42 43 // 1.0將組件的定義與組成分兩步來執行 44 // 定義： 45 // Vue.extend({ 46 // template:"組件的html代碼" 47 // }); 48 /*var login = Vue.extend({ 49 template:"<h1>我是login</h1>" 50 }); 51 // 註冊： 52 // 參數一： 當前組成組件的名稱 53 // 參數二： 組件對象 54 //Vue.component("login",login); // 向Vue中註冊組件 55 Vue.component("login",login); 56 */ 57 58 //2.0組件的定義和組成一步到位 59 // 使用組件時候，一定要給組件一定要加上根標簽 否則會報編譯錯誤 60 /*Vue.component("login",{ 61 template:"<h1>login</h1>" 62 });*/ 63 64 // 以上兩種寫template麻煩 65 //3.0組件的使用三 （！！！常用） 66 Vue.component("login",{ 67 template:"#tlogin" 68 }); 69 70 //4.0 組件的使用四（了解即可） 71 // Vue.component("login",{ 72 // template:"#tlogin" 73 // }); 74 75 76 // 實例化vue對象（MVVM中的View Model） 77 new Vue({ 78 // vm控制的區塊為id為app的div，此div中的所有vue指令均可以被vm解析 79 el:‘#app‘, 80 data:{ 81 // 數據 （MVVM中的Model） 82 }, 83 methods:{ 84 85 } 86 }) 87 </script> 88 </html>
Vue--公有組件以及組件的使用和特點