很多時候 , 、store.dispatch('switch_dialog') 這種寫法又長又臭 , 很不方便 , 我們沒使用 vuex 的時候 , 獲取乙個狀態只需要 this.show , 執行乙個方法只需要 this.switch_dialog 就行了 , 使用 vuex 使寫法變複雜了 ?使用 mapstate、mapgetters、mapactions 就不會這麼複雜了
相當於 :
// parent.vue
dosomething() ,
// child.vue
mounted(),
// 以上輸出順序為:
// 子元件觸發 mounted 鉤子函式 ...
// 父元件監聽到 mounted 鉤子函式 ...
1.**層面的優化
v-if 和 v-show 區分使用場景
computed 和 watch 區分使用場景
v-for 遍歷必須為 item 新增 key,且避免同時使用 v-if
長列表效能優化
事件的銷毀
資源懶載入
路由懶載入
第三方外掛程式的按需引入
2.webpack 層面的優化
webpack 對進行壓縮
減少 es6 轉為 es5 的冗餘**
提取公共**
提取元件的 css
1.router-link
**不帶引數**
//name,path都行, 建議用name
帶引數// params傳引數 (類似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id"
// 不配置path ,第一次可請求,重新整理頁面id會消失
// 配置path,重新整理頁面id會保留
// html 取參 $route.params.id
// script 取參 this.$route.params.id
// query傳引數 (類似get,url後面會顯示引數)
// 路由可不配置
// html 取參 $route.query.id
// script 取參 this.$route.query.id
2.this.$router.push() (函式裡面呼叫)
不帶引數
this.$router.push('/home')
this.$router.push()
this.$router.push()
query傳參
this.$router.push(})
this.$router.push(})
// html 取參 $route.query.id
// script 取參 this.$route.query.id
2.1 params傳參
this.$router.push(}) // 只能用 name
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可請求,重新整理頁面id會消失
// 配置path,重新整理頁面id會保留
// html 取參 $route.params.id
// script 取參 this.$route.params.id
2.2 query和params區別
query類似 get, 跳轉之後頁面 url後面會拼接引數,類似?id=1, 非重要性的可以這樣傳, 密碼之類還是用params重新整理頁面id還在
params類似 post, 跳轉之後頁面 url後面不會拼接引數 , 但是重新整理頁面id 會消失
3.this.$router.replace() (用法同上,push)
4. this.$router.go(n) ()
vue學習隨筆
1 css與style的物件繫結與陣列繫結 2 v if的key語法 3 v for遍歷物件的三個引數 value key index 4 v for的key就地服用原則 5 v for的優先順序比v if更高 6 單選框的value,多選框的true value與false value 7 表單v...
vue隨筆筆記
el menu item.is active data的資料為tabledate渲染的資料 prop設定 字段 index設定索引值 當設定router模式後index相當於to default active route.path main.js import from element ui vue...
隨筆知識2
1.dom同時支援事件捕獲和事件冒泡,但是事件捕獲先發生。2.傳統事件處理程式指派方法 永遠只執行新新增的 原來的會被覆蓋。被廣泛支援 3.現代事件處理程式指派方法 不會產生覆蓋,新 在舊 後面執行 在舊版本ie上執行有問題 4.處理事件程式返回false的效果 1 click 單選按鈕和複選按鈕框...