创建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>