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

相关推荐
辻戋3 小时前
从零实现React Scheduler调度器
前端·react.js·前端框架
徐同保3 小时前
使用yarn@4.6.0装包,项目是react+vite搭建的,项目无法启动,报错:
前端·react.js·前端框架
Qrun4 小时前
Windows11安装nvm管理node多版本
前端·vscode·react.js·ajax·npm·html5
中国lanwp4 小时前
全局 npm config 与多环境配置
前端·npm·node.js
JELEE.5 小时前
Django登录注册完整代码(图片、邮箱验证、加密)
前端·javascript·后端·python·django·bootstrap·jquery
TeleostNaCl7 小时前
解决 Chrome 无法访问网页但无痕模式下可以访问该网页 的问题
前端·网络·chrome·windows·经验分享
前端大卫9 小时前
为什么 React 中的 key 不能用索引?
前端
你的人类朋友9 小时前
【Node】手动归还主线程控制权:解决 Node.js 阻塞的一个思路
前端·后端·node.js
小李小李不讲道理10 小时前
「Ant Design 组件库探索」五:Tabs组件
前端·react.js·ant design
毕设十刻10 小时前
基于Vue的学分预警系统98k51(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js