Vue常用知識點

2021-08-09 11:13:42 字數 2255 閱讀 2885

使用cdn

通過npm安裝

$ npm install vue

獲取當前繫結的元素獲取當前繫結的資料

vm.$data = }

更換data物件重新整理檢視,盡量不去更換

監控模型的變化

vm.$watch('message', function (newval,oldval) );

生命週期:

---------------------------------

3.3 屬性的計算1.vue中的閃爍問題

1.1 v-text繫結屬性

1.2 v-cloak解決閃爍

增加樣式(隱藏表示式)

[v-cloak]

設定需要防止閃爍的dom元素上,在資料繫結後移除v-cloak屬性

}2.v-if/v-show/v-else

2.1 v-if

v-if條件不成立移除dom元素,可以與v-else連用

hello

world

可以使用vue自帶的template標籤,解決多餘標籤問題

hello

template 不會多乙個div一樣被渲染;好用

world

2.2 v-show

v-show 是簡單的切換元素的 css 屬性 display,可以與v-else連用

hello

world

不能使用template語法

2.3 v-if/v-show區別

一般來說,v‐if 有更高的切換消耗而 v‐show 有更高的初始渲染消耗。因此,如果需要頻繁切換 v‐show 較好,如果在執行時條件不大可能改變 v‐if 較好

v-if當條件成立的時候會將元素加上,不成立,就會移出dom,並且內部的指令不會執行

v-show只是簡單的隱藏和顯示

3.v-for迴圈

基於源資料將元素或模版塊重複

3.1 遍歷物件

}:}}:}

data:

}3.2 遍歷陣列

}:}:}

data:,,,

]}3.3 巢狀迴圈

}}}

3.4 遍歷陣列中相同項

}4.v-bind繫結動態屬性

官網5.v-on繫結事件

sayhello

sayworld

1. v-on中的修飾符

1.3 阻止預設事件

gobd

1.4 按鍵修飾符

或內建的修飾符

鍵位修飾符含義 鍵位修飾符含義 鍵位修飾符含義

enter按下回車鍵 up按下上鍵 left按下左鍵

tab按下tab鍵 down按下下鍵 delete按下刪除鍵

esc按下esc鍵 right按下右鍵 space按下空格鍵

1.5 自定義修飾符

vue.directive('on').keycodes.a = 65;

增加指令,後期會在指令篇中詳細講解如何自定義指令

2.繫結樣式

很多時候我們需要的樣式,要根據我們的資料進行繫結

2.1 通過}方式繫結

直接取data上物件的屬性

2.2 優雅的繫結方式

直接取data上物件的屬性

2.3 根據boolean型別增加樣式

根據資料的boolean型別增加class樣式

2.4 繫結陣列

增加class1,和class2兩個樣式

2.5 根據條件繫結樣式

三元表示式判斷

2.6 陣列和物件混用

比較常見的增加樣式用法

}和v-bind:class不要混用; class 和v-bind:class可以同時存在

6.表單元素bc

}動態繫結資料

}6.4 表單元素引數特性

6.4.1 lazy

將input改變為change

}6.4.2 debounce

延時資料改變時間

}外掛程式篇:

下拉重新整理

vue常用的知識點

1.為什麼vuex要用mutation去改變state而不是直接改變state?達成flux架構,記錄所有的store中發生的改變,實現做到記錄變更,保持狀態快照,歷 史回滾的先進除錯工具 非同步合併多次更改state 2.兩個非同步的action怎麼順序執行呢?最簡單的就是兩個await讓他順序執...

mysql常用知識點 mysql 常用知識點。

mysql u root p show databases show tables select from abc order by id limit 0,10 create database bbb exit mysqldump u root p game home backup.sql mysq...

Vue小知識點

動態路由 巢狀路由 routes 程式設計式導航 字串 router.push home 物件 router.push 命名的路由 router.push 帶查詢引數,變成 register?plan private router.push const userid 123 router.push ...