想學一門程式語言，就要先整明白它的語法規則。Vue使用了基於HTML的模板語法，允許開發者宣告式地將DOM繫結至底層元件例項的資料。所有Vue的模板都是合法的 HTML，所以能被遵循規範的瀏覽器和 HTML解析器解析。
3.1 文字插值資料繫結最常見的形式就是使用雙大括號{{}}的文字插值，如果你要用不常見的，那可用<span v-text=""></span>的方式。在Vue中，帶有v-字首的特殊屬性，稱為指令。
無論選擇哪一個插值方式繫結到元件(HTML標籤)上，在元件例項上的值發生了改變，插值處的內容都會更新，這便是資料驅動的方式。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue3.0核心語法</title> <script src="vue.global.js"></script></head><body><div id="hello"> <input id="name" v-model="msg" placeholder="輸入文字內容"/> <p>用雙大括號實現文字插值：{{ msg }}</p> <p>用v-text指定實現插值：<span v-text="msg"></span></p></div><script> // 第1步：data資料；第2步：vue例項，第3步：繫結元素 Vue.createApp({ data() { return { msg: '' } } }).mount("#hello")</script></body></html>輸出結果
3.2 原始HTML在開發過程中，有時會輸出有格式的動態內容，比如輸出帶顏色文字。如果用插值的方式，輸出的為文字內容，顯然滿足不了要求。這時就要用到v-html指令了。
溫馨提醒：原始HTML，儘量不要用在輸入上，因為它很容易導致 XSS 攻擊。XSS攻擊通常指的是透過利用網頁開發時留下的漏洞，透過巧妙的方法注入惡意指令程式碼到網頁中。
3.3 屬性繫結在Vue中，對HTML屬性的繫結，採用v-bind(可縮寫為":")指令，對事件的繫結，採用v-on(可縮寫為"@")指令。這裡說下v-bind的應用，v-on在講事件時再細講。
你可能會奇怪，繫結屬性有什麼用？我隨便舉一個例子，你就秒懂了。
當美女程式設計師看我的文章時，系統就給她推薦有漂亮圖表的文章連結地址；當男性程式設計師看我的文章時，系統就給推薦有漂亮MM的文章連結地址，以此來提高閱讀量。
#前端##Vue##程式設計師##JavaScript##Web#
最新評論