Vue.js 学习笔记二：Vue 基本使用之常用模板语法

目录

常用模板语法

插值操作

指令操作

缩写（语法糖）

---

常用模板语法

Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

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

如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。

数据绑定在 Vue 里有最基础的几种方式：

语法	说明
插值语法{{}}	文本插值，可配合过 Javascript 表达式和过滤器使用
v-once	一次性插值，数据改变时插值处的内容不会更新
v-html	可输出真正的 HTML，不会被转义为普通文本
v-bind:（简写:）	可用于绑定 DOM 属性、或一个组件 prop 到表达式

 

插值操作

Mustache

数据绑定最常见的形式就是使用 Mustache 语法 (双大括号) 的文本插值，并且数据是响应式的：

<div id="app"><p>{{ msg }}</p></div>

v-once

但是，在某些情况下，我们可能不希望界面随意的跟随改变，这个时候，我们就可以使用一个 Vue 的 v-once 指令：

<div id="app"><p v-once>{{ msg }}</p></div>

该指令后面不需要跟任何表达式。该指令表示元素和组件（组件后面才会学习）只渲染一次，不会随着数据的改变而改变。

v-html

某些情况下，我们从服务器请求到的数据本身就是一个 HTML 代码，如果我们直接通过 {{ }} 来输出，会将 HTML 代码也一起输出。但是我们可能希望的是按照 HTML 格式进行解析，并且显示对应的内容。如果我们希望解析出 HTML 展示，可以使用 v-html 指令：

        <div id="app">
			<p>{{ html }}</p>
			<p v-html="html"></p>
		</div>
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data:{html:'<p style="color:red;">hello vue</p>'}
			})
		</script>

该指令后面往往会跟上一个 string 类型，会将 string 的 html 解析出来并且进行渲染。你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。

注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

v-text

v-text 作用和 Mustache 比较相似，都是用于将数据显示在界面中。v-text 通常情况下，接受一个 string 类型：

<div id="app"><p v-text="msg"></p></div>

一般不用，不够灵活。

v-pre

v-pre 用于跳过这个元素和它子元素的编译过程，用于显示原本的 Mustache 语法:

<div id="app"><p>{{ msg }}</p></div>
<div id="app"><p v-pre>{{ msg }}</p></div>

第一个 p 元素中的内容会被编译解析出来对应的内容，第二个 p 元素中会直接显示 {{ msg }}。

v-cloak

cloak 为斗篷的意思，顾名思义，cloak 会将一些东西遮住，在某些情况下，我们浏览器可能会直接显然出未编译的Mustache 标签：

		<style>
		  [v-cloak] {
		    display: none;
		  }  
		</style>
		div id="app">
			<p v-cloak>{{ msg }}</p>
		</div>
		<script type="text/javascript">
			setTimeout(function () {
				const app = new Vue({
					el:'#app',
					data:{msg:'hello vue'}
				})			
			}, 1000)
		</script>

当给一个元素加上 v-cloak 时，Vue 解析这个语句前 v-cloak 存在，但是解析了这个语句之后，v-cloak 就会自动消失。所以就可以指定 v-cloak 未消失时的显示样式 style 和解析之后 v-cloak 消失后的显示样式。

v-bind

v-bind 用于绑定一个或多个属性值，或者向另一个组件传递 props 值(这个学到组件时再介绍)。在开发中，有哪些属性需要动态进行绑定呢？还是有很多的，比如图片的链接 src、网站的链接 href、动态绑定一些类、样式等等。

		<div id="app">
			<div v-bind:id="dynamicId"></div>
			<img v-bind:src="imgsrc" />
			<a v-bind:href="ahref">百度一下</a>
			<button v-bind:disabled="isNext">下一步</button>
		</div>

对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，如果 isNext 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中。

Javascript 表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的 property 键值。但实际上，对于所有的数据绑定，Vue 都提供了完全的 JavaScript 表达式支持：

		<div id="app">
			<p>{{ number + 1 }}</p>
			<p>{{ ok ? 'YES' : 'NO' }}</p>
			<p>{{ msg.split('').reverse().join('') }}</p>
		</div>
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data:{number:1,
				ok:true,
				msg:'vue',
				}
			})
		</script>

注意：模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。

 

指令操作

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，后面学习)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

v-on

在前端开发中，我们需要经常和用于交互。这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等，在 Vue 中如何监听事件呢？使用 v-on 指令：

        <div id="app">
           <button v-on:click="count++">点击了{{ count }}次</button>			
        </div>
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data:{
					count:0
				}
			})
		</script>

另外，我们可以将事件指向一个在 methods 中定义的函数：

		<div id="app">
			<!-- <button v-on:click="count++">点击了{{ count }}次</button> -->
			 <button v-on:click="clickCount">点击了{{ count }}次</button> 
		</div>
		<script type="text/javascript">
			const app =new Vue({
				el:'#app',
				data:{
					count:0
				},
				
				methods: {
					clickCount:function() {
						this.count++
					}
				}
			})
		</script>

v-if、v-else-if、v-else

这三个指令与 JavaScript 的条件语句if、else、else if 类似。Vue 的条件指令可以根据表达式的值在 DOM 中渲染或销毁元素或组件：

		<div id="app">
			<p v-if="score >= 90">优秀</p>
			<p v-else-if="score >= 80">良好</p>
			<p v-else-if="score >= 60">及格</p>
			<p v-else>不及格</p>
		</div>
		<script type="text/javascript">
			const app =new Vue({
				el:'#app',
				data:{
					score:85
				}
			})
		</script>

v-if 后面的条件为 false 时，对应的元素以及其子元素不会渲染。也就是根本没有不会有对应的标签出现在 DOM 中。

修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="submitForm">...</form>

 

缩写（语法糖）

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="ahref">百度一下</a>

<!-- 缩写 -->
<a :href="ahref">百度一下</a>

v-on 缩写

<!-- 完整语法 -->
<button v-on:click="count++">点击了{{ count }}次</button>

<!-- 缩写 -->
<button @click="count++">点击了{{ count }}次</button>

它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于 attribute 名来说都是合法字符，在所有支持 Vue 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥有它们。

Function 缩写

                <!-- 完整语法 -->
				methods: {
					clickCount:function() {
						this.count++
					}
				}

				<!-- 缩写 -->
				methods: {
					clickCount() {
						this.count++
					}
				}