vue官網
一、什麼是 MVVM
- M — model 數據 （提供）
- V — view 界面 / 模板（提供）
- VM — viewModel 連接模板和數據（自動的處理數據和模板之間的關係）
二、實例基本選項 & 引入vue
const app= new Vue({
el: "#app", // el選項用來把當前實例掛載到 dom元素上
data: { // 提供實例模板需要的數據
},
methods: { // 提供實例和模板需要的方法
}
})
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
三、關鍵詞
- 綁定： 訂閱數據的變化，不能改變數據
- 雙向數據綁定：訂閱數據的變化，並且可以更改數據
四、數據的獲取（this & 對象名稱）
1. 在對象內部使用本對象的數據
this.username
const vm = new Vue({
el: "#app",
data: {
username: "宮鑫"
},
methods: {
move: function(){
// 讀取
alert( this.username );
}
}
})
2. 在對象外部使用對象中的數據
vm.username
const vm = new Vue({
el: "#app",
data: {
username: "宮鑫"
}
})
// 讀取
var user = vm.username;
五、vue指令
vue 指令集列表
| 指令名稱 | 作用 | 備註 |
|---|---|---|
| v-model | 表單數據雙向綁定 | |
| v-for | 循環 | |
| v-show | 顯示與隱藏 | 不會從dom移除元素，是display:none；雖然隱藏，但是元素是被創建好的依然會消耗dom性能 |
| v-if | 顯示與隱藏 | 從 dom 中移除元素；沒有該元素，不會消耗性能； |
| v-else-if | ||
| v-else | ||
| v-bind | 給html屬性綁定數據 | |
| v-on | 事件綁定 | |
| v-text | 類似於 el.innerText |
和 插值表達式{{}} 表現一致 |
| v-html | 類似於 el.innerHtml |
1. 插值表達式
{{ username }}
<div id="app">
{{username}}
</div>
new vue({
el: "#app",
data: {
username: "宮鑫"
}
})
2. v-model 指令
雙向數據綁定，只能在表單上使用
<h1>{{username}}</h1>
<input type="text" v-model="username">
data: {
username: "宮鑫"
}
3. v-for 指令
- 簡介
循環數組或對象
v-for指令和 for in & for of 相似，尤其和 for of 類似
- 使用
<div v-for="item in items"></div>
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>
- 示例
<li v-for="(item,index) in users">
下標：{{index}}
<br />
姓名：{{item.name}}
<br />
年齡：{{item.age}}
</li>
data: {
users: [
{ name: "張三", age: "35" },
{ name: "李四", age: "35" },
{ name: "王五", age: "35" }
]
}
- 拓展
看一下 js 中的 for in 和 for of
let arr = ["張三", "李四", "王五", "趙六"];
let obj = {
name:"張三",
age: "22",
sex: "男"
}
// for in 循環的是 數組下標 或 對象鍵名
for(index in arr){
console.log(index);
// 0 1 2 3
}
for(index in obj){
console.log(index);
// name age sex
}
// for of 循環的是 數組項 但是不能循環對象，因爲對象中沒有遍歷接口
for(item of arr){
console.log(item);
// 張三 李四 王五 趙六
}
4. v-show 指令
- 簡介
通過表達式的真假來控制 display屬性
- 示例
<div v-show="onOff">
{{onOff}}
</div>
data: {
onOff: true
}
5. v-if 指令
- 簡介
根據表達式的值的真假條件決定是否渲染元素。在切換時元素及它的數據綁定 / 組件被銷燬並重建。
- 示例
<div v-if="onOff">
{{onOff}}
</div>
data: {
onOff: true
}
- 拓展
v-if 和 v-show 的比較
v-if 和 v-show 的比較：
v-show :
- 通過 display:none 來隱藏數據
- 缺點：如果數據太多的話，比如說10w條要顯示10條，v-show雖然隱藏，但是元素被創建出來了，依然會消耗 dom 性能；
- 優點：頻繁切換隱藏和顯示狀態的話，只是修改 display屬性，比較快捷
v-if :
- 通過移除dom節點來隱藏數據
- 優點：如果有很多數據需要隱藏的話，使用v-if的話，在dom中直接沒有該元素，不會消耗性能；
- 缺點：頻繁切換隱藏和顯示狀態的話，如果要顯示，dom需要重新創建，會消耗一定的性能；
總結：
1. 如果一個元素會頻繁的隱藏與顯示，選擇 v-show；
2. 如果從優化性能的方面來考慮，就選擇 v-if；
6. v-bind 指令
-
縮寫：
: -
用法
直接在 html 的結構上綁定vue數據是無效的，這時候就要使用 v-bind屬性了
- 示例
<div v-bind:class="style"> v-bind指令的使用 </div>
data: {
style: "wraper"
}
v-bind:class 和 v-bind:style 不只能綁定字符串，還能綁定數組和對象
- 拓展一： v-bind:class
優點： 切換性能更高
缺點： css樣式要事先預設好
- 綁定對象
{ key : value}
key ：樣式的名稱
val ：布爾值 — 來決定這個樣式是否生效
.wraper{
background:rgb(0, 46, 131);
line-height: 160px;
}
.font{
color: #fff;
font-size: 24px;
text-align: center;
}
<div v-bind:class="{
wraper: true,
font: true
}">
v-bind:class 綁定對象
</div>
- 綁定數組
.wraper{
background:rgb(0, 46, 131);
line-height: 160px;
}
.font{
color: #fff;
font-size: 24px;
text-align: center;
}
<!-- 1.當數組中是字符串時，class直接生效 -->
<div v-bind:class="['wraper', 'font']">
v-bind:class 綁定對象
</div>
<!-- 2.當數組中是對象時，判斷值是否是true，是的話生效 -->
<div v-bind:class="[
'wraper',
{ font: true }
]">
v-bind:class 綁定對象
</div>
- 拓展二： v-bind:style
優點： css樣式不用預設，直接給值
缺點： 相對 v-bind:class 來說，性能差一些
- 綁定對象
<!--
注意：
不能寫 background-color
可以寫成 'background-color' or backgroundColor
（加引號或者是小駝峯命名是可以的）
-->
<div v-bind:style="{
backgroundColor: 'red',
color: '#fff',
padding: '20px 0',
borderRadius: '10px',
textAlign:'center'
}"
>
v-bind:style 綁定對象
</div>
- 綁定數組
<div v-bind:style="[style01, style02]">
v-bind:style 綁定數組
</div>
data: {
style01: {
backgroundColor: 'red',
padding: '20px 0',
borderRadius: '10px'
},
style02: {
color: '#fff',
fontSize: '20px',
textAlign: 'center'
},
}
7. v-on 指令
- 縮寫：
@ - 簡介
事件的監聽
- 示例
<button v-on:click="fn">點擊事件</button>
methods: {
fn: function(){
console.log("觸發了點擊事件");
}
}
- 示例二 （事件對象）
無參時，直接通過 event 來獲取
<button v-on:click="fn">點擊事件</button>
fn: function(){
console.log(event);
}
有參時，通過 $event 傳遞事件對象
<button v-on:click="fn('宮鑫', $event)">點擊事件</button>
fn: function (name, ev) {
console.log(name, ev);
}
8. v-text 指令
- 簡介
類似於 {{}} 插值表達式，都是將數據插入到 dom 結構中
不過與插值表達式不同的是插值表達式可以多個一起使用，而 v-text 卻只能單獨使用
- 示例
<div v-text="title"></div>
data: {
title: "宮鑫"
}
9. v-html 指令
- 簡介
更新元素的 innerHTML
如果數據是 HTML 結構，插入到頁面中只是普通的字符串，並不會編譯成 html 結構，這時候就需要使用 v-html指令了
- 示例
<textarea v-model="msg" cols="30" rows="10"></textarea>
<div v-html="msg"></div>
data: {
msg: ""
}
注意：在網站上動態渲染任意 HTML 是非常危險的，因爲容易導致 XSS 攻擊。只在可信內容上使用 v-html，永不用在用戶提交的內容上。