三，模板語法

　　Vue將模板編譯成虛擬DOM渲染函數，結合響應系統，在應用狀態改變時，vue能夠智能地計算出重新渲染組件的最小代價并DOM操作上。

　　插值，文本

　　　　數據綁定常見的形式就是使用“Mustache”語法（雙大括號）的文本插值：

　　　　　　<span>Message:{{ msg }}</span>

　　　　通過使用v-once 指令執行一次性的插入值，當數據改變時，插值處的內容不會更新，會影響到該節點上的所有數據綁定。

　　　　　　<span v-once>This will never change: {{msg}}</span>

　　HTML

　　　　雙大括號會將數據解釋為純文本，而非 HTML 。為了輸出真正的 HTML ，你需要使用?v-html?指令：

　　　　屬性

　　　　　　Mustache 不能在HTML 屬性中使用，應使用v-bind 指令

　　　　　　　　<div v-bind:id=“dynamicId”></div>

　　　　　　這對布爾值的屬性也有效 ?如果條件被求職為false 的話該屬性會被移除

　　　　　　　　<button v-bind:disavled=“someDynamicCondittion”></button>

　　　　　　使用JavaScript 表達式

　　　　　　所有的數據綁定， Vue.js 都提供了完全的 JavaScript 表達式支持

　　　　　　　　{{ number 1 }}

　　　　　　　　{{ ok ? 'YES' : 'NO' }}

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

　　　　　　　　<div v-bind:id="'list-' id"></div>

　　　　指令

　　　　指令是帶有v- 前綴的特殊屬性，指令屬性的值預期是單一JavaScript表達式，指令的職責就是當其表達式的值改變時相應地將某些行為應用到DOM 上。

　　　　如 ?<p v-if=”seen”>Now you see me</p>

　　　　If指令將根據表達式 seen 的值的真假來移除/插入<p> 元素

　　　　參數

　　　　一些指令能接受一個參數，在指令號以冒號指明，v-bind 指令被用來響應的更新html屬性。

　　　　　　<a v-bind:href=“url”></a>

　　　　在這里href 是參數,告知v-hind 指令將元素的href 屬性與表達式 url 的值綁定。

　　　　修飾符

　　　　　　修飾符（Modifiers） 是以半句號. 指明的特殊后綴，用于指出一個指定應該以特殊的方式綁定，如 ?.prevent 修飾符告訴v-on 指令對于除非的時間調用 event.preventDefault();

?　　　　　　<form v-on:submit.prevent=“onSubmit”></form>

　　　　過濾器

　　　　　　Vue 允許自定義過濾器，被用作一些常見的文本格式，過濾器應該被添加在mustache 插值的尾部，由管道符指示。

　　　　　　　　{{message | capitalize}}

　　　　　　　　{{message | capitalize}}

　　　　　　　　<div v-bind:id="rawId | formatId"></div>

　　　　過濾器函數總接收表達式的值作為第一個參數

　　　　　　New Vue({

　　　　　　　　　　filters: {

　　　　　　　　　　　　capitalize: function(value) {

　　　　　　　　　　　　　　If (!value) return ‘?’

　　　　　　　　　　　　　　Value = value.toString()

　　　　　　　　　　　　　　return value.charAt(0).toUp

　　　　　　　　　　　　}

　　　　　　　　　　}

　　　　　　})

　　　過濾器可以串聯：

　　　　{{message | filterA | filterB}}

　　過濾器是JavaScript 函數，因此可幾首參數

　　　　{{message | filterA(‘arg1’,’arg2’)}}

　　字符串?'arg1'?將傳給過濾器作為第二個參數，?arg2?表達式的值將被求值然后傳給過濾器作為第三個參數

　　縮寫

　　　　v- 前綴在模板中是作為一個表示vue 特殊屬性的明顯標示，當你使用 Vue.js 為現有的標記添加動態行為時，它會很有用，但對于一些經常使用的指令來說有點繁瑣。

　　v-bind 縮寫

　　　　　　　　完整語法

　　　　　<a v-bind:href=‘url’></a>

　　　　　　　縮寫

　　　　<a :href=“url”></a>

　　　　v-on 縮寫

　　　　　　完整語法

　　　　<a v-on:click=“doSomething”></a>

　　　　　縮寫

　　　　<a @click=“doSomething”</a>

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的VUE 入门基础(3)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。