一锐墙、 vue的基礎(chǔ)用法
v-if :是否插入元素 （用的相對(duì)較少）
v-show :是否隱藏元素
二、父子組件傳值（父?jìng)髯樱?/h3>
- 1.父?jìng)髯拥臅r(shí)候通過屬性傳遞
- 2.子要聲明props:["屬性名"]來接收
- 3.收到就是自己的了,隨便你用
八秃。在template中 直接用
薛闪。在js中 this.屬性名 用
總結(jié):父?jìng)髯? --父?jìng)髯樱▽傩裕勇暶鳎ㄊ眨┲ǜВ又苯佑?/p>
三百宇、注冊(cè)全局組件
- 全局API Vue.component("組件名",組件對(duì)象);
四、附加功能：過濾器&監(jiān)視改動(dòng)
1.filter || filters
八秃。在template中 直接用
薛闪。在js中 this.屬性名 用
總結(jié):父?jìng)髯? --父?jìng)髯樱▽傩裕勇暶鳎ㄊ眨┲ǜВ又苯佑?/p>
秘豹。filter為全局過濾器（給數(shù)據(jù)添油加醋顯示）vue.filter("過濾器名,過濾方式fn")
携御。組件內(nèi)的過濾器 filters:{"過濾器名",過濾方式fn}
示例一：filters的使用 ---- 示例二：filters對(duì)象的方法里面可以傳很多參數(shù)的使用
2.監(jiān)視的使用
- watch監(jiān)視單個(gè)
- computed監(jiān)視多個(gè)
。computed:{監(jiān)視的業(yè)務(wù)名：function(){ return 顯示一些內(nèi)容 }}
既绕。使用：{{ 計(jì)算屬性的名稱 }}
[watch簡(jiǎn)單例子1:] (https://upload-images.jianshu.io/upload_images/8496278-e961ee2d18f30d86.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
watch監(jiān)視復(fù)雜類型的例子2:圖1-----圖2深度監(jiān)視
computed使用的例子：圖.png
總結(jié)：
- 當(dāng)組件/過濾器為全局：大家直接用 全局不帶s
- 過濾器：
function（原始數(shù)據(jù)啄刹，參數(shù)1，參數(shù)2）{ return 結(jié)果;}
凄贩。調(diào)用{{ '數(shù)據(jù)' | 過濾器名(參數(shù)1誓军，參數(shù)2) }}
-監(jiān)視
。watch 單個(gè)監(jiān)視
疲扎。computed 群體監(jiān)視
五昵时、slot的使用
- 內(nèi)置的組件
- slot就是子組件里給DOM留下的坑 外部填入html內(nèi)容
- <子組件>DOM</子組件>
- slot動(dòng)態(tài)的DOM捷雕、props是動(dòng)態(tài)的數(shù)據(jù)
例子1圖片
總結(jié)
- slot其實(shí)就是父組件傳遞的DOM結(jié)構(gòu)
- vue提供的內(nèi)置組件<slot></slot>
六、組件的生命周期
- beforeCreate
組件創(chuàng)建之前壹甥，這里不能操作數(shù)據(jù)救巷，只是初始化了事件等
- created
組件創(chuàng)建之后，可以操作數(shù)據(jù)句柠、并且實(shí)現(xiàn)vue->頁(yè)面的影響浦译。應(yīng)用：發(fā)起ajax請(qǐng)求。
- beforeMount
vue起作用溯职，裝載數(shù)據(jù)到DOM之前 只執(zhí)行一次 即new Vue 發(fā)生裝載 替換
<div id="app">之前
- mounted
vue起作用精盅，裝載數(shù)據(jù)到DOM之后（就是vue作用以后的DOM ）只執(zhí)行一次 注：此處才能使用this.refs.'xxxx'的dom元素。
- beforeUpdate
基于數(shù)據(jù)改變 影響頁(yè)面 數(shù)據(jù)更新前
- updated
基于數(shù)據(jù)改變 影響頁(yè)面 數(shù)據(jù)更新后
- activated
結(jié)合kepp-alive使用 組件被激活了
- deactivated
結(jié)合kepp-alive使用 組件被停用了
- beforeDestroy
銷毀之前 對(duì)應(yīng)父組件v-if false （在父組件利用變量使子組件消失和出現(xiàn) 只能和v-if配套使用） 就銷毀當(dāng)前組件
//銷毀缸榄，最終都是做一些其他功能的釋放渤弛，比如：保存到localStorage、重置數(shù)據(jù)等功能
- destroyed
銷毀之后
//銷毀甚带，最終都是做一些其他功能的釋放她肯，比如：保存到localStorage、重置數(shù)據(jù)等功能
-
總結(jié)
1.created 和 actived 都是v-if=“true” 子組件的狀態(tài)
2.created沒有被keep-alive內(nèi)置組件包裹鹰贵，actived被包裹了晴氨。
銷毀和停用同上
七、獲取DOM元素
- 救命稻草碉输，document.querySelector
- 1:在template中標(biāo)識(shí)元素 ref="xxxx"
- 2:在要獲取的時(shí)候籽前，this.$refs.xxxx獲取元素
。創(chuàng)建組件敷钾，裝載DOM枝哄，用戶點(diǎn)擊按鈕 - ref在DOM上獲取的是原生DOM對(duì)象
- ref在組件上獲取的是組件對(duì)象
。$el是拿其DOM
阻荒。這個(gè)對(duì)象就相當(dāng)于我們平時(shí)玩的this挠锥，也可以直接調(diào)用函數(shù)
-
總結(jié)
// $屬性：$refs 獲取組件內(nèi)的元素,
// $parent: 獲取當(dāng)前組件對(duì)象的父組件
// $root : 獲取new Vue的實(shí)例
// $el: 組件對(duì)象的DOM元素
一個(gè)小例子：
[01$ref獲取不到dom的情況.jpg] (https://upload-images.jianshu.io/upload_images/8496278-6fe2debdfefcd87f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
[02vue操作dom的細(xì)節(jié)點(diǎn).jpg](https://upload-images.jianshu.io/upload_images/8496278-5f8870157287a452.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
[03解決$ref獲取不到dom的情況.jpg](https://upload-images.jianshu.io/upload_images/8496278-82acb8d4cc9153bb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
八、路由
1.路由原理
- 傳統(tǒng)開發(fā)方式 url改變后立刻發(fā)起請(qǐng)求侨赡，響應(yīng)整個(gè)頁(yè)面蓖租，渲染整個(gè)頁(yè)面
- SPA錨點(diǎn)值改變后不會(huì)發(fā)起請(qǐng)求，發(fā)起ajax請(qǐng)求羊壹，局部改變頁(yè)面數(shù)據(jù)
蓖宦。頁(yè)面不跳轉(zhuǎn)，用戶體驗(yàn)更好油猫。
注：SPA是什么稠茂？
- single page application(單頁(yè)面應(yīng)用程序)
- 前端路由
。錨點(diǎn)值監(jiān)視
情妖。ajax獲取動(dòng)態(tài)數(shù)據(jù)
主慰。核心點(diǎn)是錨點(diǎn)值
- 前端框架Vue/angular/react都很適合開發(fā)單頁(yè)應(yīng)用
#demo1
<script>
// hashchange事件.. url上的部分錨點(diǎn)數(shù)據(jù)(#xxx)改變. 可以獲取到這個(gè)事件
window.addEventListener('hashchange',function(){
console.log(location.hash)
});
</script>
[01路由的核心.jpg](https://upload-images.jianshu.io/upload_images/8496278-d71e97ed36b01c51.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
2.命名路由
- 1.給路由對(duì)象一個(gè)名稱 { name:'home',path:'/home',component:Home }
- 2.在router-link的to屬性中描述這個(gè)規(guī)則
嚣州。<router-link :to="{'name':'home'}"></router-link>
。通過名稱找路由對(duì)象共螺，獲取其path。生成自己的href
- 大大降低維護(hù)成本情竹，錨點(diǎn)值改變只用在main.js中改變path屬性即可
#demo2 router-link的使用
[01.router-link的使用.jpg](https://upload-images.jianshu.io/upload_images/8496278-67ca385c57ce3147.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
-
總結(jié)
3.query與params
- $route 路由信息對(duì)象藐不，只讀對(duì)象
- $router 路由操作對(duì)象，只寫對(duì)象
query與params.jpg
query與params使用總結(jié).jpg
4.嵌套路由
- 知識(shí)點(diǎn)介紹
>1.路由meta元數(shù)據(jù)->meta是對(duì)于路由規(guī)則是否需要驗(yàn)證權(quán)限的配置
秦效。路由對(duì)象中和name屬性同級(jí){ meta:{ isChecked:true } }
>2.路由鉤子 ->權(quán)限控制的函數(shù)執(zhí)行時(shí)
雏蛮。每次路由匹配后，渲染組件到router-view之前
阱州。router.beforeEach( function(to,from,next) { } )
4.編程式導(dǎo)航
-1:跳到指定的錨點(diǎn)挑秉，并顯示頁(yè)面
this.$router.push({ name:'xxx',query:{id:1} }) 或者this.$router.push({ name:'xxx',params:{name:'abc'} })
-2:配置規(guī)則{name:'xxx' ,path:'/xxx/:name'}
-3:根據(jù)歷史記錄，前進(jìn)或后退this.$router.go(-1)或this.$router.go(1) 1：代表進(jìn)一步苔货，-1代表退一步
九犀概、axios
1.攔截器
- 請(qǐng)求攔截器：在發(fā)起請(qǐng)求之前，做的事 （比如開啟loading）
- 響應(yīng)攔截器：在響應(yīng)回來以后夜惭，做的事 （關(guān)閉loading）
- 單請(qǐng)求配置options：
axios.post(url,data,options); - 全局配置defaults：
this.$axios.defaults - config:請(qǐng)求攔截器中的參數(shù)
- response.config響應(yīng)攔截器中的參數(shù)
- options
姻灶。baseURL基礎(chǔ)URL路徑
。params查詢字符串(對(duì)象)
诈茧。transformRequest：function(post請(qǐng)求傳遞的數(shù)據(jù))
{ }轉(zhuǎn)換請(qǐng)求體數(shù)據(jù)
产喉。transformResponse：function(res){ 自己轉(zhuǎn)換相應(yīng)回來的數(shù)據(jù) }轉(zhuǎn)換響應(yīng)體數(shù)據(jù)
。headers請(qǐng)求頭信息
敢会。data請(qǐng)求體數(shù)據(jù)
曾沈。timeout請(qǐng)求超時(shí)，請(qǐng)求多久以后沒有響應(yīng)算是超時(shí)(毫秒)
1.請(qǐng)求攔截器和響應(yīng)攔截器的寫法.png
2.isShow代表loading鸥昏，這種寫法可以放在公共的組件中塞俱，請(qǐng)求數(shù)據(jù)出現(xiàn)loading效果，有反應(yīng)則loading消失.png
十互广、webpack
1.webpack打包模塊的源碼
- 1：把所有模塊的代碼放入到函數(shù)中敛腌，用一個(gè)數(shù)組保存起來。
- 2：根據(jù)require時(shí)傳入的數(shù)組索引惫皱，能知道需要哪一段代碼像樊。
- 3：從數(shù)組中，根據(jù)索引取出包含我們代碼的函數(shù)旅敷。
- 4：執(zhí)行該函數(shù)生棍，傳入一個(gè)對(duì)象module.exports
- 5：我們的代碼，按照約定媳谁，正好是用module.exports='xxxx'進(jìn)行賦值涂滴。
- 6：調(diào)用函數(shù)結(jié)束后友酱，module.exports從原來的空對(duì)象，就有值了柔纵。
- 7：最終return module.exports作為require函數(shù)的返回值
十一缔杉、vue項(xiàng)目目錄
- 1、router文件夾下的index.js文件
搁料。1.路由下的index文件里面一些代碼的含義.png
或详。2.不啟用eslint的語(yǔ)法檢查的配置.png
。3.vue中for循環(huán)為什么要寫key郭计，引深vue操作虛擬dom.png
十二霸琴、vue的實(shí)際項(xiàng)目運(yùn)用的知識(shí)點(diǎn)
this.$nextTick( () => { //在vue完成渲染任務(wù)以后的行為 } )圖片縮略圖的插件 vue-preview
時(shí)間格式插件，比如：評(píng)論中顯示幾秒前昭伸、幾分鐘前... momentjs.com
十三、vuex的知識(shí)點(diǎn)
- State 描述狀態(tài)即保存數(shù)據(jù)
- Getter 獲取數(shù)據(jù)庐杨，定義變量的存取
- Mutation 修改數(shù)據(jù)选调，發(fā)生變化 只能是同步代碼
- Action 在行為中可以存著異步操作（或向后臺(tái)發(fā)送請(qǐng)求），但是最終還是通知mutations
- Module
1.1vuex使用步驟-沒有使用actions.png
1.2vuex的取值和改變值-沒有使用actions.png
2.1vuex使用actions解決需要在更改數(shù)據(jù)前的異步.png
2.2使用actionsvuex的取值和改變值.png
3.Module的使用.png
- ...mapGetters的使用例子
1.storejs.png
2phoneCallvue.png
3storeindexjs.png
十四辑莫、hash模式與history模式
- vue默認(rèn)為hash模式学歧，相關(guān)配置如圖hash模式與history模式配置.png。后端需要相關(guān)的配置各吨，才能實(shí)現(xiàn)history模式枝笨。vue的相關(guān)知識(shí)點(diǎn)位置
- 滾動(dòng)行為：這個(gè)功能只在支持history.pushState 的瀏覽器中可用。知識(shí)點(diǎn)鏈接
- 預(yù)渲染1.預(yù)渲染解決vue的seo優(yōu)化.png2.階段的總結(jié).png
十五揭蜒、骨架屏
- 操作步驟參考鏈接
1横浑、npm i -g lavas
2、lavas init
3屉更、選擇包含app_shell 也包含了骨架屏的功能
