spa框架：單頁應用 （1個頁面）組件：component 把一個復雜的頁面拆分成若干個組件，最后再拼成一個完整的頁面組件的分類：頁面級組件（home組件 ,list組件）基礎(chǔ)組件（頁面組件包含著基礎(chǔ)組件，可復用的組件）組件的使用：全局組件（不需要在組件中再次聲明了）-寫一些插件時可能會需要用到全局組件 局部組件（在某個組件中聲明的）自己寫的一些組件一般都是局部組件全局組件：Vue.component(tagName,options)局部組件：new Vue({el:'',components:{child:{template:'

'}}})1.組件的名字不能使用已經(jīng)存在的標簽2.一個組件就是一個對象3.名字規(guī)范 myHello會自動轉(zhuǎn)化成myhello4.組件模板中必須只能僅僅有一個根節(jié)點 5.標簽中的名字可以轉(zhuǎn)化（知橫線轉(zhuǎn)駝峰->大寫轉(zhuǎn)小寫）一律名字相同即可6.組件中的data必須是一個函數(shù) 7.組件中的數(shù)據(jù)可以在自己的模板中使用template:'

' //用模板中的內(nèi)容替換掉標簽(el)局部組件 定義在內(nèi)部的，組件之間應該是互不影響的，所以data是個函數(shù)，返回一個新對象，來避免相互引用的問題對象是引用數(shù)據(jù)類型組件中函數(shù)的this指向的是當前組件的實例組件的使用順序 1.引入這個組件 2.注冊組件 3.在模板中使用（是在父組件模板中使用）template中的內(nèi)容會被轉(zhuǎn)化成虛擬dom,文檔碎片，先獲取第一個元素通過createElement創(chuàng)建一個元素，firstChild appendChild到這個dom元素里MVVM=數(shù)據(jù)劫持+compile+發(fā)布訂閱組件的特點：相互獨立，兩個人之間沒有任何關(guān)系子組件不能直接更改父組件的數(shù)據(jù) ，可以子組件傳遞給父組件，父組件改變后再重新渲染子組件 單向數(shù)據(jù)流 父組件變化刷新子組件屬性校驗：校驗父燈傳遞過來的屬性props:['title'] 數(shù)組方式不能實現(xiàn)屬性的校驗props:{ title:{ type:[Number,Boolean,Array,Object,String],default:'無',validator(val){ val代表傳遞過來的值 ，如果返回true通過 ，返回false，不通過return val>50}}} 子組件的屬性refref放在原生dom上可以獲取元素，放在組件上可以獲取當前組件eg:this.$refs.child.hit();子組件通過event給父組件傳遞信息第一種方法：子組件：this.$emit('child-fn','blue') 第一個參數(shù)是方法，第二個參數(shù)是傳遞給父級的this.$on('child-fn',changeColor) 這個this指的是child給子組件綁了一個監(jiān)聽函數(shù)，這個監(jiān)聽函數(shù)是父類的第二種方法：子組件：this.$emit('update:msg','blue');第三種方法：子組件：this.$emit('update:msg','blue');使用模板編譯的方式：1.有el2.template3.render會將el和template的形式轉(zhuǎn)化成AST(抽象語法樹)會轉(zhuǎn)化成一個函數(shù)render 會個vhode{tage:'div',children:['hello',{tab:'h1'}]}->createElement->append頁面中l(wèi)et vm = new Vue({? ? ? el:'#app',? ? ? render:createElement=>{? ? ? ? return createElement('div',{class:'a'},['hello',createElement('h1','你好')])? ? ? }? ? ? /*template:`

hello

你好

`*/? })//父組件掛載完成并不能確保子組件一定渲染完成，所以在mounted中一般會加nextTick防止無法獲取的最新的結(jié)果mouted(){this.$nextTick(()=>{})}slot:例如別人寫好的一個模態(tài)框組件 我們來使用,我們會先引入進來,傳入一些自己的內(nèi)容,所以綁定的方法都是自己的父組件中：

{{msg}}

子組件中：×keeplive：保持緩存組件切換時用的東西加了keeplive created只會執(zhí)行一次 activated都會執(zhí)行不加keeplive created都會執(zhí)行 activated不會執(zhí)行router 路由 需要引用vue-router.js這個js安裝npm init -ynpm install vue-router不同的url返回不同的結(jié)果vue的路由（spa）spa中只有一個首頁，切換url地址顯示不同的組件 切換路徑但是頁面仍然是以前的那個1.hash #2.pushState 沒有#號(在開發(fā)的時候會產(chǎn)生404)，上線時會使用這個方式，可以依賴服務端解決404問題3.mode模式 默認就是hash? 如果mode:'history' h5的api步驟：1.創(chuàng)建一個VuerRouter實例? let router = new VueRouter({? ? ? routes // 將路由表注入進來? });2.準備好需要切換的組件? let Home = {template:'

首頁

'};? let List = {template:'

列表頁

'};3.將路由實例放在vue實例中,在任意組件中會多兩個屬性let vm = new Vue({? ? ? el:'#app',? ? ? router? ? ? // this.$router this.$route? });//路由表 let routes = [? ? ? {path:'/home',component:Home},? ? ? {path:'/list',component:List}? ];router-view會將默認匹配到的結(jié)果插到此標簽內(nèi)router-linkto動態(tài)綁定時可以放對象 tag表示編譯后的標簽名let router = new VueRouter({? ? mode:'history', // h5 pushState沒有# 但是會有404,開發(fā)時采用默認hash的形式? ? routes:[? ? ? ? {path:'',component:Home}, // 配置默認顯示的組件? ? ? ? {path:'/home',component:Home},? ? ? ? {path:'/list',component:List},? ? ? ? // {path:'*',component:List} //如果這樣寫組件是切換了 但是路徑還是寫錯的? ? ? ? {path:'*',redirect:'/list'} //重定向 一般是404配置? ? ]? });路由的嵌套routes:[? ? ? ? ? {path:'/home',component:Home},? ? ? ? ? {? ? ? ? ? ? ? path:'/profile',? ? ? ? ? ? ? component:Profile,? ? ? ? ? ? ? children:[ //children的path不能加/? ? ? ? ? ? ? ? ? {path:'aboutme',component:AboutMe},? ? ? ? ? ? ? ? ? {path:'introduce',component:Introduce},? ? ? ? ? ? ? ]? ? ? ? ? }? ? ? ]webpack用來打包vue- vue組件都寫在寫在一起了,.vue文件,每一個.vue文件都是一個組件 .js babel-loader .css css-loader.vue vue-loader組件組成1.模板（結(jié)構(gòu)） 需要vue-template-compiler2.邏輯（行為）3.樣式 webpack(模塊化)webpack webpack-dev-serverjs打包 babel-core babel-loader babel-preset-es2015 babel-preset-stage-0css模塊 less less-loader css-loader style-loaderimg模塊 url-loader file-loaderhtml打包 html-webpack-pluginvue模塊 vue-loader vue-template-compilervue vue-routervue-cli 腳手架npm install vue-cli -gvue init 模板名 項目名vue init webpack vue-pro-webpack