您的位置: 首页  >  文章  >  Vue指令

Vue指令

分类: 文章 • 2022-11-03 19:54:09

Vue指令：

1. 指令是带有 v- 前缀的特殊属性

Vue指令

 

2.指令的用途：

  1. 它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为（特殊功能），我们可以将指令看作特殊的HTML属性（attribute）。

3. Vue.js 指令的书写规范

  1. 书写位置：任意 HTML 元素的开始标签内
  2. 注意：一个开始标签内可写入多个指令，多个指令间使用空格分隔

4.常见指令：

1）v-model指令：

作用：主要用于表单上数据的双向绑定

语法：v-model=变量

注意：v-model指令必须绑定在表单元素上

双向绑定：

Vue框架核心的功能就是双向的数据绑定。

  双向是指：HTML标签数据 绑定到 Vue对象，另外反方向数据也是绑定的

使用 v-model 指令来实现双向数据绑定 把视图数据与模型数据相互绑定

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的

  1. 数据劫持:当我们访问或设置对象的属性的时候，都会触发Object.defineProperty()函数来拦截（劫持），然后在返回(get)或设置(set)对象的属性的值。并且当数据发生改变的时候做出反应。Vue指令

 

  1. 发布者-订阅者模式:其定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。Vue指令

 

2）v-show指令

    1. 作用：控制切换一个元素的显示和隐藏
    2. 语法：v-show = 表达式
      1. 根据表达式结果的真假，确定是否显示当前元素
      2. true表示显示该元素；false(默认)表示隐藏该元素
      3. 元素一直存在只是被动态设置了display：none

 

3）v-on指令

    1. 作用：为 HTML 元素绑定事件监听
    2. 语法：v-on：事件名称=‘函数名称()’
    3. 简写语法：@事件名称=‘函数名称()’
      1. 注：函数定义在 methods 配置项中

4）v-for指令

    1. 作用：遍历 data 中的数据，并在页面进行数据展示
    2. 语法：v-for = ‘(item, index) in arr’
      1. item 表示每次遍历得到的元素
      2. index 表示item的索引，可选参数

 

5）v-bind指令

    1. 作用：绑定 HTML 元素的属性
    2. 语法：v-bind:属性名 = ‘表达式’

 简写     ：属性名=‘表达式’

      1. 绑定一个属性：<img v-bind:src=‘myUrl’ />
      2. 绑定多个属性(不能使用简写)

6）v-if指令

    1. 作用：判断是否加载固定的内容
    2. 语法：v-if = 表达式
      1. 根据表达式结果的真假，确定是否显示当前元素
      2. true表示加载该元素；false表示不加载该元素
      3. 元素的显示和隐藏 是对Dom元素进行添加和删除

v-if和v-show的区别：

v-if有更高的切换消耗（安全性高）。

v-show有更高的初始化的渲染消耗（对安全性无要求选择）

7）v-else指令

    1. 作用：必须配合v-if使用否则无效。当v-if条件不成立的时候执行

8）v-else-if指令

    1. 作用：当有一项成立时执行。

9）v-text指令

作用：将数据解析为纯文本。{{}}是它的简写

10）v-html指令

作用：输出真正的html

11)v-once 指令

作用：对于vue中的v-once这个指令不需要任何表达式，它的作用就是定义它的元素或组件只会渲染一次，包括元素或者组件的所有字节点。首次渲染后，不再随着数据的改变而重新渲染。也就是说使用v-once，那么该块都将被视为静态内容。

v-once示例：

Vue指令

 

运行结果：

Vue指令

 

12）自定义指令

可以使用Vue.directive( dir_name , {} ) 来定义全局自定义指令

也可以使用 directives{ dir_name : {} } 来定义局部自定义指令

directives:{

      自定义指令的名字：{

        自定义指令钩子函数(el){

          操作逻辑

        }

      }

},

bind：绑定指令到元素上，只执行一次

inserted：绑定了指令的元素插入到页面中展示时调用，基本上都是操作这个钩子函数

update：所有组件节点更新时调用

componentUpdated：指令所在组件的节点及其子节点全部更新完成后调用

unbind：解除指令和元素的绑定，只执行一次

相关推荐