【vue2】(一)基礎使用
- 2021 年 5 月 22 日
- 筆記
- javascript, VUE, 前端, 開發
【vue2】(一)基礎使用
MVVM
MVVM: View – Model – ViewModel
View: Dom層,視圖層
Model: Plain JavaScript Objects,數據層
ViewModel: 視圖模型層,實現了
- Data Bindings: 將數據實時顯示到Dom中
- Dom Listeners: Dom監聽,對Dom內事件進行響應並反應到數據層中更新
Vue生命周期
重要語法
Mustache語法
即{{}}部分
/**
* 1、簡單運算;
* 2、三元運算符;
* 3、不能放JS語句:定義變數、賦值、定義函數;
* 4、可以放有返回值的函數、語法等;
* 5、直接放對象 左右兩邊需要加空格;
......
*/
// 簡單運算
<div>{{ a + b }}</div>
// 三元運算符
<div>{{ a ? 0 : 1}}</div>
// 不能放JS語句
<div>{{ var a }}</div> // 報錯
// 返回值
<div>{{ (function a () { return 10})() }}</div>
// 也可以是js原生函數
// 直接放對象 左右兩邊需要加空格;
<div>{{{name: 10}}}</div> // 報錯
<div>{{ {name: 10} }}</div> // 可以
<div>{{obj}}</div> // 可以
v-once指令
指定元素和組件只渲染一次,不會再隨數據變化而變化。
v-html指令
將字元串以html形式顯示
h1標籤中內容會被message內容替代。
v-text指令
v-text效果同{{xx}},且同v-html會覆蓋原有元素內部內容。
v-pre指令
會將元素內容原封不動顯示出來,不做解析及渲染。
v-cloak指令
<style>
[v-cloak]{
display: none;
}
</style>
<h1 v-cloak>{{ message }}</h1>
給元素綁定v-cloak前,在vue對Dom還未解析完時,Dom中會顯示{{內容}},效果不好。
而添加v-cloak後,vue解析完後會自動刪除v-cloak,此時正常顯示。
v-bind指令
動態綁定普通屬性。
給想要動態綁定指令的屬性前添加v-bind:。
語法糖::
<img v-bind:src="imgUrl">
// imgUrl: data中的變數
<img :src="imgUrl">
動態綁定class屬性。
<h1 :class="[active, line]">hhhhh</h1>
<h1 :class="{active: isActive, line: isLine}">hhhhh</h1>
1. {active: isActive, line: isLine} // 對象
2. [{active: true},{對象···}]
2. :class 可以與 class共存
3. methods或computed
動態綁定style屬性。
同動態綁定class屬性,分為對象語法和數組語法。
❗❕❗計算屬性computed
計算屬性本質是一個屬性,不需要使用()調用,當多處調用時,計算屬性get方法只調用一次,可以進行一些比較複雜的操作(使用Mustache很複雜或者冗雜。
計算屬性的本質是set和get,computed渲染到dom時調用get,對其賦值時調用set,如控制台app.fullname=’a’,會執行set方法,我們可以設置set參數,’a’會傳參到這個參數。
v-on指令
事件綁定
語法:
1.v-on:xxx
2.語法糖:@xxx
事件調用:
1.@xxx="js程式碼"
2.@xxx="methods內部函數"
函數傳參:
1.不加()
如果函數有參數,則默認將evnet事件傳參給第一個參數
2.加()
未接收到實參的變數默認為undefined
如果想獲取到event,可以使用$event作為實參
修飾符(常用
修飾符 | 作用 |
---|---|
@xx.stop | 阻止事件冒泡 |
@xx.prevent | 取消默認事件 |
@keyup.[某個鍵值](etc. enter | 監聽某個鍵點擊 |
.native | 監聽組件根元素的原生事件 |
v-if指令
v-if,v-else-if,v-else同js條件語句
示例:
<div v-if="type == 'A'">
A
</div>
<div v-else-if="type=='B'">
B
</div>
<div v-else>
C
</div>
v-show指令
和v-if效果很相似
但v-if判false時,元素直接DOM內消失,而v-show判false時,僅元素未顯示(display=none)
v-for指令
遍歷(數組|對象)
語法:
<div id="app">
<ul>
<!-- 遍歷對象: i:value j:key k:index -->
<li v-for="(i, j, k) in info">{{ i }}.{{j}}.{{k}}</li>
<!-- i:value k:index -->
<li v-for="(i, j) in info">{{ i }}.{{j}}</li>
</ul>
</div>
響應式函數:
push()
pop()
shift()
unshift()
splice()
sort()
reverce()
直接通過索引改值,不會動態響應
etc. xxx[index]=’a’
xxx.splice(index, 1, ‘a’)
vue.set(xxx, index, ‘a’)
v-model指令
實現表單控制項和數據之間的雙向綁定
原理:
<input type="text" v-model="message">
<=>
<input type="text" :value="message" @input="message=$event.target.value">
v-model綁定text類型
v-model綁定radio類型
v-model綁定checkbox類型
單選框:
多選框:
v-model綁定select類型
單選:
複選:
v-model值綁定
用以動態響應伺服器消息等,而不將元素固定。
v-model修飾符
修飾符 | 作用 |
---|---|
v-model.lazy | 輸入框數據失去焦點或回車時數據才會更新 |
v-model.number | 將輸入框中數據自動轉化為數字類型 |
v-model.trim | 自動去除輸入框前後空格 |