第3章Vue的内置指令与语法






视频讲解



本章将会对Vue 3.0中的语法和内置指令进行介绍，包括插值绑定、计算属性、条件渲染指令、列表渲染指令等，对于在Vue 3.0中有变更的部分会在对应的小节中进行说明。


3.1插 值 绑 定
3.1.1文本插值与表达式

文本插值最基本的方法是使用双大括号(Mustache语法)“{{ }}”，Vue将会获取计算后的值，将大括号里的内容替换为设定值，然后以文本的形式将其展示出来。无论通过任何方法修改数据设定值，大括号的内容都会被实时替换。例22中的hello、例25中的a、b、c都是通过这种方式在页面中显示数据的。
除了直接赋值，Mustache语法也接受表达式形式的值。表达式可由JavaScript表达式和过滤器构成。表达式可以有变量、数值、运算符等，表达式的值是它的运算结果。虽然不支持条件语句，但可以通过三元式实现简单的条件判断。
例31展示了通过文本插值与表达式计算变量、表达式、条件运算符的值，在页面中的效果如图31所示。
【例31】通过文本插值计算变量、表达式、条件运算符的值

<template>

<div id="app">

<p><label>变量:</label> {{ num }}</p>

<p><label>表达式:</label> {{ 5 + 10 }}</p>

<p><label>条件运算符:</label> {{ true ? 5 : 10 }}</p>

</div>

</template>



<script>

import { ref } from "vue";



export default {

setup() {

const num = ref("2");




return {

num,

};

},

};

</script>  </body>

</html>




图31通过文本插值显示
变量、表达式、条件
运算符值的效果

Vue的“{{ }}”内只支持单个表达式，不支持语句和流控制。并且在表达式中，不能使用用户自定义的全局变量。“{{ }}”可以放在HTML标签内，但Vue指令和自身特性内是不可以插值的。

如果想显示“{{ }}”标签而不进行替换，可以使用vpre跳过这个元素和它的子元素的编译过程。此外，HTML绑定Vue实例，在页面加载时可能会闪烁。原因是Vue来不及渲染，页面显示出了Vue源代码，可以使用vcloak指令隐藏未编译的Mustache标签直到实例准备完毕。
3.1.2过滤器
在Vue 2.x中支持在“{{ }}”插值的尾部添加过滤器，用管道符“|” 表示。经常用于格式化文本，如字母全部大写、格式化日期等。过滤的规则是可以自定义的，通过给Vue实例添加filters来设置。在Vue 3.0中，过滤器已被移除，建议使用方法或计算属性来实现。
下面的例32实现了内置过滤器、过滤器串联与过滤器传参。uppercase是Vue的一个内置过滤器，可以将字符串转换为大写。通过使用多个管道符号可以将多个过滤器进行串联。
【例32】内置过滤器、过滤器串联与过滤器传参

{{ string | uppercase }}

{{ string | filterA | filterB }}

{{ string | filter arg1 arg2 }}

当有多个参数时，可以通过空格将参数分开，过滤器会将string作为第一个参数，arg1、arg2分别作为第二个、第三个参数传入。参数可以是表达式，也可以使用单引号传入字符串。
包括uppercase，Vue总共内置了10种过滤器，将会在第5章进行详细介绍。
3.1.3HTML插值
HTML插值可以动态渲染DOM节点，常用于处理开发者不可预知和难以控制的DOM 结构。与文本插值不同的是，文本插值中的代码被解释为节点的文本内容，而HTML插值中的代码则被渲染为视图节点。
对于值是HTML的片段，可以使用三个大括号“{{{ }}}”来绑定，也可以在标签内使用vhtml=" "的形式。所接收的字符串不会进行编译等操作，Vue会把被绑定的内容解析为DOM节点，按照普通HTML处理，从而实现动态渲染视图的效果。
需要注意的是，在网站上直接动态渲染任意HTML片段，容易导致XSS（Cross Site Scripting，跨站脚本攻击）。因此，开发者应尽量多地使用Vue自身的模板机制，减少对HTML插值的使用，并且只对可信内容使用HTML插值。
3.2计 算 属 性
在项目开发中，往往会在模板中使用表达式或过滤器来对数据进行处理。当表达式过长或者逻辑更复杂时，模板就会变得难以维护。为了避免这种问题，Vue提供了计算属性，对逻辑进行简化。
3.2.1计算属性的概念
计算属性会在其依赖属性的值发生变化时，对属性的值进行自动更新，同时更新相关的DOM 部分。通过从Vue中导入computed来使用计算属性。
例33给出了计算属性的例子，double会始终保持为num的两倍，使用按钮增加num的值，double也会随之改变。显示结果如图32所示。在Vue Devtools中可以查看计算属性的值，如图33所示。
【例33】计算属性

<template>

<div id="app">

<p>{{ num }}</p>

<p>{{ double }}</p>

<button @click="addBtn">num+1</button>

</div>

</template>



<script>

import { computed, toRefs, reactive, ref } from "vue";



export default {

setup() {

const data = reactive({

num: 1,

});



const double = computed(() => {

return data.num * 2;

});



const addBtn = () => {

data.num++;

};



return {

...toRefs(data),

double,

addBtn,

};

},

};

</script>



图32计算属性的显示




图33在Vue Devtools中查看属性


除了以上这种写法，也可以将computed写在data中，同样可以达到相同的效果，如例34所示。
【例34】计算属性的另一种写法

const data = reactive({

  num: 1,

  doubleNum: computed(() => data.num * 2),

 });

3.2.2计算属性
在例33中，如果尝试修改double的值，会发现Vue会给出一个warning，原因是所创建的double是只读的计算属性。通过传入一个包含get和set函数的对象，可以得到一个可读可写的计算属性。


图34修改tripple前后的结果

在例35中创建了一个可读可写的计算属性tripple，它的值会保持为num的三倍。单击按钮将tripple的值修改为9，此时num的值也会被一同修改为3。修改前后的结果如图34所示。
【例35】可读可写的计算属性

const tripple = computed({

get: () => data.num * 3,

set: (val) => {

data.num = val / 3;

},

});


在computed中，get是取值函数，set是赋值函数。为计算属性赋值时，会触发set函数，触发set函数后，num的值会被更新。
3.2.3侦听属性
watch函数用来监视指定数据项的变化，从而触发用户自定的操作。watch API完全等同于选项式API this.$watch。watch需要指定侦听的数据源，并在回调函数中执行副作用。默认情况下，回调仅在侦听的数据源发生改变时调用。通过从Vue中导入watch函数来使用侦听属性。
例36给出了使用watch函数侦听reactive类型的num与ref类型的count的例子。watch可以获取新值与更新前的值，当num与count改变时，会执行回调函数，在控制台打印更新前后的值。页面布局与控制台输出结果分别如图35与图36所示。
【例36】侦听num与count并打印变化

//侦听reactive类型的数据源

const data = reactive({

num: 1,

});



watch(

() => data.num,

(newNum, oldNum) => {

console.log("newNum = ", newNum);

console.log("oldNum = ", oldNum);

}

);



//侦听ref对象

const count = ref(0);



watch(count, (newCount, oldCount) => {

console.log("newCount = ", newCount);

console.log("oldCount = ", oldCount);

});



图35页面布局




图36控制台输出结果


侦听器还可以使用数组同时侦听多个源，如例37所示。
【例37】侦听多个数据源

//侦听多个reactive类型

watch(

［() => data.num1, () => data.num2］,

(［newNum1, newNum2］, ［prevNum1, prevNum2］) => {

//Do something

}

);



//侦听多个ref类型

watch(

［count1, count2］,

(［newCount1, newCount2］, ［prevCount1, prevCount2］) => {

//Do something

}

);


3.3vbind属性绑定
除了文本之外，DOM节点还有一些其他重要的属性，这些属性基本都可以用指令vbind进行绑定。
3.3.1vbind指令
vbind指令主要用于动态绑定DOM元素属性，可以将一个或多个attribute，或一个组件prop动态地绑定到表达式，如例38所示。
【例38】vbind示例

<!-- 绑定 attribute -->

<img v-bind:src="imageSrc" />

<!-- 缩写 -->

<img :src="imageSrc" />

<!-- 内联字符串拼接 -->

<img :src="'/path/to/images/' + fileName" />



<!-- 动态 attribute 名 -->

<button v-bind:［key］="value"></button>

<!-- 动态 attribute 名缩写 -->

<button :［key］="value"></button>

3.3.2绑定class、style与prop
vbind在绑定class或style的attribute时，支持其他类型的值，如数组或对象。虽然类名class和样式style可接收的类型都是字符串，但类名实际上是由数组拼接而成的，而样式则是由对象键值对拼接而成的。
在绑定 prop时，prop必须在子组件中声明。可以用修饰符指定不同的绑定类型，如例39所示。
【例39】绑定class、style、prop的attribute

<!-- class 绑定 -->

<div :class="［classA, { classB: isB, classC: isC }］">



<!-- style 绑定 -->

<div :style="{ fontSize: size + 'px' }"></div>

<div :style="［styleObjectA, styleObjectB］"></div>



<!-- prop 绑定。"prop" 必须在 my-component 声明 -->

<my-component :prop="someThing"></my-component>



<!-- 通过 $props 将父组件的 props 一起传给子组件 -->

<child-component v-bind="$props"></child-component>

</div>


其中，类名classB与classC分别依赖于数据isB和isC，当isB和isC为true时，div会拥有类名classB与classC； 反之则没有。另外，可以使用三元表达式来根据条件切换类名。
使用： style时，CSS属性名称使用驼峰命名(camelCase)或短横分隔命名(kebabcase)。Vue会自动给特殊的CSS属性名称增加前缀，比如transform。
3.4vmodel双向绑定
表单控件在项目中十分常用，如输入框、选择等，用它们可以完成数据的录入、提交等操作。通过使用指令vmodel可以完成表单的数据双向绑定。
3.4.1vmodel指令
vmodel指令用于在<input>、<textarea>及<select>等表单控件元素上创建双向绑定，它会根据控件类型自动选取正确的方法来更新元素。在修改表单元素值时，对应的实例中的属性值会被同时更新； 反之，更改实例中的属性值，表单元素值也会被更新。
在例310中，给出了用vmodel绑定<input>、<textarea>及<select>的简单例子，当表单中元素变化时，会更新属性值与视图。元素值更新前后如图37所示。
【例310】用vmodel绑定<input>、<textarea>及<select>

<!--输入-->

<input v-model="message" placeholder="请输入" />

<p>Message is: {{ message }}</p>

<br />



<!--多行文本-->

<textarea v-model="mulMessage" placeholder="请输入" ></textarea>

<br />

<span>Multiline message is:</span>

<p style="white-space: pre-line">{{ mulMessage }}</p>


<br />



<!--选择-->

<select v-model="selected">

<option>A</option>

<option>B</option>

<option>C</option>

</select>

<br />

<span>Selected: {{ selected }}</span>




图37元素值更新前后

需要注意的是，在文本区域<textarea>中插值不起作用，应该使用vmodel来代替。
另外，由于<select>的视图太差，而当前也不允许开发者自定义option的样式，所以一般都会使用其他元素来模拟下拉选择框。
在例310中，vmodel绑定的值是一个字符串或布尔值。当需要绑定一个动态的数据时，可以用vbind来实现。
3.4.2vmodel与修饰符
vmodel的修饰符可以用于控制数据同步的时机。各个修饰符的功能如表31所示。


表31vmodel的修饰符



修 饰 符功能
.lazy将用户输入的数据赋值于变量的时机延迟到数据改变时
.number将用户输入转换为数值类型
.tmn删除用户输入的首尾空白字符

在输入框中，vmodel默认是在每次input事件触发后将输入框的值与数据进行同步。使用修饰符.lazy会转变为在change事件中同步。数据不是实时改变的，而是在失焦或按Enter键时才更新。在例310的<input>中加入.lazy，在输入框内输入时，message不会立刻更新并显示，而是在按Enter键，或是单击页面其他部分时更新message。
使用修饰符.number可以将输入转换为Number类型，默认情况下会将输入当作String类型。
3.4.3双向绑定实例： 制作问卷
学习了使用vmodel进行双向绑定，现在可以制作一份实时显示各个表单控件元素中所填数据的问卷。通过指定<input>中的type，可以实现输入、单选、多选等。
通过问卷采集姓名、性别、编程语言、框架以及备注信息，代码如例311所示，问卷采集前后的效果如图38所示。
【例311】问卷

<template>

<div id="app">

<input v-model.trim="name" placeholder="请输入姓名" class="inText" />

<h6>姓名: {{ name }}</h6>

<br />



<div class="sex">

<h5>选择性别</h5>

<input type="radio" id="男" value="男" v-model="sex" />

<label for="男">男</label>

<input type="radio" id="女" value="女" v-model="sex" />

<label for="女">女</label>

</div>

<h6>性别: {{ sex }}</h6>

<br />



<div class="mulChoice">

<h5>选择语言</h5>

<input type="checkbox" id="HTML" value="HTML" v-model="checkedLang" />

<label for="HTML">HTML</label>

<input type="checkbox" id="CSS" value="CSS" v-model="checkedLang" />

<label for="CSS">CSS</label>

<input

type="checkbox"

id="JavaScript"

value="JavaScript"

v-model="checkedLang"

/>

<label for="JavaScript">JavaScript</label>

</div>

<h6>语言: {{ checkedLang }}</h6>

<br />



<select v-model="selected" class="select">

<option disabled selected value style="display: none">请选择框架</option>

<option>Vue 2.x.x</option>

<option>Vue 3.0.0</option>

</select>

<h6>框架: {{ selected }}</h6>



<textarea

v-model="mulMessage"

placeholder="备注"

class="mulText"

></textarea>

<br />

<h6>备注:</h6>

<p style="white-space: pre-line;margin-top: -20px ">{{ mulMessage }}</p>

<br />

</div>

</template>



<script>

import { reactive, ref, toRefs } from "vue";

export default {

setup() {

const data = reactive({

name: "",

mulMessage: "",

selected: "",

sex: "",

checkedLang: ［］,

});



return {

...toRefs(data),

};

},

};

</script>




图38问卷采集前后的效果





图39在Vue Devtools中查看问卷数据

可以看到，当每次在表单控件中输入信息时，数据会实时地显示在页面中，而不需要对页面进行刷新操作。打开Vue Devtools，可以看到具体的数据内容以及对应的类型，每次对问卷中信息的修改也会直接反映在数据上，如图39所示。


3.5vif/vshow条件渲染
类似于其他程序中的条件语句if、else、else if，Vue的条件指令同样可以根据表达式的值，在DOM中渲染或销毁元素与组件，称为条件渲染。
3.5.1vif、velseif与velse指令
vif指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回真值的时候被渲染。
velseif用于充当vif的“elseif块”，要紧跟vif。当vif中的表达式返回值为假时，开始判断velseif的表达式值，并根据返回值真假进行渲染。velseif可以连续使用。
velse用来表示vif的“else 块”，要紧跟velseif或vif，当velseif与vif的表达式值均为假时，渲染velse中的内容。
在例312中使用了vif、velseif与velse进行条件渲染，当type的值为'A'时，在页面中显示'A'，为'B'时显示'B'，为'C'时显示'C'，其他情况下显示'Not A/B/C'。
【例312】根据type进行条件渲染

<template>

<div id="app">

<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>

</div>

</template>



<script>

import { reactive, toRefs } from "vue";

export default {

setup() {

const data = reactive({

type: 'A',

});



return {

...toRefs(data),

};


},

};

</script>


其中，在进行相等的条件判断时，应该使用===。===是Ecmascript的语言，表示严格等于判断，由于JavaScript中的==有缺陷，因此在绝大多数情况下，都是使用三个等号的形式。
因为vif是一个指令，所以必须将它添加到一个元素上。因此，如果想要一次判断多个元素，可以把一个Vue内置的<template>元素当作不可见的包裹元素，在上面使用vif。最终的渲染结果将不包含<template>元素。如例313所示，Content A、B、C将会由同一个vif指令决定是否渲染。
【例313】在 <template>上使用条件渲染


<template v-if="true">

<h1>Content A</h1>

<h1>Content B</h1>

<h1>Content C</h1>

</template>

3.5.2vshow指令
vshow指令同样可以用于根据条件展示元素，用法与vif基本相同。不同的是带有 vshow的元素始终会被渲染并保留在DOM中，因为vshow只是简单地切换元素CSS属性的display。当条件判定为假时，元素的display将被赋值为none； 反之，元素的display将被设置为原有值。另外，vshow不支持<template>元素，也不支持velse。
3.5.3vif对比vshow指令
vif和vshow指令具有类似的功能，不过vif才是真正的条件渲染，它会根据表达式适当地销毁或重建元素及绑定的事件或子组件。若表达式初始值为false，则元素或组件开始并不会渲染，只有当条件第一次变为真时才开始编译。
而vshow指令只是简单的CSS属性切换，无论条件真与否，都会被编译。元素或组件保留在DOM中。
根据各自的特性不难发现，vif指令更适合条件不经常改变的场景，因为它切换开销相对较大，而vshow指令适用于频繁切换条件。
3.5.4条件渲染实例： 按钮权限控制
在实际的网站开发中，往往会遇到需要对用户进行区分的情况，不同的用户也往往拥有不同的权限或功能。此时，通过条件渲染，可以实现对于不同的用户种类渲染出不同页面的效果。
在例314中，实现了根据用户作为学生、老师、助教不同身份进行不同前端页面显示的效果。代码的运行结果如图310所示。
【例314】根据用户身份显示不同前端页面

<template>

<div id="app">

<h1>User Type:</h1>

<template v-if="user === 'student'">

<h2>{{ user }}</h2>

<br />

<button @click="joinClass">加入课程</button>

</template>

<template v-if="user === 'teacher'">

<h2>{{ user }}</h2>

<br />

<button @click="startClass">开始上课</button>

</template>

<template v-if="user === 'teaching assistant'">

<h2>{{ user }}</h2>

<br />

<button @click="manageStudent">管理学生</button>

</template>

</div>

</template>



<script>

import { reactive, toRefs } from "vue";

export default {

setup() {

const data = reactive({

user: "teacher",

});



const joinClass = () => {

console.log("Request already sent!");

};



const startClass = () => {

console.log("Class begin!");

};



const manageStudent = () => {

console.log("Checking requests!");

};



return {

...toRefs(data),

joinClass,

startClass,

manageStudent,

};

},

};

</script>




图310不同用户身份下的显示与输出


通过修改按钮的方法，可以实现对不同用户进行功能区分的效果。
3.6vfor列表渲染
3.6.1vfor指令

当需要将一个数组遍历或枚举一个对象循环显示时，就会用到列表渲染指令vfor来渲染一个列表。它的表达式需结合in来使用，类似item in items的形式。其中,items是源数据数组，而item则是被迭代的数组元素的别名，也可以用of替代in作为分隔符。
vfor指令也可以像vif一样用在内置标签<template>上渲染多个元素。在自定义组件上同样可以使用vfor指令。但是由于组件有自己独立的作用域，数据不会被自动传递到组件中。此时，需要使用props把迭代数据传递到组件里。


图311列表渲染

在vfor块中，我们可以访问所有父作用域的属性。vfor指令还支持一个可选的第二个参数index，即当前项的索引，索引从0开始计数。具体代码如例315所示，其实现效果如图311所示。
【例315】用vfor指令显示数组中的message元素

<template>

<div id="app">

<li v-for="(item,index) in items">

{{ parentMessage }} - {{ index }} - {{ item.message }}

</li>

</div>

</template>



<script>

import { reactive, toRefs } from "vue";

export default {

setup() {

const data = reactive({

parentMessage: "Parent",

items: ［

{ message: "HTML" },

{ message: "JavaScript" },

{ message: "CSS" },


］,

});



return {

...toRefs(data),

};

},

};

</script>

3.6.2在vfor里使用对象


图312遍历对象属性结果

使用vfor可以遍历一个对象的属性； 也可以设置第二个参数为属性的名称，即键名key； 还可以用第三个参数作为索引index。通过vfor遍历对象的代码如例316所示。对象中存储了一些书籍的属性，通过index、name和value分别获取属性的索引、名称和值，并在视图中显示。遍历对象属性的结果如图312所示。
【例316】用vfor遍历对象属性

<template>

<div id="app">

<li v-for="(value, name, index) in obj">

{{ index }}、{{ name }}: {{ value }}

</li>

</div>

</template>



<script>

import { reactive, toRefs } from "vue";

export default {

setup() {

const data = reactive({

obj: {

title: "v-for in Vue",

author: "SkyGrass",

date: "1993-5-31",

},

});



return {

...toRefs(data),

};

},

};

</script>

3.6.3列表的更新
Vue的核心是数据与视图的双向绑定，当修改数组时，Vue会检测到数据变化，所以用vfor指令渲染的视图也会立即更新。Vue将被侦听数组的变更方法进行了包裹，所以使用它们改变数组会触发视图更新。数组的变更方法如表32所示。


表32数组的变更方法



名称说明

push()将一个或多个元素添加至数组末尾，返回新数组的长度
pop()从数组中删除并返回最后一个元素
shift()从数组中删除并返回第一个元素
unshift()将一个或多个元素添加至数组开头，并返回新数组的长度
splice()从数组中删除元素或向数组添加元素
sort()对数组元素排序，默认按照Unicode编码排序，返回排序后的数组
reverse()将数组中的元素位置颠倒，返回颠倒后的数组

使用表32所示的方法会改变被这些方法调用的原始数组，此外还有一些方法不会改变原数组，如filter()、concat()、slice()，它们返回的是一个新数组。
需要注意的是，当直接使用下标或键名为数组或对象设置成员，以及修改数组长度时，Vue并不会将其加入数据响应式系统，如arr［'index'］='value'、obj ［'key'］='value'或arr.length=1。此时即使数据被修改，视图也不会进行更新。
3.6.4列表渲染的key
在使用vfor指令时，最好为每个迭代元素提供一个值不重复的key，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素。因为，当列表渲染被重新执行(数组内容发生改变)时，如果不使用key，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置被正确渲染。
通过为每项提供一个唯一的key，给 Vue进行提示，Vue就会根据key的变化重新排列节点顺序，并移除key不存在的节点。实质上，key的存在是为DOM节点标注了一个身份信息，让Vue能够有迹可循地追踪到数据对应的节点。
在实战开发中，是否使用key都不会影响功能的实现。建议尽可能在使用vfor指令时提供key，如例317所示。
【例317】指定vfor的key

<div v-for="item in items" :key="item.id">

<!-- content -->

</div>


3.6.5vfor与vif指令共用
在多数情况下，不推荐在同一元素上同时使用vif和vfor指令。但当它们处于同一节点时，vif指令的优先级比vfor指令更高，因此vif指令将没有权限访问vfor指令里的变量，可以通过把vfor指令移动到外层的<template>标签中来实现相同的效果。
3.6.6列表渲染实例： 帖子列表
学习完列表渲染vfor与条件渲染vif，可以尝试制作一个帖子列表。帖子带有收藏功能，被收藏的帖子标题将会以红色显示，并带有收藏与取消收藏按钮。
具体代码如例318所示，代码的运行结果如图313所示。通过修改addStar(item)方法的内容，可以实现不同的收藏状态。在此基础上，也可以引申出置顶、删除帖子等许多方式。
【例318】帖子列表

<template>

<div id="app">

<div v-for="(item, index) in posts" :key="index" class="post">

<h1 v-if="item.isStar === true" style="color: red">

{{ item.title }}

</h1>

<h1 v-if="item.isStar === false">

{{ item.title }}

</h1>

<div class="content">

{{ item.detail }}

</div>

<button class="star" v-if="item.isStar === false" @click="addStar(item)">

收藏

</button>

<button class="star" v-if="item.isStar === true" @click="addStar(item)">

取消收藏

</button>

</div>

</div>

</template>



<script>

import { reactive, toRefs } from "vue";

export default {

setup() {

const data = reactive({

posts: ［

{ title: "HTML", detail: "Something about HTML.", isStar: false },

{

title: "JavaScript",

detail: "Something about JavaScript.",

isStar: true,

},



{ title: "CSS", detail: "Something about CSS.", isStar: false },

］,

});



const addStar = (item) => {

//do something

};



return {

...toRefs(data),


addStar,

};

},

};

</script>




图313帖子列表的显示


3.7von事件绑定
3.7.1von指令

von指令用于监听 DOM事件，并在触发事件时执行一些JavaScript，通常缩写为@符号。直接把JavaScript代码写在von指令中是一种方式。但是许多事件的处理过程十分复杂，因此von还可以接收一个需要调用的方法名称。用法为von:click="methodName" 或使用快捷方式@click="methodName"。
不难发现，事件绑定已经在之前的例子中出现过很多次。按钮的单击事件@click即等同于von:click。除了单击事件，von指令后面还可以接其他HTML的标准事件，如表33所示。


表33部分HTML的标准事件



事件说明
click单击
dblclick双击
contextmenu右击
mouseover指针移到有事件监听的元素或其子元素内
mouseout指针移出元素，或者移到其子元素上
keydown键盘动作： 按下任意键
keyup键盘动作： 释放任意键


3.7.2事件修饰符
Vue为von指令提供了事件修饰符，修饰符是由点开头的指令后缀来表示的。使用多个修饰符时，顺序很重要。常见的事件修饰符见表34。


表34常见的事件修饰符



名称可 用 事 件说明
.stop任意当事件触发时，阻止事件冒泡
.prevent 任意当事件触发时，阻止元素默认行为
.capture任意当事件触发时，阻止事件捕获
.self自身任意限制事件仅作用于节点自身
.once 任意事件被触发一次后即解除监听
.passlve 滚动移动端，限制事件永不调用preventDefault()方法

Vue允许为von或者@在监听键盘事件时添加按键修饰符，用于检查详细的按键。使用方法为@keyup.enter="methodName"。以下是全部的别名： 
(1) .enter； 
(2) .tab； 
(3) .delete(“删除”和“退格”)； 
(4) .esc； 
(5) .space； 
(6) .up； 
(7) .down； 
(8) .left； 
(9) .right。
除了键盘按键之外，Vue 也为鼠标按键配置了修饰符，包括.left、.right与.middle。
当需要按住多键或者鼠标与键盘共用以实现操作时, 可以使用组合修饰符，需要配合系统按键修饰使用，包括.ctrl、.alt、.shift与.meta。在macOS系统键盘上，meta对应command键； 在Windows系统键盘上，meta对应Window键。
3.8指令在Vue 3.x中的变化
3.8.1vif与vfor的key

vif/velse/velseif的各分支项key属性不再是必需的，因为即使没有为条件分支提供key，Vue 3.x也会自动生成唯一的key。因此，不建议在vif/velse/velseif的分支中继续使用key属性。如果主动提供key，那么每个分支必须使用唯一的key。故意使用相同的key也无法强制重用分支。
在Vue 3.x中，<template vfor>的key 应该设置在<template>标签上，而不是设置在它的子节点上。在Vue 2.x中，由于<template>标签不能拥有key，可以为其每个子节点分别设置key。同样，当使用<template vfor>时存在使用vif的子节点，key应改为设置在<template>标签上。
3.8.2vif与vfor的优先级
在Vue 2.x版本中，在一个元素上同时使用vif和vfor时，vfor会优先作用。在Vue 3.x版本中，vif拥有比vfor更高的优先级。
由于语法上存在歧义，建议避免在同一元素上同时使用两者。具体可以参考3.6.1节中提到的方法。
3.8.3vbind合并行为
在元素上动态绑定attribute时，在一个元素中同时使用vbind="object"语法和单独的property是一种常用的做法。这就涉及了合并的优先级的问题。
在Vue 2.x中，如果一个元素同时定义了vbind="object"和一个相同的单独的property，那么这个单独的property总是会覆盖object中的绑定。在Vue 3.x中，声明绑定的顺序决定了它们如何合并，开发者对自己所希望的合并行为有了更好的控制。
如果希望依赖vbind的覆盖功能，建议确保在单独的property之前定义vbind属性。
3.8.4vfor中的ref数组
在Vue 2.x中，vfor里使用的ref attribute会用ref数组填充相应的$refs property。但是，当存在嵌套的vfor时，会变得不明确且效率低下。
在 Vue 3.0 中，将不再在$ref中自动创建数组。要从单个绑定获取多个ref，可以将ref绑定到一个更灵活的函数上，如例319所示。
【例319】ref绑定到函数

<template>

<div id="app">

<div v-for="item in list" :ref="setItemRef"></div>

</div>

</template>





<script>

import { ref, onBeforeUpdate, onUpdated } from 'vue'



export default {

setup() {

let itemRefs = ［］

const setItemRef = el => {

itemRefs.push(el)

}

onBeforeUpdate(() => {

itemRefs = ［］

})

onUpdated(() => {

console.log(itemRefs)

})

return {

itemRefs,

setItemRef

}

}

}

</script> 

值得注意的是，itemRefs不必是数组，它也可以是一个对象，其ref会通过迭代的key被设置。itemRefs也可以是响应式的且被监听。
3.8.5vmodel
在用于自定义组件时，vmodel的prop和事件默认名称已更改。prop从value变更为modelValue，event从inpu变更为update： modelValue。vbind的.sync修饰符和组件的model选项已移除，用vmodel作为代替。可以在同一个组件上使用多个vmodel进行双向绑定。
除了像.trim这样的Vue 2.x硬编码的vmodel修饰符外，Vue 3.0还支持自定义vmodel 修饰符。
迁移时，可以将所有使用.sync的部分替换为vmodel。对于所有不带参数的vmodel，确保分别将prop和event命名更改为modelValue和update:modelValue。
更多关于vmodel与组件的更新将会在第7章进行说明。
3.9本 章 小 结
本章介绍了插值绑定、计算属性、属性绑定、双向绑定、条件渲染、列表渲染、事件绑定以及Vue的内置指令从Vue 2.x到Vue 3.x的变化。
文本插值最基本的方法是使用双大括号(Mustache语法)“{{ }}”，Vue会将大括号里的内容替换为表达式值，以文本的形式将其展示出来。表达式可由JavaScript表达式和过滤器构成。通过任何方法修改数据设定值，大括号的内容都会被实时替换。Vue支持在“{{ }}”插值的尾部添加过滤器，用管道符“|”表示。
计算属性会在其依赖属性的值发生变化时，对属性的值进行自动更新，同时更新相关的DOM部分。通过从Vue中导入computed来使用计算属性。侦听属性watch用来监视指定数据项的变化，从而触发用户自定的操作。默认情况下，回调仅在侦听的数据源发生改变时调用。通过从Vue中导入watch来使用侦听属性。
vbind指令主要用于动态绑定DOM元素属性，可以将一个或多个attribute，或一个组件prop动态地绑定到表达式。
vmodel指令用于在<input>、<textarea>及<select>等表单控件元素上创建双向绑定，它会根据控件类型自动选取正确的方法来更新元素。在修改表单元素值时，对应的实例中的属性值会被同时更新。
Vue根据表达式的值，在DOM中渲染或销毁元素与组件，称为条件渲染。vif指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回真值的时候被渲染。当vif中的表达式返回值为假时，根据velseif表达式值的真假进行渲染。当velseif与vif的表达式值均为假时，渲染velse中的内容。vshow的用法与vif大致相同。因为vshow只是切换元素CSS属性的display，所以vshow的元素始终会被渲染并保留在DOM中。
使用列表渲染指令vfor可以渲染一个列表，用于遍历一个数组或枚举一个对象循环显示。它的表达式需结合in来使用。
von指令用于监听DOM事件，并在触发事件时执行一些JavaScript，通常缩写为@符号。
在指令方面，Vue 3.0的更新集中在vif与vfor的key、vif与vfor的优先级、vbind合并行为、vfor中的ref数组和vmodel。
3.10练习题
一、 填空题
1. vshow与vif的区别在于，无论条件真与否，都会被编译。  
2. 可以在Vue中导入使用侦听属性。 
3. 在使用vfor时，最好为每个迭代元素提供一个值不重复的，以便它能跟踪每个节点的身份。 
4. 在展示数据时，往往需要在不变更或重置原始数据的情况下，显示经过过滤或排序的数组。在这种情况下，可以创建一个属性返回过滤或排序后的数组。 
5. 在Vue 3.x版本中，vif和vfor优先级更高的是。

二、 单选题
1. Vue中格式化文本时应使用（）。
A. 文本插值	 B. 过滤器	C. HTML插值 D. 计算属性
2. vmodel的修饰符中可以删除用户输入的首尾空白字符的是（）。
A.  .lazy		B.  .number		C.  .tmn    D. length
3. HTML的标准事件中，代表“按下任意键”的是（）。
A.  mouseover	B.  keydown		C.  keyup  D.  click
4. 对于值是HTML的片段，可以使用的绑定方法是（）。
A.  {{{}}}	B.  {{}}	C.  {}    D.  ［］
5. 列表更新中从数组中删除元素或向数组添加元素的方法是（）。
A.  push()	B.  shift()	  C.  splice()   D.  pop()
三、 判断题
1. 在进行相等的条件判断时，应该使用==。（）	
2. 使用vfor可以遍历一个对象的属性，可以用第三个参数作为索引key。（）
3. 直接使用下标或键名为数组或对象设置成员，以及修改数组长度时，即使数据被修改，视图也不会进行更新。（）	
4. 当处于同一节点时，vif的优先级比vfor更高。（）
5. 当需要绑定一个动态的数据时，可以用vmodel实现。（）

四、 问答题
1. vif与vfor在同一元素上使用时优先级是怎样的？如何避免这种情况？
2. 在文本插值中，如何实现简单的条件判断？
3. 简要说明如何创建仅可读和可读可写的计算属性。
4. 分别说明几种修饰符如何控制vmodel中数据同步的时机。
5. 列举vif与vshow的异同。
6. 解释vfor中各参数以及key的作用。
7. 列举什么情况下对vfor数组与对象的更新不会导致视图的更新。

五、 动手做
尝试使用vmodel、vif与vfor的知识，制作一个简易贴吧。有普通用户和管理员两种角色，普通用户可以发帖、收藏帖子； 管理员可以发帖、置顶帖子。