国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue項目開發過程常見問題

Apollo / 832人閱讀

摘要：更新時間這個問題是實例內單組件的必須返回一個對象如下為什么要一個數據對象呢官方解釋如下必須聲明為返回一個初始數據對象的函數，因為組件可能被用來創建多個實例。

更新時間：2018-07-29

1.data functions should return an object 
// 這個問題是 Vue 實例內,單組件的data必須返回一個對象;如下

// 為什么要 return 一個數據對象呢?
官方解釋如下: data 必須聲明為返回一個初始數據對象的函數，因為組件可能被用來創建多個實例。如果 data 仍然是一個純粹的對象，則所有的實例將共享引用同一個數據對象！
2.我給組件內的原生控件添加事件,怎么不生效了 




導航
3.我用了 axios或ES6promise新特性, 為什么 IE 瀏覽器不識別(IE9+) 
IE系列不能識別promise特性，在webpack入口處添加babel-polyfill插件
module.exports = {
  context: path.resolve(__dirname, "../"),
  entry: {
    // 使用babel-polyfill 可以模擬ES6使用的環境，可以使用ES6的所有新方法
    app: ["babel-polyfill", "./src/main.js"]
  },
  ...
}
4.跨域問題No "Access-Control-Allow-Origin" header is present on the requested resource.

1: CORS 前后端都要對應去配置,IE10+
2: nginx 反向代理，線上環境可以用這個詳細配置可以看我另一篇文章nginx反向代理
3：jsonp 只支持get方式，局限太大

如果你用的是vue-cli腳手架生成的目錄結構，開發環境可以配置proxyTable來解決跨域，本質上也是node.js代理了請求

// 在 config 目錄下的index.js
// target : 就是 api 的代理的實際路徑
// pathRewrite : 就是路徑重定向
proxyTable: {
  "/apis": {
    target: "http://10.1.1.1:8090",
    changeOrigin: true,
    pathRewrite: {
       "^/": "/"
    }
  }
}
5.明明更改了數組元素的內容，或者添加刪除了對象的屬性，視圖為什么沒有更新 
// 由于 JavaScript 的限制，Vue 不能檢測以下變動的數組：
// 當你利用索引直接設置一個項時，例如：vm.items[indexOfItem] = newValue
// 當你修改數組的長度時，例如：vm.items.length = newLength
// 還是由于 JavaScript 的限制，Vue 不能檢測對象屬性的添加或刪除：
var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 現在是響應式的
vm.b = 2
// `vm.b` 不是響應式的
// 解決辦法：this.$set(obj,item,value);

官方文檔傳送門：vue

6.為什么我的組件間的樣式不能繼承或者覆寫 
// 單組件開發模式下,請確認是否開啟了 CSS模塊化功能!!
// 也就是scoped(vue-cli 里面配置了,只要加入這個屬性就自動啟用)
// 復制代碼為什么不能繼承或者覆寫呢,那時因為每個類或者 id 乃至標簽都會給自動在css后面添加hash!
// 寫的時候是這個
.test{}
// 編譯過后,加上了 hash
.test[data-v-1ec35ffc]{}
7.路由模式改為history后,除了首次啟動首頁沒報錯,刷新訪問路由都報錯

當你使用 history 模式時，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！
不過這種模式要玩好，還需要后臺配置支持。因為我們的應用是個單頁客戶端應用，如果后臺沒有正確的配置，當用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404，這就不好看了。
所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。
官方文檔：vue-router

8.父組件如何直接調用子組件的方法

可以通過$refs或者$chilren來拿到對應的vue實例,從而操作

9.組件的通訊方式有幾種

父傳子: props
子傳父: this.$emit(funName, arg)
兄弟通訊:
event bus: 就是找一個中間組件來作為信息傳遞中介
vuex: 狀態管理，為了避免刷新時丟失數據可以和localStorage或sessionStorage本地存儲結合使用
傳送門:
vue官方組件間的通訊
vuex

10.既然localStorage和sessionStorage能做到數據維護,為什么還要引入vuex

可維護性: 因為是單向數據流,所有狀態是有跡可循的...數據的傳遞也可以及時分發響應
易用性: 它使得我們組件間的通訊變得更強大,而不用借助中間件這類來實現不同組件間的通訊

11.vuex的用戶信息為什么還要存一遍在瀏覽器里(sessionStorage or localStorage)

vuex的store保存在瀏覽器的緩存內,若用戶刷新的話,數據將會丟失

12.npm run dev 報端口錯誤!Error: listen EADDRINUSE :::8080

若果是vue-cli腳手架搭建的vue項目
更改webpack 配置: config/index.js

dev: {
 env: require("./dev.env"),
 port: 8080, // 更改啟動端口
 ...
}

若是自己搭建的nodejs服務，或nginx服務，更改啟動的端口號就行

13.什么時候用v-if,什么用 v-show

v-if : DOM 區域沒有生成,只有條件為真時才渲染
v-show: DOM 區域在組件渲染的時候同時渲染了,只是display：none

14.@/components/layout/xxx"中的@是什么意思 
// webpack可以配置alias(也就是路徑別名)
// 若是vue-cli腳手架位置在build/webpack.base.conf.js
resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
  "vue$": "vue/dist/vue.esm.js",
  "@": resolve("src"),
  "common": resolve("./src/common"),
  "components": resolve("./src/components"),
  "api": resolve("./src/api"),
  "base": resolve("./src/base")
}
// 盡情配置吧
15.我在函數內用了this.xxx=,為什么拋出Cannot set property "xxx" of undefined 
這又是this的套路了..this是和當前運行的上下文綁定的...
一般你在axios或者其他 promise , 或者setInterval 這些默認都是指向最外層的全局鉤子.
簡單點說:"最外層的上下文就是 window,vue內則是 Vue 對象而不是實例!";
解決方案:
    暫存法: 函數內先緩存 this , let that = this;(let是 es6, es5用 var)
    箭頭函數: 會強行關聯當前運行區域為 this 的上下文;

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96370.html

相關文章

  • Vue現有項目改造為Nuxt項目

    摘要：好了，項目啟動了，目錄結構也清楚了，接下來就是整個現有項目的遷移了目前正在改造項目，文章尚未寫完，會抽時間不定期的繼續更新項目的改造過程及分享改造過程中遇到的問題 公司項目，最初只為了實現前后端分離式開發，直接選擇了vue框架進行開發，然而現在項目基本完成了，發現蜘蛛根本就抓取不到網站數據，搜索引擎搜出來，都是一片空白沒有數據，需要對項目做SEO優化。 本人第一次接觸SEO的優化，完全...

    Invoker 評論0 收藏0

  • vue for contacts項目總結

    摘要：用來主要前臺的請求，并處理返回相關的數據，做后臺服務。總結做完這個項目，其中的過程還是挺艱辛的，畢竟都是邊學邊做，不過最后能完成還是挺開心的，終于有了一個從到的項目過程。雖然只是一個小小的練手項目，不過對于目前的我，感覺還是不錯的。 showImg(https://oc1gyfe6q.qnssl.com/17-3-30/43434844-file_1490879850754_14751...

    tulayang 評論0 收藏0

  • vue for contacts項目總結

    摘要：用來主要前臺的請求，并處理返回相關的數據，做后臺服務。總結做完這個項目，其中的過程還是挺艱辛的，畢竟都是邊學邊做，不過最后能完成還是挺開心的，終于有了一個從到的項目過程。雖然只是一個小小的練手項目，不過對于目前的我，感覺還是不錯的。 showImg(https://oc1gyfe6q.qnssl.com/17-3-30/43434844-file_1490879850754_14751...

    ralap 評論0 收藏0

  • vue for contacts項目總結

    摘要：用來主要前臺的請求，并處理返回相關的數據，做后臺服務。總結做完這個項目，其中的過程還是挺艱辛的，畢竟都是邊學邊做，不過最后能完成還是挺開心的，終于有了一個從到的項目過程。雖然只是一個小小的練手項目，不過對于目前的我，感覺還是不錯的。 showImg(https://oc1gyfe6q.qnssl.com/17-3-30/43434844-file_1490879850754_14751...

    ARGUS 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<