2-03-指令

一、指令的概念

指令（Directives）是vue为开发者提供的模版语法，用于辅助开发者渲染页面的基本结构。

vue中的指令按照不同的用途可以分为如下6大类：

1.1内容渲染指令

1.2属性绑定指令

1.3事件绑定指令

1.4双向绑定指令

1.5条件渲染指令

1.6列表渲染指令

注意：指令是vue开发中最基础、最常用、最简单的知识点。

1.1 内容渲染指令

内容渲染指令用来辅助开发者渲染DOM元素的文本内容。常见的内容渲染指令有如下3个：

v-text

用法示例：

{{}}

vue提供的{{}}语法，专门用来解决v-text会覆盖默认文本内容的问题。这种{{}}语法的专业名称是插值表达式（Mustache）

注意：相对于v-text指令来说，插值表达式在开发中常用一些，因为它不会覆盖元素中默认的文本内容

v-html

v-text指令和插值表达式只能渲染纯文本内容。如果要把包含HTML标签的字符串渲染为页面的HTML元素，则需要用到v-html这个指令：

1.2 属性绑定指令

如果需要元素的属性动态绑定属性值，则需要用到v-bind属性绑定指令，简写为”：”。用法示例如下：

注意：插值表达式只能用于元素的内容节点中，不能用于元素的属性节点中。

1.3 事件绑定指令

vue提供了v-on事件绑定指令，可简写为”@”，用来辅助程序员为DOM元素绑定事件监听。语法格式如下：

处理函数如下：

当然也可以简写成：

访问vm中的数据可以这样写：

也可以用this来代替vm：

另外还可以传参

注意：原生DOM对象有onclick、oninput、onkeyup等原生事件，替换为vue的事件绑定形式后，

分别为：v-on:click、v-on:input、v-on:keyup

$event

$event相当于原生事件中的event，可以通过如下方式传入函数中使用：

<body>

<div id="app">

<p>计数器：{{count}}</p>

<button @click="add(1, $event)">+1</button>

</div>

</body>

<script>

new Vue({

el: "#app",

data: {

count: 0

},

methods: {

add(n, e) {

this.count += 1;

if (this.count % 2 == 0) {

e.target.style.backgroundColor = '';

}

else {

e.target.style.backgroundColor = 'red';

}

}

}

});

</script>

事件修饰符

在事件处理函数中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。因此，vue提供了事件修饰符的概念，来辅助程序员更方便地对事件的触发进行控制。常见的5个修饰符如下：

事件修饰符	说明
.prevent	阻止默认行为（例如：阻止a链接的跳转，阻止表单的提交）
.stop	阻止事件冒泡
.capture	以捕获模式触发当前的事件处理函数
.once	绑定的事件只触发1次
.self	只有event.target是自身时才会触发事件

语法格式如下：

按键修饰符

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符，例如：

1.4 双向绑定指令

vue提供了v-model双向数据绑定指令，用来辅助开发者在不操作DOM的前提下，快速获取表单的数据：

为了方便对用户输入的内容进行处理，vue为v-model指令提供了3个修饰符，分别是：

修饰符	作用	示例
.number	自动将用户的输入值转为数值类型
.trim	自动过滤用户输入的首尾空白字符
.lazy	在chang时而非input时更新

示例用法如下：

1.5 条件渲染指令

条件渲染指令用来辅助开发者按需控制DOM的显示与隐藏。条件渲染指令有如下两种，分别是：

v-if

通过动态创建或删除元素来控制显示和隐藏，适用于不常切换状态的元素

v-show

通过动态给元素添加删除display:none样式来控制显示和隐藏，适用于需要频繁切换状态的元素

示例用法如下：

v-else与v-else-if

v-else与v-else-if必须搭配v-if一起使用，否则会识别不了，用法如下：

1.6 列表渲染指令

vue提供了v-for列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for指令需要使用item
in items形式的特殊语法，其中：

items是待循环的数组
item是被循环的每一项

v-for中的索引

v-for指令还支持一个可选的第二个参数，即当前项的索引。语法格式为（item，index）in
items，示例代码如下：

注意：v-for指令中的item项和index项都是形参，可以根据需要进行重命名。例如（user，i）in
userlist

绑定:key

key的值只能是字符串或数字
key的值必须具有唯一性，不能重复
建议把数据项的属性id作为key的值，因为id具有唯一性
使用index值当作key没有任何意义，因为index不具有唯一性

不指定key，或者把它指定为数据项中的index，可能会导致列表渲染顺序错乱，比如下面这个例子：

<body>

    <div id="app">

        <input type="text" v-model="name" />

        <input type="button" @click="add" value="添加" />

        <ul v-for="(item, index) in list">

            <li>

                <input type="checkbox" />

                姓名：{{ item.name }}

            </li>

        </ul>

    </div>

</body>

<script>
    new Vue({

        el: "#app",

        data: {

            name: "",

            list: [

                {
                    id: 1,
                    name: "aa"
                },

                {
                    id: 2,
                    name: "bb"
                }

            ]

        },

        methods: {

            add() {

                this.list.unshift({
                    id: 3,
                    name: this.name
                });

            }

        }

    });
</script>