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

相关推荐
差点GDP3 小时前
模拟请求测试 Fake Rest API Test
前端·网络·json
酒尘&4 小时前
Hook学习-上篇
前端·学习·react.js·前端框架·react
houyhea4 小时前
从香港竹脚手架到前端脚手架:那些"借来"的发展智慧与安全警示
前端
哈哈~haha4 小时前
Step 14: Custom CSS and Theme Colors 自定义CSS类
前端·css·ui5
Ndmzi4 小时前
Matlab编程技巧:自定义Simulink菜单(理解补充)
前端·javascript·python
勇气要爆发5 小时前
物种起源—JavaScript原型链详解
开发语言·javascript·原型模式
我命由我123455 小时前
VSCode - VSCode 修改文件树缩进
前端·ide·vscode·前端框架·编辑器·html·js
SoaringHeart5 小时前
Flutter组件封装:验证码倒计时按钮 TimerButton
前端·flutter
San30.5 小时前
深入理解 JavaScript OOP:从一个「就地编辑组件」看清封装、状态与原型链
开发语言·前端·javascript·ecmascript
AAA阿giao6 小时前
JavaScript 原型与原型链:从零到精通的深度解析
前端·javascript·原型·原型模式·prototype·原型链