后端前行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地址：github.com/plasticene/…
Gitee地址：gitee.com/plasticene3…
微信公众号：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">
  <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>