Vue：学习笔记（三）-模板语法

提醒

原帖完整收藏于IT老兵驿站，并会不断更新。

前言

忙了三周，又度过一个丰富的十一，如今腾出手来，继续个人学习和总结。最近找到了Vue的中文网站，可是我不想放弃对英文网站的学习，那样能够更准确地理解原意，能够提升本身的英文水平，因此基于英文网站，对照着中文，这样来学习----人仍是应该有些追求。我发现一个问题，有的章节内容多，有的章节内容少，内容多的，可能一天总结不完，那就可能须要拆成几篇连续的笔记来记录了。

正文

模板语法

Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.

Under the hood, Vue compiles the templates into Virtual DOM render functions. Combined with the reactivity system, Vue is able to intelligently figure out the minimal number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.

If you are familiar with Virtual DOM concepts and prefer the raw power of JavaScript, you can also directly write render functions instead of templates, with optional JSX support.

我对这里的理解是，模板是一种工具，它不须要你去查找元素，进行赋值等处理（传统的方式），而是进行了单向或者双向的绑定，这样你直接操做这个变量，就是在操做DOM中的那个元素（虚拟DOM树的概念），另外，模板会在合适的时候，进行渲染，这样减小由于频繁的渲染页面的抖动。

插值（Interpolations）

最先接触这个概念是在对AngularJS的学习中，应该是AngularJS最先引入了这个概念。

文本

<span>Message: {{ msg }}</span>
双大括号的语法，里面是插值的变量名，变量发生改变，这里也会同时发生改变。

<span v-once>这个将不会改变: {{ msg }}</span>
使用 v-once 指令，执行一次性地插值。

原始HTML

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

双大括号里面包含的内容，会以纯文本的形式显示出来，不会交由浏览器去解释。
而想要浏览器去解释这些内容，则须要使用v-html，例如上例。
rawHtml的内容实际上是<span style="color: red">This should be red.</span>，则上例的实际显示以下（这个例子原帖讲的有一点不清楚）：

Using mustaches: <span style="color: red">This should be red.</span>

Using v-html directive: This should be red.（这里应该是红色，为了让这里显示红色，我还研究了一下MD语法，参考这里）

不过通常不建议这么用，由于这样就太容易给XSS（跨站攻击，互联网最多见的一种攻击形式，未来有机会也会总结一下）攻击创造机会。

特性（attribute）

这一节其实应该叫属性，不过多是为了和property区别，这里刻意翻译成了特性，实际上是指HTML里面元素的属性，关于HTML元素的名、值、属性的关系能够参考早年写的一篇帖子，那篇讲的是XML，HTML其实一种特殊化的XML，原理是同样的。由于习惯了，如下我仍是称呼这个为属性。

属性无法使用Mustache语法，因此就须要有新的指令（directive），指令也应该是AngularJS引入的一个概念，实际上是能够被Vue解释的一些固定的字符串，能够接收参数，具备必定的功能。

<div v-bind:id="dynamicId"></div>

这样id属性就和dynamicId绑定起来了。

不过，对于disabled属性，有点区别，只有当它为true的时候才会被渲染。

使用 JavaScript 表达式

Vue支持单个表达式的绑定，以下：

{{ number + 1 }}
{{ ok ? ‘YES’ : ‘NO’ }}
{{ message.split(’’).reverse().join(’’) }}

可是不支持：

{{ var a = 1 }}
{{ if (ok) { return message } }}

有几点很关键：

这些表达式会在所属 Vue 实例的数据做用域下做为 JavaScript 被解析。有个限制就是，每一个绑定都只能包含单个表达式，因此下面的例子都不会生效。

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

指令

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外状况，稍后咱们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地做用于 DOM。

指令能够理解成为一些已经有固化逻辑的函数，它把DOM树和用户的变量关联起来。

参数

<a v-bind:href="url">...</a>
<a v-on:click="doSomething">...</a>
上面这两个指令是带有参数的，分别是href和click。

<p v-if="seen">如今你看到我了</p>
上面这个指令是不带参数的。

修饰符

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

这个地方有点含糊，这里涉及到了Web API里面的event，这个地方的意思应该是对于submit事件，绑定onSubmit这个方法，而且调用event.preventDefault()，组织默认的行为发生。

缩写

v-bind的缩写：

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

<!-- 缩写 -->
<a :href="url">...</a>

v-on的缩写：

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

<!-- 缩写 -->
<a @click="doSomething">...</a>

总结

读了原帖大概两遍，阅读、理解加上写笔记，一共花费了大概三个小时，感受再写下去，耐心就会下降，质量就会下降，会有一些应付的情绪，只好先告一段落，这个部分的内容分为两篇文章了。

今天感受，剩余的内容也不是不少了，仍是合为一篇笔记比较合理，便于未来复习。

参考

https://vuejs.org/v2/guide/syntax.html
https://cn.vuejs.org/v2/guide/components.html
https://blog.csdn.net/liuhw4598/article/details/78279737
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onsubmit
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault