Template Syntax

Vue.js 最主要是基于HTML，在使用JQuery或者Js的时候DOM应该不陌生。
在Vue里最主要使用的是viturl DOM来做HTML渲染。文章里面有提到，Vue可以用最少次数找到最重要的渲染，这过程还没真正的去研究，需要找时间来做一次的研究。

如何使用

Text基本用法就是用{{ }} 把需要带入替换的，下面的例子就是会把msg替换掉
<span>Message: {{ msg }}</span>
里面比较特别的是 v-once 这东西跟freeze感觉有点像，但又不太一样，这也是可以研究的一篇。Raw HTML

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

Raw Html可以直接把Html tag放进去。非常白话，之后有更深理解再来更新。

AttributesMustaches不能使用在<span id="{{msg}}"></span> 这做法是不被允许的。
这时候Vue为了解决这个问题，提供了v-bind
<div v-bind:id="dynamicId"></div> 这个例子我也不知道怎么解释，回头再来看看。
另一种使用方式
<button v-bind:disabled="isButtonDisabled">Button</button>
如果isButtonDisabled 是以下这几种属性null, undefined, or false,button就不会进行渲染。Using Javascript Expressions
写法不一样，在vue里面js的做法，也必须使用单一表达式。

{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}<div v-bind:id="'list-' + id"></div>

这边写法就不行了。

<!-- this is a statement, not an expression: -->{{ var a = 1 }}<!-- flow control won't work either, use ternary expressions -->{{ if (ok) { return message } }}

Directives
Vue里面，所有指令都需要一个前缀词v-,ex v-if,v-for
ex
<p v-if="seen">Now you see me</p>
v-if 会去判断这个要不要显示出来，对其他的HTML tag也是以此类推。Arguments

  <a v-bind:href="url"> ... </a>  <a v-on:click="doSomething"> ... </a>  v-on:click可以用来监听

Dynamic Arguments
在v-bind里面不能使用组字串的方式

<!-- This will trigger a compiler warning. --><a v-bind:['foo' + bar]="value"> ... </a>

可以在外面把字串组好再放进v-bind，someAttr必须要在instance

<!--This will be converted to v-bind:[someattr] in in-DOM templates.Unless you have a "someattr" property in your instance, your code won't work.--><a v-bind:[someAttr]="value"> ... </a>

Modifiers
修饰词 .prevent 告诉v-on呼叫 **event.preventDefault()**并

Shorthands

v-bind可以简写为

<!-- full syntax --><a v-bind:href="url"> ... </a><!-- shorthand --><a :href="url"> ... </a><!-- shorthand with dynamic argument (2.6.0+) --><a :[key]="url"> ... </a>

v-on可以简写为

<!-- full syntax --><a v-on:click="doSomething"> ... </a><!-- shorthand --><a @click="doSomething"> ... </a><!-- shorthand with dynamic argument (2.6.0+) --><a @[event]="doSomething"> ... </a>