vue模板語法篇

插值

154648858215Q4G648Pl8582.png

在vue項目中，要動態(tài)的顯示某個值你只需要使用雙大括號{{}},當vue監(jiān)測到值發(fā)生改變，自動會更新視圖。

<span>消息： {{ message }}</span>

注意：雙大括號不能作用在html元素上，此時你應該用指令。
雙大括號的常用場景：**javascript 表達式 **

• 什么是javascript表達式？
  是由運算元和運算符(可選)構成，并產(chǎn)生運算結果的語法結構。表達式分為單值表達式、復合表達式。
  單值表達式 又分為 基本表達式 和 復雜表達式
  基本表達式：

• this、null、arguments等內置的關鍵字
• 變量。即一個已聲明的標識符
• 字面量。僅包括數(shù)字字面量、布爾值字面量、字符串字面量、正則字面量
• 分組表達式，即用來表示立刻進行計算的.
  這種表達式是原子表達式，是無法再分解的表達式。
  復雜表達式
  包括對象表達式、函數(shù)表達式。
  復合表達式：由運算符將多個單值表達式結合而成的表達式
  ** 不管是單值還是復合表達式，都有返回值 **

{{ number + 1 }}
{{ visible ? '可見': '不可見' }}
{{ word.toUpperCase() }}

以上都是合法的, {{ const a = 1 }}這是個語句，會報錯。且也不允許在大括號中寫流程控制等邏輯復雜的代碼。向這種可以放在computed 或者 methods 中處理

指令

指令是帶有 v- 前綴的特殊特性。
運用vue指令可以很方便的控制某個元素的顯隱，以及對列表的遍歷。以及可以給html元素或者自定義組件綁定屬性。
常用的指令有：

• v-if <div v-if="name == 'kevin'">my name is kevin</div>
• v-else-if <div v-else-if="name == 'peter'">my name is peter</div>
• v-else <div v-else>my name is reo</div>
• v-show 同v-if，但與v-if不同的是，v-show是通過控制visibility:visible/hidden控制顯隱，dom生成后不會重新渲染，而v-if則是通過display:block/none控制顯隱dom會重新渲染。
• v-for

<div v-for="(item, index)" in items :key="index"></div>

• v-bind
  動態(tài)地綁定一個或多個特性，或一個組件 prop 到表達式。
  在綁定 class 或 style 特性時，支持其它類型的值，如數(shù)組或對象。可以通過下面的教程鏈接查看詳情。
  在綁定 prop 時，prop 必須在子組件中聲明。可以用修飾符指定不同的綁定類型。
  沒有參數(shù)時，可以綁定到一個包含鍵值對的對象。注意此時 class 和 style 綁定不支持數(shù)組和對象。

<!-- 綁定一個屬性 -->
<img v-bind:src="imageSrc">

<!-- 動態(tài)特性名 (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- 縮寫 -->
<img :src="imageSrc">

<!-- 動態(tài)特性名縮寫 (2.6.0+) -->
<button :[key]="value"></button>

<!-- 內聯(lián)字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

<!-- class 綁定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 綁定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 綁定一個有屬性的對象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通過 prop 修飾符綁定 DOM 屬性 -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 綁定?！皃rop”必須在 my-component 中聲明。-->
<my-component :prop="someThing"></my-component>

<!-- 通過 $props 將父組件的 props 一起傳給子組件 -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

• v-on 綁定事件監(jiān)聽器。事件類型由參數(shù)指定。表達式可以是一個方法的名字或一個內聯(lián)語句，如果沒有修飾符也可以省略。
  用在普通元素上時，只能監(jiān)聽原生 DOM 事件。用在自定義元素組件上時，也可以監(jiān)聽子組件觸發(fā)的自定義事件。
  ** 修飾符 **
• .stop - 調用 event.stopPropagation()。
• .prevent - 調用 event.preventDefault()。
• .capture - 添加事件偵聽器時使用 capture 模式。
• .self - 只當事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調。
• .{keyCode | keyAlias} - 只當事件是從特定鍵觸發(fā)時才觸發(fā)回調。
• .native - 監(jiān)聽組件根元素的原生事件。
• .once - 只觸發(fā)一次回調。
• .left - (2.2.0) 只當點擊鼠標左鍵時觸發(fā)。
• .right - (2.2.0) 只當點擊鼠標右鍵時觸發(fā)。
• .middle - (2.2.0) 只當點擊鼠標中鍵時觸發(fā)。
• .passive - (2.3.0) 以 { passive: true } 模式添加偵聽器
  在監(jiān)聽原生 DOM 事件時，方法以事件為唯一的參數(shù)。如果使用內聯(lián)語句，語句可以訪問一個 event)"

<!-- 方法處理器 -->
<button v-on:click="doThis"></button>

<!-- 動態(tài)事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 內聯(lián)語句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 縮寫 -->
<button @click="doThis"></button>

<!-- 動態(tài)事件縮寫 (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默認行為 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默認行為，沒有表達式 -->
<form @submit.prevent></form>

<!--  串聯(lián)修飾符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 鍵修飾符，鍵別名 -->
<input @keyup.enter="onEnter">

<!-- 鍵修飾符，鍵代碼 -->
<input @keyup.13="onEnter">

<!-- 點擊回調只會觸發(fā)一次 -->
<button v-on:click.once="doThis"></button>

<!-- 對象語法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

• v-text 顯示文本內容 和 雙大括號一樣的功能
• v-html 可以直接解析html
• v-model 數(shù)據(jù)雙向綁定 其實是語法糖 ,以后對雙向數(shù)據(jù)綁定單獨一個專題詳細講解。

<input v-model="text"/> 
//等價于
<input :value="text" @input="v=>text = v"/>

模板語法篇就講到這里，歡迎大家批評指正。

th.jpg