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

相关推荐
GIS程序媛—椰子22 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_00128 分钟前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端31 分钟前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x34 分钟前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
木舟100935 分钟前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43911 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安1 小时前
前端第二次作业
前端·css·css3
啦啦右一1 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习