理解庫和框架
一、什么是庫
把一些常用的功能封裝成一個(gè)個(gè)函數(shù)或?qū)ο?，并放到一個(gè)js里，目的是為簡(jiǎn)化原生js的操作，它是一個(gè)封裝好的集合
比如Jquery，它就是一個(gè)庫
在Jquery 出現(xiàn)之前，我們用原生js操作Dom非常的麻煩，有了Jquery，它幫我們做了很多事，我們操作Dom則變得好多了，它就稱之為庫，它解決了開發(fā)中的一部分問題
小而美
二、什么是框架
一套架構(gòu)，提供一套整體解決方案，它能夠完全搞定整個(gè)項(xiàng)目開發(fā)，并且很輕松就能解決復(fù)雜的問題。比較大，功能比較全
比如：Vue，augular，react
大而全
MVC 與MVVM
一、MVC
M-Model 模型（數(shù)據(jù)）
V-View 視圖 （結(jié)構(gòu)）
C-Controller 控制器
二、MVVM
M-Model 模型（數(shù)據(jù)）
V-View 視圖 （結(jié)構(gòu)）
VM-ViewModel 控制
認(rèn)識(shí)Vue.js
Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動(dòng)。
漸進(jìn)式框架
就是由淺入深，由簡(jiǎn)單到復(fù)雜
1、體積小
壓縮后 33k
2、更高的運(yùn)行效率
基于虛擬dom，一種可以預(yù)先通過JavaScript進(jìn)行各種計(jì)算，把最終的Dom操作計(jì)算出來并優(yōu)化的技術(shù)，由于這個(gè)Dom操作屬于預(yù)處理操作，并沒有真實(shí)的操作Dom，所以叫做虛擬Dom。
3、雙向數(shù)據(jù)綁定
讓開發(fā)者不用再去操作dom對(duì)象，把更多的精力投入到業(yè)務(wù)邏輯上
官網(wǎng)地址：https://cn.vuejs.org/
Vue cdn:
開發(fā)版：
<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
生產(chǎn)環(huán)境：
<!-- 生產(chǎn)環(huán)境版本，優(yōu)化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
下載Vue.js：
開發(fā)版本： (在瀏覽器打開即可自動(dòng)下載)
https://cn.vuejs.org/js/vue.js
生產(chǎn)版本： (在瀏覽器打開即可自動(dòng)下載)
https://cn.vuejs.org/js/vue.min.js
去項(xiàng)目中引入Vue吧
Helle,word，可以執(zhí)行執(zhí)行的！去試一試吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
message:"你好，hello word"
}
});
//加上前綴$,獲取Vue數(shù)據(jù)屬性，以便于與用戶定義的屬性區(qū)分開來
vm.$data.message="你好啊";
//觀察一個(gè)變量的變化，獲取變化之前和變化之后的值
//第一個(gè)值，要觀察的值
vm.$watch('message',function(newValue,oldValue){
//這個(gè)回調(diào)將在 vm.message 改變后調(diào)用
console.log("新的值是："+newValue);
console.log("old的值是："+oldValue);
});
vm.$data.message="Hello word";
</script>
</body>
</html>
