1、vue的概念和特點(diǎn)：

vue是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式JavaScript框架

易用：在有HTML，CSS，JavaScript的基礎(chǔ)上，快速上手。

靈活：簡(jiǎn)單小巧的核心，漸進(jìn)式技術(shù)棧，足以應(yīng)付任何規(guī)模的應(yīng)用。

性能：20kb min+gzip 運(yùn)行大小、超快虛擬 DOM 、最省心的優(yōu)化

2、vue的基本使用：

提供填充數(shù)據(jù)的標(biāo)簽

引入vue.js文件

使用vue.js語(yǔ)法做功能

vue提供的數(shù)據(jù)填充到標(biāo)簽

實(shí)例參數(shù)分析：

el:元素的掛載位置(值可以是css選擇器或者DOM元素)

data:模型數(shù)據(jù)

{{}}差值表達(dá)式：將數(shù)據(jù)填充到html；做一些簡(jiǎn)單的計(jì)算操作

vue代碼運(yùn)行的原理：編譯過(guò)程的概念(vue語(yǔ)法>原生語(yǔ)法)

3、vue基礎(chǔ)指令：

指令的本質(zhì)就是自定義屬性

v-cloak：防止頁(yè)面加載時(shí)出現(xiàn)閃爍問(wèn)題

[v-cloak] {
 display: none;
}

<div v-cloak>
 {{ message }}
</div>

原理：先通過(guò)css將其隱藏，然后在通過(guò)內(nèi)存中進(jìn)行值替換，替換好之后顯示效果

v-text:指令用于將數(shù)據(jù)填充到標(biāo)簽中，作用于插值表達(dá)式類(lèi)似，但是沒(méi)有閃動(dòng)問(wèn)題

如果數(shù)據(jù)中有HTML標(biāo)簽會(huì)將html標(biāo)簽一并輸出

此處為單向綁定，數(shù)據(jù)對(duì)象上的值改變，插值會(huì)發(fā)生變化；但是當(dāng)插值發(fā)生變化并不會(huì)影響數(shù)據(jù)對(duì)象的值

<span v-text="msg"></span>
<!-- 和下面的一樣 -->
<span>{{msg}}</span>

v-html:用法和v-text 相似 但是他可以將HTML片段填充到標(biāo)簽中

可能有安全問(wèn)題, 一般只在可信任內(nèi)容上使用 v-html，永不用在用戶(hù)提交的內(nèi)容上

它與v-text區(qū)別在于v-text輸出的是純文本，瀏覽器不會(huì)對(duì)其再進(jìn)行html解析，但v-html會(huì)將其當(dāng)html標(biāo)簽解析后輸出。

<div v-html="html"></div>

v-pre:顯示原始信息跳過(guò)編譯過(guò)程

跳過(guò)這個(gè)元素和它的子元素的編譯過(guò)程。

一些靜態(tài)的內(nèi)容不需要編譯加這個(gè)指令可以加快渲染

<span v-pre>{{ this will not be compiled }}</span>

v-once:執(zhí)行一次性的插值【當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會(huì)繼續(xù)更新】

v-module:本質(zhì)

綁定數(shù)據(jù)value 觸發(fā)輸入事件input

<!--解決經(jīng)常刷新出現(xiàn)花括號(hào) -->
 <div v-cloak>{{msg}}</div>
 <input type="text" v-bind:value="msg" v-on:input="handle" >
 <!-- 簡(jiǎn)寫(xiě)版 -->
 <input type="text" :value="msg" @input="handle">
 <input type="text" v-bind:value="msg"  v-on:input='msg=$event.target.value'>
 <!-- 簡(jiǎn)寫(xiě)版 -->
 <input type="text" :value="msg"  @input='msg=$event.target.value'>
 <!-- v-model -->
 <input type="text" value="" v-model='msg'>

v-on

• 用來(lái)綁定事件的

• 形式如：v-on:click 縮寫(xiě)為 @click;

<button v-on:click='handle1'>點(diǎn)擊1</button>
//帶參數(shù)
<button v-on:click='handle2(123, 456, $event)'>點(diǎn)擊2</button>

v-bind

• v-bind 指令被用來(lái)響應(yīng)地更新 HTML 屬性

• v-bind:href 可以縮寫(xiě)為 :href;

<!-- 綁定一個(gè)屬性 -->
<img v-bind:src="imageSrc">
<!-- 縮寫(xiě) -->
<img :src="imageSrc">

綁定對(duì)象操作css:

<!-- v-bind:class="{css類(lèi)名:對(duì)象名}" -->
<!-- 案例 -->
<div v-bind:class="{active:IsShow,error:Iserror}">通過(guò)true來(lái)控制類(lèi)名</div>
data: {
 IsShow:true,
 Iserror:true
 }

綁定數(shù)組操作css:

<!-- v-bind:class="[別名A，別名B]" -->
<ul class="box" :class="[classA, classB]">
 <li>學(xué)習(xí)Vue</li>
 <li>學(xué)習(xí)Node</li>
 <li>學(xué)習(xí)React</li>
</ul>
data:{
 別名：'css屬性'
 classA:‘textColor‘,
 classB:‘textSize‘
 }

混合使用操作css:

<div v-bind:class="[a,b,{test:Istest}]">12314</div>
data: {
 a:'active',
 b:'error',
 Istest:true
 }

綁定對(duì)象和綁定數(shù)組 的區(qū)別

• 綁定對(duì)象的時(shí)候 對(duì)象的屬性 即要渲染的類(lèi)名 對(duì)象的屬性值對(duì)應(yīng)的是 data 中的數(shù)據(jù)

• 綁定數(shù)組的時(shí)候數(shù)組里面存的是data 中的數(shù)據(jù)

綁定數(shù)組操作style:

<div v-bind:style="{height:h,width:w,border:b}">124</div>
<div v-bind:style="objstyle">66</div>
<div v-bind:style="[objstyle,overrideStyles]">88</div>
data: {
 h:'150px',
 w:'190px',
 b:'1px solid blue',
 objstyle:{
 height:'150px',width:'190px',border:'1px solid blue'
 },
 overrideStyles: {
 border: '5px solid orange',
 backgroundColor: 'blue'
 }
 }

v-if

使用場(chǎng)景

• 1- 多個(gè)元素 通過(guò)條件判斷展示或者隱藏某個(gè)元素?；蛘叨鄠€(gè)元素

• 2- 進(jìn)行兩個(gè)視圖之間的切換

 <div v-if="score>=90">優(yōu)秀</div>
 <div v-else-if="score<90&&score>=80">良好</div>
 <div v-else-if="score<80&&score>60">一般</div>
 <div v-else>比較差</div>
 <div v-show="flag">顯示</div>
 <button v-on:click='handle'>點(diǎn)擊</button>
 </div>
 <script type="text/javascript" src="js/vue.js"></script>
 <script type="text/javascript">
 /*
 分支結(jié)構(gòu)

 v-show的原理：控制元素樣式是否顯示 display:none
 */
 var vm = new Vue({
 el: '#app',
 data: {
 score: 80,
 flag:true
 },
 methods: {
 handle: function(){
 this.flag=!this.flag
 }
 }
 });
 </script>

v-show 和 v-if的區(qū)別

• v-show本質(zhì)就是標(biāo)簽display設(shè)置為none，控制隱藏

  • v-show只編譯一次，后面其實(shí)就是控制css，而v-if不停的銷(xiāo)毀和創(chuàng)建，故v-show性能更好一點(diǎn)。

• v-if是動(dòng)態(tài)的向DOM樹(shù)內(nèi)添加或者刪除DOM元素

  • v-if切換有一個(gè)局部編譯/卸載的過(guò)程，切換過(guò)程中合適地銷(xiāo)毀和重建內(nèi)部的事件監(jiān)聽(tīng)和子組件

v-for

• 用于循環(huán)的數(shù)組里面的值可以是對(duì)象，也可以是普通元素

<!--  循環(huán)結(jié)構(gòu)-遍歷對(duì)象
 v 代表   對(duì)象的value
 k  代表對(duì)象的 鍵 
 i  代表索引 
 ---> 
 <div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>

<!-- 循環(huán)結(jié)構(gòu)-遍歷數(shù)組  
 item 是我們自己定義的一個(gè)名字  代表數(shù)組里面的每一項(xiàng)
 items對(duì)應(yīng)的是 data中的數(shù)組-->
 <li v-for="item in items">
 {{ item.message }}
 </li> 

key 的作用

- key來(lái)給每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識(shí)
- key的作用主要是為了高效的更新虛擬DOM
<li v-for="item in items" :key="item.id">...</li>

4、雙向數(shù)據(jù)綁定:當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候，視圖也就發(fā)生變化;當(dāng)視圖發(fā)生變化的時(shí)候，數(shù)據(jù)也會(huì)跟著同步變化

5、MVVM設(shè)計(jì)思想

MVVM是前端視圖層的概念，主要關(guān)注于 視圖層分離，也就是說(shuō)：MVVM把前端的視圖層，分為了 三部分 Model, View , VM ViewModel

m model

• 數(shù)據(jù)層 Vue 中 數(shù)據(jù)層 都放在 data 里面

v view 視圖

• Vue 中 view 即 我們的HTML頁(yè)面

vm （view-model） 控制器 將數(shù)據(jù)和視圖層建立聯(lián)系

• m 即 Vue 的實(shí)例 就是 vm

6、事件修飾符

<!-- 阻止單擊事件繼續(xù)傳播 --> 
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁(yè)面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián)   即阻止冒泡也阻止默認(rèn)事件 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>
使用修飾符時(shí)，順序很重要；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。
因此，用 v-on:click.prevent.self 會(huì)阻止所有的點(diǎn)擊，
而 v-on:click.self.prevent 只會(huì)阻止對(duì)元素自身的點(diǎn)擊。

7、按鍵修飾符

監(jiān)聽(tīng)鍵盤(pán)事件

<!-- 只有在 `keyCode` 是 13 時(shí)調(diào)用 `vm.submit()` -->
<input v-on:keyup.13="submit">
<!-- -當(dāng)點(diǎn)擊enter 時(shí)調(diào)用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<!--當(dāng)點(diǎn)擊enter或者space時(shí)  時(shí)調(diào)用 `vm.alertMe()`   -->
<input type="text" v-on:keyup.enter.space="alertMe" >
常用的按鍵修飾符
.enter =>    enter鍵
.tab => tab鍵
.delete (捕獲“刪除”和“退格”按鍵) =>  刪除鍵
.esc => 取消鍵
.space =>  空格鍵
.up =>  上
.down =>  下
.left =>  左
.right =>  右

自定義按鍵修飾符別名
在Vue中可以通過(guò)config.keyCodes自定義按鍵修飾符別名

Vue.config.keyCodes.f5 = 116;
預(yù)先定義了keycode 116（即F5）的別名為f5，因此在文字輸入框中按下F5，會(huì)觸發(fā)prompt方法
<input type="text" v-on:keydown.f5="prompt()">