vue2.0学习（二）
1.关于模板渲染，当需要渲染多个元素时可以
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
2.关于事件绑定的后缀总结
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用 capture 模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
键盘事件
<input v-on:keyup.enter="submit">
enter
tab
delete (捕获 “删除” 和 “退格” 键)
esc
space
up
down
left
right
也可以自定义，通过 config.keyCodes来定义，如Vue.config.keyCodes.f1 = 112。
3.关于组件通信
<div id="app">
<my-component @getchild="childSay"></my-component>
</div>
Vue.component('my-component',{
template:'<div @click="toParent">23</div>',
data:function(){
return {
msg:'hello'
}
},
methods:{
toParent: function(){
console.log(123);
//这里触发事件，注意这里的事件名称不可以写驼峰式，也可以传递参数，只需要在事件参数后面写就可以了
this.$emit('getchild');
}
}
});
new Vue({
el:'#app',
methods:{
childSay:function(){
console.log(12);
// alert(msg);
}
}
});
在2.0中$dispatch去掉了，所以不再使用。
4.动态组件
<div id="app">
<all-component :is="currentpage"></all-component>
<div>
<button type="button" @click="currentpage='home'">home</button>
<button type="button" @click="currentpage='foo'">foo</button>
<button type="button" @click="currentpage='bar'">bar</button>
</div>
</div>
new Vue({
el:'#app',
data:{
currentpage:'home'
},
methods:{
getChild: function(){
var child = this.$refs.child;
console.log(child.msg);
}
},
components:{
home:{
template:'<div>this is home</div>'
},
foo:{
template:'<div>this is foo</div>'
},
bar:{
template:'<div>this is bar</div>'
}
}
});
在点击三个按钮的时候会切换组件，个人认为比较适合做tab组件。
5.关于props传递给子组件信息
props:{
username:{
type:String,
//这里的默认值只有当该组件未设置传递值时才显示
default:'zwzhai'
}
}
