vue组件的使用1

创建vue组件，看了别人的教程 http://www.cnblogs.com/keepfool/p/5625583.html，自己也总结一下

一、’创建vue组件有四个步骤：

全局组件

1.先命名，用Vue.extend()构建一个你需要渲染的html;创建一个模版

2.调用Vue.component('Html里自己创建的标签'，1步骤中创建的构造器名称);注册

3.创建一个vue实例，让其他的挂载在其标签下面;

4.html中写自己要创建的标签

    <div id="app1">
        <my-component></my-component>
        
    </div>
    <div id="app2">
        <my-component></my-component>
    </div>
     <my-component></my-component>
    <script>
       //first:creat a 组件构造器
        var myComponent=Vue.extend({
            template:'<div>This is my first component!</div>'
        })
         //2.注册组件，并制定组件的标签，组件的HTML标签为,<my-component>
             Vue.component('my-component',myComponent)

        var app1=new Vue({
            el:'#app1'
        });
        var app2=new Vue({
            el:'#app2'
        })
    </script>

二、局部组件

在vue实例下面注册component，用components代替上面第二部的Vue.component

<body>
   <div id="app">
        <my-component></my-component>
   </div>
</body>
<script>
    var myComponent=Vue.extend({
        template:'<div>This is my first component!</div>'
    })

    new Vue({
       el:'#app',
       components:{

           'my-component':myComponent  //这个标签下是局部的，那别的vue实例下就不能用
       }
    });
</script>

实现后的状态是原来的自己创建的标签被替换成我vue.extend中的html

三、父子关系

要在一个组件中使用另外一个组件，这就存在一个父子关系~基本子组件放在父组件里面

<body>
   <div id="app">
         <parent-component></parent-component>
   </div>
</body>
<script>
   //父子关系
 
    // 先构造子元素
    var Child=Vue.extend({
        template:'<i>This is a Child!</i>'
    })

      // 子级注册都是在父级构造的里面，
    var Parent=Vue.extend({
        template:'<span>This is Parent!</span><child-component></child-component>',
        components:{
            'child-component':Child
        }
    })
       
    Vue.component('parent-component',Parent)
    new Vue({
        el:'#app'
    })
</script>

四、发现新大陆不需要那么多步骤

省掉了第一步的构造~自动内部构造，将构造和注册一起使用

全局

 Vue.component('parent-component',{
    template:'<div>This is the first component!'
 })
  new Vue({
      el:'#app'
  })

在选项对象的components属性中实现局部注册：

var vm2 = new Vue({
    el: '#app2',
    components: {
        // 局部注册，my-component2是标签名称
        'my-component2': {
            template: '<div>This is the second component!</div>'
        },
        // 局部注册，my-component3是标签名称
        'my-component3': {
            template: '<div>This is the third component!</div>'
        }
    }
})

五、js和html分开

这边分开的意义还不知道，还有我写到复杂的东西怎么办呢

<body>
   <div id="app">
         <my-component></my-component>
      
   </div>

   <script type="text/x-template" id="myComponent"> //type指定为text/x-template
        <div>This is a component！</div>
   </script>
</body>
<script>
   Vue.component('my-component',{
       template:'#myComponent'   //这边写的是js的ID
   })
   new Vue({
       el:'#app'
   })
</script>

引用了template标签

<body>
   <div id="app">
         <my-component></my-component>
      
   </div>
<!-- 这边引用了一个template标签 不需要再写js的text -->
   <template id="myComponent">   
        <div>This is a component！</div>
   </template>
</body>
<script>
   Vue.component('my-component',{
       template:'#myComponent'   //这边写的是js的ID
   })
   new Vue({
       el:'#app'
   })
</script>

在定义组件的选项时，data和el选项必须使用函数。

下面的代码在执行时，浏览器会提出一个错误

 Vue.component('my-component',{
          data:{
              a:1
          }
   })

昨天晚上

<body>
 <div id="app">
     <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
 </div>
     <template id="myComponent">
         <table>
             <tr>
                 <th colspan="2">
                  子组件数据
                 </th>
             </tr>
             <tr>
                 <td>my name</td>
                 <td>{{myName}}</td>
             </tr>
             <tr>
                 <td>my age</td>
                 <td>{{myAge}}</td>
             </tr>
         </table>
     </template>

</body>
<script>
     var vm=new Vue({
         el:'#app',
         data:{
             name:'keepfool',
             age:28
         },
         components:{
             'my-component':{
                 template:'#myComponent',
                 props:['myName','myAge']
             }
         }
     })
</script>

接下来写的是那篇博文最后写的那个小例子

完整代码，实现一个查询的功能

<body>
     <div id="app">
         <div id="searchBar">
             Search <input type="text" v-model="searchQuery">
         </div>
         <simple-grid :data="gridData" :columns="gridColumns" :filter-Key="searchQuery"></simple-grid>
     </div>
     
      <template id="grid-template">
           <table>
               <thead>
                   <tr>
                       <th v-for="col in columns">
                           {{col|capitalize}}   <!-- 过滤器，将所有文字过滤为首字母大写 -->
                       </th>
                   </tr>
               </thead>
               <tbody>
                   <tr v-for="entry in data|filterBy filterKey">
                       <td v-for="col in columns">
                           {{entry[col]}}    <!-- 渲染entry中的数据 -->
                       </td>
                   </tr>
               </tbody>
           </table>
      </template>


</body>
<script>

   var demo=new Vue({
       el:'#app',
       data:{
           searchQuery:'',
           gridColumns:['name','age','sex'],
           gridData:[{
               name:'Jack',
               age:'30',
               sex:'Male'
           },{
            name:'Bill',
               age:'26',
               sex:'Male'
           },{
            name:'Tracy',
               age:'22',
               sex:'Female'
           },{
            name:'Chris',
               age:'36',
               sex:'Male'
           }]
       },
       components:{            /*components中定义了父组件中准备传入的数据*/
           'simple-grid':{       /*要插入的位置*/
           template:'#grid-template',      /*子组件的位置*/
           props:{               /*父组件数据往子组件传入*/
               data:Array,    /*这边定义了数据的格式*/
               columns:Array,
               filterKey:String
           }
       }
           }
   })
</script>

posted @ 2016-10-08 00:10 禾木7788 阅读(7328) 评论(0) 收藏举报

刷新页面返回顶部

禾木7788

vue组件的使用1

公告