1--------------------父子組件傳遞關(guān)系
子組件：props:{
? ? ? ? ? banners:{
? ? ? ? ? ? type:Array,
? ? ? ? ? ? default(){
? ? ? ? ? ? ? return[]
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? }
父組件： <HomeSwper :banners="banners"></HomeSwper>
2. 視口模式
npm install postcss-px-to-viewport --save-dev? 打包時(shí)依賴
postcss.config.js
------------
module.exports={
plugins:{
? "postcss-px-to-viewport":{
? viewportWidth:375,? ? //視窗的寬度，對(duì)應(yīng)的是我們?cè)O(shè)計(jì)稿的寬度
? viewportHeight:667,? //視窗的高度，對(duì)應(yīng)的是我們?cè)O(shè)計(jì)稿的高度
? unitPrecision:5,? ? ? ? ? //指定‘px’轉(zhuǎn)換為視窗單位值的小數(shù)位數(shù)
? viewportUnit:'vw',? ? ? //指定需要轉(zhuǎn)換成的視窗單位，建議使用vm
? selectorBlackList:['ignore','tab-bar','tab-bar-item'],? //指定不需要轉(zhuǎn)換的類(lèi)
? minPixelValue:1,? //小于或等于‘1px’不轉(zhuǎn)換為視窗單位
? mediaQuery:false,? //允許在媒體查詢中轉(zhuǎn)換‘px’
? exclude:[/TabBar/]? //正則表達(dá)式 ，除TabBar 這個(gè)所有匹配文件
? }
}
}
3-----Class樣式有關(guān)
<router-link tag="button" replace active-class="active">首頁(yè)<router-link/>? ? tag變?yōu)橹付ǖ臉?biāo)簽? replace不可以返回 active-class="active"指定點(diǎn)擊樣式
3.1---在路由index.js中添加mode:history? ? ?默認(rèn)是hash模式
3.2----在router中的index.js->添加：linkActiveClass:'active'
? .active{
? color:red
}
3.3----push按壓式堆疊
this.$router.push('/home')? 通過(guò)代碼修改路由 所以不需要加這個(gè)標(biāo)簽<router-link><router-link/>
? ? ? ? ? ? ? ? ? ? ? ? ? .replace('/home')
3.4-----動(dòng)態(tài)路由：
? ? ? ? ? ? <router-link :to="'/home/'+userid">首頁(yè)<router-link/>? {path:'/home/:userid',component:Home}
? ? ? ? ? 在home.vue中獲取相應(yīng)的id? ? 這里的id是對(duì)應(yīng) {path:'/home/:userid',component:Home}這里面的userid? ? ? ? ? ? ?$route:誰(shuí)活躍就拿到誰(shuí)
? ? ? ? ? ? ? ? ? ? ? computed:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? userid(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return this.$route.params.userid
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }
3.4.1-----動(dòng)態(tài)路由 query的使用及例子
? ? ? ? ? <router-link :to="{path:'/profile',query:{name:'why',age:18,height:1.88}}"><router-link/>?
? ? ? ? ?--->地址形式localhost:8080/profile/userid?name:'why',age:18,height:1.88
? ? ? ? ? ? 在profile.vue取出name:'why',age:18,height:1.88 所對(duì)應(yīng)的值? ? ? {{$route.query}}
? ? ? ? ? ? computed:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? userid(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return this.$route.query.name
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }
3.4.2---------APP.vue
? ? ? ? ? <button @click="userClick">用戶</button/>
? ? ? ? ? <button @click="profileClick">檔案</button/>
? ? ? ? ? data(){
? ? ? ? ? ? ? return{? userId:'zhangsan' }
? ? ? ? ? }
? ? ? ? ? method:{
? ? ? ? ? ? userClick(){ this.$router.push('/user/' + this.userId) }
? ? ? ? ? ? profileClick(){
? ? ? ? ? ? ? ? ? this.$router.push({
? ? ? ? ? ? ? ? ? ? ? path:'/profile',
? ? ? ? ? ? ? ? ? ? ? query:{
? ? ? ? ? ? ? ? ? ? ? ? ? name:'why',age:18,height:1.88
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? }
? ? ? }
3.5-------懶加載，需要用到時(shí)，再調(diào)用
? ? const Home =()=>import('../components/Home')
? 第一種模式：? {
? ? path:'/home',
? ? component:Home? ? ? ? ? ? ? ? ?第二種模式：component:()=>import('../components/Home')
? }
3.6------路由嵌套
? {
? ? path:'/home',
? ? component:Home，
? ? children:[
? ? ? {
? ? ? ? path:'',
? ? ? ? redirect:'news'
? ? ? },
? ? ? {
? ? ? ? ? path:'news',
? ? ? ? ? component:()=>import('../component/HomeNews')
? ? ? },
? ? ? {
? ? ? ? ? path:'message',
? ? ? ? ? component:()=>import('../component/HomeMessage')
? ? ? },
? ? ]? ? ? ? ? ? ?
? }
在Home.vue中配置路由 ：<router-link to="/home/new">消息<router-link/>? ? < router-view>< router-view/>
3.7--------導(dǎo)航守衛(wèi)：監(jiān)聽(tīng)頁(yè)面跳轉(zhuǎn)? 在跳轉(zhuǎn)過(guò)程經(jīng)行一些操作? ? ? ? 全局守衛(wèi)
? ? created（）{} 組件創(chuàng)建完
? ? mounted（）{} 掛載在dom 時(shí)
? ? updated(){}? 界面發(fā)生變化
? destroyed(){}
? -- activated(){}? 當(dāng)頁(yè)面處于活躍? ? ? ? ? ? ? ? ? ? ? -》這兩個(gè)函數(shù)，只有該組件被保持了狀態(tài)使用了keep-alive時(shí)，才有效
? --deactived(){}? 當(dāng)頁(yè)面處于不活躍? ? ? ? ? ? ? ? ? -》
? router->index.js
? ? ? {
? ? ? ? ? path:'/profile',
? ? ? ? ? component:Profile,
? ? ? ? ? meta:{
? ? ? ? ? ? title:'檔案'
? ? ? ? ? }
? ? ? }
? 前置
守衛(wèi)（guard）/鉤子（hook）? 跳轉(zhuǎn)之前
? router.beforeEach((to,from,next) =>{
? ? 從from跳轉(zhuǎn)到to
? ? document.title = to.matched[0].meta.title? ? ? ? ? ? ? ? meta:元數(shù)據(jù) 描述數(shù)據(jù)的數(shù)據(jù)
? ? next()
? })
? 后置守衛(wèi)
? router.afterEach((to,from) =>{
? })
3.7-------組件導(dǎo)航守衛(wèi)? Home.vue
? beforeRouteLeave? ? ? ? ? ? ? ? ? 離開(kāi)頁(yè)面之前
? beforeRouteLeave(to,from,next){
? ? this.path = this.$route.path;
? ? next()
? }?
3.8----------keep-alive? 組件保留狀態(tài)
? ? keep-alive? 組件保留狀態(tài)? ->? ? <keep-alive><keep-view/><keep-alive/> 使created(){}和destroyed(){} 不會(huì)被頻繁創(chuàng)建和銷(xiāo)毀
? ? ? include? 會(huì)被緩存? ? ? ?
? ? ? exclude? 不會(huì)被緩存? ? ? ? ? ? ? ? ? <keep-alive exclude="Profile,User"><keep-view/><keep-alive/>? 排除Profile.vue和User.vue 緩存
3.9-----------
? ? App.vue
? ? ? <style>? ? ? ? ? ? 在style里面引用樣式用@? ? ? 除此之外用import Home from ".."?
? ? ? ? ? @import "./assets/css/base.css"
? ? <style/>
? ? 在main.js直接引用
? ? ? require("./assets/css/base.css")
4.0---------
TabBarItem.vue
? ? <slot name="item-icon"></slot>
? ? <slot name="item-text"></slot>
App.vue
? <tab-bar-item>
? ? ? <img slot="item-icon" src=".." >
? ? ? <div slot="item-text">首頁(yè)</div>
? </tab-bar-item>
4.1-----------
? 點(diǎn)擊相應(yīng)的按鈕 所對(duì)應(yīng)相應(yīng)的狀態(tài)（顏色）
? computed:{
? ? isActive(){
? ? ? return this.$route.path.indexof(this.path) !== -1? ? ? ? ? ? 即是true? 判斷活躍狀態(tài)的路徑是否等于當(dāng)前路徑
? ? }
? }? ?
4.1.1--------
? <div :style="activeStyle"></div>
? ? data(){
? ? return{
? ? props:[
? ? ? path:String,
? ? ? activeColor:{
? ? ? ? type:String,? default:'red'
? ? ? }
? ? ]
? ? }
? }
? computed:{
? ? activeStyle(){
? ? ? return this.isActive ? {color:this.activeColor} : { }? ? ?
? ? }
? }? ?
4.2----------修改文件路徑的引用問(wèn)題? 在config文件下的webpack.base.conf.js 中修改
? ? ? ? ? ? ? ? reslove:{
? ? ? ? ? ? ? ? extensions :['.js','.vue','.json'],
? ? ? ? ? ? ? ? alias:{
? ? ? ? ? ? ? ? ? ? '@':resolve('src'),
? ? ? ? ? ? ? ? ? ? ? ? ?'assets':reslove('@/assets'),? ? ? 在腳手架3.0版本以上? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 'assets':reslove('src/assets'),? ?? 在腳手架2.0版本以上
? ? ? ? ? ? ? ? ? ? ? ? ? 'components':reslove('@/components')???在腳手架3.0版本以上? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?'components':reslove('@/components')???在腳手架2.0版本以上?
? ? ? ? ? ? ? ? ? ? ? ? ? .......??
? ? ? ? ? ? ? ?}?
? ? ? ? ? ? }
? ? ? ? ? ? ? ? 在src 中要加一個(gè)~符號(hào)? ， 而import中不需要加
4.3----------promise? -》js異步操作有關(guān)
? 鏈?zhǔn)骄幊?/p>
? ? ? new Promise((resolve,reject)=>{
? ? ? ? ? ? ? setTimeout(()=>{
? ? ? ? ? ? ? ? resolve()
? ? ? ? ? },1000)
? ? ? }).then(()=>{
? ? ? ? 第一次拿到結(jié)果的處理代碼
? ? ? console.log('Hello world')
? ? ? return new Promise((resolve,reject)=>{
? ? ? ? ? 第二次網(wǎng)絡(luò)請(qǐng)求
? ? ? ? ? ? setTime(()=>{
? ? ? ? ? ? ? resolve()
? ? ? ? ? ? },1000)
? ? ? })
? ? }).then(()=>{
? ? ? console.log('Hello vue.js')
? ? ? return new Promise((reslove,reject)=>{
? ? ? ? setTime(()=>{
? ? ? ? ? ? resolve()
? ? ? ? },1000)
? ? })
? }).then(()=>{
? ? ? ? console.log('Hello js')
? ? })
4.3.1--------------異步請(qǐng)求數(shù)據(jù)
? ? setTime(()=>{
? ? ? ? console("Hello world")
? },1000)
4.3.2--------------
? 原始：
? ? $.ajax('url1',function(data1){
? ? ? $.ajax(data['url2'],function(data2){
? ? ? ? $.ajax(data['url3'],function(data3){
? ? ? ? ? ...
? ? ? ? console.log(data3)
? ? })
? })
})
4.3.3--------------
1.? new Promise((resolve,reject)=>{
? ? setTimeout(()=>{
? ? // 成功時(shí)候調(diào)用resolve
? ? // resolve('Hello world')
? ? 失敗時(shí)候調(diào)用reject
? ? reject('error message')
? },1000)
}).then((data)=>{
? ? console.log(data);
? }).catch(err=>{
? ? console.log(err)
? })
? 2. new Promise((resolve,reject)=>{
? ? setTimeout(()=>{
? 成功時(shí)候調(diào)用resolve
? resolve('Hello world')
? ? 失敗時(shí)候調(diào)用reject
? ? reject('error message')
? },1000)
}).then(data=>{
? console.log(data);
},error=>{
? console.log(err)
})
