Vue的指令集合

1. 数据绑定指令 v-bind(简写::

作用:单向数据绑定

用法


...
...

v-bind 指令用于动态绑定HTML属性到Vue实例的数据属性上。例如,在上面的例子中,当 url 数据属性发生变化时,href 属性值也会相应更新。

2. 文本插值指令 {{ }}

用法

{{ message }}

双大括号内的内容会实时解析为Vue实例对应的数据属性值。在此例中,当 message 数据发生变化时,文本内容会自动更新。

3. 表达式指令 v-on(简写:@

作用:绑定事件监听

用法





说明:v-on 指令用于监听并处理DOM事件。如上述示例所示,当按钮被点击时,Vue实例中的 handleClick 方法会被调用。

4. 条件渲染指令 v-if 和 v-else-ifv-else

作用:动态控制节点是否存存在

用法

现在你看到了我
但是你现在看不到我
原来你一直都能看到我

说明:这些条件指令控制元素是否渲染。v-if 在表达式的值为真时渲染元素;v-else-if 提供额外的条件分支;v-else 则表示前面条件都不满足时的备用情况。

5. 列表渲染指令 v-for

用法

  • {{ item }}

v-for 指令用于遍历数组或对象,根据每个项目生成重复的DOM元素。在这个例子中,当 items 数组发生变化时,列表项将会随之更新。

详细说明移步Vue中v-for指令的详细应用与遍历数据说明-CSDN博客

6. 计算属性指令 v-model

作用:双向数据绑定

用法

v-model 是双向数据绑定的核心指令,通常用于表单元素,它可以轻松地在视图(input标签)与数据模型之间同步值。

7. 组件指令 v-slot(以前是 slot 和 slot-scope

用法


  {{ prop1 }} - {{ prop2 }}

v-slot 指令用于定义或接收组件的插槽内容及其作用域插槽变量。在以上示例中,父组件可以访问子组件传递过来的 prop1 和 prop2 属性。

其他指令

  • v-text指令:

    作用:向其所在的节点中渲染文本内容。

    与插值语法的区别:v-text会替换掉节点中的内容,{{xx}}则不会。

  • v-html指令:

    作用:向指定节点中渲染包含html结构的文本。 与插值语法的区别:

    1. v-html会替换掉节点中所有的内容,{{xx}}则不会。

    2. v-html可以识别html结构。

    3. 备注:v-html存在一些安全性问题,因为结构中很有可能包含恶意脚本。

  • v-once指令:

    1. v-once所在节点在初次动态渲染后,就视为静态内容了。

    2. 以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。

  • v-pre指令:

    跳过这个元素和它的子元素的编译过程,一般用在大量不使用Vue语法的结构中。

  • v-cloak指令(没有值):

    1. 本质是一个特殊属性,Vue接管容器后,会删掉v-cloak属性。

    2. 使用css配合v-cloak可以解决网速慢时,页面展示出{{xxx}}的问题。

你可能感兴趣的:(vue.js,javascript,前端)