<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.v-link-active {
color: red;
}
</style>
</head>
<body>
<div id="demo">
<parents></parents>
</div>
<!-- 子组件模板 -->
<template id="child-template">
<input v-model="msg">
<button v-on:click="notify">Dispatch Event</button>
</template>
<!-- 父组件模板 -->
<div id="events-example">
<h4>父子组件</h4>
<p>Messages: {{ messages | json }}</p>
<button @click="conChild">打印子组件</button>
<child v-on:child-msg="handleIt" v-ref:profile></child> <!-- v-ref相当于id可以用它找子组件 -->
</div>
<!--//两个同级组件互相通信-->
<div id='app'>
<h4>两个同级组件互相通信</h4>
<filter-list></filter-list>
</div>
<template id='filter-list-temp'>
<div>
<h4>filter list</h4>
<condition :filter-text.sync="filterText"></condition>
<list :items="filteredItems"></list>
</div>
</template>
<template id='condition-temp'>
<div>
<input v-model="filterText"/>
</div>
</template>
<template id='list-temp'>
<div>
<p v-for="item in items">
{{item}}
</p>
</div>
</template>
<div id="dynamic-components">
<h4>动态组件</h4>
<button @click="showHome">home</button>
<button @click="showPosts">posts</button>
<button @click="showArchive">archive</button>
<component :is="currentView">
<!-- 组件在 vm.currentview 变化时改变 -->
</component>
</div>
<div id="mount-point"></div>
<p><a href="http://cn.vuejs.org/api/#Vue-extend">Vue.set( object, key, value )</a></p>
<p><a href="http://cn.vuejs.org/api/#Vue-extend">Vue.delete( object, key )</a></p>
<p>
<a href="http://cn.vuejs.org/api/#Vue-extend">Vue.directive( id, [definition] )</a>
<pre>
注册或获取全局指令。
// 注册
Vue.directive('my-directive', {
bind: function () {},
update: function () {},
unbind: function () {}
})
// 注册，传入一个函数
Vue.directive('my-directive', function () {
// this will be called as `update`
})
// getter，返回已注册的指令
var myDirective = Vue.directive('my-directive')
</pre>
</p>
<p>
<a href="http://cn.vuejs.org/api/#Vue-extend">Vue.filter( id, [definition] )</a>
<pre>
注册或获取全局过滤器。
// 注册
Vue.filter('my-filter', function (value) {
// 返回处理后的值
})
// 双向过滤器
Vue.filter('my-filter', {
read: function () {},
write: function () {}
})
// getter，返回已注册的指令
var myFilter = Vue.filter('my-filter')
</pre>
</p>
<p>
<a href="http://cn.vuejs.org/api/#Vue-extend">Vue.transition( id, [hooks] )</a>
<pre>
注册或获取全局的过渡钩子对象。
// 注册
Vue.transition('fade', {
enter: function () {},
leave: function () {}
})
// 获取注册的钩子
var fadeTransition = Vue.transition('fade')
</pre>
</p>
<h4>Watch监听</h4>
<p>一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。在实例化时为每个键调用 $watch() </p>
<pre>
var vm = new Vue({
data: {
a: 1
},
watch: {
'a': function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 方法名
'b': 'someMethod',
// 深度 watcher
'c': {
handler: function (val, oldVal) { /* ... */ },
deep: true
}
}
})
vm.a = 2 // -> new: 2, old: 1
</pre>
<p>vm.$watch( expOrFn, callback, [options] )观察 Vue 实例的一个表达式或计算函数。回调的参数为新值和旧值。表达式可以是某个键路径或任意合法绑定表达式。</p>
<p>vm.$get( expression )从 Vue 实例获取指定表达式的值。如果表达式抛出错误，则取消错误并返回 </p>
<p>vm.$set( keypath, value )设置 Vue 实例的属性值。多数情况下应当使用普通对象语法，如 vm.a.b = 123</p>
<p>vm.$delete( key )</p>
<p>vm.$eval( expression ) 计算当前实例上的合法的绑定表达式。表达式也可以包含过滤器。 vm.$eval('msg | uppercase') // -> 'HELLO'</p>
<p>vm.$log( [keypath] )打印当前实例的数据vm.$log() // 打印整个 ViewModel 的数据 vm.$log('item') // 打印 vm.item</p>
<p>vm.$emit( event, […args] )触发当前实例上的事件</p>
<p>vm.$dispatch( event, […args] )派发事件，首先在实例上触发它，然后沿着父链向上冒泡在触发一个监听器后停止，除非它返回 true。附加参数都会传给监听器回调。</p>
<pre>
// 创建父链
var parent = new Vue()
var child1 = new Vue({ parent: parent })
var child2 = new Vue({ parent: child1 })
parent.$on('test', function () {
console.log('parent notified')
})
child1.$on('test', function () {
console.log('child1 notified')
})
child2.$on('test', function () {
console.log('child2 notified')
})
child2.$dispatch('test')
// -> "child2 notified"
// -> "child1 notified"
// 没有通知 parent，因为 child1 的回调没有返回 true
</pre>
<p>vm.$broadcast( event, […args] )广播事件，通知给当前实例的全部后代。因为后代有多个枝杈，事件将沿着各“路径”通知。每条路径上的通知在触发一个监听器后停止，除非它返回 true。</p>
<pre>
var parent = new Vue()
// child1 和 child2 是兄弟
var child1 = new Vue({ parent: parent })
var child2 = new Vue({ parent: parent })
// child3 在 child2 内
var child3 = new Vue({ parent: child2 })
child1.$on('test', function () {
console.log('child1 notified')
})
child2.$on('test', function () {
console.log('child2 notified')
})
child3.$on('test', function () {
console.log('child3 notified')
})
parent.$broadcast('test')
// -> "child1 notified"
// -> "child2 notified"
// 没有通知 child3，因为 child2 的回调没有返回 true
</pre>
<p>vm.$appendTo( elementOrSelector, [callback] )</p>
<p>vm.$before( elementOrSelector, [callback] )</p>
<p>vm.$after( elementOrSelector, [callback] )</p>
<p>vm.$remove( [callback] )</p>
<p>vm.$nextTick( callback )将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。</p>
<p>vm.$mount( [elementOrSelector] )可以使用 vm.$mount() 手动地开始挂载/编译未挂载的实例。如果没有参数，模板将被创建为文档之外的的片断，需要手工用其它的 DOM 实例方法把它插入文档中。如果 replace 选项为 false，则自动创建一个空 'div'，作为包装元素。
在已经挂载的实例上调用 $mount() 没有效果。这个方法返回实例自身，因而可以链式调用其它实例方法。</p>
<p>v-el:为 DOM 元素注册一个索引，方便通过所属实例的 $els 访问这个元素。</p>
<pre>
<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>
this.$els.msg.textContent // -> "hello"
this.$els.otherMsg.textContent // -> "world"
</pre>
<p>v-pre:跳过编译这个元素和它的子元素。</p>
<script src="vue.js"></script>
<script src="vue-resource.min.js"></script>
<script src="vue-router.js"></script>
<script src="demo_1.js"></script>
</body>
</html>
js：
//Props数据传递
var Parents = Vue.extend({
template:'<div>' +
'<h4>Props数据传递</h4>'+
'i am {{age}}' +
'<input v-model="parentMsg">'+
'<p>father:{{parentMsg}}</p>'+
'<my-component :age.sync="age" :parent-msg.sync="parentMsg"></my-component>' + //:age.sync="age=48"
'</div>',
data:function(){
return {
age:'22',
parentMsg:''
}
},
components: {
'my-component': {
template: '<div>' +
'i am {{age}} too!' +
'<p>child:{{parentMsg}}</p>'+
'<button v-on:click="changeAge">更改年龄</button>' +
'<button v-on:click="changeVal">更改val</button>' +
'</div>',
data: function () {
return {
//parentMsg:this.$parent.parentMsg
}
},
props:['age','parentMsg'],
methods:{
changeAge:function() {
this.age='48';
console.log( this.$parent.parentMsg);
},
changeVal:function(){
this.parentMsg='heihei'
}
}
}
}
});
Vue.component('parents',Parents);
new Vue({
el:'#demo',
data:{
}
});
//父子组件
Vue.component('child', {
template: '#child-template',
data: function () {
return { msg: 'hello' }
},
methods: {
notify: function () {
if (this.msg.trim()) {
this.$dispatch('child-msg', this.msg);
this.msg = ''
}
}
}
});
// 初始化父组件
// 将收到消息时将事件推入一个数组
var parent = new Vue({
el: '#events-example',
data: {
messages: []
},
// 在创建实例时 `events` 选项简单地调用 `$on`
events: {
'child-msg': function (msg) {
// 事件回调内的 `this` 自动绑定到注册它的实例上
this.messages.push(msg)
}
},
methods:{
conChild:function(){
console.log(this.$refs.profile.msg); //v-ref相当于id可以用它找子组件
}
}
// 每个 Vue 实例都是一个事件触发器：
// 使用 $on() 监听事件；
// 使用 $emit() 在它上面触发事件；
// 使用 $dispatch() 派发事件，事件沿着父链冒泡；
// 使用 $broadcast() 广播事件，事件向下传导给所有的后代。
// var vm = new Vue({
// events: {
// 'hook:created': function () {
// console.log('created!')
// },
// greeting: function (msg) {
// console.log(msg)
// },
// // 也可以是方法的名字
// bye: 'sayGoodbye'
// },
// methods: {
// sayGoodbye: function () {
// console.log('goodbye!')
// }
// }
// }) // -> created!
// vm.$emit('greeting', 'hi!') // -> hi!
// vm.$emit('bye')
});
//两个组件互相通信 (两个组件应该有一个共同的父组件)
Vue.component('condition', { //子组件
template: '#condition-temp',
props: ['filterText']
});
Vue.component('list', { //子组件
template: '#list-temp',
props: ['items']
})
Vue.component('filter-list', { //父组件
template: '#filter-list-temp',
data: function() {
return {
filterText: '',
items: ['Jack Yang','Angel','New York']
}
},
computed: {
filteredItems: function() {
return this.$data.items.filter(function(item) {
return item.indexOf(this.$data.filterText) != -1;
}.bind(this));
}
}
})
new Vue({
el: '#app'
})
//动态组件
new Vue({
el:'#dynamic-components',
data:{
currentView:'home'
},
methods:{
showHome:function(){
this.currentView='home'
},
showPosts:function(){
this.currentView='posts'
},
showArchive:function(){
this.currentView='archive'
}
},
components: {
home: {
template:'<div> home组件</div>'
},
posts: {
template:'<div>posts组件</div>'
},
archive: {
template:'<div>archive组件</div>'
}
}
})
// 创建可复用的构造器
var Profile = Vue.extend({ //el 和 data 选项—— 在 Vue.extend() 中它们必须是函数。
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>'
})
// 创建一个 Profile 实例
var profile = new Profile({
data: {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
})
// 挂载到元素上
profile.$mount('#mount-point')
//var parent = new Vue()
//var child1 = new Vue({ parent: parent })
//var child2 = new Vue({ parent: child1 })
//
//parent.$on('test', function () {
// console.log('parent notified')
//})
//child1.$on('test', function () {
// console.log('child1 notified')
//})
//child2.$on('test', function () {
// console.log('child2 notified')
//})
//
//child2.$dispatch('test')
var parent = new Vue()
// child1 和 child2 是兄弟
var child1 = new Vue({ parent: parent })
var child2 = new Vue({ parent: parent })
// child3 在 child2 内
var child3 = new Vue({ parent: child2 })
child1.$on('test', function () {
console.log('child1 notified')
})
child2.$on('test', function () {
console.log('child2 notified')
return true; //--child3 notified
})
child3.$on('test', function () {
console.log('child3 notified')
})
parent.$broadcast('test')