Vue的模板語法以及實戰(zhàn)案例

更新時間：2022年06月15日 09:49:28 作者：小丫么小牛馬

Vue使用了基于HTML的模板語法,允許開發(fā)者聲明式地將DOM綁定至底層Vue實例的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Vue的模板語法以及案例的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

前言

相信模板語法大家多少都有所接觸，例如百度模板引擎、ejs 等等。同樣 Vue.js 也使用了基于 HTML 的模板語法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實例的數(shù)據(jù)。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析，通俗的講 Vue 模板語法就是在使用 Vue.js 開發(fā)時，你可以寫在 HTML 元素上的操作語法，讓你開發(fā)更高效，例如：綁定樣式，循環(huán)出元素列表等。

一、雙大括號表達式

在前端的發(fā)展歷程中，為了提高開發(fā)效率，誕生了很多模板引擎，方便渲染元素或者綁定數(shù)據(jù)，很多引擎模板都采用 {{雙大括號表達式}} 的語法進行插值。同樣 Vue.js 也借鑒了 Angular.js 的雙花括號的方式，進行向頁面輸出數(shù)據(jù)和調(diào)用對象方法。讓我們感受一下雙大括號表達式，在 IED 中新建一個.html 后綴文件，引入 Vue.js，輸入以下代碼，運行（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>
    <!-- 通過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: 掛載點

        data: {
          //data:數(shù)據(jù)選項

          msg: "hello",
        },
      });
    </script>
  </body>
</html>

雙大括號中的 {{msg}}，綁定至底層 Vue 實例的數(shù)據(jù)，在瀏覽器中就被渲染成實例 data 選項中 msg 的值。

運行結(jié)果：

請?zhí)砑訄D片描述

二、插值

上面初步了解了雙大括號語法，接下來我們學(xué)習(xí)一下更多的插值方式。

2.1文本

在 Vue.js 中數(shù)據(jù)綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值：

<div id="app">msg：{{msg}}</div>

雙大括號中的值將會被替代為對應(yīng) data 對象上 msg 屬性的值。無論何時，綁定的數(shù)據(jù)對象上 msg 屬性發(fā)生了改變，插值處的內(nèi)容都會更新。

但是通過使用 v-once 指令你也能執(zhí)行一次性地插值，當(dāng)數(shù)據(jù) 改變時，插值處的內(nèi)容 不會更新。但是你需要注意一下，該元素節(jié)點下面其他數(shù)據(jù)的綁定，數(shù)據(jù)改變，內(nèi)容也不會更新，所以，注意代碼塊的劃分。

<p v-once>msg：{{msg}}</p>

2.2 原始 HTML

上面的雙大括號表達式會將數(shù)據(jù)解釋為普通文本，即使你的數(shù)據(jù)為 HTML 元素，也不會渲染成對應(yīng)的標簽元素，只能渲染成普通文本，而非 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" />
    <!-- 通過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: 掛載點
        data: {
            //data:數(shù)據(jù)選項
            msg: "<h1>hello world</h1>",
        },
    });
</script>
</body>
</html>

運行結(jié)果：

請?zhí)砑訄D片描述

上面明明我們寫的是 HTML 標簽，為什么沒渲染出來，那就是因為雙大括號表達式會將數(shù)據(jù)解釋為普通文本。有的讀者會問，有的需求就是要把標簽渲染出來，那么我們就需要認識另外一個指令 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" />
    <!-- 通過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: 掛載點
        data: {
            //data:數(shù)據(jù)選項
            msg: "<h1>hello world</h1>",
        },
    });
</script>
</body>
</html>

請?zhí)砑訄D片描述

2.3 特性

雙大括號語法不能作用在 HTML 特性（標簽屬性）上，需要對標簽屬性操作，應(yīng)該使用 v-bind 指令：

<div v-bind:class="syl-vue-course"></div>

HTML 標簽屬性為布爾特性時，它們的存在表示為 true，v-bind 工作起來略有不同，在這個例子中：

<!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>
    <!-- 通過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>

運行結(jié)果：

請?zhí)砑訄D片描述

注意：如果 isChecked 的值是 null、undefined 或 false，則 checked 特性甚至不會被包含在渲染出來的 <input> 元素中，我們將 data 中的 isChecked 值改為 null

var app = new Vue({ el:'#app', data:{ isChecked:null // isChecked是否選中 } })

2.4 javascript 表達式

上面，我們只進行了綁定簡單的屬性鍵值。但實際上，對于所有的數(shù)據(jù)綁定，Vue.js 都提供了完全的 JavaScript 表達式支持，感受強大的模板語法力量吧！例子：

<!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>
    <!-- 通過cdn方式引入 vue.js -->
    <script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
  </head>
  <body>
    <!-- javascript表達式-->
    <div id="app">
      <!-- 運算符 -->
      <p>num + 24 = {{num + 24}}</p>
      <!-- 三元表達式 -->
      <p>Are you ok? {{ok ? 'I am ok !':'no'}}</p>
      <!-- 對象方法直接調(diào)用 -->
      <p>名字倒過來寫：{{name.split('').reverse().join('')}}</p>
      <!-- 屬性值運算操作 -->
      <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>

運行結(jié)果：

請?zhí)砑訄D片描述

三、指令

指令 (Directives) 是帶有 v- 前綴的特殊特性。

3.1 參數(shù)

一些指令能夠接收一個“參數(shù)”，在指令名稱之后以冒號表示。例如，v-bind 指令可以用于響應(yīng)式地更新 HTML 特性，在這里 href 是參數(shù)，告知 v-bind 指令將該元素的 href 特性與表達式 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>
    <!-- 通過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>

另外一個例子，v-on 指令，用于監(jiān)聽 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>
    <!-- 通過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 使我們在實例 methods 中寫的方法 -->
    <button v-on:click="handleClick">點我</button>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            name: "小牛馬",
        },
        methods: {
            //實例方法對象
            handleClick: function () {
                this.name = this.name.split("").reverse().join("");
            },
        },
    });
</script>
</body>
</html>

運行結(jié)果：

請?zhí)砑訄D片描述

3.2 動態(tài)參數(shù)

上面屬性或者事件我們都是寫死的，其實在 Vue 它也可以是動態(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>
    <!-- 通過cdn方式引入 vue.js -->
    <script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
</head>
<body>
<!-- 指令 動態(tài)參數(shù)-->
<div id="app">
    <p>我叫：{{name}}</p>
    <button v-on:[event]="handleClick">點我</button>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            name: "實驗樓",
            event: "click",
        },
        methods: {
            handleClick: function () {
                this.name = this.name.split("").reverse().join("");
            },
        },
    });
</script>
</body>
</html>

event 此時的值為click，那我們點擊按鈕時就會觸發(fā)事件回調(diào)，運行結(jié)果和上面一樣。

3.3 修飾符

修飾符是以半角句號 . 指明的特殊后綴，用于指出一個指令應(yīng)該以特殊方式綁定，大致分為三類，后面課程我們會一一接觸到：

事件修飾符
按鍵修飾符
系統(tǒng)修飾符

例如，事件修飾符中的.prevent修飾符和原生 event.preventDefault() 效果一樣，可以阻止事件默認行為，在表單中點擊提交按鈕，就會發(fā)生頁面跳轉(zhuǎn)，但是使用了 .prevent 就不會發(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>
    <!-- 通過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>

沒有加修飾符，發(fā)生默認跳轉(zhuǎn)，運行效果：

請?zhí)砑訄D片描述

使用了 .prevent ，阻止了默認跳轉(zhuǎn)，運行結(jié)果：

請?zhí)砑訄D片描述

四、指令縮寫

v- 是 Vue.js 中特定的標志，用來識別模板中 Vue 特定的特性。當(dāng)你在使用 Vue.js 為現(xiàn)有標簽添加動態(tài)行為時，v- 前綴很有幫助，但是頻繁使用到，也會讓人感覺不到代碼的簡潔之道，就會感到不是太人性化。同時，在構(gòu)建由 Vue 管理所有模板的單頁面應(yīng)用程序時，v- 前綴也變得沒那么重要了。因此，Vue 為 v-bind 和 v-on 這兩個最常用的指令，提供了特定簡寫：

4.1 v-bind

上面例子中我們使用了 v-bind 綁定屬性

<a v-bind:href="url">小牛馬</a>

我們可以簡寫為：

<a :href="url">小牛馬</a>

同樣的使用 v-bind 綁定的其他屬性也可以簡寫：

v-bind:class="className" 簡寫為 :class="className" v-bind:value="myValue" 簡寫為
:value

4.2 v-on

上面 v-bind 指令提供簡寫，同樣 v-on 指令也提供簡寫，但是與 v-bind 有一些差異，v-on: 使用 @ 簡寫。

<!-- 完整語法 -->
<button v-on:click="handleClick">點我</button>
<!-- 縮寫 -->
<button @click="handleClick">點我</button>

總結(jié)

本文講解 Vue.js 模板語法，了解雙大括號表達式，以及模板插值，模板上簡單的指令應(yīng)用，指令的縮寫模式等，相信大家對 Vue.js 已經(jīng)有了初步了解。

下文講解Vue的計算屬性和偵聽屬性與過濾器

到此這篇關(guān)于Vue的模板語法以及案例的文章就介紹到這了,更多相關(guān)Vue模板語法案例內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

Vue的模板語法以及實戰(zhàn)案例

目錄

前言

一、雙大括號表達式

二、插值

2.1文本

2.2 原始 HTML

2.3 特性

2.4 javascript 表達式

三、指令

3.1 參數(shù)

3.2 動態(tài)參數(shù)

3.3 修飾符

四、指令縮寫

4.1 v-bind

4.2 v-on

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

Vue的模板語法以及實戰(zhàn)案例

目錄

前言

一、雙大括號表達式

二、插值

2.1文本

2.2 原始 HTML

2.3 特性

2.4 javascript 表達式

三、指令

3.1 參數(shù)

3.2 動態(tài)參數(shù)

3.3 修飾符

四、指令縮寫

4.1 v-bind

4.2 v-on

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

四、指令縮寫