您好,登錄后才能下訂單哦!
今天小編給大家分享一下Vue開(kāi)發(fā)時(shí)常見(jiàn)的錯(cuò)誤有哪些的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來(lái)了解一下吧。
這種情況一般報(bào)錯(cuò)信息可以看到是哪個(gè)包拋出的信息.,一般卸載這個(gè)模塊,安裝重新安裝下即可.
這個(gè)問(wèn)題是 vue 實(shí)例內(nèi),單組件的data必須返回一個(gè)對(duì)象;如下
export default { name: 'page-router-view', data () { return { tabs: [ { title: '財(cái)務(wù)信息', url: '/userinfo' }, { title: '帳號(hào)信息', url: '/userinfo/base' } ] } } }
為什么要 return 一個(gè)數(shù)據(jù)對(duì)象呢? 官方解釋如下: data
必須聲明為返回一個(gè)初始數(shù)據(jù)對(duì)象的函數(shù),因?yàn)榻M件可能被用來(lái)創(chuàng)建多個(gè)實(shí)例。如果 data
仍然是一個(gè)純粹的對(duì)象,則所有的實(shí)例將共享引用同一個(gè)數(shù)據(jù)對(duì)象!簡(jiǎn)言之,組件復(fù)用下,不會(huì)造成數(shù)據(jù)同時(shí)指向一處,造出牽一發(fā)而動(dòng)全身的破問(wèn)題…
<!--比如用了第三方框架,或者一些封裝的內(nèi)置組件; 然后想綁定事件--> <!--// 錯(cuò)誤例子1--> <el-input placeholder="請(qǐng)輸入特定消費(fèi)金額 " @mouseover="test()"></el-input> <!--// 錯(cuò)誤例子2--> <router-link :to="item.menuUrl" @click="toggleName=''"> <i :class="['fzicon',item.menuIcon]"></i> <span>{{item.menuName}}</span> </router-link> <!--上面的兩個(gè)例子都沒(méi)法觸發(fā)事件!!!--> <!--究其原因,少了一個(gè)修飾符 .native--> <router-link :to="item.menuUrl" @click.native="toggleName=''"> <i :class="['fzicon',item.menuIcon]"></i> <span>{{item.menuName}}</span> </router-link> <!---->
這又是this的套路了,this是和當(dāng)前運(yùn)行的上下文綁定的;
一般你在axios或者其他 promise , 或者setInterval 這些默認(rèn)都是指向最外層的全局鉤子.
簡(jiǎn)單點(diǎn)說(shuō):“最外層的上下文就是 window,vue內(nèi)則是 Vue 對(duì)象而不是實(shí)例!”;
解決方案:
暫存法: 函數(shù)內(nèi)先緩存 this , let that = this;(let是 es6, es5用 var)
箭頭函數(shù): 會(huì)強(qiáng)行關(guān)聯(lián)當(dāng)前運(yùn)行區(qū)域?yàn)?this 的上下文;
實(shí)例內(nèi)的 data 對(duì)應(yīng)的變量沒(méi)有聲明,你導(dǎo)入模塊報(bào)這個(gè)錯(cuò)誤,那一定是導(dǎo)出沒(méi)寫(xiě)好。
自己用 webpack搭腳手架的都不用我說(shuō)了;Vue-cli 里面的 webpack 配置: config/index.js
dev: { env: require("./dev.env"), port: 8080, // 這里這里,若是這個(gè)端口已經(jīng)給系統(tǒng)的其他程序占用了.改我改我!!!!!! autoOpenBrowser: true, assetsSubDirectory: "static", assetsPublicPath: "/", proxyTable: { "/bp-api": { target: "http://new.d.st.cn", changeOrigin: true, // pathRewrite: { // "^/bp-api": "/" // } } },
這個(gè)問(wèn)題只出現(xiàn)老項(xiàng)目升級(jí)到 vue2.5+的時(shí)候, 提示就是 scope 現(xiàn)在要用 slot-scope 來(lái)代替,但是 scope 暫時(shí)可以用,以后會(huì)移除
這是 webpack 方面的知識(shí),看到了也說(shuō)下吧…webpack可以配置alias(也就是路徑別名),玩過(guò) linux 或者 mac 都知道。
依舊如上,會(huì)自己搭腳手架的不用我說(shuō)了…看看 vue-cli 里面的;
文件名: build -> webpack.base.conf.js
resolve: { extensions: [".js", ".vue", ".json"], // 可以導(dǎo)入的時(shí)候忽略的拓展名范圍 alias: { vue$: "vue/dist/vue.esm.js", "@": resolve("src"), // 這里就是別名了,比如@就代表直接從/src 下開(kāi)始找起!!! "~": resolve("src/components") } },
這種問(wèn)題一般就是組件內(nèi)的 props 類型已經(jīng)設(shè)置了接受的范圍類型, 而你傳遞的值卻又不是它需要的類型,寫(xiě)代碼嚴(yán)謹(jǐn)些 OK?
組件沒(méi)有正確引入或者正確使用,依次確認(rèn)
導(dǎo)入對(duì)應(yīng)的組件
在 components 內(nèi)聲明
在 dom 區(qū)域聲明標(biāo)簽
大佬,這個(gè)一看就是語(yǔ)法錯(cuò)誤啊,基本都是符號(hào)問(wèn)題, 一般報(bào)錯(cuò)會(huì)給出哪一行或者哪個(gè)組件。
1: CORS , 前后端都要對(duì)應(yīng)去配置,IE10+
2: nginx 反向代理,一勞永逸 <-- 線上環(huán)境可以用這個(gè)
線下開(kāi)發(fā)模式,比如你用了vue-cli, 里面的 webpack 有引入了proxyTable這么個(gè)玩意, 也可以做接口反向代理。
// 在 config 目錄下的index.js proxyTable: { "/bp-api": { target: "http://new.d.st.cn", changeOrigin: true, // pathRewrite: { // "^/bp-api": "/" // } } } // target : 就是 api 的代理的實(shí)際路徑 // changeOrigin: 就是是變?cè)?必須是... // pathRewrite : 就是路徑重定向,一看就知道
大體就是說(shuō),單組件渲染 DOM 區(qū)域必須要有一個(gè)根元素,不能出現(xiàn)同級(jí)元素. 可以用v-if和v-else-if指令來(lái)控制其他元素達(dá)到并存的狀態(tài)。
換個(gè)直白的解釋,就是有一個(gè)唯一的父類,包裹者; 比如一個(gè) div(父包含塊) 內(nèi)部多少個(gè)同級(jí)或者嵌套都行,但是最外層元素不能出現(xiàn)同級(jí)元素!
以上就是“Vue開(kāi)發(fā)時(shí)常見(jiàn)的錯(cuò)誤有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。