Vue模板語法v-bind教程示例

更新時(shí)間：2023年12月07日 11:14:07 作者：wx5bcd2f496a1cf

這篇文章主要為大家介紹了Vue模板語法v-bind教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

vue的模板

紅色框里面的都是vue的模板。有了模板就得有模板的特殊語法。上面只是簡單的雙括號(hào)加上表達(dá)式，這種叫做插值語法，除了這種語法還有其他語法嗎？

插值語法實(shí)現(xiàn)的功能很單一，就是將指定的值放到指定的位置。還有一種叫做指令語法，它能夠完成的就相對(duì)高端一些。

vue里面的指令很多，都是以v-開頭。

將執(zhí)行的結(jié)果綁定給v-bind

下面其實(shí)就是將執(zhí)行的結(jié)果綁定給v-bind

<a v-bind:href="url" rel="external nofollow"  rel="external nofollow" >點(diǎn)擊我去百度</a>   
//如果加上v-bind:，那么vue會(huì)將引號(hào)里面包著的東西url拿出來當(dāng)js表達(dá)式去執(zhí)行，url就相對(duì)于變量
      new Vue({    
          el: "#app",   
          data:{ 
            name: "lucas",
            url: "https://www.baidu.com",
          }
       })

v-bind可以指定任何一個(gè)屬性。bind可以給標(biāo)簽里面任何一個(gè)標(biāo)簽屬性動(dòng)態(tài)的綁定值。

v-bind:可以簡寫為:冒號(hào)。

<div id="app">
        <h1>hello world name:{{name}}</h1>
        <a v-bind:href="url" rel="external nofollow"  rel="external nofollow"  v-bind:x="hello">點(diǎn)擊我去百度</a>
    </div>
    <script type="text/javascript"> 
    Vue.config.productionTip = false     
      new Vue({    
          el: "#app",   
          data:{ 
            name: "lucas",
            url: "https://www.baidu.com",
            hello: "xxx",
          }
       })

通過上面可以看到插值語法往往用于指定標(biāo)簽體內(nèi)容，也即是html元素中間部分。這部分需要渲染可以使用插值語法。

v-bind不管理標(biāo)簽里面的內(nèi)容，它是用于管理標(biāo)簽的屬性。

Vue模板語法有2大類

1.插值語法

功能：用于解析標(biāo)簽體內(nèi)容。
寫法：{{xxx}}，xxx是js表達(dá)式，且可以直接讀取到data中的所有屬性。

2.指令語法

功能：用于解析標(biāo)簽(包括：標(biāo)簽屬性、標(biāo)簽體內(nèi)容、綁定事件...)。

舉例：v-bind:href="xxx" 或簡寫為:href="xxx"，xxx同樣要寫js表達(dá)式，且可以直接讀取到data中的所有屬性。

備注：Vue中有很多的指令，且形式都是：v-????，此處我們只是拿v-bind舉個(gè)例子。

在data當(dāng)中，不僅僅可以是基本的數(shù)據(jù)類型，還可以是對(duì)象。所以data里面的數(shù)據(jù)可以是多級(jí)的結(jié)構(gòu)。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首頁</title>
    <!--引入vue,這里引入vue那么這里就多了vue構(gòu)造函數(shù)-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>  
    <div id="app">
        <h1>hello world name:{{name}} school里面的name:{{school.name}}</h1>
        <a v-bind:href="school.url" rel="external nofollow"  v-bind:x="hello">點(diǎn)擊我去百度</a>
    </div>
    <script type="text/javascript"> 
    Vue.config.productionTip = false     
      new Vue({    
          el: "#app",   
          data:{ 
            name: "lucas",
            school:{
                name: "jerry",
                url: "https://www.baidu.com",
            },
          }
       })
    </script>
</body>
</html>

對(duì)于插值語法沒有什么高深的玩法，就兩對(duì)花括號(hào){{}}里面寫上表達(dá)式

以上就是Vue模板語法v-bind教程示例的詳細(xì)內(nèi)容，更多關(guān)于Vue v-bind模板語法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: