vue指令

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。

 

参数

一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,v-bind指令可以用于响应式地更新 HTML 特性:

<a v-bind:href="url">测试参数</a>

在这里 href 是参数,告知 v-bind 指令将该元素的 href 特性与表达式url的值绑定。

另一个例子是 v-on 指令,它用于监听 DOM 事件:

<a v-on:click="click">点击事件</a>

在这里参数是监听的事件名。

 

内置指令(前面说过的就不令举例子了)

v-text

更新元素的 textContent。如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值。

<div class="hello" v-text="msg"></div>

v-html

更新元素的 innerHTML 。

<div class="hello" v-html="html"></div>

v-show

根据表达式之真假值,切换元素的 display CSS 属性。

v-if

根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ,将提出它的内容作为条件块。

v-else-if

前一兄弟元素必须有 v-if 或 v-else-if。表示 v-if 的 “else if 块”。可以链式调用。

v-else

前一兄弟元素必须有 v-if 或 v-else-if。为 v-if 或者 v-else-if 添加“else 块”。

v-for

基于源数据多次渲染元素或模板块。

v-on

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。
用在普通元素上时,只能监听原生 DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。
在监听原生 DOM 事件时,方法以事件为唯一的参数。
从 2.4.0 开始,v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时,是不支持任何修饰器的。

###缩写@

修饰符

还是先将例子放出来,用来学习修饰符。

<div class="parent" @click="firstClick">
    <div class="child" @click="secondClick">
          <div class="grandson" @click="thirdClick">
          </div>
    </div>
</div>

methods: {
    firstClick: function (value) {
      console.log("父亲点击事件")
    },
    secondClick: function (value) {
      console.log("孩子点击事件")
    },
    thirdClick: function (value) {
      console.log("孙子点击事件")
    }
}

如图:我分别点击父亲元素,孩子元素,孙子元素。

修饰符:我的理解是在事件出发的同时,帮我们多做一些事情,省略我们的工作。

.stop - 调用 event.stopPropagation()
 

 <div class="parent" @click="firstClick">
    <div class="child" @click.stop="secondClick">
      <div class="grandson" @click="thirdClick">
      </div>
    </div>
  </div>

此时点击孩子元素,页面输出如下,不会事件往上传递:

孩子点击事件

.prevent - 调用 event.preventDefault()

<a href="https://blog.csdn.net/it_rod/article/details/79433887" @click.prevent>页面跳转</a>

.capture - 添加事件侦听器时使用 capture 模式

<div class="parent" @click.capture="firstClick">
    <div class="child" @click.capture="secondClick">
      <div class="grandson" @click.capture="thirdClick">
        <a href="https://blog.csdn.net/it_rod/article/details/79433887" @click.prevent>页面跳转</a>
      </div>
    </div>
  </div>

可以自行和上面的例子进行比较,事件冒泡和事件捕获的不同。

.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。就是只响应注册自己元素上的事件,不会进行事件冒泡。但是不会禁止默认行为。

 <div class="parent" @click.self="firstClick">
    <div class="child" @click.self="secondClick">
      <div class="grandson" @click.self="thirdClick">
        <a href="https://blog.csdn.net/it_rod/article/details/79433887" @click.self>页面跳转</a>
      </div>
    </div>
  </div>

.passive - (2.3.0) 以 { passive: true } 模式添加侦听器。是说一次绑定多个事件。不支持任何修饰器的。

<div class="parent" v-on="{click: firstClick, mouseup: secondClick}">

尴尬的是eslint的报错。

下面几个就不一一举例了。

  • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
  • .native - 监听组件根元素的原生事件。
  • .once - 只触发一次回调。
  • .left - (2.2.0) 只当点击鼠标左键时触发。
  • .right - (2.2.0) 只当点击鼠标右键时触发。
  • .middle - (2.2.0) 只当点击鼠标中键时触发。

v-bind

动态地绑定一个或多个特性,或一个组件 prop 到表达式。
在绑定 class 或 style 特性时,支持其它类型的值,如数组或对象。可以通过下面的教程链接查看详情。
在绑定 prop 时,prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

修饰符:

.prop - 被用于绑定 DOM 属性 (property)
其实看到这里,可能会有些迷糊啊,对于html属性和dom属性的区别请看我之前学习angular4的相关部分

 <div>
    <input type="text" v-bind:test.prop="number" ref="input1">
    <input type="text" v-bind:test="number" ref="input2">
    <button @click="addFunction">number + 1</button>
  </div>

  methods: {
    addFunction: function (event) {
      this.number++
      console.log(this.$refs.input1.test)
      console.log(this.$refs.input1.getAttribute('test'))
      console.log(this.$refs.input2.test)
      console.log(this.$refs.input2.getAttribute('test'))
    }
  }

然后我们先看结果:

首先我们可以看到html上,第一个没有属性test,那是因为我们绑定的是DOM属性。第二个输出结果也可以看到,第一个input的dom属性有值,第二个input则是html属性有值

 

.camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)

<input type="text" v-bind:view-box.camel="number" ref="input1">

页面渲染如下:

<input data-v-469af010="" type="text" viewbox="1">

.sync (2.3.0+) 语法糖,会扩展成一个更新父组件绑定值的 v-on 侦听器
具体内容到了组件在学习。

v-model

在表单控件或者组件上创建双向绑定。

限制应用元素:

  • <input>
  • <select>
  • <textarea>
  • components

修饰符

  • .lazy - 取代 input 监听 change 事件
  • .number - 输入字符串转为有效的数字
  • .trim - 输入首尾空格过滤

v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<span v-pre>{{ this will not be compiled }}</span>

v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
这个指令没有怎么测试,在网上搜到和页面闪烁有关,先记下。

v-once

只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

 

自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。

例如下面创建指令:当前节点插入到父节点是,设置文字颜色为红色。

<input v-foucus type="text" v-bind:value="number" ref="input1">


export default {
  name: 'HelloWorld',
  data () {
    return {
      number: 1,
      url: 'https://blog.csdn.net/It_rod'
    }
  },
  methods: {
    addFunction: function (event) {
      this.number++
      console.log(this.$refs.input1.test)
      console.log(this.$refs.input1.getAttribute('test'))
      console.log(this.$refs.input2.test)
      console.log(this.$refs.input2.getAttribute('test'))
    }
  },
  directives:{
    foucus:{
     inserted: function (el) {
            // 聚焦元素
            el.style.color='red'
          }
    }
  }
}

上面创建方式为局部创建,全局创建如下:

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

 

指令钩子函数(生命周期)

一个指令定义对象可以提供如下几个钩子函数 (均为可选):

  • bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  • inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
  • update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
  • componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  • unbind:只调用一次,指令与元素解绑时调用。

至于钩子函数参数还是见官方文档,后面学到组件的时候关注生命周期的时候估计会联系到这边。

 

函数简写

在很多时候,你可能想在 bind 和 update 时触发相同行为,而不关心其它的钩子。比如这样写:

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

 

相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页