Vue指令

系统指令

Vue会根据不同的【指令】，针对标签实现不同的【功能】

指令：带有 v-前缀的特殊标签属性

{{}}

{{}} 插值表达式是一种 Vue 的模版语法，不具备解析标签的能力。

作用：利用表达式进行插值，渲染到页面中，{{}} 除了可以进行数据的渲染和方法的调用外，还支持一些书写业务逻辑，复杂的业务逻辑不建议书写在内，影响代码的可读性。

表达式：是可以被求值的代码。JS引擎会将其计算出一个结果

1// 1.支持三元运算符
2<div> {{ a > b ? c : d }} </div>
3
4// 2.支持方法调用
5<div> {{ 'abc'.split('').reverse().join('') }} </div>

注意点：

使用的数据必须在data存在
支持的是表达式，而非语句，比如：if、for...
不能在标签属性中使用 {{}} 插值

v-text

设置元素的 textContent，等价于 {{}}，也不具备解析标签的能力，可以用来防治 XSS攻击。

XSS攻击：XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法往页面中注入恶意指令代码。

1<div v-text="str"></div>

v-html

设置元素的 innerHTML

1<template>
2  <div>
3    <div v-html="link"></div>
4  </div>
5</template>
6
7<script>
8export default {
9  name: "XiaoSu",
10  components: {},
11  data() {
12    return {
13      link: `<a href="https://codemydreams.github.io">小苏同学的博客</a>`,
14    };
15  },
16};
17</script>

v-show

根据表达式真假，动态切换元素css的display属性，实现控制元素的显示隐藏

表达式为真时，display的属性值为block
表达式为假时，display的属性值为none

适用场景：频繁切换显示隐藏的场景

1<span v-show="true">展示</span>
2<span v-show="false">隐藏</span>

v-if

条件渲染，根据表达式真假，通过控制DOM元素的创建和移除，来实现显示隐藏

当和v-for一起使用时，v-for的优先级更高

场景：要么显示、要么隐藏，不频繁切换的场景

1<span v-if="flag"></span>

v-else

辅助v-if进行判断渲染

为 v-if 或 v-else-if 添加 else 块，所以前一兄弟元素必须有 v-if 或 v-else-if

1<div v-if="type === 'A'">
2  A
3</div>
4<div v-else>
5  B
6</div>

v-else-if

辅助v-if进行判断渲染

表示 v-if 的 else if 块，所以前一兄弟元素必须有 v-if 或 v-else-if

1<div v-if="type === 'A'">
2  A
3</div>
4<div v-else-if="type === 'B'">
5  B
6</div>
7<div v-else>
8  C
9</div>

v-for

key

key是给Vue内部使用的，是一个用于判断节点需不需要进行更新的标识，若key的值没改变则不需要更新节点，反之。

:key 给列表项添加的唯一标识，便于Vue进行列表项的正确排序复用。

作用：

减少不必要的节点更新，提高更新效率（高效更新虚拟DOM）。
若组件需要重新加载，可以改变key的值。

key值的选择：

key的值只能是字符串或数字类型
key的值必须具有唯一性
推荐使用 id 作为 key（唯一），不推荐使用index作为key（会变化，不对应）

不写key属性的隐患：

v-for的默认行为会尝试原地修改元素（就地复用）

1<div v-for="item,index in arr" :key="arr.id">
2  {{ arr.name }}
3</div>

v-on

缩写：@

1<button v-on:click="count++">
2  内联语句
3</button>
4
5<button @click="add">
6  methods中的函数名
7</button>

事件修饰符	功能
.stop	阻止冒泡
.prevent	阻止默认行为

v-bind

html标签中的属性默认是不能解析变量的（默认不能写vue语法），我们需要解决这个问题就需要进行属性绑定，属性绑定是单向的，即数据流向视图。

缩写：:

动态设置html的标签属性

1<img v-bind:src="url"></img>

操作 class

1// 对象：键就是类名，值是布尔值。如果值为true则有这个类，反之则无
2<div class="box" :class="{box1: bool, box2: flag}"></div>
3 
4// 数组：数组中所有的类都会添加到标签上，本质上就是一个class列表
5<div :class:"[box, box1, box2]"></div>
6
7// 三元写法
8<div :class="bool ? 'active':''"></div>

操作 style

1// 对象写法
2<div :style="{width, height}"></div>

v-model

给表单元素使用，用于让表单的value值与data中的数据进行双向数据绑定，彼此间互相影响（可以快速获取或设置表单元素内容）

双向数据绑定：

数据变化 => 视图自动更新
视图变化 => 数据自动更新

文本框

1<template>
2  <div>
3    <input type="text" v-model="txtVal" />
4    <p>{{ txtVal }}</p>
5  </div>
6</template>
7
8<script>
9export default {
10  data() {
11    return {
12      txtVal: "",
13    };
14  },
15};
16</script>

下拉框

1<template>
2  <div>
3    <select v-model="selVal">
4      <option value="beijing">北京</option>
5      <option value="shanghai">上海</option>
6      <option value="guangzhou">广州</option>
7      <option value="shenzhen">深圳</option>
8    </select>
9    <p>{{ selVal }}</p>
10  </div>
11</template>
12
13<script>
14export default {
15  data() {
16    return {
17      selVal: "",
18    };
19  },
20};
21</script>

单选按钮

1<template>
2  <div>
3    <input type="radio" v-model="gender" value="man" />男
4    <input type="radio" v-model="gender" value="woman" />女
5    <p>{{ gender }}</p>
6  </div>
7</template>
8
9<script>
10export default {
11  data() {
12    return {
13      gender: "man",
14    };
15  },
16};
17</script>

复选按钮

1<template>
2  <div>
3    <input type="checkbox" v-model="hobby" value="eat" />吃饭
4    <input type="checkbox" v-model="hobby" value="sleep" />睡觉
5    <input type="checkbox" v-model="hobby" value="play" />打豆豆
6    <p>{{ hobby }}</p>
7  </div>
8</template>
9
10<script>
11export default {
12  data() {
13    return {
14      hobby: [],
15    };
16  },
17};
18</script>

v-slot

v-pre

可以让设置该指令的元素不解析胡子语法

1<p v-pre>这是vue的插值语法：{{val}}</p>

v-clock

隐藏数据渲染到页面之前，胡子语法在界面上的展示

1<style>
2[v-cloak]{
3	display: none;
4}
5</style>
6
7<div v-cloak>
8  {{ str }}
9</div>

v-once

自定义指令

全局自定义指令

书写在main.js中

1import Vue from "vue";
2import App from "./App.vue";
3
4Vue.config.productionTip = false;
5
6// 全局自定义指令
7Vue.directive("myshow", {
8  bind(el, binding) {
9    el.style.display = binding.value ? "block" : "none";
10  },
11  update(el, binding) {
12    el.style.display = binding.value ? "block" : "none";
13  },
14});
15
16new Vue({
17  render: (h) => h(App),
18}).$mount("#app");

bind 和 update 函数都属于钩子函数

钩子函数：不需要手动调用，在某种条件满足时，会自动触发的函数就叫做钩子函数。

局部自定义指令

1<template>
2  <div>
3    <button @click="isShow = !isShow">按钮</button>
4    <h1 v-myshow="isShow">xiaosutongxue</h1>
5  </div>
6</template>
7
8<script>
9export default {
10  data() {
11    return {
12      isShow: false,
13    };
14  },
15  directives: {
16    myshow: {
17      bind(el, binding) {
18        // 当指令绑定到标签身上时执行这里的代码，且只执行一次，页面一刷新就绑定上去了。
19        // el 绑定该指令的DOM元素
20        // binding 是一个记录一些指令信息的对象，binding.value获取指令值
21        console.log(el);
22        console.log(binding);
23        el.style.display = binding.value ? "block" : "none";
24      },
25      update(el, binding) {
26        // 当指令值发生变化时就会执行这里的代码
27        console.log(el);
28        console.log(binding);
29        el.style.display = binding.value ? "block" : "none";
30      },
31    },
32  },
33};
34</script>

修饰符

Vue中常用的修饰符就三种，分别是事件修饰符、按键修饰符和表单修饰符。

事件修饰符

.stop 阻止事件冒泡，需要写在事件的后面

.prevent 阻止浏览器默认行为

.prevent.stop 阻止默认行为通知阻止冒泡

.once 阻止事件重复触发（once和stop不能一起使用，否则再次触发事件，依然会冒泡）

1<template>
2  <div>
3    <div class="big" @click="bc">
4      <!-- 阻止事件冒泡 -->
5      <div class="small" @click.stop="sc">
6        <!-- 超链接存在默认行为和事件冒泡，可以同时使用.stop.prevent，这样既能阻止默认行为，又能阻止冒泡 -->
7        <a href="#" @click.stop.prevent>这里是a标签</a>
8      </div>
9    </div>
10    <!-- 阻止事件重复触发 -->
11    <button @click.once="btn">按钮</button>
12  </div>
13</template>
14
15<script>
16export default {
17  data() {
18    return {};
19  },
20  methods: {
21    bc() {
22      console.log("点击了大盒子");
23    },
24    sc() {
25      console.log("点击了小盒子");
26    },
27    btn() {
28      console.log("我被点击了");
29    },
30  },
31};
32</script>
33
34<style lang="less" scoped>
35.big {
36  width: 300px;
37  height: 300px;
38  background-color: #ff6700;
39  .small {
40    width: 200px;
41    height: 200px;
42    background-color: #ffc;
43  }
44}
45</style>

按键修饰符

Vue允许为 v-on 在监听键盘事件时添加按键修饰符

.enter

.tab

.delete 捕获删除和退格键

.esc

.space

.up

.down

.left

.right

1<template>
2  <div>
3    <input type="text" @keyup.enter="submit" />
4  </div>
5</template>
6
7<script>
8export default {
9  data() {
10    return {};
11  },
12  methods: {
13    submit() {
14      console.log("点击了enter键");
15    },
16  },
17};
18</script>
19
20<style lang="less" scoped></style>

表单修饰符

.trim 在获取用户输入的文本之前去除两端空格

.number 在获取用户输入的数字之后自动转为数字类型

.lazy 等到按下回车或者失焦的时候才更新页面显示的数据，节省了性能的损耗

1<input type="text" v-model.trim="textVal" />
2
3<input type="number" v-model.number="numVal" />
4
5<input type="text" v-model.lazy="textVal" />

Vue指令#

系统指令#

{{}}#

v-text#

v-html#

v-show#

v-if#

v-else#

v-else-if#

v-for#

key#

v-on#

v-bind#

动态设置html的标签属性#

操作 class#

操作 style#

v-model#

文本框#

下拉框#

单选按钮#

复选按钮#

v-slot#

v-pre#

v-clock#

v-once#

自定义指令#

全局自定义指令#

局部自定义指令#

修饰符#

事件修饰符#

按键修饰符#

表单修饰符#