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>