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 >This should be red.</span>，则上例的实际显示如下（这个例子原帖讲的有一点不清楚）：
Using mustaches: <span >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:></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