全部章節 >>>>
文章目錄
- 一、Vue模闆文法
-
- 1、插值
- 2、表達式
- 3、指令概述
- 4、實踐練習
- 二、Vue綁定類樣式和内聯樣式
-
- 1、Vue綁定類樣式
- 2、Vue綁定内聯樣式
- 3、實踐練習
- 三、條件渲染指令
-
- 1、v-if和v-else
- 2、v-show
- 四、事件綁定
-
- 1、v-on指令
- 2、事件修飾符
- 3、Vue事件綁定的優點
- 總結：
文本插值是最基本的形式，使用雙大括号(Mustache文法) {{}}，代碼如下所示：
<span>Text:{{ text }} </span>
有時候隻需渲染一次資料，後續資料變化不再關心，可以通過v-once指令來實作，代碼如下所示：
<span v-once>Text:{{ text}}</span>
文本插值還可以使用v-text指令來代替雙大括号标簽，代碼如下所示：
<span v-text= "text"></span>
示例：
<!-- html代碼：-->
<div id="app">
<p>{{ userName }}</p>
<p v-once>{{ userName }}</p>
<p v-text="userName"></span>
<p v-html="userName"></p>
</div>
// JavaScript代碼
var vm = new Vue({
el: "#app",
data: {
userName: "<h1>歡迎您，管理者！</h1>"
}
});
- 文本插值也接受表達式形式的值，表達式可由JavaScript表達式和過濾器構成，其中過濾器可以沒有，也可以有多個。
- 表達式是各種數值、變量和運算符的綜合體。簡單的表達式可以是常量或者變量名稱。
- 表達式的值是其運算結果，如下
示例代碼所示：
<!-- html代碼 -->
<div id="app">
<p></p>{{ number+1 }}</p>
<p>{{ ok? "Yes":"No" }}</p>
<p>{{ message.split("").reverse().join("") }}</p>
<div v-text="'list-'+id"></div>
</div>
// JavaScript代碼
var vm = new Vue({
el: "#app",
data: {
number: 1,
ok: true,
message: "Hello world",
id: "01"
}
});
Vue隻支援單個表達式，不支援和語句
。另外，在表達式中，不能使用使用者自定義的全局變量，隻能使用JavaScript的全局變量，例如流控制
Math
。以下是無效的表達式代碼：Date
<!--這是語句，不是表達式-->
{{ var book ="JavaScript權威指南" }}//無效表達式
<!--不能使用流控制，要使用三元條件運算符-->
{{ if(ok) return msg }}//無效表達式
- 指令（Directives）是Vue.js中一個重要的特性，主要提供了一種機制将資料的變化映射為
DOM行為
- 指令（Directives）是帶有v-字首的特殊屬性。指令屬性的值預期是單一
JavaScript表達式
<p v-if="seen">現在可以看到的内容</p>
var vm=new Vue({
el:”#app”,
data:{
seen:true
}
});
v-if指令将根據表達式seen的值的真假來移除/插入< p >元素
一些指令能接受一個“參數”，在指令後以冒号指明。例如，v-bind指令被用來響應地更新HTML屬性，
代碼如下所示：
<a v-bind:href="url"></a>
href是參數，告知v-bind指令将該元素的href屬性與表達式url的值綁定。
v-on指令，它用于監聽DOM事件，
代碼如下所示：
<a v-on:click="doSomething">
在這裡參數是監聽的事件名
代碼如下所示：
<a v-bind:href="url"></a>
代碼如下所示：
<a v-on:click="doSomething">
修飾符（Modifiers）是以半角句号“.”指明的特殊字尾，用于指出一個指定應該以特殊方式綁定。例如，.prevent修飾符告訴v-on指令對于觸發的事件調用event.preventDefault()，代碼如下所示：
<form v-on:submit.prevent="onSubmit"></form>
- 使用
v-bind
對象文法
數組文法
- 對象文法：
v-bind:class
class屬性
具體文法如下所示：
<div v-bind:class=”{ 類樣式名:綁定資料,…}”></div>
類樣式名可以有多個，通過綁定資料為true或false來控制樣式是否應用到元素中
示例：
通過資料綁定來控制< div>标簽是否添加邊框、陰影、背景顔色和滑鼠懸停動畫顯示效果。
/* css代碼:*/
#app {...}
#app .border {...} /*邊框*/
#app .shadow {...} /*陰影*/
#app .backcolor {...} /*背景顔色*/
#app .hover{...} /*滑鼠懸停*/
#app .hover:hover {...} /*滑鼠懸停*/
<!-- HTML代碼: -->
<div id="app">
<p>
<input type="checkbox" v-model="isBorder">邊框
<input type="checkbox" v-model="isShadow">陰影
<input type="checkbox" v-model="isBackColor">背景
<input type="checkbox" v-model="isHover">懸停動畫
</p>
<div v-bind:class="{border:isBorder, shadow:isShadow,backcolor:isBackColor,hover:isHover}"></div>
</div>
// JavaScript代碼:
var vm = new Vue({
el: "#app",
data: {
isBorder: true,
isShadow: true,
isBackColor: true,
isHover: true
}
});
-
數組文法
綁定class不僅可以使用對象方式，還可以是數組方式，
文法如下所示：
<div v-bind:class="[綁定資料1, 綁定資料2…"></div>
示例：
通過數組文法在< div>标簽上綁定了邊框、陰影和背景顔色類樣式
/* css代碼:*/
#app {...}
#app .border {...}/*邊框*/
#app .shadow {...}/*陰影*/
#app .backcolor {...}/*背景顔色*/
<!-- HTML代碼: -->
<div id="app">
<h3>綁定class的數組文法</h3>
<div v-bind:class="[borderClass,shadowClass,backColorClass]"></div>
</div>
// JavaScript代碼:
var vm = new Vue({
el: "#app",
data: {
borderClass: "border",
shadowClass: "shadow",
backColorClass: "backcolor"
}
});
- 在Vue中不僅可以綁定類樣式，還可以綁定HTML标簽的
内聯樣式
對象
數組方式
- v-bind:style的對象文法十分直覺——看着非常像CSS，但其實是一個
JavaScript對象
駝峰式（camelCase）
橫線分隔（kebab-case）
文法如下所示：
<div v-bind:style="{ 樣式屬性:綁定資料 }" />
或者
<div v-bind:style=“JavaScript樣式對象" />
示例：
使用Vue綁定HTML标簽的内聯樣式實作向油畫上添加邊框圓角和陰影效果。
<!-- HTML代碼:-->
<div id="app">
<h3>綁定Style 對象文法</h3>
<img src="images/painting.jpg" alt="風景畫" v-bind:style="styleObject" />
</div>
// JavaScript代碼:
var vm = new Vue({
el: "#app",
data: {
styleObject: {
width: "450px",
height: "400px",
"box-shadow": "0 5px 15px 5px #888888",
borderRadius: "50px"
}
}
});
示例：
使用數組文法綁定HTML标簽内聯樣式向花朵油畫圖添加邊框、圓角和陰影效果
<!-- HTML代碼: -->
<div id="app">
<h3>綁定Style 數組文法</h3>
<img src="images/flower.jpg" alt="花朵畫" v-bind:style="[baseStyle,extendStyle]" />
</div>
// JavaScript代碼:
var vm = new Vue({
el: "#app",
data: {
baseStyle: {...},
extendStyle:{...}
}
});
當v-bind:style使用需要添加浏覽器引擎字首的CSS屬性時，如transform，Vue會自動偵測并添加相應的字首。
- v-if是條件渲染指令，它根據表達式的真假來删除和插入元素，基本文法如下：
文法：
<div v-if="expression"></div>
是一個傳回bool值的表達式，表達式可以是一個expression
，也可以是一個傳回bool的bool屬性
運算式
- 可以用
指令為v-else
添加一個v-if
。v-else元素必須立即跟在v-if元素的後面，否則它不能被識别。“else塊”
示例：
使用v-if和v-else實作使用者注冊和登入的切換顯示。
<!-- HTML代碼: -->
<div id="app">
<h1>使用者登入/注冊</h1>
<input type="checkbox" v-model="isRegUser">是注冊
<div class="box">
<div v-if="isRegUser">
<h3>使用者注冊</h3>
<!-- ...使用者系統資料庫單... -->
</div>
<div v-else>
<h3>使用者登入</h3>
<!-- ...使用者登入表單... -->
</div>
</div>
</div>
當“是注冊”的複選框選中時顯示使用者注冊内容，否則顯示使用者登入内容
除了上面的v-if以外，也可以使用v-show實作條件渲染。
與v-if不同的是帶有v-show的元素始終會被渲染并保留在DOM中。v-show隻是簡單地切換元素的CSS屬性display。
v-show不支援元素，也不支援v-else。
示例：
使用v-show實作IT行業公司上班時間切換
<!-- HTML代碼: -->
<div id="app">
<h1>IT行業公司上班時間表</h1>
<input type="checkbox" v-model="inTheSummer">是夏天時間
<div class="box">
<h3>今日上班打卡時間：</h3>
<div v-show="inTheSummer">
<p>8：30-17:00</p>
</div>
<div v-show="!inTheSummer">
<p>9：00-17:30</p>
</div>
</div>
</div>
- v-if是“真正”的條件渲染，因為它會確定在切換過程中條件塊内的事件監聽器和子元件适當地被銷毀和重建。如果在初始渲染時條件為假，則什麼也不做。—直到條件第一次變為真時，才會開始渲染條件塊。
- 相比之下，v-show就簡單得多了，不管初始條件是什麼，元素總是會被渲染，并且隻是簡單地基于CSS進行切換。
- 一般來說，v-if有更高的切換開銷，而v-show有更高的初始渲染開銷。是以，如果需要非常頻繁地切換，則使用v-show較好；如果在運作時條件很少改變，則使用v-if較好。
v-on指令
監聽
DOM事件
，并在觸發時運作一些
JavaScript代碼
。通過
v-on
可以綁定Vue執行個體選項參數
methods
中的方法作為事件的處理代碼，“
v-on
:”後參數接受所有的原生事件名稱。
v-on指令
的文法如下所示：
文法：
<button v-on:click=‘事件處理方法’>按鈕</div>
- Vue也提供了
的縮寫形式，可以将上面文法中的内容改寫為v-on
‘事件處理方法’>按鈕<button @:click=
，這兩句語句是等價的。< /div>
示例：
在兩個數進行四則運算的按鈕上使用v-on綁定了事件處理方法
<!-- HTML代碼: -->
<div id="app">
<div class="box">
<h1>加減運算器</h1>
<!-- ...... -->
<p>
<button @click="doAdd">加法</button>
<button v-on:click="doSub(event)">減法</button>
<button @click="alert(vm.num1*vm.num2)">乘法</button>
<button @click="doDiv()">除法</button>
</p>
<!-- ...... -->
</div>
</div>
// JavaScript代碼:
var vm = new Vue({
el: "#app",
data: {
num1:0,
num2:0,
result:0
},
methods:{
doAdd:function(e){...},
doSub:function(e){...},
doDiv:function(e){...},
}
});
- 當一個元素上的事件被觸發的時候，比如說滑鼠點選了一個按鈕，同樣的事件将會在那個元素的所有祖先元素中被觸發。這一過程被稱為
；這個事件從原始元素開始一直冒泡到事件冒泡
的DOM樹
最上層
- 在
的事件處理程式中一般調用JavaScript
方法取消事件的預設動作，以及調用event.preventDefault()
方法阻止事件冒泡。event.stopPropagation()
- 在軟體開發原則中，一般建議方法隻有純粹的資料邏輯，而不是去處理DOM事件細節。
- 為了解決這個問題，Vue為v-on提供了多個事件修飾符，而事件修飾符都是由點開頭的指令字尾來表示的，并且事件修飾符可以串聯使用。主要修飾符如下所示：
： 等同于調用event.stopPropagation()。.stop
：等同于調用event.preventDefault()。.prevent
：使用capture模式添加事件監聽器。.capture
：隻當事件是從監聽元素本身觸發時才觸發回調。.self
：點選事件将隻會觸發一次。.once
事件修飾符使用方式
如下代碼所示：
| 代碼 | 作用 |
|---|---|
| 阻止單擊事件繼續傳播 |
| 阻止表單預設送出事件 |
| 阻止預設送出事件且阻止冒泡 |
| 阻止預設送出事件且阻止冒泡，并不綁定事件 |
| 隻當在event.target是目前元素自身時觸發處理函數，即事件不是從内部元素觸發的 |
| 點選事件将隻會觸發一次 |
示例：
使用事件修飾符來阻止事件冒泡
<!-- HTML代碼: -->
<div id="app">
<div class="box" v-on:click="saySelf('div的click觸發')" v-on:click.self="saySelf('div自己click觸發')">
<button v-on:click="saySelf('button的click觸發')">按鈕事件并事件冒泡</button>
<button v-on:click.stop="saySelf('button的click觸發,不事件冒泡')">按鈕事件并事件不冒泡</button>
</div>
</div>
// JavaScript代碼:
var vm = new Vue({
el: "#app",
methods: {
saySelf(msg) {
console.log(msg);
}
}
});
- 一般現代的Web前端開發的理念就是将
HTML
隔離開編寫，因為Vue事件處理方法和表達式都嚴格綁定在目前JS
視圖
上，是以并不會導緻維護困難。ViewModel
而這麼寫的好處在于：
（1）
無需手動管理事件。
ViewModal被銷毀時，所有的事件處理器都會自動被删除，讓開發者從擷取DOM綁定事件然後在特定情況下再解綁這樣的事情中解脫出來。
（2）
ViewModel代碼是純粹的邏輯代碼，和DOM無關，有利于開發者編寫自動化測試用例。解耦。
Vue使用了基于HTML的，允許開發者通過模闆文法
地将Vue聲明式
綁定至底層Vue執行個體的DOM
資料
其中Vue模闆文法包含、插值
表達式
指令組成
在Vue中對屬性的綁定一般使用（可以縮寫為v-bind指令
）。“:”
在将用于v-bind
class
時，Vue進行了專門的增強功能來友善綁定style
類樣式
，即表達式結果的類型除了樣式屬性
之外，還可以是字元串
對象
數組
Vue中提供v-if、v-show和v-else的條件渲染指令，這些條件指令可以根據表達式的值在DOM中選擇渲染元素或元件。
Vue提供了用來監聽v-on指令
，通常在HTML内自己使用DOM事件
，而不像傳統方式在js中擷取v-on綁定事件
，再綁定事件處理函數。DOM元素
本文來自部落格園，作者：明金同學，轉載請注明原文連結：https://www.cnblogs.com/vmuu/p/15663283.html
公衆号：【明金同學】