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放进去。非常白话，之後有更深理解再来更新。

• Attributes
  • Mustaches不能使用在<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>