vue組件開發

時間 2019-11-10

標籤 vue 組件開發简体版

原文原文鏈接

Vue組件javascript

組件：var app=new Vue() app自己就是最大的組件，根組件，凡是嵌入到這個根組件下的組件都是他的子組件。html

第一步: 定義一個組件vue

第二步：註冊組件java

第三步: 調用組件在註冊的父組件的模板裏用標籤的形式調用app

實例:函數

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>vue組件</title>
 6         <script type="text/javascript" src="js/vue.js">    </script>
 7     </head>
 8     <body>
 9         <div id="app">
10             <!-- 調用組件標籤 -->
11             <heads></heads>
12         </div>
13     </body>
14 </html>
15 <template id="temp">
16      <!-- 建立模板 -->
17      <div> <!-- 定義模板只能有一個頂層標籤 -->
18          <h3>這是個人第一個模板</h3>
19          <p>{{msg}}</p> <!-- 組件的數據放在模板裏  -->
20          <son></son>
21      </div>
22 </template>
23 <script type="text/template" id="temp1">
24     <!-- 子組件的模板 -->
25     <div>
26         <h2>這是個人子組件模板</h2>
27         <p>{{msg}}</p>
28     </div>
29 </script>
30 <script type="text/javascript">
31     //  定義子組件
32     let Son = {
33         template : "#temp1",
34         data : function (){
35             return {
36                 msg : "這是個人子組件",
37             }
38         }
39     }
40     //  定義組件
41     let Heads = {  // 組件名必須大寫,不能使用h5標籤
42         template : "#temp", // 模板和組件經過id相關聯
43         data : function (){ // 組件的data是一個函數
44             return{
45                 msg : "hello Miss wang!",
46             }
47         },
48         components : {
49             son : Son, // 註冊子組件
50         }
51     }
52     
53     //  app是最大的根組件
54     let app = new Vue({
55         el : "#app",
56         data : {
57             
58         },
59         components : {
60             heads : Heads, // 註冊組件
61         }
62     });
63 </script>