vue的模板語法？
阿新 • • 發佈：2021-07-20
一、Vue模板語法，預設語法的功能就是前端渲染，前端渲染即使把資料填充到html標籤中。資料（來自伺服器） + 模板（html標籤） = 前端渲染（產物是靜態html內容）。
前端渲染的三種方式。
1）、原生js拼接字串。基本上就是將資料以字串的方式拼接到html標籤中。缺點是不同開發人員的程式碼風格差別很大，隨著業務的複雜，後期的維護變得逐漸困難起來。
2）、使用前端模板引擎。它擁有自己的一套模板語法規則。優點是大家都遵循同樣的規則寫程式碼，程式碼可讀性明顯提高了，方便後期的維護。缺點是沒有專門提高事件機制。
3）、使用vue特有的模板語法。包含差值表示式、指令、事件繫結、屬性繫結、樣式繫結
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<!--
Vue的基本使用步驟
1）、需要提供標籤用於填充資料。
2）、引入vue.js庫檔案。
3）、可以使用vue的語法做功能了。
4）、把vue提供的資料填充到標籤。使用插值表示式{{}}，作用就是將資料填充到指定的標籤的位置。
-->
<!-- {{}}叫做插值表示式，將資料填充到html標籤中，插值表示式支援基本的計算操作。-->
<div id="app">
<div>{{msg}}</div>
<div>{{'I love you ' + msg}}</div>
<div>{{1 + 2 + 3}}</div>
</div>
<script src="vue.js" type="text/javascript"></script>
<script type="text/javascript">
// Vue程式碼執行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue程式碼經過Vue框架變成了原生js程式碼。
// 建立一個Vue的變數vm，儲存Vue的例項，提供一個引數，是物件形式的，並且這個物件包含兩個重要的屬性el、data。
// Vue所做的工作也就是把資料填充把頁面的標籤裡面。
var vm = new Vue({
// el元素的掛載位置，值可以是CSS選擇器或者DOM元素，掛載就是將資料關聯到頁面的某個標籤上。
el: '#app', // el是告訴Vue把資料填充到那個位置，這裡通過id選擇器進行繫結到那個標籤。
// data模型資料，值是一個物件。
data: { // 用於提供資料。
msg: 'hello Vue!'
}
});
</script>
</body>
</html>
二、Vue模板語法，什麼是指令？
1）、什麼是自定義屬性。自定義屬性是區別於標準屬性的，標準屬性是標籤自帶的屬性。
2）、Vue指令的本質就是自定義屬性。
3）、Vue指令的格式，以v-開始，比如v-cloak。指令的名稱取決於設計者。
三、Vue模板語法，v-cloak指令用法。
1）、插值表示式存在的問題，就是閃動。
2）、如果解決該問題，使用v-cloak指令，可以解決閃動的問題。
3）、解決該問題的原理，先隱藏，替換好值之後再顯式最終的值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello world</title> <style type="text/css"> [v-cloak] { display: none; } </style> </head> <body> <!-- v-cloak指令的用法。 1）、需要提高樣式。 [v-cloak] { display: none; } 2）、在插值表示式所在的標籤中新增v-cloak指令。 3)、原理，先通過樣式隱藏內容，然後在記憶體中進行值的替換，替換好之後再顯式最終的結果，此時就不會顯式{{}}這種閃動效果。 --> <div id="app" v-cloak> <div>{{msg}}</div> </div> <script src="vue.js" type="text/javascript"></script> <script type="text/javascript"> // Vue程式碼執行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue程式碼經過Vue框架變成了原生js程式碼。 // 建立一個Vue的變數vm，儲存Vue的例項，提供一個引數，是物件形式的，並且這個物件包含兩個重要的屬性el、data。 // Vue所做的工作也就是把資料填充把頁面的標籤裡面。 var vm = new Vue({ // el元素的掛載位置，值可以是CSS選擇器或者DOM元素，掛載就是將資料關聯到頁面的某個標籤上。 el: '#app', // el是告訴Vue把資料填充到那個位置，這裡通過id選擇器進行繫結到那個標籤。 // data模型資料，值是一個物件。 data: { // 用於提供資料 msg: 'hello Vue!' } }); </script> </body> </html>
四、Vue模板語法，v-text、v-html、v-pre資料繫結指令用法。
1）、v-text填充純文字。特點一、相比較插值表示式更加簡潔。不存在閃動問題，比插值表示式好使的哦。
2）、v-html填充html片段。特點一、存在安全問題。特點二、本網站內部資料可以使用，來自第三方資料不可以用。
3）、v-pre填充原始資訊。特點一、顯式原始資訊，跳過編譯過程，分析編譯過程。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello world</title> </head> <body> <div id="app"> <div>{{msg}}</div> <!-- v-text沒有閃動問題的，使用者體驗更好，比插值表示式更加好使 --> <div v-text="msg"></div> <!-- 內容按普通 HTML 插入 - 不會作為 Vue 模板進行編譯，在網站上動態渲染任意 HTML 是非常危險的，因為容易導致 XSS 攻擊 --> <div v-html="msg2"></div> <!-- 顯式原始資訊，跳過編譯過程(分析編譯過程) --> <div v-pre>{{msg}}</div> </div> <script src="vue.js" type="text/javascript"></script> <script type="text/javascript"> // Vue程式碼執行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue程式碼經過Vue框架變成了原生js程式碼。 // 建立一個Vue的變數vm，儲存Vue的例項，提供一個引數，是物件形式的，並且這個物件包含兩個重要的屬性el、data。 // Vue所做的工作也就是把資料填充把頁面的標籤裡面。 var vm = new Vue({ // el元素的掛載位置，值可以是CSS選擇器或者DOM元素，掛載就是將資料關聯到頁面的某個標籤上。 el: '#app', // el是告訴Vue把資料填充到那個位置，這裡通過id選擇器進行繫結到那個標籤。 // data模型資料，值是一個物件。 data: { // 用於提供資料 msg: 'hello Vue!', msg2: '<h1>hello Vue!</h1>', //可以使用v-html標籤展示html程式碼。 } }); </script> </body> </html>
五、Vue模板語法，雙向資料繫結。
MVVM設計思想，最只要的理念就是分治，把不同的功能程式碼放到不同的模組，通過特定的方式建立關聯。
1）、M指的是Model，就是data裡面的資料，提供資料的。Model通過VM的Data Bindings資料繫結View。
2）、V指的是View，就是所寫的模板Dom元素，提供頁面展示效果的。View通過VM的DOM Listeners事件監聽Model。
3）、VM指的是View-Model，就是控制邏輯，實現控制邏輯將兩者結合到一起。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello world</title> </head> <body> <div id="app"> <div>{{msg}}</div> <!-- 主要是用於表單輸入域中。 --> <!-- 雙向資料繫結分析，方向一、頁面影響資料，方向二、資料影響頁面。 --> <!-- 使用者修改頁面內容資料會改變，資料改變了影響插值表示式的內容頁面改變。 --> <div> <input type="text" v-model="msg" /> </div> </div> <script src="vue.js" type="text/javascript"></script> <script type="text/javascript"> // Vue程式碼執行原理分析，概述編譯過程的概念（Vue語法->原生語法），就是Vue程式碼經過Vue框架變成了原生js程式碼。 // 建立一個Vue的變數vm，儲存Vue的例項，提供一個引數，是物件形式的，並且這個物件包含兩個重要的屬性el、data。 // Vue所做的工作也就是把資料填充把頁面的標籤裡面。 var vm = new Vue({ // el元素的掛載位置，值可以是CSS選擇器或者DOM元素，掛載就是將資料關聯到頁面的某個標籤上。 el: '#app', // el是告訴Vue把資料填充到那個位置，這裡通過id選擇器進行繫結到那個標籤。 // data模型資料，值是一個物件。 data: { // 用於提供資料 msg: 'hello Vue!', } }); </script> </body> </html>