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

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

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

vue的模板

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

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

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

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

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

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

v-bind可以指定任何一個屬性。bind可以給標簽里面任何一個標簽屬性動態(tài)的綁定值。

v-bind:可以簡寫為:冒號。

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

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

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

Vue模板語法有2大類

1.插值語法

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

2.指令語法

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

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

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

在data當中，不僅僅可以是基本的數(shù)據(jù)類型，還可以是對象。所以data里面的數(shù)據(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">點擊我去百度</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>

對于插值語法沒有什么高深的玩法，就兩對花括號{{}}里面寫上表達式

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

您可能感興趣的文章: