vue.js 学习四（指令和自定义指令）

Posted 2020-09-23 阿弥陀佛呵呵哒

官方的指令说明已经很简单了，这里再写一遍，也是自己加深一下印象

v-text 就是写入单纯的文本，可以忽略这个指令直接双花括号代替

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

v-html 更新元素的 innerhtml，如果取回的值里面包含了html的样式，可以使用这个指令。

以下抄写了官方注意事项，对于用户输入的HTML，显示的时候需要谨慎处理。如果是服务器自己生成的HTML，完全由开发者掌控的代码，可以忽略

注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板,可以重新考虑是否通过使用组件来替代。

在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

v-show 

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

当条件变化时该指令触发过渡效果。

简单说就是控制当前指令的标签是否显示

v-if，v-else, v-else if

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

当条件变化时该指令触发过渡效果。

条件判断，这里简单的条件判断还行，复杂的判断还是直接在模型里处理吧。

v-on

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

用在普通元素上时，只能监听 原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性： v-on:click="handle(‘ok‘, $event)"。

修饰符

• .stop - 调用 event.stopPropagation()。
• .prevent - 调用 event.preventDefault()。
• .capture - 添加事件侦听器时使用 capture 模式。
• .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
• .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
• .native - 监听组件根元素的原生事件。
• .once - 只触发一次回调。
• .left - (2.2.0) 只当点击鼠标左键时触发。
• .right - (2.2.0) 只当点击鼠标右键时触发。
• .middle - (2.2.0) 只当点击鼠标中键时触发。
• .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat(‘hello‘, $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

在子组件上监听自定义事件（当子组件触发 “my-event” 时将调用事件处理器）：

<my-component @my-event="handleThis"></my-component>
<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>
<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

注意上面对于vue版本的限制，低版本不支持！主要适用于各类事件的处理。

v-bind 

动态地绑定一个或多个特性，或一个组件属性到表达式。

在绑定属性时，属性必须在子组件中声明。可以用修饰符指定不同的绑定类型。

没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

 v-model

v-model指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

常用的表单控件如select， input，textarea 等

如果是select绑定的值会直接选中，其他的输入则直接选择文本

v-pre

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

至今没有怎么用过

v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

这个指令使用场景比较特殊，在初始化的时候会显示原始的代码，例如

<ul v-for="item in items">
  <li>{{ item.name }}</li>
</ul>

页面加载未完成时会显示

{{ item.name }}

这时候如果加入了这个指令标签在ul上

<ul v-cloak v-for="item in items">
  <li>{{ item.name }}</li>
</ul>

然后对应的全局css上加入

[v-cloak] {
  display: none;
}

页面初始化未完成的时候，整个标签会被隐藏，加载完成后这个标签会自动去掉，显示完整的结果。

v-once

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

  <div v-once>
      <p>{{msg}}</p>
    </div>
    <div v-on:click="changeValue">点击修改msg的值</div>

我们绑定一个点击事件试图网页渲染完成后去修改msg的值，事件触发有此标签的内容不会再更改。

---------------------------------------------------------------------------------------------------------

标签内容有的直接拷贝的官方网页上的说明，部分附上了简单的实例

所有的内容尝试一遍，还是有些意外的收货的

可能刚开始项目使用过程中，只用到了部分指令，在都了解了一遍后，我又把原来项目里面部分功能重新修改了一遍

有的功能一个指令能完成的，我可能用了好几个指令去协作完成，毕竟刚开始看官方文档的时候，看得不是很全面

看文档还是要多动手尝试，加深印象，将来用起来更加得心应手

下面附上一个自定义指令

main.js

import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘

Vue.config.productionTip = false

Vue.directive(‘title‘, {
  inserted: function (el, binding) {
    let title = binding.value;

    if (title) {
      document.title = binding.value;
    }
  }
});

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  router,
  template: ‘<App/>‘,
  components: { App }
})

然后我们的vue文件里面就可以使用v-title指令了

<template>
    <div v-title="‘这里是标题‘">
        这里是内容
    </div>
</template>

<script>

export default {
    name: ‘home‘,
    components: {
    },
    data() {
        return {

        }
    }
}
</script>
<style lang="scss" scoped>

</style>

注意指令内容里面单引号标识这是个字符串，不用单引号，指令值表示变量的名称，要在data里面声明对应的变量名

<template>
    <div v-title="title">
        这里是内容
    </div>
</template>

<script>

export default {
    name: ‘home‘,
    components: {
    },
    data() {
        return {
            title:"这里是标题"

        }
    }
}
</script>
<style lang="scss" scoped>

</style>

全局指令注册属于全局API，全局注册指令用法

// 注册
Vue.directive(‘my-directive‘, {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

// 注册（传入一个简单的指令函数）
Vue.directive(‘my-directive‘, function () {
  // 这里将会被 `bind` 和 `update` 调用
})

指令定义函数提供了几个钩子函数说明，只需要声明用到的函数，不需要的可以省略：

• bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

• inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

• update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。

• componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

• unbind: 只调用一次， 指令与元素解绑时调用。

钩子函数被赋予了以下参数：

• el: 指令所绑定的元素，可以用来直接操作 DOM 。
• binding: 一个对象，包含以下属性：
  • name: 指令名，不包括 v- 前缀。
  • value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。
  • oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
  • arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
  • modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
• vnode: Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。
• oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

参数使用如下

Vue.directive(‘demo‘, {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      ‘name: ‘       + s(binding.name) + ‘<br>‘ +
      ‘value: ‘      + s(binding.value) + ‘<br>‘ +
      ‘expression: ‘ + s(binding.expression) + ‘<br>‘ +
      ‘argument: ‘   + s(binding.arg) + ‘<br>‘ +
      ‘modifiers: ‘  + s(binding.modifiers) + ‘<br>‘ +
      ‘vnode keys: ‘ + Object.keys(vnode).join(‘, ‘)
  }
})

 

指令在绑定网页元素值有优势，例如某些网页上的值显示需要保留两位小数

但是涉及到需要附带元素的css样式，需要附带一些参数控制等，还是需要选择使用插件解决。