Vue指令

作用：为HTML元素绑定事件监听

指令

1、v-text：解析文本

<span v-text="text"></span>

等同于

<span>{{ v-text }}</span>

2、v-html：解析 html 标签。
html部分

<p v-html="html"></p>

js部分

data () {
  return {
    html: '<span>v-html</span>'
  }
},

3、v-if：条件渲染，通过判断真假来实现显示与隐藏
html部分

<p v-if="if"></p>

js部分

data () {
  return {
    if: true      // 显示 
  }
},

4、v-else：与 v-if 连用。

5、v-else-if：与 v-if 连用。
html部分

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

js部分

data () {
  return {
    type: 'D'      // Not A/B/C
  }
},

6、v-once：进入页面时，只渲染一次，不再因为数据变化再进行渲染。
html部分

<div class="box">
  <input type="text" v-model="message" />
  <p v-once>{{message}}</p>
  <span>{{message}}</span>
</div>

js部分

data () {
  return {
    message: 1234
  }
},

初始数据为1234，当数据发生变化，span标签的内容会随着变化，而标签p中的 message 重新被渲染。

7、v-model：用于表单进行双向绑定
html部分

<div class="box">
  <input type="text" v-model="message" />
  <p>{{message}}</p>
</div>

js部分

data () {
  return {
    message: 1234
  }
},

当 input 框的内容变化时，p的 message 也会随之变化。

v-model修饰符

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

8、v-show：用于切换元素的 display css属性。

9、v-for：循环指令，对数组进行遍历进行渲染。
html部分

<ul>
  <li v-for="(item, index) in list">      // index 为当前索引
    {{index}}：{{item.id}}-{{item.name}}
  </li>
</ul>

js部分

data () {
  return {
   list: [
      {id: 1, name: '小明', gender: 'boy'},
      {id: 2, name: '小红', gender: 'girl'},
    ]
  }
},

最终解析为如下图：

10、v-bind：动态地绑定一个或多个特性，对页面的数据及时进行更改。
缩写：":"

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">        
// 等同于<img :src="imageSrc">

样式绑定
class 绑定

// html 代码
<div :class = "{ active: isActive, red: isRed }">1111</div>

// js代码
data () {
  return {
    isActive : true,
    isRed: false
  }
},

// 渲染结果，因为isRed为false，所以red没被渲染。
<div class="active">1111</div>

style 绑定

<p :style="{color: 'red', fontSize: '18px'}">11111111</p>

<!-- 或者为 -->
<div id="box">
  <p :style="{color: c, fontSize: fS}">11111111</p>
</div>
// js代码
data () {
  c: "red",
  fS: "18px"
}

11、v-on：绑定事件监听器。简写：“@”

<!-- html部分 -->
<button @click="doThis">点击</button>

<!-- js部分 -->
export default {
  data () {
    return {}
  },
  methods: {
    doThis() {
      console.log(123)
    }
  }
}
//方法在methods中写

修饰符

• stop 阻止事件冒泡
• prevent 阻止默认行为
• capture 添加事件侦听器，使用事件捕获模式
• self - 只有当事件在该元素本身触发时才触发事件
• once - 事件将只会触发一次

键值修饰符
v-on:keydown=“”（获取不同键的键值）
.enter
.tab
.delete
.up
.down
.left
.right

自定义指令

1、注册全局自定义组件：

Vue.directive('指令名称', {
  inserted: function (el, binding) {
  // el 代表使用了此指令的DOM元素，binding 可获取使用了此指令的绑定值

  // 代码
  }
})

2、注册局部指令：

directives: {
  '指令名称': {
    inserted: function (el, binding) {
      // 代码
    }
  }
}

3、使用自定义指令：

• 引用指令时，指令名前面加上 v-
• 直接在元素上在使用即可 ：v-指令名='表达式'

例子：

<template>
  <div class="box">
    <div class="directive">
      <input type="text" v-auto-focus v-colorchange>
      <div class="box" v-fontcolor v-fontcolorsec>
        hello
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  data () {
    return {}
  },
// 局部定义
  directives: {
    'auto-focus': {
      inserted: function (el, binging) {
        // 逻辑代码
        el.focus()
      }
    },
    'fontcolor': {
      inserted: function (el, binding) {
        el.style.color = 'red';
        el.style.fontSize = '40px';
      }
    },
    'fontcolorsec': {
      inserted: function (el, binding) {
        el.style.color = 'blue';
      }
    }
  },
}
// 全局定义
Vue.directive('colorchange', {
  inserted: function (el, binding) {
    el.style.background = 'red';
  }
})
</script>

效果图：