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

忙了三周，又度过一个丰富的十一，现在腾出手来，继续我的学习和总结。最近找到了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 v-once>这个将不会改变: {{ msg }}</span>`
使用 `v-once` 指令，执行一次性地插值。

### 原始HTML

Using mustaches:

Using v-html directive:

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

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

Using v-html directive: <span><font color="red">This should be red.</font></span>（这里应该是红色，为了让这里显示红色，我还研究了一下MD语法，参考[这里](https://blog.csdn.net/liuhw4598/article/details/78279737)）

不过一般不建议这么用，因为这样就太容易给[XSS](https://en.wikipedia.org/wiki/Cross-site_scripting)（跨站攻击，互联网最常见的一种攻击形式，将来有机会也会总结一下）攻击创造机会。

### 特性（attribute）
这一节其实应该叫属性，不过可能是为了和property区别，这里刻意翻译成了特性，其实是指HTML里面元素的属性，关于HTML元素的名、值、属性的关系可以参考早年写的一篇[帖子](https://blog.csdn.net/chaiyu2002/article/details/5967186)，那篇讲的是XML，HTML其实一种特殊化的XML，原理是一样的。因为习惯了，以下我还是称呼这个为属性。

属性没法使用Mustache语法，所以就需要有新的指令（directive），指令也应该是AngularJS引入的一个概念，其实是可以被Vue解释的一些固定的字符串，可以接收参数，具有一定的功能。

绑定起来了。

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