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>#jsnew 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

Vue入門筆記#資料繫結文法