VM:

• vm是指MVVM中的viewmodel層.主要用來(lái)監(jiān)聽同步model層data中數(shù)據(jù),將數(shù)據(jù)放在元素內(nèi)容區(qū)域,即view層,從而使數(shù)據(jù)渲染到頁(yè)面上;
• vm也可以通過(guò)監(jiān)聽元素內(nèi)容區(qū)域的數(shù)據(jù)的變化,來(lái)改變data中的數(shù)據(jù)化;
  即具有雙向綁定數(shù)據(jù)的能力;

插值表達(dá)式的概念:

• 插值表達(dá)式用{{}}來(lái)表示;
  例如:{{name}}
• 主要用來(lái)從data數(shù)據(jù)中取值,從而將這些數(shù)據(jù)使用差值表達(dá)式的方式放在元素內(nèi)容區(qū)域渲染到頁(yè)面上;
• 當(dāng)data數(shù)據(jù)中對(duì)象發(fā)生改變,插值處的內(nèi)容都會(huì)更新.
• 在以后開發(fā)中常用插值表達(dá)式,而不推薦使用v-text指令(v-text下文解釋)
• 插值表達(dá)式寫在元素內(nèi)容區(qū)域,而v-text指令寫在元素標(biāo)簽屬性中.

v-text,v-html的使用場(chǎng)景分別是什么?

• v-text使用場(chǎng)景:
  渲染data數(shù)據(jù),直接使用在標(biāo)簽中;
  <p v-text="name"></p>,解析成html;
  另外:
  v-text會(huì)將數(shù)據(jù)解析為純文本,而非html;
  將數(shù)據(jù)渲染到頁(yè)面上;
  會(huì)把元素內(nèi)部的指令全部覆蓋掉,只能用到元素屬性節(jié)點(diǎn)上.

• v-html使用場(chǎng)景:
  v-html會(huì)將文本解析為真正的html;
  渲染帶標(biāo)簽的文本,輸出的結(jié)果不帶標(biāo)簽

v-bind綁定的對(duì)象是什么?

• v-bind指令可以用來(lái)給元素動(dòng)態(tài)綁定屬性;
• 也可以用來(lái)給元素動(dòng)態(tài)綁定樣式

v-for循環(huán)指令

• v-for渲染數(shù)組:
  • 在標(biāo)簽屬性位置寫:v-for="item in dataList";
    • 其中,item表示數(shù)組中每一項(xiàng);dataList表示需要遍歷的數(shù)組
  • 在標(biāo)簽屬性位置寫:v-for="(item,index) in dataList";
    • 其中,index表示數(shù)組項(xiàng)的索引值;
• v-for渲染對(duì)象:
  • 在標(biāo)簽屬性位置寫:v-for="value in obj";
    • value表示對(duì)象鍵的值,名字任意;
    • obj表示要遍歷的對(duì)象
  • 在標(biāo)簽屬性位置寫:v-for="(value,key,index) in obj";
    • key表示對(duì)象的那個(gè)鍵

注意!

問題:

• 當(dāng)使用數(shù)組的length屬性取改變數(shù)組的時(shí)候,不會(huì)觸發(fā)視圖更新;
• 使用數(shù)組下標(biāo)的方式去改變數(shù)組的時(shí)候,也不會(huì)觸發(fā)視圖更新;

解決問題:

• 使用Vue.set(arr,index,newVal)來(lái)更新數(shù)組中的數(shù)據(jù);
  • arr是需要改變的數(shù)組,index是數(shù)組里面的項(xiàng),newVal是改變后的值;
• Array.prototype.splice()是用來(lái)刪除數(shù)組中的項(xiàng)的;

注意!!!:

• v-for必須結(jié)合key屬性使用,它會(huì)唯一標(biāo)識(shí)數(shù)組中的每一項(xiàng);未來(lái)數(shù)組中,每一項(xiàng)改變的時(shí)候,只會(huì)更新改變的那一項(xiàng);
• 好處是提升性能,key的值唯一,不能重復(fù)

v-if指令和v-show指令

• 用來(lái)控制元素顯示和隱藏;
• v-if/show = "布爾值";
• 區(qū)別:
  • v-if通過(guò)控制dom來(lái)控制元素的顯示與隱藏;
  • v-show通過(guò)控制行內(nèi)樣式display:none來(lái)控制元素的現(xiàn)實(shí)與隱藏
• 使用場(chǎng)景區(qū)別:
  • 涉及到大量dom操作的時(shí)候,需要使用v-show;
  • 涉及到異步渲染時(shí)候,使用v-if

v-on指令

監(jiān)聽dom事件,v-on:任意事件類型(或者自定義的)="要執(zhí)行的函數(shù)";

• v-on:click='要執(zhí)行的函數(shù)名';

• 簡(jiǎn)寫:@任意的事件類型="執(zhí)行函數(shù)";(推薦使用)

• 在methods中去獲取data中的屬性時(shí),需要加上this,表示 vue實(shí)例;
  例如:this.name='';

• 通過(guò)執(zhí)行函數(shù)添加參數(shù)

  • @click="函數(shù)名('參數(shù)')";

• . 通過(guò)執(zhí)行函數(shù)中$event傳遞事件對(duì)象,不能加引號(hào),加引號(hào)相當(dāng)于字符串;

  • @click="執(zhí)行函數(shù)($event)"

• 事件修飾符可以給事件添加特殊功能:

  • .prevent .stop等阻止a鏈接跳轉(zhuǎn)功能;
    @click.prevent = "執(zhí)行函數(shù)";

• 可以給和按鍵相關(guān)的事件添加按鍵修飾符; .enter

v-model指令:

• 實(shí)現(xiàn)view層和model層數(shù)據(jù)綁定,數(shù)據(jù)同步,實(shí)時(shí)更新;
  雙向數(shù)據(jù)綁定;
• 只可以以在input輸入框,select和textarea幾個(gè)輸入的標(biāo)簽里使用
• <input type="text" v-model="name">
  <p>{{name}}</p>