后端前行Vue之路(二)：模版语法之插值与指令

1.概述

Vue.js的模板语法是一种将Vue实例的数据绑定到HTML文档的方法。Vue的模板语法是一种基于HTML的扩展，允许开发者将Vue实例中的数据绑定到HTML元素，以及在HTML中使用一些简单的逻辑和指令。Vue.js 基于 HTML 的模板语法允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

Vue的模板语法大体上分为两类：插值语法和指令语法。接下来我们我就分别来看看这两种语法是如何使用的。

2.插值语法

插值： 使用双大括号 {{ }} 将数据插入到HTML中。即{{xxx}}，xxx是JS表达式，且可以直接读取到data中的所有属性。插入语法用于解析标签体内容。

<span>{{ number }}</span>

什么是JS表达式？

一个表达式会产生一个值，可以放在任何一个需要值的地方：

{{number}}

{{ number + 1 }}

{{method(1)}}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。但是下面的语句就不是表达式，而是语句了：

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

下面我们就来看看上面表达式的示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>模板语法</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>插值语法示例如下：</h2>
			<h3>number = {{number}}</h3>
			<h3>number加1 = {{number+1}}</h3>
			<h3>方法计算 = {{add(5)}}</h3>
			<h3>三目运算：{{number > 6 ? "哈哈" : "呵呵"}}</h3>
			<h3>字符串反转操作：{{ message.split('').reverse().join('') }}</h3>
			
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				number: 10,
				message: "hello world"
			},
			methods:{
				add(i) {
					return this.number+i
				}
			}
		})
	</script>
</html>

浏览器运行结果如下：

项目推荐：基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba企业级系统架构底层框架封装，解决业务开发时常见的非功能性需求，防止重复造轮子，方便业务快速开发和企业技术栈框架统一管理。引入组件化的思想实现高内聚低耦合并且高度可配置化，做到可插拔。严格控制包依赖和统一版本管理，做到最少化依赖。注重代码规范和注释，非常适合个人学习和企业使用

Github地址：https://github.com/plasticene/plasticene-boot-starter-parent

Gitee地址：https://gitee.com/plasticene3/plasticene-boot-starter-parent

微信公众号：Shepherd进阶笔记

交流探讨qun：Shepherd_126

3.指令语法

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，后续我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。指令语法用于解析标签（包括：标签属性、标签体内容、绑定事件…）

v-bind：动态绑定HTML属性，数据只能从data流向页面，即单向绑定。

<a v-bind:href="url">...</a>

v-model：数据不仅能从data流向页面，还可以从页面流向data。即双向绑定。

<input type="text" v-model:value="name">

在浏览器运行，单向输入框输入数据下面输入框不会跟着变，但是输入双向输入框上面的输入框会跟着变，这说明双向绑定v-model一般都应用在表单类元素上（如：input、select等），单向绑定v-bind用于表单没有意义。

	<!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
	<h2 v-model:x="name">你好啊</h2>

v-on：监听DOM事件。

<button v-on:click="handleClick">Click me</button>

Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

<!-- v-bind完整语法 -->
<a v-bind:href="url">...</a>
<!-- v-bind缩写 -->
<a :href="url">...</a>

<!-- v-on完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- v-on缩写 -->
<a @click="doSomething">...</a>

Vue中的事件修饰符：

1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

		<!-- 阻止默认事件（常用） -->
			<a href="http://www.baidu.com" @click.prevent="say">点我提示信息</a>

			<!-- 阻止事件冒泡（常用） -->
			<div class="demo1" @click="showInfo">
				<button @click.stop="showInfo">点我提示信息</button>
				<!-- 修饰符可以连续写 -->
				<!-- <a href="http://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
			</div>

			<!-- 事件只触发一次（常用） -->
			<button @click.once="showInfo">点我提示信息</button>

指令语法综合示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>模板语法</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<a :href="address"> 测试v-bind绑定标签属性</a>
			<hr>
			v-model双向数据绑定：<input type="text" v-model="name"> 
			&nbsp <span>name={{name}}</span><br/>
			<hr>
			v-on事件测试 <button @click="say">点我</button>
			<hr>
			<span>测试事件修饰符</span><br>
			<!-- 阻止默认事件（常用） -->
			<a href="https://www.baidu.com" @click.prevent="say" style="margin-top: 12px;">点我提示信息</a>
			<!-- 阻止事件冒泡（常用） -->
			<div style="margin-top: 8px;" @click="say">
				<button @click.stop="say">点我提示信息</button>
				<!-- 修饰符可以连续写 -->
				<!-- <a href="http://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
			</div>
			<!-- 事件只触发一次（常用） -->
			<button @click.once="say" style="margin-top: 8px;">点我提示信息</button>
			<hr>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:"",
				address:"https://www.baidu.com"
			},
			methods:{
				say(){
					alert("你好呀")
				}
			}
		})
	</script>
</html>

4.动态参数

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

<!--
注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。
-->
<a v-bind:[attributeName]="url"> ... </a>

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data property attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。

同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：

<a v-on:[eventName]="doSomething"> ... </a>

在这个示例中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。

对动态参数的值的约束

动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

对动态参数表达式的约束

动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。例如：

<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。

在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：

<!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
-->
<a v-bind:[someAttr]="value"> ... </a>