【vue2】(一)基礎使用

【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> // 可以

Mustache結構語法參考

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類型

單選:

複選:

image-20210522200053644

v-model值綁定

用以動態響應伺服器消息等,而不將元素固定。

v-model修飾符

修飾符 作用
v-model.lazy 輸入框數據失去焦點回車時數據才會更新
v-model.number 將輸入框中數據自動轉化為數字類型
v-model.trim 自動去除輸入框前後空格