第一天的總結(jié)：注意：和js有關(guān)的就寫在（鉤子函數(shù)）inseted函數(shù)中去赘理，和CSS樣式有關(guān)的就寫在bind函數(shù)中去翘紊！
换薄。mvvm：是前端視圖層的分層開發(fā)思想，主要把每個頁面融师，分成了M,V,和VM的思想的核心，因?yàn)関m是m和v之間的調(diào)度者蚁吝。? ?
組成：vm 就是model和view的調(diào)度者? ,model數(shù)據(jù)庫操作（后臺請求的數(shù)據(jù)）,? view 視圖層（渲染的模板區(qū)域）旱爆。
1：m:保存得是每個頁面中單獨(dú)的數(shù)據(jù):
2：v:每個頁面中的html結(jié)構(gòu)
3：mv:它是一個調(diào)度者，分別了m和v窘茁，每當(dāng)v層想要獲取后保存數(shù)據(jù)的時候怀伦，都要有vm做中間的處理
使用場景：專注于瀏覽器端的視圖層，前端有的比較多山林，是站在前端項(xiàng)目的角度考慮
房待。mvc：是一種比模塊化更加細(xì)化的約定。
? ? ? ? ? ? ? 組成：model 數(shù)據(jù)庫連接? ? view 前端頁面? ? ? controller 邏輯控制驼抹。? 使用場景：后端框架用的多桑孩，是站在整個項(xiàng)目的考慮角度
。vue的基本代碼和mvvm之間對應(yīng)的關(guān)系
mvvm最大的特點(diǎn)：數(shù)據(jù)變-->視圖變框冀，? 視圖變-->數(shù)據(jù)流椒； 雙向綁定數(shù)據(jù)；
? ? ? ? ? ? ? 不推薦操作DOM（如果使用過原生的js或者jquery明也，那么一定對DOM操作宣虾，綁定事件操作這些原生的js非常屬性惯裕，比如在指令DOM中插入一個元素，并綁定事件）绣硝；
蜻势。內(nèi)置指令：v-cloak:解決閃爍問題? ? ? v-text:插值? ? ? ? v-html:可以解決v-text轉(zhuǎn)義的問題? ? ? ? v-bind:綁定數(shù)據(jù),簡寫@? ? ?
? ? v-on:事件，簡寫：? ? ? ? ? v-model:雙向綁定數(shù)據(jù)? ? ? ? ? ? ? ? ? v-if/v-show：切換鹉胖。單次切換/頻繁切換? ? ? ? ?
? ? v-for：遍歷;? 適用于：普通數(shù)組咙边，數(shù)組對象，對象次员，數(shù)字
? ? ? ? 4種語法：1.v-for="count in 10"? ? ? 迭代數(shù)字
? ? ? ? 2.v-for="(item,index) in arr"? ? ? ? ? ? 循環(huán)普通數(shù)組
? ? ? ? 2.1? v-for="item in arr"? ? :key="item.id"? ? ? ? 循環(huán)普通數(shù)組
? ? ? ? 3.v-for="(item,index) in arr"? :key="item.id"? ? ? 循環(huán)對象數(shù)組
? ? ? ? ? ? ? ? ? ? ? ? 4.v-for="(val,key,index) in obj"? :key="key"? ? ? 遍歷對象
常用遍歷：? 1. v-for="(item,index) in arr"? ? :key="item.id"? ?
? ? ? ? ? ? ? ? ? ? 2. v-for="item in arr"? ? :key="item.id"? ?
败许。數(shù)組API的方法：
push,? pop,? splice,? ? some,? filter,? ? findIndex,? includes,? ? forEach
（二）生命周期函數(shù)（也稱為生命周期鉤子）
。創(chuàng)建期間的生命周期函數(shù)：
beforeCreate:實(shí)例剛在內(nèi)存中被創(chuàng)建出來淑蔚，還沒有初始化好data和methods屬性
created:實(shí)例已經(jīng)在內(nèi)存中創(chuàng)建 OK市殷，data和methods已經(jīng)創(chuàng)建Ok,還沒有開始編譯模板
beforeMount:已經(jīng)完成好編譯模板，還沒有掛載到頁面中去
mount:編譯好模板刹衫，掛載到頁面中指令的容器中顯示
醋寝。運(yùn)行期間的生命周期函數(shù)：
beforeUpdata:狀態(tài)更新之前執(zhí)行函數(shù)，還沒有重新渲染到Dom中
updata:界面已經(jīng)渲染好了
带迟。銷毀期間的生命周期函數(shù)：
beforDestroy:實(shí)例銷毀之前的調(diào)用音羞，在這里，實(shí)例仍然完全可用
destroy:Vue實(shí)例調(diào)用仓犬，所有的監(jiān)聽事件會被移除嗅绰，所有的子實(shí)例也會被銷毀
（第四天）路由的使用：路由：通過url中的hash來實(shí)現(xiàn)頁面不同之間的切換，改變切換頁面的方式搀继，稱為前端路由
1.先導(dǎo)入vue-router組件庫? ? ? ? ? <script src="./lib/vue-router-2.7.0.js"></script>
2. 使用router-link組件來導(dǎo)航? ? ? <router-link to="/login">登錄</router-link>? ? 注意：to必須要加
3.使用router-view組件來顯示匹配到的組件? ? ? ? ? <router-view> </router-view>
4.創(chuàng)建組件? ? ? ? ? ? var login = { tempalt:"<h1>登錄組件</h1>"}
5.配置路由規(guī)則? ? const（或var） router? =? new VueRouter({?
? ? ? ? ? ? router:[? //重定向
{path:"/login",component:login},
{path:"register",component:register},
]
? })
6.通過創(chuàng)建vue對象窘面，來使用router
? var vm = new Vue({
? ? ? ? ? ? el: '#app',
? ? ? ? ? ? data: {},
? ? ? ? ? methods: {},
? ? ? ? ? router? ? ? ? ? ? });
。ref的使用：使用ref獲取Dom元素和組件引用
1.獲取原生的Dom? ? ? ? 2.獲取子組件的datahe
? 叽躯。如何獲炔票摺？
- 在指定的元素上面定義 ref=”myDOM“
- DOM this.$refs.myDOM.innerText?
- 組件 this.$refs.myCom.msg? ? 可以直接方面厘米的屬性和方法
設(shè)置路由切換動效
点骑。在路由規(guī)則中定義參數(shù)：2種方式? ? Vue.extend 創(chuàng)建組件的意思
1.在規(guī)則中定義參數(shù)? ? { path: '/register/:id', component: register }
2.通過this.router.params來獲取路由中的參數(shù)? ? ? ? ? var login = Vue.extend({? ? template: '<h1>注冊組件 --- {{this.$route.params.id}}</h1>'? ? ）}? ?
酣难。視圖命名規(guī)范? ：? 要添加name,不加name就相當(dāng)于默認(rèn)? ? ? <router-view name="a"></router-view>
。什么是組件：為了拆分vue實(shí)例代碼量的黑滴，能夠讓我們以不同的組件憨募，來劃分不同的功能規(guī)塊，使用時跷跪，直接調(diào)用即可馋嗜。
（第五天）
。什么是webpack吵瞻？
? ? ? ? ? 答：是前端的一個項(xiàng)目構(gòu)建工具葛菇，它是基于Node.js開發(fā)出來的一個前端工具
甘磨。webpack-四大API： entry(入口)? ? output(輸出)? ? loader(加載器)? ? ? plugins(插件)
。webpack安裝的兩種方式：
? ? ? ? ? ? 答：1.運(yùn)行npm i webpack -g全局安裝webpacck,z這樣就能在全局使用webpack的命令
? ? ? ? ? ? ? ? ? 2.在項(xiàng)目根目錄中運(yùn)行npm i webpack --save 或者--dev安裝到項(xiàng)目依賴中
? ? 注意：-D：開發(fā)需要的包? -S：項(xiàng)目需要的包
眯停。初步使用webpack打包構(gòu)建列表隔行變色案例
1.運(yùn)行npm init 初始化項(xiàng)目济舆，使用npm管理項(xiàng)目中的依賴包
2.創(chuàng)建項(xiàng)目基本的目錄結(jié)構(gòu)
3.使用cnpm i jquery --save安裝jquery類庫
。把文件打包到dist中：
1.使用webpack-dev-server? ? 這個工具莺债，來實(shí)現(xiàn)自動打包編譯的功能
2.運(yùn)行cnpm i webpack-dev-server? -D 把這個工具安裝到項(xiàng)目的本地開發(fā)依賴中
滋觉。導(dǎo)入文件(寫在main.js文件里)：import? Vue? from "Vue.js"
4.創(chuàng)建main.js并書寫隔行變色的代碼邏輯
。vue的文件結(jié)構(gòu)：
dist(上線的文件)? ? node_modules? ? ? src(做項(xiàng)目時的文件)? ? package.json(需要用到的文件)? ? ? ?
webpack.config.js(module.exports指定入口和出口的文件)
（六天）vuex --->的使用
? ? ? ? ? ? ? ? import? Vuex? from? "vuex"? //導(dǎo)入
? ? ? ? ? ? ? ? Vue.use(Vuex)? ? //使用
const? store? = new? Vuex.Store({? ? //創(chuàng)建
? ? ? ? ? state:{}? //數(shù)據(jù)
? ? ? ? ? mutations:{}? //同步修改state
? ? ? ? ? ? ? ? ? ? ? ? ? getters:{}? ? //計算屬性
? ? ? ? ? ? ? ? ? ? ? ? ? actions:{}? ? //異步修改state中的數(shù)據(jù)? -->disptach
})
? ? vue的使用：
const? vm? = new Vue({
el:"#app"? //控制的頁面
data:{}? //數(shù)據(jù)
methods:{}? ? ? //方法和函數(shù)
? ? ? ? ? ? ? ? router,
store,
? ? ? ? ? ? ? ? })
? ? 文件打包：? ? 下載壓縮包：cnpm install compression-webpack-plugin? --save-dev
