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'
　　}
}