vue2_模板語法、資料繫結
阿新 • • 發佈：2022-03-31
1、模板語法
Vue模板語法包括兩大類
1 .插值語法
功能：用於解析標籤體內容。插值語法往往用於指定標籤體內容(雙標籤中間夾著的內容)
寫法：{{xxx}} , xxx是js表示式，可以直接讀取到data中的所有區域。
2 .指令語法
功能：用於解析標籤（包括：標籤屬性、標籤體內容、繫結事件…）
舉例：＜ a v-bind:href="xxx"＞ , xxx同樣要寫js表示式，可以直接讀取到data中的所有屬性。
備註：Vue中有很多的指令，且形式都是v-xxx ,此處只是拿v-bind舉例。
例子：
即使用插值寫法頁面也無法進行標籤內的解析如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>初始vue</title> <!-- 引入vue--> <script src="/vueBaseJs/vue.js"></script> </head> <body> <!-- 準備一個容器，用來存放vue的工作成果--> <div id="root"> <a v-bind:href="url.toUpperCase()" v-bind:abcdefg="hello">點選去新世界</a> </div> <script> Vue.config.productionTip = false;//阻止vue在啟動時生成生產提示 //建立VUE例項 new Vue({ el:"#root",//el(Element)用於指定當前Vue例項為哪個容器服務，值通常為css選擇器字串。 data:{//data中用於儲存資料，資料提供給el所指定的容器使用，值可以為物件。 url:"https://www.bilibili.com/", hello:"世界和平" } }); </script> </body> </html>
結果：