vue.js的学习1.4
1.自定义指令:
属性:
Vue.directive(指令名称,function(参数){
this.el -> 原生DOM元素
});
指令名称: v-red -> red
注意: 必须以 v-开头
<div id="box">
<span v-red> //这里自定义指令的名称:v-red
asdfasd
</span>
</div>
Vue.directive('red',function(){
this.el.style.background='red'; //函数名则要去掉V-
});
键盘信息:
@keydown.up
@keydown.enter
@keydown.a/b/c….
自定义键盘信息:
Vue.directive(‘on’).keyCodes.ctrl=17; //无法识别Ctrl时我们采取自定义键盘信息
2.监听数据变化:
vm.$el/$mount/$options/....
vm.$watch(name,fnCb); //浅度
vm.$watch(name,fnCb,{deep:true}); //深度监视 ---》当数据类型是json等一些深度数据。
栗子:当点击页面时数据a的值发生变化,并弹出消息:发生变化了…此时改变b的值。
<script>
window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
a:111,
b:2
}
});
vm.$watch('a',function(){
alert('发生变化了');
this.b=this.a+100;
});
document.onclick=function(){
vm.a=1;
};
};
</script>