Interpolations

var app = new Vue({
  el: '#app' ,
  data: {
    msg: '< b>這是被{{msg}}取代的結果< /b>',
  }
})
    

text

{ { msg } }

Message: {{ msg }}

raw html

< p v-html="msg">< /p >

Attributes

< p v-bind:html element attribute="msg">mouse stop here< /p >

mouse stop here

Using JavaScript Expressions

{ { javascript expressions } }

{{ msg + msg }}

{{ msg ? 'YES' : 'NO' }}

{{ msg.split('').reverse().join('') }}

< div  v-bind:attribute="javascript expressions">123456

Directives

< span  v-if="key">現在你看到我了 // if key == true, show it

現在你看到我了

Arguments

和上面一樣

< a v-bind:html element attribute="key">mouse stop here< /a >

abc

< a v-on:js event="function name">mouse stop here< /a >

click me

Modifiers

< form  v-on:submit.prevent="onSubmit">  //取消預設行為

Filters

Filters are usable in two places:

1. mustache interpolations.

   { { } }

2. v-bind expressions.

   < a v-bind:attribute="key"> < /a >

capitalize過濾器函數將會收到message的值作為第一個參數。

{ { key of data | key of filter } }

{{ msg | capitalize }}

< a v-bind:title="url | capitalize"> { { msg | capitalize } }< /a >

{{ msg | capitalize }}

{{ msg | getFirst }}

縮寫

v-bind

< !-- 完整語​​法-- >
< a  v-bind:href = "url" > 
< !-- 縮寫-- >
< a  :href = "url" > 

v-on

< !-- 完整語​​法-- >
< a  v-on:click = "doSomething" >
< !-- 縮寫-- >
< a @ click = "doSomething" >

同場加映

另外試一下的v-for

{{item.text}}