Vue基礎(二)：模板語法(一)
1. 模板語法
1.1 模板語法概述
Vue.js 使用了基於 HTML 的模板語法，允許開發者宣告式地將 DOM 繫結至底層 Vue 例項的資料。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循規範的瀏覽器和 HTML 解析器解析。
在底層的實現上，Vue 將模板編譯成虛擬 DOM 渲染函式。結合響應系統，Vue 能夠智慧地計算出最少需要重新渲染多少元件，並把 DOM 操作次數減到最少。
如果你熟悉虛擬 DOM 並且偏愛 JavaScript 的原始力量，你也可以不用模板，直接寫渲染 (render) 函式，使用可選的 JSX 語法。
1、把字串渲染到頁面上有哪些方式？
利用原生js拼接字串
利用Vue插值語法
文件碎片 document.createDocumentFragment
利用es6 `` 反引號拼接字串
2、我們已經用過哪些模板語法了？
插值語法
1.2 指令
API查詢：https://cn.vuejs.org/v2/api/
指令 (Directives) 是帶有 v- 字首的特殊attribute。指令attribute的值預期是單個JavaScript表示式(v-for是例外情況)。指令的職責是，當表示式的值改變時，將其產生的連帶影響，響應式地作用於 DOM。
1.2.1 v-cloak指令
插值表示式存在閃動的問題，它先會載入完插值標籤，在讀取到資料後才會刷新出資料，一般我們是發現不了的，除非網路出現波動，但是我們不能讓這種情況出現啊，所以我們就要用到v-cloak指令了。
這個指令解決問題的原理就是先隱藏好插值標籤，替換好值之後再顯示最終的值。
官方描述：
防止頁面加載出現閃爍問題：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue的基本使用</title>
</head>
<body>
<div id="app">
<div v-cloak>{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
效果模擬不出來，大家自己腦補吧。
1.2.2 資料繫結指令
v-text：
v-html：
v-pre：
我們不是有了插值表示式了嗎，為什麼還要這些資料繫結指令呢？
那肯定是有自己的特點啊，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue的基本使用</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div v-text='msg'></div>
<div v-html='msg1'></div>
<div v-pre>{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
1、v-text指令用於將資料填充到標籤中，作用於插值表示式類似，但是沒有閃動問題
2、v-html指令用於將HTML片段填充到標籤中，但是可能有安全問題
3、v-pre用於顯示原始資訊
*/
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue',
msg1: '<h1>HTML</h1>'
}
});
</script>
</body>
</html>
執行的效果：
v-text相比插值表示式更加簡潔，v-html可以保證html標籤被讀取，v-pre顯示原始資訊跳過編譯過程，都有利於效能的優化。
1.2.3 資料響應式
什麼叫響應式呢？
html5中的響應式(螢幕尺寸的變化導致樣式的變化)。
資料的響應式(資料的變化導致頁面內容的變化)。
什麼叫資料繫結？
將資料填充到標籤中。
我們可以使用v-once來執行一次性的插值，可以提升伺服器效能，之後當資料改變時，插值處的內容不會繼續更新。
這個案例用法和之前的一樣，效果不好展示，所以就不放程式碼了。
1.2.4 雙向資料繫結
什麼是雙向資料繫結？
當資料發生變化的時候，檢視也就發生變化
當檢視發生變化的時候，資料也會跟著同步變化
那我們如何實現雙向繫結呢？這就要用到指令標籤v-model了。
(1) v-model指令
雙向繫結的使用場景：
v-model是一個指令，限制在 <input>、<select>、<textarea>、components（元件）中使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue的基本使用</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div>
<input type="text" v-model='msg'>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
雙向資料繫結
1、從頁面到資料
2、從資料到頁面
*/
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
}
});
</script>
</body>
</html>
執行的效果：
我們在控制檯輸入vm.msg，可以看到現在的值是Hello Vue。
然後我們在文字框中新增文字 Hello Java，再次在控制檯列印。
可以看到，我們繫結的內容是同時變化的，那麼證明我們雙向繫結成功了。
(2) MVVM設計思想
MVVM是Model-View-ViewModel的簡寫。它本質上就是MVC 的改進版。MVVM 就是將其中的View 的狀態和行為抽象化，讓我們將檢視 UI 和業務邏輯分開。當然這些事 ViewModel 已經幫我們做了，它可以取出 Model 的資料同時幫忙處理 View 中由於需要展示內容而涉及的業務邏輯。微軟的WPF帶來了新的技術體驗，如Silverlight、音訊、視訊、3D、動畫……，這導致了軟體UI層更加細節化、可定製化。同時，在技術層面，WPF也帶來了 諸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM（Model-View-ViewModel）框架的由來便是MVP（Model-View-Presenter）模式與WPF結合的應用方式時發展演變過來的一種新型架構框架。它立足於原有MVP框架並且把WPF的新特性糅合進去，以應對客戶日益複雜的需求變化。
M、V、VM 分別代表什麼？
m model
資料層 Vue 中 資料層 都放在 data 裡面
v view 檢視
Vue 中 view 即 我們的HTML頁面
vm （view-model） 控制器 將資料和檢視層建立聯絡
vm 即 Vue 的例項 就是 vm