[TOC] ## 1.vue-cli不是全局有效 如果npm命令在終端任意目錄有效，npm install --global vue-cli成功后而vue命令在除vue.cmd所在目錄外其他目錄無效，需要在系統變量Path中加入vue命令所在目錄，如C:\\Users\\v\_haotzhang\\AppData\\Roaming\\npm\\。 ## 2.Please try running this command again as root/Administrator npm安裝項目依賴包，有時候會報Please try running this command again as root/Administrator. 網上的攻略是改變node\_modules及子文件目錄所有權限為當前用戶。也有可能重復執行命令就好了，出現好幾次第一次執行命令報錯，后面什么都沒干，重復執行命令又好了，暫不清楚原因。使用?npm cache clean --force 命令也有可能解決| 對執行命令所在目錄進行 右擊目錄:管理員取得所有權 ## 3.npm命令小結 `npm install --save` 與 `npm install --save-dev`? 一個放在package.json 的`dependencies` , 一個放在`devDependencies` `-save`和`save-dev`可以省掉你手動修改package.json文件的步驟。 `npm install module-name -save`?自動把模塊和版本號添加到dependencies部分 而`npm install module-name -save-dve`?自動把模塊和版本號添加到devdependencies部分? 正常情況,包管理配置package.json關于同一個包僅會在dependencies 和?devDependencies中的一個存在.如果要替換可以刪了配置重裝.或者替換配置位置重裝. 4.組件template下的第一個dom元素是組件根元素，不能允許有同級的其他元素? 5.vue拿到數據渲染時，如果渲染的dom參與了效果組件，舉例，bootstrap的select UI組件。如果在異步拿到數據后立刻啟動組件，可能組件初始化時，頁面還沒有渲染完成，導致組件初始化失敗。vue提供了監聽數據渲染結束的API，監聽渲染結束再初始化即可。 ``` _self.$nextTick(function(){ alert('v-for渲染已經完成'); $(".game_list").selectpicker({ dropuAuto : false }); }) ``` ## 6.dom屬性與變量綁定類似?:id="['login_gift_list_'+index]",其中index是變量 ? ()里可以寫js表達式,[]內的成員為class成員 :style="{left: x + 'px', top: y + 'px', visibility: show ? 'visible' : 'hidden'}" ?{}花括號也可以寫js表達式,{}比()更好用,()有時候解析表達式會有異常,也可能是我的表達式寫的有問題,日后深入 補充:經實踐,:html屬性名=""中不需要()和{}頁也可以直接寫表達式,有引號被識別為字符串,無引號會在vue實例中匹配同名成員和方法,都沒有會報undefined的方法,()和{}只是提升表達式的優先級,能幫助完成更復雜的表達式,如 ?:class="['dlqy_btn', 'btn_'+(personal_conf.medal_gift > 0 ? 'gray':'')]",如果沒有()包裹三元運算符,不會報錯,但是最后整個btn_包括后面的都不會被解析顯示 ## 7.術語 {{}}渲染變量叫做插值 vue實例對象綁定的dom元素,叫做掛載元素? ## 8.靜態資源文件熱更新 在vue-cli模式下,如果靜態資源使用link和script標簽來引入樣式和腳本,不會熱更新.?使用import導入支持熱更新.除了src之外的配置修改都需要重新`npm run dev` ## 9.不要使用html標簽作為組件標簽名,他將被識別為html標簽而不是組件,組件標簽的命名僅和當前頁注冊和引用的組件名有關,三個是同步的,注冊和引用的名稱一定相同,假如是駝峰風格,組件標簽應將組件名中的大寫X替換為-x ,如圖2 3必須一致且不為html標簽名 ## 10.組件的通信原則 遵循父到子props: ['message'] ?子到父events的單向數據流通信.其中props中聲明的變量,與組件標簽的使用一樣:camelCased (駝峰式) 命名的 prop 需要轉換為相對應的 kebab-case (短橫線隔開式) 命名.通過在子組件標簽中變量綁定的形式傳到子組件的作用域. 11.Uncaught ReferenceError: Vue is not defined; 如果vue.js已經成功載入,實例vue的時候報Uncaught ReferenceError: Vue is not defined;考慮是否頁面其他的js文件沖突了? ## 12.vue-resource攔截器, 如果要在每個請求前或者響應后做統一處理,這個會起到作用,典型的,請求前給個loading效果+遮罩來過渡,響應后再關閉 ``` Vue.http.interceptors.push((request, next) => { ? console.log("請求前統一操作"); ? console.log("request"); ????? showLoading = true; ? next((response) => { ? console.log("請求后統一操作"); ? showLoading = false; ? return response; ? }) ? }) ``` ## 13.為什么要使用組建？ 使用非vue-cli開發模式[即script標簽直接引入vue.js]的一個最明顯的問題,如果前后端完全分離,隨著業務增進,全部寫在一個頁面,比如增,改全部使用modal 而不是跳轉,最后html都聚合在一個頁面,前端的代碼會非常大.后期的維護成本巨大.有必要用組件的原因除了重用,還有一個是拆分文件[分解dom],減少維護成本.提升代碼清晰度 ?? ## 14.頁面雙倍渲染 IOS9下的vue? 使用json對象迭代的方式迭代數組對象會導致數組的內容翻倍.特征是頁面的數據渲染是雙份的,其他IOS版本不會出現