坐忘道

Appearance

指令 ​

Vue模板语法有2大类

插值语法:

  • 功能: 用于解析标签体内容
  • 使用: { { xxx } }, xxx是js表达式, 且可以直接读取到data中的所有属性

指令语法:

  • 功能: 用于解析标签, 包括标签属性、标签体内容、绑定事件等

内置指令 ​

  • v-bind: 单向数据绑定, 可简写为:xxx
  • v-model: 双向数据绑定, 完整写法为v-model:value
  • v-for: 遍历数组/对象/字符串
  • v-on: 绑定事件监听, 可简写为@xxx
  • v-if/v-else-if/v-lese: 条件渲染, 动态控制DOM节点是否存在
  • v-show: 添加渲染, 动态控制CSS样式展示
  • v-text: 向其所在的标签中插入文本, 会替换节点中的内容
  • v-html: 向指定节点中渲染包含HTML结构的内容, 会替换掉节点中的内容
    • 可以识别HTML结构
    • 注意: 在网站上动态渲染任何HTML结构是非常危险的, 容易导致XSS攻击, 一定要在可信的网站上使用, 永远不要用在用户提交上
  • v-cloak: 本质上是一个特殊属性, Vue实例创建完毕并接管容器后会删除v-cloak属性
    • 使用css配合v-cloak可以解决网速过慢时页面展示出未经解析的模板代码的问题
  • v-once: v-once所在的节点在初次动态渲染后, 就视为静态内容了, 以后数据的改变不会引起v-once所在结构的更新, 可以用于优化性能
  • v-pre: 跳过所在节点的编译过程, 可利用它跳过没有使用指令语法、没有使用插值语法的节点, 会加快编译

自定义指令 ​

定义自定义指令 ​

  • 局部指令

注意

this指向是window

js
new Vue({
  directive: {
    // 完整写法
    xxx: {
      // 指令与元素成功绑定时调用
      bind(element, binding) {
        console.log('bing', this)
      },
      // 指令所在元素被插入页面时调用
      inserted(element, binding) {
        console.log('inserted', this)
      },
      // 指令所在的模板被重新解析时调用
      update(element, binding) {
        console.log('update', this)
      }
    },
    // 简写: 指令与元素成功绑定时 或 指令所在的模板被重新解析时调用
    xxx(element, binding) {

    }
  }
})
  • 全局指令
js
// 完整写法
Vue.directive('xxx', {
  // 指令与元素成功绑定时调用
  bind(element, binding) {
    console.log('bing', this)
  },
  // 指令所在元素被插入页面时调用
  inserted(element, binding) {
    console.log('inserted', this)
  },
  // 指令所在的模板被重新解析时调用
  update(element, binding) {
    console.log('update', this)
  }
})
// 简写
Vue.directive('xxx', function(element, binding) {
  element.innerText = binding.value * 10
})

常用回调函数 ​

自定义指令配置对象中常用的三个回调

  • bind(){...}: 指令与元素成功绑定时调用
  • inserted(){...}: 指令所在元素被插入页面时调用
  • update(){...}: 指令所在模板结构被重新解析时调用

注意

  • 指令定义时不加v-, 但使用时需要加v-
  • 自定义指令名如果是多个单词组合, 要使用aaa-bbb命名方法, 不用使用aaaBbb驼峰命名