Vue入門筆記#數據綁定語法

#數據綁定語法#

#文本：

數據綁定的基礎表型形式，使用「Mustache」語法（雙大括號）（特地查了一下Mustache同「moustache」釋義爲：髭；上脣的鬍子，小鬍子，最起碼我以爲挺形象的）

實例：https://jsfiddle.net/miloer/035ase08/

#html
<div id="app">
<input type="text" v-model="message">
<div>沒星星的： {{ message }}</div>
<div>來自猩猩的你：{{*message}}</div>
</div>
#js
new Vue({
    el: '#app',
    data: {
        message: 'Hello World!'
    }
})

前面有「+」了*的就是原始的數據了，從此的數據變化就不會再次引發更新了。

#JavaScript 表達式

綁定的數據支持Javascript表達式 ：

{{ name+ 」 hi」}}
{{ message.split(」).reverse().join(」) }}

https://jsfiddle.net/miloer/035ase08/4/

#過濾器

{{msg||capitalize }}

過濾器能夠串聯
{{ message | filterA | filterB }}

過濾器也能夠接受參數

{{ message | filterA ‘arg1’ arg2 }}

 

#指令

指令 (Directives) 是特殊的帶有前綴 v- 的特性。指令的值限定爲綁定表達式，它的職責就是當其表達式的值改變時把某些特殊的行爲應用到 DOM 上。
<p v-if=「end」>Hello!</p>
//當end爲真時，就顯示Hello

#修飾符

修飾符 (Modifiers) 是以半角句號 . 開始的特殊後綴，用於表示指令應當以特殊方式綁定。例如 .literal 修飾符告訴指令將它的值解析爲一個字面字符串而不是一個表達式<a v-bind:href.literal=「/a/b/c」></a>

#縮寫

<a v-bind:href="url"></a> => <a :href="url"></a> 

<a v-on:click="doSomething"></a> => <a @click="doSomething"></a>

v-model

• 類型： 隨表單控件類型不一樣而不一樣。
• 限制：
  • <input>
  • <select>
  • <textarea>
• Param Attributes:用法：在表單控件上建立雙向綁定。
  • lazy
  • number
  • debounce
• 另見： 表單控件綁定

v-if

• 類型： *
• 用法：根據表達式的值的真假條件渲染元素。在切換時元素及它的數據綁定 / 組件被銷燬並重建。若是元素是 <template>，將提出它的內容做爲條件塊。
• 另見： 條件渲染

v-bind

• 縮寫： :
• 類型： * (with argument) | Object (without argument)
• 參數： attrOrProp (optional)
• 修飾符：用法：動態地綁定一個或多個 attribute，或一個組件 prop 到表達式。在綁定 class 或 style 時，支持其它類型的值，如數組或對象。在綁定 prop 時，prop 必須在子組件中聲明。能夠用修飾符指定不一樣的綁定類型。沒有參數時，能夠綁定到一個對象。注意此時 class 和 style 綁定不支持數組和對象。
  • .sync – 雙向綁定，只能用於 prop 綁定。
  • .once – 單次綁定，只能用於 prop 綁定。
  • .camel – 將綁定的特性名字轉回駝峯命名。只能用於普通 HTML 特性的綁定，一般用於綁定用駝峯命名的 SVG 特性，好比 viewBox。
• 另見：
  • Class 和 Style 綁定
  • 組件 Props

v-on

• 縮寫： @
• 類型： Function | Inline Statement
• 參數： event (required)
• 修飾符：用法：綁定事件監聽器。事件類型由參數指定。表達式能夠是一個方法的名字或一個內聯語句，若是沒有修飾符也能夠省略。用在普通元素上時，只能監聽原生 DOM 事件。用在自定義元素組件上時，也能夠監聽子組件觸發的自定義事件。在監聽原生 DOM 事件時，方法以事件爲惟一的參數。若是使用內聯語句，語句能夠訪問一個 $event 屬性： v-on:click="handle('ok', $event)"。1.0.11+ 在監聽自定義事件時，內聯語句能夠訪問一個 $arguments 屬性，它是一個數組，包含傳給子組件的 $emit 回調的參數。
  • .stop – 調用 event.stopPropagation()。
  • .prevent – 調用 event.preventDefault()。
  • .capture – 添加事件偵聽器時使用 capture 模式。
  • .self – 只當事件是從偵聽器綁定的元素自己觸發時才觸發回調。
  • .{keyCode | keyAlias} – 只在指定按鍵上觸發回調。

• 示例：
  

  <!-- 方法處理器 --> <button v-on:click="doThis"></button> <!-- 內聯語句 --> <button v-on:click="doThat('hello', $event)"></button> <!-- 縮寫 --> <button @click="doThis"></button> <!-- 中止冒泡 --> <button @click.stop="doThis"></button> <!-- 阻止默認行爲 --> <button @click.prevent="doThis"></button> <!-- 阻止默認行爲，沒有表達式 --> <form @submit.prevent></form> <!-- 串聯修飾符 --> <button @click.stop.prevent="doThis"></button> <!-- 鍵修飾符，鍵別名 --> <input @keyup.enter="onEnter"> <!-- 鍵修飾符，鍵代碼 --> <input @keyup.13="onEnter">

  在子組件上監聽自定義事件（當子組件觸發 「my-event」 時將調用事件處理器）：

  <my-component @my-event="handleThis"></my-component> <!-- 內聯語句 --> <my-component @my-event="handleThis(123, $arguments)"></my-component>

再放一個剛學Vue的小例子：https://coding.net/u/Miloer/p/weui_vue/git

參考：http://vuejs.org.cn/guide/

原文：http://www.cnblogs.com/moustache/p/5441928.html