mustache 語(yǔ)法

• { { } } mustache 語(yǔ)法

• 將 data 中的數(shù)據(jù)在 DOM 元素上展示

• 在元素的內(nèi)容區(qū)書(shū)寫(xiě), 該形式為單向綁定

• 在 DOM 中修改變量的值并不會(huì)影響到 data 中的值, 只能由 Vue 實(shí)例中改變?cè)撝挡艜?huì)讓 DOM 元素的內(nèi)容發(fā)生改變

寫(xiě)法例如:

<template>
  <!-- message是data中的一個(gè)屬性 -->
  <div id="app">{{message}}</div>
</template>

v-once

• 只渲染一次元素或組件, 不會(huì)隨著數(shù)據(jù)(不響應(yīng)式解析)的改變而改變

v-html=“”

• 該指令后面往往會(huì)跟上一個(gè) string 類(lèi)型的值, 會(huì)將 string中含有 html 的語(yǔ)法解析出來(lái)并且進(jìn)行渲染, 但是會(huì)覆蓋原有的結(jié)點(diǎn)

v-text=“”

• 與 v-html 類(lèi)似, 區(qū)別是不能解析 html

v-pre

• 不解析 mustache 語(yǔ)法

v-bind:attr=“”

• 動(dòng)態(tài)綁定標(biāo)簽屬性

動(dòng)態(tài)綁定屬性 attr, 使屬性 attr 跟隨 vue 變量變化

<img v-bind:src="vueURL">

動(dòng)態(tài)綁定 class

• 對(duì)象語(yǔ)法 {className: boolean}

  • 當(dāng) boolean 為 true, 則添加 className
  • false 則刪除 className

• 數(shù)組語(yǔ)法 [變量, 變量... . . ] 動(dòng)態(tài)綁定 class

• 通過(guò)函數(shù)返回值獲得對(duì)象｜數(shù)組語(yǔ)法

• 普通 class 與動(dòng)態(tài)綁定的 class 可以共存

<img v-bind:class="{active: true}" class="demo">

動(dòng)態(tài)綁定 style

• 對(duì)象語(yǔ)法 {attrName: value}

  • 為元素添加 style 樣式, value 加引號(hào)則按照 value 賦值, 否則將按照變量解析

• 數(shù)組語(yǔ)法 [對(duì)象, 對(duì)象... . . ]

  • 根據(jù)對(duì)象添加相應(yīng)的 class

• 通過(guò)函數(shù)返回值獲得對(duì)象或數(shù)組語(yǔ)法

<!-- 其中divHeight為data中的屬性 -->
<div v-bind:style="{width: '300px', height: divHeight}"></div>

v-bind 語(yǔ)法糖

• : <===> v-bind:
  • 可以使用 : 替換掉 v-bind:

v-on: 事件=“”

• 綁定事件, 可以直接寫(xiě)代碼語(yǔ)句, 也可以寫(xiě)函數(shù)名

  • 如果沒(méi)有參數(shù)可以省略()

• 如果有參數(shù)且省略了(), 這時(shí)候 vue 會(huì)默認(rèn)將瀏覽器產(chǎn)生的 event 事件對(duì)象作為第一個(gè)參數(shù)傳入方法中, 且其他參數(shù)為 undefined

• 如果需要 event 對(duì)象以及參數(shù), 那么傳遞參數(shù)時(shí), 需傳遞$event

<!-- 其中divClick為methods中的方法 -->
<div v-on:click="divClick"></div>

v-on 修飾符

.stop=“”

• 阻止冒泡

.prevent=“”

• 阻止默認(rèn)事件

.keyCode | .keyAlias

• 獲得鍵盤(pán)按鍵的 unicode編碼

.enter

• 當(dāng)按下回車(chē)鍵才觸發(fā)事件

.native

• 監(jiān)聽(tīng)組件根元素的原生事件

.once

• 只觸發(fā)一次事件回調(diào)函數(shù)

v-on 語(yǔ)法糖

• @ <===> v-on:
  • 可以使用 @ 替換掉 v-on:

v-if=“”

• 如果條件為 true, 則渲染, 為 false 則不渲染其結(jié)點(diǎn)及子結(jié)點(diǎn)(結(jié)點(diǎn)不存在于 dom 中)
  • 注意: 一旦條件為false, 則DOMTree中并不會(huì)生成該節(jié)點(diǎn)

v-else

• 必須寫(xiě)在 v-if 或 v-else-if 的下一個(gè)兄弟結(jié)點(diǎn)上才會(huì)生效, 否則報(bào)錯(cuò), 且該結(jié)構(gòu)直接失效

input 在 v-if 和 v-else 中 value 的問(wèn)題

問(wèn)題

• 使用 v-if, v-else 時(shí), input 輸入框中的值不會(huì)清空

原因

• vue 在渲染頁(yè)面之前, 出于性能考慮會(huì)生成虛擬 dom(virtual dom), 盡可能的復(fù)用已經(jīng)存在的元素, 而不是重新創(chuàng)建新的元素

• vue 內(nèi)部會(huì)發(fā)現(xiàn)原來(lái)的 input 元素不再使用, 那么 vue 就會(huì)把原來(lái)的 input 進(jìn)行復(fù)用, 并且修改相應(yīng)的結(jié)構(gòu), 屬性, 文本, 但 value 不會(huì)清除

解決方案

• 給對(duì)應(yīng)的 input 添加 key, 并且保證 key 不相同, 因?yàn)?key 的不相同, vue 會(huì)創(chuàng)建新的 dom 結(jié)點(diǎn), 但是會(huì)影響性能

<input v-if="true" :key="one">
<input v-else :key="two">

v-show=“”

• true | false 控制元素是否顯示(控制 display)

v-for=“”

• 遍歷, 同等于js中的for

• key 屬性和 item 綁定可以提高 dom 更新的性能

  • 因?yàn)樵诓迦霐?shù)據(jù)時(shí), 如果 key 和 item 進(jìn)行了綁定, 那么就只需要將新插入的結(jié)點(diǎn)直接插入即可, 否則就會(huì)出現(xiàn)在末尾插入, 從插入位置開(kāi)始依次修改內(nèi)容的情況

• key不能重復(fù)綁定同一個(gè)value

  • 注意: 如果是遍歷一個(gè)指定的數(shù)字, 那么item從1開(kāi)始, 到指定數(shù)字結(jié)束

遍歷數(shù)字

<ul>
  <!-- 從1～10循環(huán)創(chuàng)建li -->
  <li v-for="(item, index) in 10" :key="index">{{item}}</li>
</ul>

遍歷數(shù)組

<ul>
  <!-- 其中arr為data中的屬性, 值為數(shù)組 -->
  <li v-for="(item, index) in arr" :key="index">{{item}}</li>
</ul>

遍歷對(duì)象

• v-for="value in Object" 只獲取 value

• v-for="(value, key) in Object" 獲取 value 和 key

<ul>
    <!-- 只獲取value -->
  <li v-for="value in arr">{{value}}</li>
</ul>

<ul>
    <!-- 其中arr為data中的屬性, 值為數(shù)組 -->
  <li v-for="(value, key) in arr" :key="key">{{value}}</li>
</ul>

哪些數(shù)組的方法是響應(yīng)式的

• 改變?cè)瓟?shù)組本身的方法:

  • push
  • pop
  • shift
  • unshift
  • splice
  • sort
  • reverse

• Vue 方法:

  • Vue. set(要修改的對(duì)象, 索引值, 修改后的值)
  • 通過(guò)索引值修改不是響應(yīng)式的

v-model=“”

• 雙向綁定

  • 用來(lái)實(shí)現(xiàn)表單元素和數(shù)據(jù)的雙向綁定

• v-model 得到的 value 總是 string

• 若想更深入的了解雙向綁定, 需要先知道哪些方法是改變?cè)瓟?shù)組的, 參照"哪些數(shù)組的方法是響應(yīng)式的"

輸入框: text

<input type="text" v-model="message" />

• 即 input 的 value 屬性與 vue 的變量 message 實(shí)現(xiàn)了綁定

• 無(wú)論是修改 message 的值還是在 input 中輸入內(nèi)容都會(huì)使 message 產(chǎn)生變化

單選框: radio

<input type="radio" value="male" v-model="sex" />
<input type="radio" value="female" v-model="sex" />

• sex: “male” 可以使用 v-model 綁定 value

• 從而獲取到用戶(hù)選擇的內(nèi)容, 也可以省略掉 name 屬性

多選框: checkbox

單個(gè)多選框:

<input type="checkbox" v-model="isAgree" />同意協(xié)議
<button :disabled="!isAgree">提交</button>
isAgree: false

• 通過(guò) isAgree 可以實(shí)現(xiàn)勾選同意協(xié)議和按鈕之間的綁定

多個(gè)多選框

<!-- 其中fruits為data中的屬性, 值為Array -->
<input type="checkbox" value="orange" v-model="fruits" />orange
<input type="checkbox" value="apple" v-model="fruits" />apple

• 當(dāng)選中一個(gè)多選框時(shí), vue 會(huì)把該多選框的 value 值 push 到 fruits 中

下拉列表: select

單選列表

<!-- fruit: "banana" -->
<select v-model="fruit">
    <option value="apple">apple</option>
    <option value="banana">banana</option>
    <option value="orange">orange</option>
</select>

多選列表

<!-- fruits: [] -->
<select v-model="fruits" multiple>
    <option value="apple">apple</option>
    <option value="banana">banana</option>
    <option value="orange">orange</option>
</select>

v-model 原理

1. 單向綁定( 值綁定 )

<input :value="message" />

2. 監(jiān)聽(tīng)輸入事件, 獲取輸入后value的值并修改message的值, 從而達(dá)到雙向數(shù)據(jù)綁定

<input @input="message = $event.target.value" :value="message" />

v-model 修飾符

. lazy

• 當(dāng)輸入框敲回車(chē)或失去焦點(diǎn)后再更新 vue 變量

. number

• 獲得的 value 是 number 類(lèi)型

. trim

• 刪除 value 兩邊的空格

值綁定

• 即 v-for 動(dòng)態(tài)綁定 value

<label v-for="item in list">
    <input type="checkbox" :value="item" v-model="arr" />{{item}}
</label>