v-text 指令,设置标签的内容
v-html 指令(不建议使用),会用一个HTML标签字符串,替换该元素下面的所有内容。
但是,不建议使用v-html指令,因为它会导致被恶意者进行XSS攻击的潜在风险。
v-show 指令,控制元素的显示隐藏,元素存在并占据空间。
元素隐藏时,相当于给该元素添加了CSS 样式:display:none;
v-if指令,控制元素是否加载。
v-esle-if/v-else指令不能单独使用,必须配合v-if一起使用。
v-if 与 v-show
v-if:有更高的切换开销;
v-show:有更高的初始化开销。
若需要频繁的切换则使用 v-show 比较好,否则使用 v-if 比较好。
v-for 指令,for循环,基于源数据多次渲染元素或模板块。
v-for 既可以渲染一个数组,也可以渲染一个对象。
v-if 与 v-for
同时使用 v-if 和 v-for 是不推荐的,因为这样二者的优先级不明显。
在 vue2 中 v-for 比 v-if 有更高的优先级。这意味着 v-if 将分别重复运行于每个 v-for 循环中。
在 vue3 中 v-if 比 v-for 有更高的优先级。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名。
v-bind 指令,可简写为“:”,动态地绑定一个或多个属性,或一个来自父组件的 prop 里的表达式
v-on指令,专门用于给元素绑定监听事件
v-model 指令,是双向绑定的语法糖。
双向绑定:当数据变化视图同步更新,当视图更新数据也会同步更新。
vue 在实例化的时候,使用 Object.definePropety() 方法或 Proxy 构造函数,
对 data 进行 getter 和 setter 的处理。在组件渲染时,若用到 data 里的某个数据,
这个数据就会被依赖收集进 watcher 里。当数据更新,如果这个数据在 watcher 里,
就会收到通知并更新,否则不会更新——vue 采用“数据劫持”+“观察者模式(发布者-订阅者模式)”
相结合的方式实现了双向绑定
第一步,“数据劫持”:vue 2.x 用 Object.defineProperty() 方法来实现数据劫持,为每个属性分配一个订阅者集合的管理数组 dep;vue 3.x 用 ES6 的 Proxy 构造函数来实现数据劫持。
第二步,“添加订阅者”:在编译的时候在该属性的数组 dep 中添加订阅者,添加方式包括:v-model 会添加一个订阅者,{{}} 也会,v-bind 也会,只要用到该属性的指令理论上都会。
第三步,“为 input 添加监听事件”:为 input 添加监听事件,修改值就会为该属性赋值,触发该属性的 set() 方法,在 set() 方法内通知订阅者数组 dep,订阅者数组循环调用各订阅者的 update() 方法更新视图。