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>

　　组件怎么使用spa

　　每一个组件都有一个本身的模板，组件和模板用id进行关联，每一个组件下面的数据只能在本身的模板内使用，若是须要使用这个组件，须要把组件注册到一个父组件下，在父组件的模板中以标签的形式调用。code