Vue常见指令

**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() 方法更新视图。

相关推荐
GISer_Jing14 分钟前
Three.JS渲染架构解读
java·javascript·架构
发现一只大呆瓜32 分钟前
超全 Vite 性能优化指南:网络、资源、预渲染三维落地方案
前端·面试·vite
IT_陈寒1 小时前
Vue的computed属性怎么突然不更新了?
前端·人工智能·后端
时寒的笔记1 小时前
day13~14核心案例某采招网
开发语言·javascript·ecmascript
智商不够_熬夜来凑1 小时前
【Picker】单选多选
前端·javascript·vue.js
米饭不加菜2 小时前
Typora 原生流程图语法完全指南(Flowchart.js)
前端·javascript·流程图
scan7242 小时前
langgraphy条件边
前端·javascript·html
冰小忆2 小时前
类变量在继承场景下的初始化规则是怎样的?
java·前端·数据库
用户938515635072 小时前
《JS 对象知识地图:10 个小节,从字面量到原型链全覆盖》
javascript
YAwu113 小时前
JavaScript this 底层机制剖析
前端·javascript