- 使用fastclick 直接外部引入初始化，在手機(jī)模式下會(huì)報(bào)錯(cuò)Cannot read property 'style' of null；還是要npm下載后再import
npm install fastclick --save-dev
<!--main.js-->
import FastClick from 'fastclick'
FastClick.attach(document.body);
fastclick.js移動(dòng)端WEB開發(fā)屡久，click,touch,tap事件淺析
- created：在實(shí)例創(chuàng)建完成后執(zhí)行的鉤子
mounted：編譯好的HTML掛載到頁面完成后執(zhí)行的事件鉤子
它們的共同點(diǎn)是僅在Vue初始化時(shí)執(zhí)行一次载慈。 - Vue中可以直接調(diào)用JS的方法。但如果要調(diào)用 Vue中的 methods 中定義的方法就會(huì)繞一點(diǎn)褒纲，需要使用 this.$options.methods.MethodName();
- css里面的背景圖片就會(huì)轉(zhuǎn)成base64，html中的img圖片就沒轉(zhuǎn)
- vue props傳Array/Object類型值钥飞，子組件報(bào)錯(cuò)解決辦法
default:function(){
return [];//或者是return {}
}
vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題
加載數(shù)據(jù)之后再把輪播show出來解決vue-cli項(xiàng)目無法用本機(jī)IP訪問的問題
ip改為0.0.0.0就能用自己ip訪問了
vue中父組件傳值給子組件莺掠，父組件值改變，子組件不能重新渲染
https://blog.csdn.net/qq_39692513/article/details/80791458
Vue父組件向子組件傳遞一個(gè)動(dòng)態(tài)的值读宙，子組件如何保持實(shí)時(shí)更新實(shí)時(shí)更新彻秆？
https://blog.csdn.net/zhouweixue_vivi/article/details/78550738
沒用
watch: {
broadcastData: {
handler(newValue, oldValue) {
for(let i = 0; i < newValue.length; i++) {
if(oldValue[i] != newValue[i]) {
console.log(newValue)
}
}
},
deep: true
}
},
Vue 父組件ajax異步更新數(shù)據(jù)，子組件props獲取不到
https://blog.csdn.net/d295968572/article/details/80810349
用長度來判斷組件是否顯示
暫時(shí)先用這個(gè)方法，再來研究
再就是vue父組件點(diǎn)擊觸發(fā)子組件事件（https://blog.csdn.net/xiaozhuyirena/article/details/75126177）
通過 ref="child" this.$refs.child.upDate(data) 將數(shù)據(jù)傳過去再加載子組件列表
感覺這個(gè)更方便額 不用props 父組件都不用再加個(gè)變量了
點(diǎn)擊按鈕路由跳轉(zhuǎn)唇兑，有時(shí)出現(xiàn)Loading chunk 6 failed. 再點(diǎn)一下才跳轉(zhuǎn)
據(jù)說是運(yùn)營商的劫持問題在Vue中詳細(xì)介紹$attrs屬性
主要是要解決多層組件的傳值酒朵，感覺可以就用vuex唄this.
route的區(qū)別
1. this.$router：
表示全局路由器對(duì)象，項(xiàng)目中通過router路由參數(shù)注入路由之后幔亥，在任何一個(gè)頁面都可以通過此方法獲取到路由器對(duì)象耻讽，并調(diào)用其push(), go()等方法；
2. this.$route:
表示當(dāng)前正在用于跳轉(zhuǎn)的路由器對(duì)象帕棉，可以調(diào)用其name针肥、path、query香伴、params等方法慰枕；
- 同一個(gè)component兩個(gè)頁面切換時(shí)并不會(huì)觸發(fā)vue的created
我創(chuàng)建和編輯的頁面使用的是同一個(gè)component,
默認(rèn)情況下當(dāng)這兩個(gè)頁面切換時(shí)并不會(huì)觸發(fā)vue的created或者mounted鉤子，
官方說你可以通過watch $route的變化來做處理即纲，但其實(shí)說真的還是蠻麻煩的具帮。
后來發(fā)現(xiàn)其實(shí)可以簡單的在 router-view上加上一個(gè)唯一的key，
來保證路由切換時(shí)都會(huì)重新渲染觸發(fā)鉤子了低斋。這樣簡單的多了蜂厅。
<router-view :key="key"></router-view>
computed: {
key() {
return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
}
}
作者：花褲衩
鏈接：https://juejin.im/post/59097cd7a22b9d0065fb61d2
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)膊畴，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處掘猿。
- 組件報(bào)錯(cuò) did you register the component correctly?...
不是啥不能用大寫，就是輸入組件名turnplateEntry后直接按table生成標(biāo)簽的時(shí)候都變成小寫了turnplateentry唇跨，稠通，蛋疼
- 過渡效果
<transition name="fade"></transition>
包住要過渡效果的代碼或是組件
在common.css里面加上樣式，所有地方都能用
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
- 多個(gè)click事件 @click="a();b()"买猖，不能寫多個(gè)@click
- 公共方法
Vue.prototype.aaa = function(){
};
可以用一個(gè)commonjs來放改橘，然后統(tǒng)一掛載
//公共方法，調(diào)用方法玉控，this.$comjs.xxx
import comJs from '@/utils/common'
Vue.prototype.$comjs = comJs;
19.監(jiān)聽store中的數(shù)據(jù)變化
用computed計(jì)算屬性與watch
computed: {
getGameNo() {
return this.$store.getters.popLogin.gameNo
}
},
watch: {
getGameNo(val) {
this.myGameNo = val;
}
},
- this.$route.query.token 會(huì)獲取到url上所有的token，兩個(gè)的話就會(huì)以逗號(hào)分隔token1奸远，token2既棺；導(dǎo)致在請(qǐng)求的時(shí)候，傳入的token參數(shù)懒叛，會(huì)變成
token[0]: 35385ac93a8d4fadbe5e671d0a2dcf6d
token[1]: 35385ac93a8d4fadbe5e671d0a2dcf6d
導(dǎo)致接口返回出錯(cuò)丸冕；
http.params('token')則獲取的是第一個(gè)token；
出現(xiàn)兩個(gè)token的原因是qq等第三方登錄后薛窥，返回的鏈接會(huì)在后面加上token胖烛，再在這個(gè)頁面用第三方登錄的話就又在后面加上了token
解決辦法：第三方登錄時(shí)傳入的url過濾掉token
- 組件里面有請(qǐng)求眼姐，如果v-if寫在組件內(nèi)，則組件沒顯示也會(huì)請(qǐng)求佩番；v-if寫在父級(jí)內(nèi)众旗，則只有組價(jià)顯示的時(shí)候再請(qǐng)求，也就是v-if寫在組件內(nèi)趟畏，組件未顯示也會(huì)加載贡歧，并且每次組件隱藏后的顯示都會(huì)觸發(fā)created等
- linux 區(qū)分大小寫 ，import的時(shí)候要注意大小寫
- 事件修飾符
.stop
.prevent
.capture
.self
.once
.passive
<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>
使用修飾符時(shí)赋秀，順序很重要利朵；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。因此猎莲，用 v-on:click.prevent.self 會(huì)阻止所有的點(diǎn)擊绍弟，而 v-on:click.self.prevent 只會(huì)阻止對(duì)元素自身的點(diǎn)擊。
- 動(dòng)態(tài)設(shè)置元素高度著洼，用:style,有計(jì)算的話樟遣，不能寫在data里面，要寫在computed
<div class="progress-progress" :style="{width: progress}"></div>
<div class="levelNow" :style="levelNowStyle"></div>
data() {
return {
showLevel: true,
level: 9,
progress:'50%'
}
},
computed: {
levelNowStyle() {
return {
'height': this.level + .9 - 1 + 'rem'
}
}
},
25.js加載本地圖片再設(shè)置到img上身笤，為了在獲取不到用戶圖片的時(shí)候顯示本地的默認(rèn)圖片
Vue.js中的圖片引用路徑
方法一
import defaultAvatar from '@/assets/images/defaultAvatar.png'
data() {
return {
defaultAvatar:defaultAvatar
}
}
<div class="u-avatar"><img :src="defaultAvatar" alt="美美的頭像" /></div>
或是加判斷
<div class="u-avatar"><img :src="vipInfo.headImageUrl || defaultAvatar" alt="美美的頭像" /></div>
有沒有更簡便的方法豹悬？
方法二
放到static里面引入，assets里面的會(huì)被構(gòu)建液荸，static里面的則是原封不動(dòng)放過去
data里面 imgUrl ： '../../static/logo.png'
<img :src="imgUrl" />
或是加判斷
<div class="u-avatar"><img :src="vipInfo.headImageUrl || '../../../static/img/defaultAvatar.png'" alt="美美的頭像" /></div>
- vue 插件與組件的區(qū)別屿衅。插件還要用vue.use來注冊(cè)
簡單來說，插件就是指對(duì)Vue的功能的增強(qiáng)或補(bǔ)充莹弊。
比如說，讓你在每個(gè)單頁面的組件里涡尘，都可以調(diào)用某個(gè)方法忍弛，或者共享使用某個(gè)變量，或者在某個(gè)方法之前執(zhí)行一段代碼等
你也可以寫一個(gè)插件考抄，在Vue原型上擴(kuò)展方法细疚，要實(shí)現(xiàn)這個(gè)需求絕對(duì)沒法寫成組件。
如我要寫一個(gè)每個(gè)頁面都可能出現(xiàn)的彈窗川梅，使用組件還是插件疯兼。
現(xiàn)在是組件，要在app.vue中加上login這個(gè)標(biāo)簽贫途，要不就用插件的方式試試吧彪，再理解，插件也是要加上標(biāo)簽呀
插件通常會(huì)為 Vue 添加全局功能丢早。 官網(wǎng)有這句話
- Vue style里面使用@import引入外部css, 作用域是全局的解決方案,未測(cè)試
- 在vue文件style中引入less不能用@符號(hào)作為路徑 要用../
<style scoped lang="less">
@import "@/assets/css/common.less"; 這樣不行 @的定義難道只在js和tem中有效姨裸？
@import "../assets/css/common.less";這樣可以
- vux
需要npm install vux-loader --save-dev
npm install vux --save
再將build/webpack.base.conf.js
//將module.exports = {
改為
const originalConfig = {
底部加上
const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原來的 module.exports 代碼賦值給變量 webpackConfig
module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui']
})
開局還真是麻煩呀秧倾，不然各種報(bào)錯(cuò)
- store.dispatch的異步問題
為了保證在設(shè)置store的數(shù)據(jù)后再執(zhí)行其他操作
store.dispatch('setToken', -1).then(()=>{
$comjs.delTokenReload()
})
引入static/img里的圖片 路徑用../../等相對(duì)路徑導(dǎo)致打包后路徑錯(cuò)誤，解決辦法為直接用 /static/img --不行啊 混蛋傀缩，還是先用線上鏈接頂上吧那先，反正只有一個(gè)
另外發(fā)現(xiàn) 如果用戶開始是試玩用戶，點(diǎn)擊微信登錄后（用戶頭像已顯示）赡艰，馬上將微信進(jìn)程關(guān)掉售淡，再進(jìn)去也還是試玩賬號(hào)，微信登錄后過3s后再關(guān)閉則不會(huì)有問題慷垮，以上問題出現(xiàn)在ios的微信上揖闸，安卓的沒問題，現(xiàn)在原因未知换帜，可能和微信自身機(jī)制有關(guān)系楔壤，同樣操作在qq上用qq登錄沒問題
在微信上 感覺設(shè)置cookie有延遲，點(diǎn)擊微信登錄惯驼，跳轉(zhuǎn)頭像顯示出來后蹲嚣，再關(guān)掉微信的進(jìn)程，再進(jìn)去還是臨時(shí)賬號(hào)祟牲，感覺是cookie還沒設(shè)置好
永遠(yuǎn)不要把 v-if 和 v-for 同時(shí)用在同一個(gè)元素上隙畜。外面加一層寫v-if
總是用 key 配合 v-for。
- 在單文件組件中沒有內(nèi)容的組件應(yīng)該是自閉合的说贝。
<!-- bad -->
<my-component></my-component>
<!-- good -->
<my-component />
- 組件選項(xiàng)應(yīng)該有統(tǒng)一的順序议惰。
export default {
name: '',
mixins: [],
components: {},
props: {},
data() {},
computed: {},
watch: {},
created() {},
mounted() {},
destroyed() {},
methods: {}
};
- 再次理解一下vuex，如token初始化只有在頁面加載的時(shí)候一次乡恕，以后如果只是路由跳轉(zhuǎn)就不會(huì)言询，一開始想的是萬一token在某個(gè)組件上有更新再通過url傳給下個(gè)組件，那下個(gè)組件的token還是取得老的傲宜，所以想把getters方法里面的token改為initToken（）运杭，那這樣state.token就沒用了呀，現(xiàn)在想到函卒，通過url穿入的token只有可能是新的頁面跳轉(zhuǎn)辆憔，如果是我內(nèi)部的路由跳轉(zhuǎn)，token就直接用actions了报嵌，不會(huì)走url了虱咧。
- 在外部css中引入背景圖片，一直報(bào)錯(cuò)（暫未解決）現(xiàn)在是把公共樣式里設(shè)置背景圖的代碼移到了app.vue里面
生成的css文件中background url()圖片路徑問題 這個(gè)下面倒是有個(gè)很多贊的答案锚国，但我隨便試了一下沒成功腕巡，改了build/utils.js之后，在css里的圖片該怎么引入呢
Vue項(xiàng)目中設(shè)置背景圖片像這種通過js變量再去設(shè)置背景圖的辦法很麻煩呀 - 向組件內(nèi)添加html元素 用 <slot></slot>
- 路由跳轉(zhuǎn) this.$router.push(location) <router-link :to=""></router-link>
router-link API 參考 - 一個(gè)困擾了我十分鐘的問題血筑，上面兩種路由跳轉(zhuǎn)都不跳轉(zhuǎn)逸雹，很是詭異营搅，排查了半天，終于是在main.js中發(fā)現(xiàn)
router.beforeEach((to, from, next) => {
})
我以為為空的話梆砸，就什么都不改變转质，結(jié)果是也不跳轉(zhuǎn)了
- vue字體文件如何取消每次構(gòu)建后的版本號(hào)變化，（可能文件不變帖世，版本號(hào)沒變休蟹，需測(cè)試），再就是可以直接丟到static中
- img標(biāo)簽加載的圖片不知為何會(huì)過幾秒就重新加載一次日矫，頁面無反應(yīng)赂弓，但資源一直在請(qǐng)求 只有turnplate有；
- 在this.$store.dispatch回調(diào)里面執(zhí)行之后的操作,防止異步的問題
this.$store.dispatch('setUserInfo','45456').then(()=>{
})
- 動(dòng)態(tài)import哪轿；頭部的import XXX from "xxx"應(yīng)該是同步的
//設(shè)置用戶信息后需要重置下ajax請(qǐng)求頭的信息
import('@/utils/http').then(res => {
res.resetHeaders()
})
- 在store里面引入 其他js文件盈魁，那個(gè)文件又有用到store，那這個(gè)就store就undefined了窃诉；可以用上面的動(dòng)態(tài)import
- 記得清楚定時(shí)器
beforeDestroy() {
//清除跑馬燈的定時(shí)器
clearInterval(this.interval_marquee)
}
-
滾動(dòng)行為
使用前端路由杨耙，當(dāng)切換到新路由時(shí)，想要頁面滾到頂部飘痛，或者是保持原先的滾動(dòng)位置珊膜，就像重新加載頁面那樣。 vue-router 能做到宣脉，而且更好车柠，它讓你可以自定義路由切換時(shí)頁面如何滾動(dòng)。 - 引入字體報(bào)警告 Failed to decode downloaded font 是因?yàn)闆]有寫format
@font-face {
font-family: 'roman';
src: url('~assets/fonts/roman.ttf') format('TTF');
//format寫TTF不行滴塑猖，就沒有生效 要寫truetype
src: url('~assets/fonts/roman.ttf') format('truetype');
但是寫了truetype后 又開始報(bào)警告了
}
另外 woff 是 format('woff')
eot是format('embedded-opentype')
svg是format('svg')
- css里面圖片的引入問題竹祷，改過了 build/utils.js=> lessResourceLoader忘記來里面加publicPath: '../../'了，
50. 注意區(qū)分文件的大小寫羊苟，因?yàn)槲覀兪窃诜?wù)器構(gòu)建溶褪，是嚴(yán)格區(qū)分大小寫的
- vue 計(jì)數(shù) 跳動(dòng) 插件 decimal幾位小數(shù)就設(shè)置這個(gè)
- 使用better-scroll后滾動(dòng)區(qū)域的文字就不能長按復(fù)制了
加上這個(gè)就好了 里面的div、p践险、span、i標(biāo)簽是我自己加的吹菱，不確定是否有什么問題
preventDefaultException: {
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|DIV|P|SPAN|I)$/
}
scroll組件內(nèi)的文字在瀏覽器中無法選中復(fù)制
使用preventDefaultException無效
-
避免內(nèi)存泄漏
在 Windows 上則是 Shift+Esc 快捷鍵打開 Chrome 任務(wù)管理器 - vue 動(dòng)態(tài)替換路由(地址欄)參數(shù)
import merge from 'webpack-merge'巍虫；
修改原有參數(shù)
this.$router.push({
query:merge(this.$route.query,{'maxPrice':'630'})
})
新增一個(gè)參數(shù)：
this.$router.push({
query:merge(this.$route.query,{'addParams':'我是新增的一個(gè)參數(shù)，哈哈哈哈'})
})
替換所有參數(shù)：
this.$router.push({
query:merge({},{'maxPrice':'630'})
})
在reset.less中的html,body,div...加了font-size或是font-family 會(huì)導(dǎo)致這些標(biāo)簽加載多次重置樣式鳍刷，導(dǎo)致繼承于父級(jí)的樣式字體大小會(huì)被重置占遥；
<template></template> 中用循環(huán)，不能有key
style中引入圖片或less要加上 ~;template中直接用 @
@import '~@/assets/less/var.less';
background: url("~@/assets/images/yuan@2x.png") no-repeat;
:data="closure(item, itemName, blablaParams)"
computed: {
closure () {
return function (a, b, c) {
/** do something */
return data
}
}
}
我估計(jì)输瓜，vue內(nèi)部會(huì)把接受到閉包的參數(shù)瓦胎，再調(diào)用apply 的時(shí)候帶上去芬萍，只不過，從標(biāo)準(zhǔn)上來說搔啊，computed傳參不太合規(guī)矩柬祠，所以文檔內(nèi)就沒說這樣和用方法沒區(qū)別了吧，用不了computed的緩存
這樣和用方法沒區(qū)別了吧负芋，用不了computed的緩存
有緩存的 我做過實(shí)驗(yàn) 你也可以嘗試一下
- 計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的漫蛔。只在相關(guān)響應(yīng)式依賴發(fā)生改變時(shí)它們才會(huì)重新求值
- 可以定義重復(fù)的路由，且先定義的有效
- chooseJob-popup 在組件名中駝峰和橫杠不能混用
- vue獲取元素寬旧蛾、高莽龟、距離左邊距離，右锨天，上距離等還有XY坐標(biāo)軸;this.
refs.journalUpward.getBoundingClientRect().top
-
vue路由傳參方式,vue路由傳參常用的三種方式
路由傳參數(shù)毯盈，不用？問號(hào)病袄，通過path跳轉(zhuǎn)
getDescribe(id) {
// 直接調(diào)用$router.push 實(shí)現(xiàn)攜帶參數(shù)的跳轉(zhuǎn)
this.$router.push({
path: `/describe/${id}`,
}
}
對(duì)應(yīng)路由配置如下：
{
path: '/describe/:id',
name: 'Describe',
component: Describe
}
接收參數(shù)
$route.params.id
