Vue2.0变化(1)
2017-01-31 本文已影响24人
coolheadedY
此文章只做vue特性记录，方便与API索引学习
组件component
- 组件模板template内不能直接放多标签的片段代码，必须要有个元素包裹所有的元素
<template id='id'>
<div>//必须有的包裹元素
//other html...
</div>
</template>
- 组件定义
Vue.extend定义方式改变，不推荐继续使用
1.0此方法继续可用:
Vue.component('compt-name', {
data(){},
methods:{},
template:
})
2.0简介用法: (全局)
<template id='id'>
<div>//必须有的包裹元素
//other html...
</div>
</template>
var Comp = {
template: '#id'
}
new Vue({
el: '#box',
data: {},
})
Vue.component('my-comp', Comp);
<div id='box'>
<my-comp></my-comp>
</div>
2.0简介用法: (局部)
var Comp = {
template: '#id'
}
new Vue({
el: '#box',
data: {},
components: {
'my-comp': Comp
}
})
生命周期
new Vue({
el: '#id',
data: {},
beforeCreate(){ console.log('实例刚创建但是没data') },
created(){ console.log('实例创建有data，DOM未创建') },
beforeMount(){ console.log('模板编译(挂载)之前') },
mounted(){ console.log(''模板编译(挂载)完成) },//同1.0ready()
//组件更新的生命周期在执行方法更新数据时执行
beforeUpdate(){ console.log('组件更新之前') },
updated(){ console.log('组件更新完毕') }
//组件 销毁
beforeDestroy(){},
destroyed(){}
})
v-for循环
<ul>
<li v-for='(val, idx) in arr'>{{val}}, {{idx}}</li>
</ul>
<ul>
<li v-for='(val, key) in json'>{{val}}, {{key}}</li>
</ul>
键盘指令
Vue.config.keyCodes.ctrl = 17;
<input type='text' @keyup.ctrl="fn()">
过滤器
- 内置过滤器全部删除，推荐lodash工具库+自己封装实现
Vue.filter('todo', function(in, a, b) {
return in + 'out';
})
<div>{{msg | todo('1', '2')}}</div>
组件的通信
- 子组件取父组件数据仍然使用
props,但是2.0禁止原先子组件修改父组件的数据的方式，2.0在此做了限制。
data:{ obj: {a:'1', b:'2'} }//父组件传给子组件数据必须是对象
props:['myData']//子组件定义myData取得父组件data中的obj对象数据
<child :myData="obj"></child>//子组件模板使用props来的父组件数据
this.myData.a = '10'//子组件可以修改myData.a来同步修改父组件obj.a的数据，修改了子组件的this.myData.a也同时修改了父组件myData.a的数据
- 单一事件管理组件通信 vuex原理
- 定义一个事件中心var Event = new Vue()
发送数据的组件Event.$emit(‘event name’, data);
接受数据的组件Event.$on('event name', function(data){}).bind(this)
范例
- 定义一个事件中心var Event = new Vue()
<script>
//准备一个空的实例对象
var Event=new Vue();
var A={
template:`
<div>
<span>我是A组件</span> -> {{a}}
<input type="button" value="把A数据给C" @click="send">
</div>
`,
methods:{
send(){
Event.$emit('a-msg',this.a);
}
},
data(){
return {
a:'我是a数据'
}
}
};
var B={
template:`
<div>
<span>我是B组件</span> -> {{a}}
<input type="button" value="把B数据给C" @click="send">
</div>
`,
methods:{
send(){
Event.$emit('b-msg',this.a);
}
},
data(){
return {
a:'我是b数据'
}
}
};
var C={
template:`
<div>
<h3>我是C组件</h3>
<span>接收过来的A的数据为: {{a}}</span>
<br>
<span>接收过来的B的数据为: {{b}}</span>
</div>
`,
data(){
return {
a:'',
b:''
}
},
mounted(){
//var _this=this;
//接收A组件的数据
Event.$on('a-msg',function(a){
this.a=a;
}.bind(this));
//接收B组件的数据
Event.$on('b-msg',function(a){
this.b=a;
}.bind(this));
}
};
window.onload=function(){
new Vue({
el:'#box',
components:{
'com-a':A,
'com-b':B,
'com-c':C
}
});
};
</script>
</head>
<body>
<div id="box">
<com-a></com-a>
<com-b></com-b>
<com-c></com-c>
</div>
</body>
