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