第一章遇見vue.js
一.MVX模式
1.MVC：Model（模型），Controller（控制器），View（視圖）。
View一般都是通過Controller來和Model進行聯繫。
Controller是Model和View的協調者，View和Model不直接聯繫。
基本聯繫都是單向的。
用戶通過Controller來操作Model以達到View的變化。
2.MVP（代表Riot.js）
MVP是從MVC模式演變而來，Controller/Presenter負責邏輯的處理，Model提供數據，View負責顯示
二.vue是什麼？
1.定義：vue.js不是框架+只是聚焦視圖層，是一個構建數據驅動的web界面的庫。vue通過簡單的api提供高效的數據綁定和靈活的組件系統。
2.vue特性
①輕量
②數據綁定
③指令
④插件化（vue核心庫不包含Router、ajax、表單驗證等功能，但可以方便加載對應的插件）
3.與AngularJS的區別
相同點：
- 都支持指令（內置指令、自定義指令）。
- 都支持過濾器（內置過濾器和自定義過濾器）
- 都支持雙向綁定
- 都不支持低端瀏覽器
不同點：
- AngularJS的學習成本高，而vue本身提供api都是比較簡單、直觀。
- 性能上，AngularJS依賴對數據做髒檢查，所以watcher越多越慢。vue使用基於依賴追蹤的觀察並且使用異步隊列更新，所有數據都是獨立觸發。對於龐大的應用來說這個優化差異還是比較明顯。
4.與react的區別：
相同點：
- 都需要編譯後使用
- 中心思想相同：一切都是組件，組件實例之間可以嵌套。
- 都提供合理的鉤子函數，讓開發者定製化的處理需求
- 都不內置類似ajax、router等功能到核心包，而是以其他方式（插件）加載
- 在組件開發中都支持mixins的特性
不同點
- react依賴virtual DOM，vue使用的是DOM模板
- vue在模板中提供指令、過濾器，方便操作DOM
5.如何使用vue
①安裝：1-1 script： 通過script加載CDN<script src="https://cdn.jsdelivr.net/npm/vue"></script>
1-2 npm:基於npm管理依賴，使用npm來安裝vue，執行指令$ npm i vue --save-dev
1-3 bower:基於bower管理，安裝vue，執行命令$ bower i vue --save-dev
6.第一個HelloWorld程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="box">
<ul>
<li v-for="tab in tabs">{{tab.text}}</li>
</ul>
</div>
<script>
new Vue({
el:'#box',
data:{
tabs:[{text:'巴士'},
{text:'快車'},
{text:'專車'},
{text:'代駕'},
{text:'順風車'},
{text:'出租車'},
{text:'汽車'}]
}
})
</script>
</body>
</html>
第二章
數據綁定是將數據和視圖相關聯，當數據變化時刻自動更新視圖。
一.語法
1.插值
基本形式{{}}
<span>Text:{{text}}</span>
text改變，文本中的值也會聯動變化。有時候只需渲染一次，後續數據變化不關心的時候可以通過*實現，寫法：{{*text}}
大括號標籤會把裏面的值全部當做字符串來處理，如果值是HTML片段，則可以使用三個大括號綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue解析帶html標籤的字符串爲dom</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.red{
font-weight: bold;
font-size: 1.2rem;
color: #fff;
background-color: #e94826;
}
</style>
</head>
<body>
<div id="box">
<p v-html="name"></p>
<p>{{logo}}</p>
</div>
<script>
new Vue({
el:'#box',
data() {
return{
logo:'<span class="red">HelloWorld</span>',
name: '<span class="red">前一部分<br/>後一部分</span>'
}
}
})
</script>
</body>
</html>
vue提供一系列文本渲染方式，vue指令和自身特性內是不可以插值的，用錯會報錯！
2.表達式
表達式是各種數值、變量、運算符的綜合體。簡答的表達式可以是常量或變量名稱。表達式的值是其運算結果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表達式</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="box">
<p>{{cents/10}}</p>
<p>{{true?1:0}}</p>
<!--切分-->
<p>{{example.split("")}}</p>
<!--原過濾器寫法，注意在vue2.0中已經去除內置過濾器寫法-->
<!--過濾器：小寫變大寫-->
<p>{{example | toUpperCase}}</p>
<!--過濾器：首字母大寫-->
<p>{{example | capitalize}}</p>
<!--現在 小寫變大寫的寫法-->
<p>{{example.toUpperCase()}}</p>
</div>
<script>
new Vue({
el:'#box',
data:{
cents:90,
true:'ddd',
example:'apple'
}
})
</script>
</body>
</html>
3.指令
指令的作用是當表達式的值發生變化時，將這個變化也反映到DOM上
v-if中的內容爲true則顯示，false則隱藏- 在指令和表達式之間插入一個參數，用
冒號分隔，如v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="box">
<!--v-if中的內容爲true則顯示，false則隱藏-->
<p v-if="beautiful">beautiful girl</p>
<p v-if="ugly">ugly girl</p>
<!--在指令和表達式之間插入一個參數，用冒號分隔，如v-bind-->
<a v-bind:href="url">點擊百度一下！</a>
</div>
<script>
new Vue({
el:'#box',
data:{
beautiful:true,
ugly:false,
url:'https://www.baidu.com/'
}
})
</script>
</body>
</html>
二.分隔符
1.vue數據綁定的語法被設計爲可配置的，可以修改
Vue.config.delimiters = {"<%","%>"}
文本插值的語法由{{example}}變更爲 <$example$>