插值表达式{{}}
vue指令:
v-cloak:解决页面闪动问题 【v-cloak】{display :none}
v-text:填充纯文本 相比插值表达式更简洁,不存在闪动问题
v-html:填充HTML片段 存在安全隐患,本网站内部数据可用,第三方数据不可用
v-pre:显示原始信息,跳过编译
数据响应式 数据的变化导致页面内容变化
数据绑定:将数据填充到标签中
v-once:只编译一次(显示数据后不再具有响应式) 应用场景:如果显示后的信息不需要再修改,可以提高性能
双向数据绑定 v-model
底层实现原理:<input v-bind:value="msg" v-on:input="msg=$event.target.value">
用到了v-on 与v-bind
MVVM设计思想
M(model) V(view) VM(view-model)
事件绑定
v-on 简写@
事件修饰符 .stop 阻止冒泡 .prevent 阻止默认行为
属性绑定
v-bind 简写:
表单域修饰符
number 转化为数值
trim 去掉开始和结尾的空格’
lazy 将input事件(只要内容变化就触发)切换为change事件(失去焦点触发)
自定义指令 Vue.directive
计算属性
表达式计算逻辑复杂,使用计算属性使模板更加简洁
computed:{ }
计算属性与方法的区别 计算属性基于依赖进行缓存 方法不存在缓存
侦听器(数据一旦发生变化通知侦听器绑定的方法)
应用场景:数据变化时执行异步或开销较大的操作
watch: { }
过滤器
格式化数据,如日期格式化等
filter