vue组件开发

　　

Vue组件

组件：var app=new Vue() 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>

　　组件怎么使用

　　每个组件都有一个自己的模板，组件和模板用id进行关联，每个组件下面的数据只能在自己的模板内使用，如果需要使用这个组件，需要把组件注册到一个父组件下，在父组件的模板中以标签的形式调用。

posted @ 2018-07-23 23:14  461770539  阅读(125)  评论(0)  编辑  收藏  举报