免費(fèi)看電影的網(wǎng)站是什么快速收錄網(wǎng)
紅色框里面的都是vue的模板。有了模板就得有模板的特殊語法。上面只是簡單的雙括號加上表達(dá)式，這種叫做插值語法，除了這種語法還有其他語法嗎？
插值語法實(shí)現(xiàn)的功能很單一，就是將指定的值放到指定的位置。還有一種叫做指令語法，它能夠完成的就相對高端一些。
vue里面的指令很多，都是以v-開頭。下面其實(shí)就是將執(zhí)行的結(jié)果綁定給v-bind
<a v-bind:href="url">點(diǎn)擊我去百度</a>
//如果加上v-bind:，那么vue會將引號里面包著的東西url拿出來當(dāng)js表達(dá)式去執(zhí)行，url就相對于變量new Vue({ el: "#app", data:{ name: "lucas",url: "https://www.baidu.com",}})v-bind可以指定任何一個(gè)屬性。bind可以給標(biāo)簽里面任何一個(gè)標(biāo)簽屬性動態(tài)的綁定值。v-bind:可以簡寫為:冒號。
<div id="app"><h1>hello world name:{{name}}</h1><a v-bind:href="url" 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ù)類型，還可以是對象。所以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" 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>?對于插值語法沒有什么高深的玩法，就兩對花括號{{}}里面寫上表達(dá)式