04-Vue常用指令

文本插值

数据绑定使用的最常见的形式是使用Mustache语法（双大括号）的文本插值。基本语法如下：

{{ 插值表达式 }}

使用示例：

<!-- 时钟变化 -->
<template>
	{{ timeMsg }}
</template>
<script>
	import {reactive, toRefs, onMounted} from 'vue'
	export default {
		setup(){
			// reactive响应式
			const state = reactive({
				timeMsg: new Date();
			});
			// 声明周期函数，网页加载后执行该函数
			onMounted(() => {
				setInterval(function(){
					state.timeMsg = new Date();
				}, 1000);
			});
			return {
				...toRefs(state);
			}
		}
	}
</script>

插值表达式支持匿名变量、三木运算符、四则运算、比较运算符、数值类型的一些内置方法，另外还支持数组的索引取值方法和对象的属性。

数据解析方式

html代码如果直接使用Mustache表达式进行输出不会被浏览器解析执行；如果希望浏览器解析html代码之后再输出，可以使用指令v-html；如果不想被解析，也可以使用v-text指令（纯文本输出）。

v-once指令

用于执行一次性的插值，当数据改变时，插值处的内容不会更新，使用该指令的标签被视为静态内容。

常用指令

指令：在模板中出现的特殊标记。

// v是Vue前缀；text是指令ID；message是表达式，作为ViewModel，当值发生改变，重新渲染。
<p v-text="messaage"></p>

数据绑定

绑定属性

v-bind指令用于绑定HTML属性的指令，可以被绑定的HTML属性包括class、src、title和style等，绑定的属性以键值形式存在

<标记 v-bind:属性="值"></标记>
<标记 :属性="值"></标记>

绑定样式类

<div v-bind:class="{active: isActive}"></div>

也可以和普通的class属性共存

通过数组绑定多个样式类

<div v-bind:class="[activeClass, errorClass]"></div>

通过三目表达式绑定样式类

<div :class="[flag?activeClass:errorClass]"></div>

条件渲染

v-if

v-if用于条件性的渲染内容，为true的时候直接进行渲染。

v-else

表示v-if的else块
必须紧跟在v-if或者v-else-if元素的后面

v-else-if

可以连续使用，充当v-if的“else-if”块

v-show

与v-if用法基本一致，只不过v–show是改变的元素的css属性display，当表达式的值为false时，元素会被隐藏。

v-for指令

完成对数组、对象渲染成列表的形式呈现。

基本使用

v-for="item in list"
v-for="(item, index) in list" :key="index"
v-for="(value, key, index) in Object" :key="index"

通过上面语法示意可以遍历数组、对象数组、对象

事件处理

监听事件

使用v-on指令或者缩写为@来监听DOM事件，并在触发事件的时候执行事件处理函数。
在处理事件处理方法时，还可以像事件处理方法传递参数，当然也可以调用其他方法。
事件对象必须使用$event名称作为实参，当事件的处理函数有多个参数的时候，事件对象必须放在所有参数的最后，通过事件对象可以访问原生的DOM节点（示例e.srcElement.dataset.aid或者e.srcElement.style）

事件修饰符

通过点后缀来调用修饰符，在事件处理器上，提供4中修饰符，即.stop、.prevent、.capture、.self。

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<a v-on:submit.prevent="doThis"></a>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThis"></a>
<!-- 只有修饰符 -->
<a v-on:click.prevent="doThis"></a>
<!-- 添加事件监听器时，使用事件捕捉模式 -->
<a v-on:click.capture="doThis"></a>
<!-- 只当事件在该元素本身触发时触发回调 -->
<a v-on:click.self="doThis"></a>

按键修饰符

在v-on监听键盘事件，比如<input v-on:keyup.13="submit">，同时提供了按键的别名，主要包括.enter、.tab、.delete、.esc、.space、.up、.down、.left、.right、.ctrl、.alt、.shift、.meta等。

表单输入绑定

vue使用v-model指令来实现标签数据的双向绑定，该指令本质上是一个语法糖（指的是计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是跟方便使用）

<input v-model="test">
<!-- 本质相当于下面 -->
<input :vlaue="test" @input="test= $event.target.value">

可以使用v-model指令完成在表单<input>、<textarea>、<select>元素上创建双向数据绑定，同时会忽略所有表单元素的value、checked、selected属性的初始值，所以需要初始值。

<!-- 文本框绑定 -->
<input v-model="msg">
<!-- 复选框绑定 -->
<input type="checkbox" id="football" value="足球" v-model="checkedNames" />
<input type="checkbox" id="basketball" value="篮球1" v-model="checkedNames" />
<!-- 单选框绑定 -->
<input type="radio" id="one" value="男" v-model="picked" />
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="picked" />
<label for="two">女</label>
<!-- 下拉框绑定 -->
<select v-model="selected">
	<option disabled value="">请选择</option>
	<option value="football">足球</option>
</select>