Vue--事件 --过滤器 --实例属性和方法 --

事件

@click.stop：阻止事件冒泡
@click.prevent：阻止事件的默认行为
@click.once=“once()”：事件只执行一次
@kepdown.enter：鼠标点击 按下 enter 对应键盘回车键
@kepup.enter：鼠标点击–》松开 enter对应回车键 enter是语义话指令 对应键盘的

过滤器

Vue.filter("addro", function(data,n){
	return
});

过滤器
vm app = new Vue(){ // 内部过滤器
el："#app", //绑定视图
data：{//绑定数据
name:“sss”,
user：{
}，
}，
age：{
}，
methods：{//事件方法
}，
filters:{// 自定义的过滤器
number:function(data,n){ // data：是需要被过滤的数据，n是过滤参数，可以不写，可以写死
return data.toFixed(n), //n可以写死数据
}
}

}

**

{{ price2 | number }}

**

**

实例属性

vm.$data.name获取vm实例中data属性的具体哪条属性--固定写法+vm.$opstion.age 获取vm实例中的 age自定义属性 --固定写法

vm.$refs.hello.

获取标签中 具有ref 属性的DOM元素，并对其DOM进行操作(获取value’设置style.color等操作)

this.$nextTick 类似于设置为同步，为解决数据还没有被渲染 就已经被调用的请况

$.set $.delete

this.$.set(this.user{,}^{\prime }ag{e}^{\prime },22)添加属性只针对对象属性就是说只可以对vm实例中的data对象内的对象属性进行添加新的属性this.$.delete(this.user,‘age’) 删除属性

指令

全局指令、
Vue.directive(“mydirective”,{
bind:function (el, binding, vnode) { //1-被绑定 binding 是传参 el是作用的标签
console.log(“1-bind 被绑定”);
console.log(“el:”,el);
console.log(“binding:”,binding);
console.log(“vnode:”,vnode);
el.style.color=binding.value;
},
inserted:function (el, binding, vnode) { //2-被插入
console.log(“2-inserted 被插入”);
},
update:function (el, binding, vnode) { //3-更新
console.log(“3-update 更新”);
},
componentUpdated:function (el, binding, vnode) { //4-更新完成
console.log(“4-componentUpdated 更新完成”);
},
unbind:function (el, binding, vnode) { //5-解绑
console.log(“5-unbind 解绑”);
}
});

具体的 需要指令在哪个生命周期做处理 就选择哪个做业务处理

局部指令

vm app = new Vue(){ // 内部过滤器
el："#app", //绑定视图
data：{//绑定数据
name:“sss”,
user：{
}，
}，
age：{
}，
methods：{//事件方法
}，
directives:{ // 指令集
foucus:{ // 指令
inserted:function (el, binding, vnode) { //2-被插入
console.log(“2-inserted 被插入”);
},
}
}

}