事件
@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. d a t a . n a m e 获 取 v m 实 例 中 d a t a 属 性 的 具 体 哪 条 属 性 − − 固 定 写 法 + v m . data.name 获取vm实例中 data属性的 具体哪条属性 -- 固定写法 + vm. data.name获取vm实例中data属性的具体哪条属性−−固定写法+vm.opstion.age 获取vm实例中的 age自定义属性 --固定写法
vm.$refs.hello.
获取标签中 具有ref 属性的DOM元素,并对其DOM进行操作(获取value’设置style.color等操作)
this.$nextTick 类似于设置为同步,为解决数据还没有被渲染 就已经被调用的请况
$.set $.delete
this. . s e t ( t h i s . u s e r , ′ a g e ′ , 22 ) 添 加 属 性 只 针 对 对 象 属 性 就 是 说 只 可 以 对 v m 实 例 中 的 d a t a 对 象 内 的 对 象 属 性 进 行 添 加 新 的 属 性 t h i s . .set(this.user,'age',22) 添加属性 只针对对象属性 就是说 只可以对 vm实例中的 data对象内的 对象属性 进行添加新的属性 this. .set(this.user,′age′,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 被插入”);
},
}
}
}