v-model 修饰符:
1.v-model.lazy 失去焦点后提交值(收集数据)。
2.v-model.number 有效转化字符串"1"转化为数字1。
- v-model.trim 清除前后空格。
事件修饰符:
<1>@click.prevent=" 事件"— 作用:阻止浏览器默认行为
<2>@click.stop=" 事件" ----作用:阻止冒泡事件
<3>@click.once=" 事件" —作用:事件只触发一次
<4>@click.capture=" 事件" —作用:打乱冒泡排序(添加一个监听器先触带有该修饰符的元素。若有多个该修饰符则 由外而内触发)
<5>@click.self=" 事件"----作用:在冒泡事件中 阻止自身事件触发 ,但不会阻止冒泡
v-model是什么?
1.双向数据绑定,既可以从data流向页面,也可以由页面流向data
2.通常用于表单收集,v-model默认绑定value值
3.v-model:value=""或v-model=""(简写)
v-model原理
1.v-model本质是一个语法糖
2.v-bind绑定数据
3.oninput数据传递
e和event区别
1.定义函数(),接收时e,当为形参
2.e自身某个事件带有的方法,event是window带有的
3.e = window.event;兼容
自定义指令
规则:定义指令名称不能使用驼峰和v-,要是用-连接,记得添加引号
使用时要v-自定义名称
函数写法
名称(节点,绑定对象){}
对象写法
名称:{
绑定成功调用
bind(节点,绑定对象){},
插入到页面调用
inserted(节点,绑定对象){},
重新解析时调用(值发生改变)
update(节点,绑定对象){}
}
Vue的MVVM模型,数据代理
MVVM与MVC区别
1.VM(vue)==C(调服务)
2.MVVM双向(双向绑定,数据代理),MVC单向(直接操作DOM)
3.MVVM(虚拟DOM)更快渲染,MVC单向(真实DOM)
1.局部自定义指令
directives ,写入Vue实例中
2.全局自定义指令
Vue.directive ,定义在实例化之前