Vue的模板語(yǔ)法以及實(shí)戰(zhàn)案例
前言
相信模板語(yǔ)法大家多少都有所接觸，例如百度模板引擎、ejs 等等。同樣 Vue.js 也使用了基于 HTML 的模板語(yǔ)法，允許開(kāi)發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析，通俗的講 Vue 模板語(yǔ)法就是在使用 Vue.js 開(kāi)發(fā)時(shí)，你可以寫(xiě)在 HTML 元素上的操作語(yǔ)法，讓你開(kāi)發(fā)更高效，例如：綁定樣式，循環(huán)出元素列表等。
一、雙大括號(hào)表達(dá)式
在前端的發(fā)展歷程中，為了提高開(kāi)發(fā)效率，誕生了很多模板引擎，方便渲染元素或者綁定數(shù)據(jù)，很多引擎模板都采用 {{雙大括號(hào)表達(dá)式}} 的語(yǔ)法進(jìn)行插值。同樣 Vue.js 也借鑒了 Angular.js 的雙花括號(hào)的方式，進(jìn)行向頁(yè)面輸出數(shù)據(jù)和調(diào)用對(duì)象方法。讓我們感受一下雙大括號(hào)表達(dá)式，在 IED 中新建一個(gè).html 后綴文件，引入 Vue.js，輸入以下代碼，運(yùn)行（open with Preview 或 Mini Browser）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title></title>
<!-- 通過(guò)cdn方式引入 vue.js -->
<script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
</head>
<body>
<!-- 數(shù)據(jù)雙向綁定 -->
<div id="app">
<input type="text" v-model="msg" />
<p>{{msg}}</p>
</div>
<script>
var app = new Vue({
el: "#app", //el: 掛載點(diǎn)
data: {
//data:數(shù)據(jù)選項(xiàng)
msg: "hello",
},
});
</script>
</body>
</html>
雙大括號(hào)中的 {{msg}}，綁定至底層 Vue 實(shí)例的數(shù)據(jù)，在瀏覽器中就被渲染成實(shí)例 data 選項(xiàng)中 msg 的值。
運(yùn)行結(jié)果：
二、插值
上面初步了解了雙大括號(hào)語(yǔ)法，接下來(lái)我們學(xué)習(xí)一下更多的插值方式。
2.1文本
在 Vue.js 中數(shù)據(jù)綁定最常見(jiàn)的形式就是使用“Mustache”語(yǔ)法 (雙大括號(hào)) 的文本插值：
<div id="app">msg：{{msg}}</div>
雙大括號(hào)中的值將會(huì)被替代為對(duì)應(yīng) data 對(duì)象上 msg 屬性的值。無(wú)論何時(shí)，綁定的數(shù)據(jù)對(duì)象上 msg 屬性發(fā)生了改變，插值處的內(nèi)容都會(huì)更新。
但是通過(guò)使用 v-once 指令你也能執(zhí)行一次性地插值，當(dāng)數(shù)據(jù) 改變時(shí)，插值處的內(nèi)容 不會(huì)更新。但是你需要注意一下，該元素節(jié)點(diǎn)下面其他數(shù)據(jù)的綁定，數(shù)據(jù)改變，內(nèi)容也不會(huì)更新，所以，注意代碼塊的劃分。
<p v-once>msg：{{msg}}</p>
2.2 原始 HTML
上面的雙大括號(hào)表達(dá)式會(huì)將數(shù)據(jù)解釋為普通文本，即使你的數(shù)據(jù)為 HTML 元素，也不會(huì)渲染成對(duì)應(yīng)的標(biāo)簽元素，只能渲染成普通文本，而非 HTML 代碼，例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- 通過(guò)cdn方式引入 vue.js -->
<script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
</head>
<body>
<!-- 數(shù)據(jù)綁定 -->
<div id="app">
<p>{{msg}}</p>
</div>
<script>
var app = new Vue({
el: "#app", //el: 掛載點(diǎn)
data: {
//data:數(shù)據(jù)選項(xiàng)
msg: "<h1>hello world</h1>",
},
});
</script>
</body>
</html>
運(yùn)行結(jié)果：
上面明明我們寫(xiě)的是 HTML 標(biāo)簽，為什么沒(méi)渲染出來(lái)，那就是因?yàn)殡p大括號(hào)表達(dá)式會(huì)將數(shù)據(jù)解釋為普通文本。有的讀者會(huì)問(wèn)，有的需求就是要把標(biāo)簽渲染出來(lái)，那么我們就需要認(rèn)識(shí)另外一個(gè)指令 v-html，使用它我們就能將它正確渲染，試一試，代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- 通過(guò)cdn方式引入 vue.js -->
<script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
</head>
<body>
<!-- v-html 渲染html元素-->
<div id="app" v-html="msg"></div>
<script>
var app = new Vue({
el: "#app", //el: 掛載點(diǎn)
data: {
//data:數(shù)據(jù)選項(xiàng)
msg: "<h1>hello world</h1>",
},
});
</script>
</body>
</html>
2.3 特性
雙大括號(hào)語(yǔ)法不能作用在 HTML 特性（標(biāo)簽屬性）上，需要對(duì)標(biāo)簽屬性操作，應(yīng)該使用 v-bind 指令：
<div v-bind:class="syl-vue-course"></div>
HTML 標(biāo)簽屬性為布爾特性時(shí)，它們的存在表示為 true，v-bind 工作起來(lái)略有不同，在這個(gè)例子中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>vue</title>
<!-- 通過(guò)cdn方式引入 vue.js -->
<script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
</head>
<body>
<!-- 布爾特性綁定-->
<div id="app">
<input type="checkbox" v-bind:checked="isChecked" />
</div>
<script>
var app = new Vue({
el: "#app",
data: {
isChecked: false, // isChecked是否選中boolean
},
});
</script>
</body>
</html>
運(yùn)行結(jié)果：
注意： 如果 isChecked 的值是 null、undefined 或 false，則 checked 特性甚至不會(huì)被包含在渲染出來(lái)的 <input> 元素中，我們將 data 中的 isChecked 值改為 null
var app = new Vue({ el:'#app', data:{ isChecked:null // isChecked是否選中 } })
2.4 javascript 表達(dá)式
上面，我們只進(jìn)行了綁定簡(jiǎn)單的屬性鍵值。但實(shí)際上，對(duì)于所有的數(shù)據(jù)綁定，Vue.js 都提供了完全的 JavaScript 表達(dá)式支持，感受強(qiáng)大的模板語(yǔ)法力量吧！例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>vue</title>
<!-- 通過(guò)cdn方式引入 vue.js -->
<script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
</head>
<body>
<!-- javascript表達(dá)式-->
<div id="app">
<!-- 運(yùn)算符 -->
<p>num + 24 = {{num + 24}}</p>
<!-- 三元表達(dá)式 -->
<p>Are you ok? {{ok ? 'I am ok !':'no'}}</p>
<!-- 對(duì)象方法直接調(diào)用 -->
<p>名字倒過(guò)來(lái)寫(xiě)：{{name.split('').reverse().join('')}}</p>
<!-- 屬性值運(yùn)算操作 -->
<p v-bind:class="'col'+colNum">xnm</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
num: 20,
ok: true,
name: "小牛馬",
colNum: "12",
},
});
</script>
</body>
</html>
運(yùn)行結(jié)果：
三、指令
指令 (Directives) 是帶有 v- 前綴的特殊特性。
3.1 參數(shù)
一些指令能夠接收一個(gè)“參數(shù)”，在指令名稱之后以冒號(hào)表示。例如，v-bind 指令可以用于響應(yīng)式地更新 HTML 特性，在這里 href 是參數(shù)，告知 v-bind 指令將該元素的 href 特性與表達(dá)式 url 的值綁定，例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>vue</title>
<!-- 通過(guò)cdn方式引入 vue.js -->
<script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
</head>
<body>
<!-- 指令 參數(shù)-->
<div id="app">
<a v-bind:href="url">小牛馬</a>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
url: "https://www.lanqiao.cn",
},
});
</script>
</body>
</html>
另外一個(gè)例子，v-on 指令，用于監(jiān)聽(tīng) DOM 事件，例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>vue</title>
<!-- 通過(guò)cdn方式引入 vue.js -->
<script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
</head>
<body>
<!-- 指令 參數(shù)-->
<div id="app">
<p>我叫：{{name}}</p>
<!-- handleClick 使我們?cè)趯?shí)例 methods 中寫(xiě)的方法 -->
<button v-on:click="handleClick">點(diǎn)我</button>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
name: "小牛馬",
},
methods: {
//實(shí)例方法對(duì)象
handleClick: function () {
this.name = this.name.split("").reverse().join("");
},
},
});
</script>
</body>
</html>
運(yùn)行結(jié)果：
3.2 動(dòng)態(tài)參數(shù)
上面屬性或者事件我們都是寫(xiě)死的，其實(shí)在 Vue 它也可以是動(dòng)態(tài)的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>vue</title>
<!-- 通過(guò)cdn方式引入 vue.js -->
<script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
</head>
<body>
<!-- 指令 動(dòng)態(tài)參數(shù)-->
<div id="app">
<p>我叫：{{name}}</p>
<button v-on:[event]="handleClick">點(diǎn)我</button>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
name: "實(shí)驗(yàn)樓",
event: "click",
},
methods: {
handleClick: function () {
this.name = this.name.split("").reverse().join("");
},
},
});
</script>
</body>
</html>
event 此時(shí)的值為click，那我們點(diǎn)擊按鈕時(shí)就會(huì)觸發(fā)事件回調(diào)，運(yùn)行結(jié)果和上面一樣。
3.3 修飾符
修飾符是以半角句號(hào) . 指明的特殊后綴，用于指出一個(gè)指令應(yīng)該以特殊方式綁定，大致分為三類，后面課程我們會(huì)一一接觸到：
- 事件修飾符
- 按鍵修飾符
- 系統(tǒng)修飾符
例如，事件修飾符中的.prevent修飾符和原生 event.preventDefault() 效果一樣，可以阻止事件默認(rèn)行為，在表單中點(diǎn)擊提交按鈕，就會(huì)發(fā)生頁(yè)面跳轉(zhuǎn)，但是使用了 .prevent 就不會(huì)發(fā)生跳轉(zhuǎn)，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>vue</title>
<!-- 通過(guò)cdn方式引入 vue.js -->
<script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
</head>
<body>
<!-- 指令 修飾符-->
<div id="app">
<!-- <form action="/" v-on:="submit">-->
<form action="/" v-on:submit.prevent="submit">
<button type="submit">提交</button>
</form>
</div>
<script>
var app = new Vue({
el: "#app",
data: {},
methods: {
submit: function () {
console.log("成功提交！");
},
},
});
</script>
</body>
</html>
沒(méi)有加修飾符，發(fā)生默認(rèn)跳轉(zhuǎn)，運(yùn)行效果：
使用了 .prevent ，阻止了默認(rèn)跳轉(zhuǎn)，運(yùn)行結(jié)果：
四、指令縮寫(xiě)
v- 是 Vue.js 中特定的標(biāo)志，用來(lái)識(shí)別模板中 Vue 特定的特性。當(dāng)你在使用 Vue.js 為現(xiàn)有標(biāo)簽添加動(dòng)態(tài)行為時(shí)，v- 前綴很有幫助，但是頻繁使用到，也會(huì)讓人感覺(jué)不到代碼的簡(jiǎn)潔之道，就會(huì)感到不是太人性化。同時(shí)，在構(gòu)建由 Vue 管理所有模板的單頁(yè)面應(yīng)用程序時(shí)，v- 前綴也變得沒(méi)那么重要了。因此，Vue 為 v-bind 和 v-on 這兩個(gè)最常用的指令，提供了特定簡(jiǎn)寫(xiě)：
4.1 v-bind
上面例子中我們使用了 v-bind 綁定屬性
<a v-bind:href="url">小牛馬</a>
我們可以簡(jiǎn)寫(xiě)為：
<a :href="url">小牛馬</a>
同樣的使用 v-bind 綁定的其他屬性也可以簡(jiǎn)寫(xiě)：
v-bind:class="className" 簡(jiǎn)寫(xiě)為 :class="className" v-bind:value="myValue" 簡(jiǎn)寫(xiě)為 :value
4.2 v-on
上面 v-bind 指令提供簡(jiǎn)寫(xiě)，同樣 v-on 指令也提供簡(jiǎn)寫(xiě)，但是與 v-bind 有一些差異，v-on: 使用 @ 簡(jiǎn)寫(xiě)。
<!-- 完整語(yǔ)法 --> <button v-on:click="handleClick">點(diǎn)我</button> <!-- 縮寫(xiě) --> <button @click="handleClick">點(diǎn)我</button>
總結(jié)
本文講解 Vue.js 模板語(yǔ)法，了解雙大括號(hào)表達(dá)式，以及模板插值，模板上簡(jiǎn)單的指令應(yīng)用，指令的縮寫(xiě)模式等，相信大家對(duì) Vue.js 已經(jīng)有了初步了解。
下文講解Vue的計(jì)算屬性和偵聽(tīng)屬性與過(guò)濾器
到此這篇關(guān)于Vue的模板語(yǔ)法以及案例的文章就介紹到這了,更多相關(guān)Vue模板語(yǔ)法案例內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue版日歷組件的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue在body和query中如何向后端傳參，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vuex中的Mutations的具體使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
vue單頁(yè)緩存存在的問(wèn)題及解決方案(小結(jié))
這篇文章主要介紹了vue單頁(yè)緩存存在的問(wèn)題及解決方案(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了如何讓vue長(zhǎng)列表快速加載，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
vue項(xiàng)目完成后如何實(shí)現(xiàn)項(xiàng)目?jī)?yōu)化的示例
本文主要介紹了vue項(xiàng)目完成后如何實(shí)現(xiàn)項(xiàng)目?jī)?yōu)化的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
Vue2.0 實(shí)現(xiàn)頁(yè)面緩存和不緩存的方式
今天小編就為大家分享一篇Vue2.0 實(shí)現(xiàn)頁(yè)面緩存和不緩存的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue 解決路由只變化參數(shù)頁(yè)面組件不更新問(wèn)題
今天小編就為大家分享一篇vue 解決路由只變化參數(shù)頁(yè)面組件不更新問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
本文主要介紹了vue全局接入百度地圖的實(shí)現(xiàn)示例，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue中post請(qǐng)求報(bào)400的解決方案
這篇文章主要介紹了vue中post請(qǐng)求報(bào)400的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10