template{
 display: none;
}

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

<template id="myComponent">
 <div>
 <h3>{{ msg }}</h3>
 <button v-on:click="showMsg">Show Message</button>
 </div>
</template>
<script src="js/vue.js"></script>
<script>
 new Vue({
 el: '#app',
 components: {
 'my-component': {
 template: '#myComponent',
 data: function() {
 return {
 msg: 'This is a component!'
 }
 },
 methods: {
 showMsg: function() {
 alert(this.msg)
 }
 }
 }
 }
 })

new Vue({
 el: '#app',
 data: {
 display: true
 },
 components: {
 'my-component': {
 template: '#myComponent',
 data: function() {
 return {
 msg: 'This is a component!',
 display: false
 }
 },
 methods: {
 showMsg: function() {
 alert(this.msg)
 }
 }
 }
 }
})

<div id="app">
 <my-component v-show="display">
 </my-component>
</div>

<div id="app">
 <my-component>
 <h2>Hello Vue.js!</h2>
 </my-component>

 <my-component>
 </my-component>
</div>
<template id="myComponent">
 <div class="content">
 <h3>This is a component!</h3>
 <slot>如果沒(méi)有分發(fā)內(nèi)容，則顯示slot中的內(nèi)容</slot>
 <p>Say something...</p>
 </div>
</template>
<script src="js/vue.js"></script>
<script>
 Vue.component('my-component', {
 template: '#myComponent'
 })

 new Vue({
 el: '#app'
 })
</script>

<template id="dialog-template">
 <div class="dialogs">
 <div class="dialog" v-bind:class="{ 'dialog-active': show }">
 <div class="dialog-content">
 <div class="close rotate">
 <span class="iconfont icon-close" @click="close"></span>
 </div>
 <slot name="header"></slot>
 <slot name="body"></slot>
 <slot name="footer"></slot>
 </div>
 </div>
 <div class="dialog-overlay"></div>
 </div>
</template>

<script src="js/vue.js"></script>
<script>
 Vue.component('modal-dialog', {
 template: '#dialog-template',
 props: ['show'],
 methods: {
 close: function() {
 this.show = false
 }
 }
 })

 new Vue({
 el: '#app',
 data: {
 show: false
 },
 methods: {
 openDialog: function() {
 this.show = true
 },
 closeDialog: function() {
 this.show = false
 }
 }
 })
</script>

<div id="app">
 <modal-dialog v-bind:show.sync="show">

 <header class="dialog-header" slot="header">
 <h2 class="dialog-title">提示信息</h2>
 </header>

 <div class="dialog-body" slot="body">
 <p>你想在對(duì)話框中放什么內(nèi)容都可以！</p>
 <p>你可以放一段文字，也可以放一些表單，或者是一些圖片。</p>
 </div>

 <footer class="dialog-footer" slot="footer">
 <button class="btn" @click="closeDialog">關(guān)閉</button>
 </footer>
 </modal-dialog>

 <button class="btn btn-open" @click="openDialog">打開(kāi)對(duì)話框</button>
</div>

new Vue({
 el: '#app',
 data: {
 show: false,
 dialogClass: 'dialog-info'
 },
 methods: {
 openDialog: function(dialogClass) {
 this.show = true
 this.dialogClass = dialogClass
 },
 closeDialog: function() {
 this.show = false
 }
 }
})

<modal-dialog v-bind:show.sync="show" v-bind:class="dialogClass">
 <header class="dialog-header" slot="header">
 <h2 class="dialog-title">提示信息</h2>
 </header>

 <div class="dialog-body" slot="body">
 <p>你想在對(duì)話框中放什么內(nèi)容都可以！</p>
 <p>你可以放一段文字，也可以放一些表單，或者是一些圖片。</p>
 </div>
</modal-dialog>

<div id="app">
 <parent-component></parent-component>
</div>

<template id="parent-component">
 <child-component1></child-component1>
 <child-component2></child-component2>
 <button v-on:click="showChildComponentData">顯示子組件的數(shù)據(jù)</button>
</template>

<template id="child-component1">
 <h3>This is child component 1</h3>
</template>

<template id="child-component2">
 <h3>This is child component 2</h3>
</template>

<script src="js/vue.js"></script>
<script>
 Vue.component('parent-component', {
 template: '#parent-component',
 components: {
 'child-component1': {
 template: '#child-component1',
 data: function() {
 return {
 msg: 'child component 111111'
 }
 }
 },
 'child-component2': {
 template: '#child-component2',
 data: function() {
 return {
 msg: 'child component 222222'
 }
 }
 }
 },
 methods: {
 showChildComponentData: function() {
 for (var i = 0; i < this.$children.length; i++) {
 alert(this.$children[i].msg)
 }
 }
 }
 })

 new Vue({
 el: '#app'
 })
</script>

<template id="parent-component">
 <child-component1 v-ref:cc1></child-component1>
 <child-component2 v-ref:cc2></child-component2>
 <button v-on:click="showChildComponentData">顯示子組件的數(shù)據(jù)</button>
</template>

showChildComponentData: function() {
 alert(this.$refs.cc1.msg);
 alert(this.$refs.cc2.msg);
}

<div id="app">
 <parent-component></parent-component>
</div>

<template id="parent-component">
 <child-component></child-component>
</template>

<template id="child-component">
 <h3>This is a child component</h3>
 <button v-on:click="showParentComponentData">顯示父組件的數(shù)據(jù)</button>
</template>

<script src="js/vue.js"></script>
<script>
 Vue.component('parent-component', {
 template: '#parent-component',
 components: {
 'child-component': {
 template: '#child-component',
 methods: {
 showParentComponentData: function() {
 alert(this.$parent.msg)
 }
 }
 }
 },
 data: function() {
 return {
 msg: 'parent component message'
 }
 }
 })
 new Vue({
 el: '#app'
 })
</script>

<div id="app">
 <p>Messages: {{ messages | json }}</p>
 <child-component></child-component>
</div>

<template id="child-component">
 <input v-model="msg" />
 <button v-on:click="notify">Dispatch Event</button>
</template>

<script src="js/vue.js"></script>
<script>
 // 注冊(cè)子組件
 Vue.component('child-component', {
 template: '#child-component',
 data: function() {
 return {
 msg: ''
 }
 },
 methods: {
 notify: function() {
 if (this.msg.trim()) {
 this.$dispatch('child-msg', this.msg)
 this.msg = ''
 }
 }
 }
 })

 // 初始化父組件
 new Vue({
 el: '#app',
 data: {
 messages: []
 },
 events: {
 'child-msg': function(msg) {
 this.messages.push(msg)
 }
 }
 })
</script>

<div id="app">
 <input v-model="msg" />
 <button v-on:click="notify">Broadcast Event</button>
 <child-component></child-component>
</div>

<template id="child-component">
 <ul>
 <li v-for="item in messages">
 父組件錄入了信息：{{ item }}
 </li>
 </ul>
</template>

<script src="js/vue.js"></script>
<script>
 // 注冊(cè)子組件
 Vue.component('child-component', {
 template: '#child-component',
 data: function() {
 return {
 messages: []
 }
 },
 events: {
 'parent-msg': function(msg) {
 this.messages.push(msg)
 }
 }
 })
 // 初始化父組件
 new Vue({
 el: '#app',
 data: {
 msg: ''
 },
 methods: {
 notify: function() {
 if (this.msg.trim()) {
 this.$broadcast('parent-msg', this.msg)
 }
 }
 }
 })
</script>

<div id="app">
 <div class="container">
 <div class="form-group">
 <label>Search</label>
 <input type="text" class="search-input" v-model="searchQuery" />
 </div>

 </div>
 <div class="container">
 <simple-grid :data-list="people" :columns="columns" :search-key="searchQuery">
 </simple-grid>
 </div>
</div>

<template id="grid-template">
 <table>
 <thead>
 <tr>
 <th v-for="col in columns">
 {{ col.name | capitalize}}
 </th>
 <th>
 Delete
 </th>
 </tr>
 </thead>
 <tbody>
 <tr v-for="(index,entry) in dataList | filterBy searchKey">
 <td v-for="col in columns">
 {{entry[col.name]}}
 </td>
 <td class="text-center">
 <button @click="deleteItem(index)">delete</button>
 </td>
 </tr>
 </tbody>
 </table>
</template>

<script src="../js/vue.js"></script>
<script>
 Vue.component('simple-grid', {
 template: '#grid-template',
 props: ['dataList', 'columns', 'searchKey'],
 methods: {
 deleteItem: function(index) {
 this.dataList.splice(index, 1);
 },
 }
 })

 var demo = new Vue({
 el: '#app',
 data: {
 searchQuery: '',
 columns: [{
 name: 'name'
 }, {
 name: 'age'
 }, {
 name: 'sex'
 }],
 people: [{
 name: 'Jack',
 age: 30,
 sex: 'Male'
 }, {
 name: 'Bill',
 age: 26,
 sex: 'Male'
 }, {
 name: 'Tracy',
 age: 22,
 sex: 'Female'
 }, {
 name: 'Chris',
 age: 36,
 sex: 'Male'
 }]
 }
 })
</script>

<template id="dialog-template">
 <div class="dialogs">
 <div class="dialog" v-bind:class="{ 'dialog-active': show }">
 <div class="dialog-content">
 <header class="dialog-header">
 <h2 class="dialog-title">{{ title }}</h2>
 </header>
 <footer class="dialog-footer">
 <div class="form-group">
 <label></label>
 <button v-on:click="save">Save</button>
 <button v-on:click="close">Close</button>
 </div>
 </footer>
 </div>
 </div>
 <div class="dialog-overlay"></div>
 </div>
</template>

Vue.component('simple-grid', {
 // ...已省略
 data: function() {
 return {
 mode: 0,
 item: {}
 titie: ''
 }
 },
 components: {
 'modal-dialog': {
 template: '#dialog-template',
 data: function() {
 return {
 // 對(duì)話框默認(rèn)是不顯示的
 show: false
 }
 },
 /*
 * mode = 1是新增數(shù)據(jù)模式，mode = 2是修改數(shù)據(jù)模式
 * title表示對(duì)話框的標(biāo)題內(nèi)容
 * fields表示對(duì)話框要顯示的數(shù)據(jù)字段數(shù)組
 * item是由simple-dialog傳下來(lái)，用于綁定表單字段的
 */
 props: ['mode', 'title', 'fields', 'item'],
 methods: {
 close: function() {
 this.show = false
 },
 save: function() {

 }
 }
 }
 }
 // ...已省略
})

<template id="grid-template">
 <!--...前面的內(nèi)容已省略 -->
 <modal-dialog :mode="mode" :title="title" :fields="columns" :item="item">
 </modal-dialog>
 <!--...后面的內(nèi)容已省略 -->
</template>

var demo = new Vue({
 // ...已省略 
 columns: [{
 name: 'name',
 isKey: true
 }, {
 name: 'age'
 }, {
 name: 'sex',
 dataSource: ['Male', 'Female']
 }]
 // ...已省略
})

<template id="dialog-template">
 <div class="dialogs">
 <div class="dialog" v-bind:class="{ 'dialog-active': show }">
 <div class="dialog-content">
 <header class="dialog-header">
 <h2 class="dialog-title">{{ title }}</h2>
 </header>

 <div v-for="field in fields" class="form-group" >
 <label>{{ field.name }}</label>
 <select v-if="field.dataSource" v-model="item[field.name]">
 <option v-for="opt in field.dataSource" :value="opt">{{ opt }}</option>
 </select>
 <input v-else type="text" v-model="item[field.name]">
 </div>

 <footer class="form-group">
 <label></label>
 <button v-on:click="save">Save</button>
 <button v-on:click="close">Close</button>
 </footer>
 </div>
 </div>
 <div class="dialog-overlay"></div>
 </div>
</template>

<template id="grid-template">
 <!--...已省略 -->
 <div class="container">
 <button class="btn" @click="openNewItemDialog('Create new item')">Create</button>
 </div>

 <modal-dialog :mode="mode" :title="title" :fields="columns" :item="item" v-on:create-item="createItem">
 </modal-dialog>
</template>

Vue.component('simple-grid', {
 // ...已省略 
 methods: {

 openNewItemDialog: function(title) {
 // 對(duì)話框的標(biāo)題
 this.title = title
 // mode = 1表示新建模式
 this.mode = 1
 // 初始化this.item
 this.item = {}
 // 廣播事件，showDialog是modal-dialog組件的一個(gè)方法，傳入?yún)?shù)true表示顯示對(duì)話框
 this.$broadcast('showDialog', true)
 },
 createItem: function() {
 // 將item追加到dataList
 this.dataList.push(this.item)
 // 廣播事件，傳入?yún)?shù)false表示隱藏對(duì)話框
 this.$broadcast('showDialog', false)
 // 新建完數(shù)據(jù)后，重置item對(duì)象
 this.item = {}
 },
 deleteItem: function(index) {
 this.dataList.splice(index, 1);
 },
 },
 // ...已省略 
})

Vue.component('simple-grid', {
 // ...已省略 
 components: {
 'modal-dialog': {
 // ...已省略 
 methods: {
 close: function() {
 this.show = false
 },
 save: function() {
 //新建模式
 if (this.mode === 1){
 // 使用$dispatch調(diào)用simple-grid的create-item方法
 this.$dispatch('create-item')
 }
 }
 },
 events: {
 // 顯示或隱藏對(duì)話框
 'showDialog': function(show) {
 this.show = show
 }
 }
 }
 }
 // ...已省略 
})

<template id="grid-template">
 <!--...已省略-->
 <tbody>
 <tr v-for="(index,entry) in dataList | filterBy searchKey">
 <td v-for="col in columns">
 <span v-if="col.isKey"><a href="javascript:void(0)" @click="openEditItemDialog(index, 'Edit item ' + entry[col.name])">{{entry[col.name]}}</a></span>
 <span v-else>{{entry[col.name]}}</span>
 </td>
 </tr>
 </tbody>
 <!--...已省略-->
 <modal-dialog 
 :mode="mode" 
 :title="title" 
 :item="item" 
 :fields="columns" 
 v-on:create-item="createItem" 
 v-on:update-item="updateItem">
 </modal-dialog>
</template>

<div v-for="field in fields" class="form-group">
 <label>{{ field.name }}</label>
 <select v-if="field.dataSource" v-model="item[field.name]" :disabled="mode === 2 && field.isKey">
 <option v-for="opt in field.dataSource" :value="opt">{{ opt }}</option>
 </select>
 <input v-else type="text" v-model="item[field.name]" :disabled="mode === 2 && field.isKey">
</div>

// 彈出修改數(shù)據(jù)的對(duì)話框時(shí)，使用對(duì)象的深拷貝
initItemForUpdate: function(p) {
 var c = c || {};
 for (var i in p) {
 // 屬性i是否為p對(duì)象的自有屬性
 if (p.hasOwnProperty(i)) {
 if (typeof p[i] === 'object') {
 c[i] = Array.isArray(p[i]) ? [] : {}
 deepCopy(p[i], c[i])
 } else {
 // 屬性是基礎(chǔ)類型時(shí)，直接拷貝
 c[i] = p[i]
 }
 }
 }
 return c;
},
findItemByKey: function(key){
 var keyColumn = this.keyColumn
 for(var i = 0; i < this.dataList.length; i++){
 if(this.dataList[i][keyColumn] === key){
 return this.dataList[i]
 }
 }
},
createItem: function() {
 // 將item追加到dataList
 this.dataList.push(this.item)
 // 廣播事件，傳入?yún)?shù)false表示隱藏對(duì)話框
 this.$broadcast('showDialog', false)
 // 新建完數(shù)據(jù)后，重置item對(duì)象
 this.item = {}
},
updateItem: function() {
 // 獲取主鍵列
 var keyColumn = this.keyColumn

 for (var i = 0; i < this.dataList.length; i++) {
 // 根據(jù)主鍵查找要修改的數(shù)據(jù)，然后將this.item數(shù)據(jù)更新到this.dataList[i]
 if (this.dataList[i][keyColumn] === this.item[keyColumn]) {
 for (var j in this.item) {
 this.dataList[i][j] = this.item[j]
 }
 break;
 }
 }
 // 廣播事件，傳入?yún)?shù)false表示隱藏對(duì)話框
 this.$broadcast('showDialog', false)
 // 修改完數(shù)據(jù)后，重置item對(duì)象
 this.item = {}
}

save: function() {
 //新建模式
 if (this.mode === 1) {
 // 使用$dispatch調(diào)用simple-grid的create-item事件
 this.$dispatch('create-item')
 }else if(this.mode === 2){
 // 使用$dispatch調(diào)用simple-grid的update-item事件
 this.$dispatch('update-item')
 }
}

itemExists: function(keyColumn) {
 for (var i = 0; i < this.dataList.length; i++) {
 if (this.item[keyColumn] === this.dataList[i][keyColumn])
 return true;
 }
 return false;
},
createItem: function() {
 var keyColumn = this.getKeyColumn()
 if (!this.itemExists(keyColumn)) {
 // 將item追加到dataList
 this.dataList.push(this.item)
 // 廣播事件，傳入?yún)?shù)false表示隱藏對(duì)話框
 this.$broadcast('showDialog', false)
 // 新建完數(shù)據(jù)后，重置item對(duì)象
 this.item = {}
 } else {
 alert(keyColumn + ' "' + this.item[keyColumn] + '" is already exists')
 }

}