持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第28天，点击查看活动详情
v-pre
显示原始信息,跳过编译过程
跳过这个元素和它的子元素的编译过过程
{{msg}}
msg
v-once 执行一次性的插值,当数据改变时,插值处的内容不会继续更新
{{msg}}
事件修饰符
//阻止单击事件继续传播
v-on:click.stop="doThis"
//提交事件不再重载页面
v-on:submit.prevent="onSubmit"
//修饰符可以串联, 阻止冒泡也阻止默认事件
v-on:click.stop.prevent = "doThat"
v-on:click.prevent.self 阻止所有的点击
v-on:click.self.prevent 阻止对元素自身的点击
v-show和v-if的区别
v-show本质就是标签dispay: none ,控制隐藏
v-if是动态的向DOM树内添加或者删除dom元素
v-for key的作用
key来给每一个节点做了一个唯一标识符
key的主要作用是为了高效的更新虚拟DOM
表单修饰符
v-model.number="age" //自动将用户输入的值转为数值类型
v-model.trim="msg" //去除首尾空格
v-model.lazy="msg" //在change时而非input时更新
自定义指令Vue.directive
注册一个全局的自定义指令
Vue.directive('focus', {
//注册inserted函数表示当绑定了该指令的元素被插入到dom时候会自动触发
inserted: function (el) {
el.focus();
}
})
注册全局指令带参数
//bind声明周期,只调用一次,指令第一次绑定到元素时调用,可以进行一次性的初始化配置
//binding为自定义函数形参,自定义属性传过来的值,存在binding.value里面s
Vue.directive('color', {
bind: function(el, binding) {
//根据指令的参数设置背景色
el.style.backgroundColor = binding.value.color;
}
})
msg: {
color: 'blue'
}
自定义指令局部指令
局部指令,需要定义在directives的选项
directives: {
color: {
bind: function (el, binding) {
el.style.backgroundColor = binding.value.color
}
},
focus: {
inserted: function (el) {
el.focus();
}
}
}
computed计算属性
计算属性是基于它们的响应式依赖进行缓存的
