使用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 ...