1. Vue常用的指令
   1. v-text 主要用來(lái)渲染純文本內(nèi)容，類似于原生JS的innerText

       <div v-text="msg"></div>
       // msg 的值為純文本，不會(huì)解析標(biāo)簽
      

   2. v-html 主要用來(lái)渲染帶有html標(biāo)簽的文本內(nèi)容，可以渲染原生HTML標(biāo)簽

       <div v-html="msg"></div>
       // msg 的值可以是HTML標(biāo)簽，會(huì)解析標(biāo)簽
      

   3. v-if 主要用來(lái)實(shí)現(xiàn)條件渲染，會(huì)根據(jù)條件是否成立來(lái)決定是否渲染當(dāng)前元素

       <div v-if="true">條件可以是布爾值和條件表達(dá)式</div>
       // v-if后邊的條件可以是布爾值和條件表達(dá)式，當(dāng)條件為true的時(shí)候渲染當(dāng)前元素
      

   4. v-else-if 必須配合 v-if 使用，當(dāng)v-if的條件不成立的時(shí)候，繼續(xù)執(zhí)行判斷，當(dāng)條件成立的收渲染當(dāng)前的元素

       <div v-if="5>5">條件可以是布爾值和條件表達(dá)式</div>
       <div v-else-if="5===5">
            v-if的條件不成立的時(shí)候，開(kāi)始判斷v-else-if，當(dāng)v-else-if的條件成立的時(shí)候渲染
        </div>
      

   5. v-else 必須配合 v-if 或者 v-else-if 使用，當(dāng)v-if的條件不成立的時(shí)候，渲染 v-else 的元素

       <div v-if="type==='success'">成功</div>
       <div v-else-if="type==='error'">警告</div>
        <div v-else>當(dāng)之前的所有條件都不成立的時(shí)候渲染當(dāng)前元素</div>
      

   6. v-show Vue的條件渲染的第二種方式，當(dāng)條件成立的時(shí)候渲染當(dāng)前元素，關(guān)于v-if和v-show的區(qū)別，請(qǐng)看上篇 前端常見(jiàn)面試題（一）

        <div v-show="true">條件可以是布爾值和條件表達(dá)式</div>
      

   7. v-for Vue的列表渲染，用來(lái)渲染一組數(shù)據(jù)，支持for in；for of 兩種遍歷方式，需要注意的是，每一次遍歷的時(shí)候，我們都要給元素添加一個(gè)key值，這個(gè)key值在它的兄弟元素之前必須是獨(dú)一無(wú)二的，我們一般都使用id來(lái)作為這個(gè)key值，這個(gè)key值我們使用了v-bind綁定，下一個(gè)指令我會(huì)講

         <div v-for="item in list" :key="item.id">{{item.value}}</div>
        // list = [{id: 1, value: '第一個(gè)'}, {id: 2, value: '第二個(gè)'},{id: 3, value: '第三個(gè)'}]
      

   8. v-bind Vue的屬性綁定，將當(dāng)前的屬性綁定到Vue的實(shí)例上，使其可以使用js表達(dá)式或者js數(shù)據(jù)，v-bind的簡(jiǎn)寫(xiě)為：一個(gè)冒號(hào)；

       <div v-bind:class="['a','b']">這是v-bind的元素</div>
       <div :class="['a','b']">上下是等價(jià)的</div>
      

      在v-bind中，我們還可以使用表達(dá)式

       <div v-bind:class="{active: 5>0}">這個(gè)元素會(huì)加上active類名</div>
       <div v-bind:class="{active: 5<0}">這個(gè)元素不會(huì)加上active類名</div>
       <div v-bind:class="['a','b',{active: 5>0}]">同時(shí)使用數(shù)組和對(duì)象也是可以的</div>
       <div v-bind:class="a>5?'success':'error'">也可以使用JS表達(dá)式</div>
      

      當(dāng)然，我們更能使用Vue中定義的數(shù)據(jù)

      <div v-bind:class="divClass">使用變量</div>
      // divClass = ['a','b',{active: 5>0}];
      

   9. v-on Vue中的事件綁定方式，可以監(jiān)聽(tīng)所有原生事件，以及Vue中的自定義事件（使用$emit發(fā)布的事件）；v-on 簡(jiǎn)寫(xiě)為 @ 符號(hào)，并且，在Vue中，還為我們提供了很多的事件修飾符，稍后我們一塊看一看

      <button v-on:click="clickBtn">按鈕</button>
      <button @click="clickBtn">上下是等價(jià)的</button>
      // clickBtn是定義在Vue的methods屬性中的方法，即觸發(fā)事件之后觸發(fā)的函數(shù)
      

   10. v-model Vue提供的數(shù)據(jù)雙向綁定，可以實(shí)現(xiàn)表單元素的數(shù)據(jù)雙向綁定，高級(jí)用法可以實(shí)現(xiàn)組件的數(shù)據(jù)雙向綁定，可以看本人的另一篇文章 Vue在組件(非表單控件)上使用v-model雙向數(shù)據(jù)綁定

       <input type="text" v-model="inputValue" />
       // 此時(shí)inputValue就與我們的input實(shí)現(xiàn)了雙向數(shù)據(jù)綁定，當(dāng)input的值發(fā)生改變的時(shí)候，inputValue也會(huì)同步發(fā)生改變
       // 反之，當(dāng)inputValue發(fā)生改變的時(shí)候，input的值也會(huì)發(fā)生改變
       

       在Vue中，v-model也支持一些修飾符，稍后我都會(huì)詳細(xì)說(shuō)
   11. v-pre 跳過(guò)當(dāng)前元素和其子元素的編譯過(guò)程，直接顯示原始的DOM標(biāo)簽及內(nèi)容，跳過(guò)大量的沒(méi)有指令的節(jié)點(diǎn)加速編譯

       <div>
            <span>{{message}}</span>
            <span v-pre>{{message}}</span>  <!-- 當(dāng)前元素不執(zhí)行編譯，直接顯示{{message}}的純文本 -->
       </div>
       

   12. v-clock 防止頁(yè)面加載時(shí)出現(xiàn) vue 的變量名。提升用戶體驗(yàn)感，避免用戶看到編譯之前的變量
   13. v-once 被v-once綁定的元素只會(huì)被編譯渲染一遍，之后的每次渲染，它和它的子元素都會(huì)被當(dāng)成一個(gè)靜態(tài)元素來(lái)跳過(guò)渲染和編譯，用來(lái)更加優(yōu)化性能

       <div v-once>{{msg}}</div>
       <div>{{msg}}</div>
       <!--  第一次渲染的時(shí)候，會(huì)將msg的值渲染在兩個(gè)div中，
             當(dāng)msg的值發(fā)生改變的時(shí)候，再次進(jìn)行渲染，此時(shí)，
             第一個(gè)div會(huì)被當(dāng)做靜態(tài)元素，不再執(zhí)行渲染，只有第二個(gè)
             div的值會(huì)發(fā)生改變 -->
       

2. Vue常用修飾符
   1. v-model修飾符
      1. .lazy
         默認(rèn)情況下，v-model會(huì)同步輸入框的值和數(shù)據(jù)（input事件觸發(fā)數(shù)據(jù)同步），可以通過(guò).lazy修飾符，轉(zhuǎn)變?yōu)樵赾hange發(fā)生時(shí)才觸發(fā)數(shù)據(jù)同步

         <input type="text" v-model.lazy="msg"/>
         

      2. .number
         自動(dòng)將input的數(shù)據(jù)轉(zhuǎn)換為number類型的數(shù)據(jù)

         <input type="text" v-model.number="msg"/>
         

      3. .trim
         過(guò)濾input數(shù)據(jù)兩邊的空格，只能去除兩邊的空格，不能去除中間的，類似于string的trim方法

         <input type="text" v-model.trim="msg"/>
         

   2. v-on事件修飾符
      1. .stop 阻止事件冒泡（阻止事件向上傳遞）
      2. .prevent 阻止默認(rèn)事件（阻止元素的默認(rèn)事件，如form提交會(huì)重載頁(yè)面等）
      3. .captrue 使用事件捕獲的方式觸發(fā)事件（事件會(huì)向下傳遞）
      4. .self 只有當(dāng)事件時(shí)從元素本身觸發(fā)的才會(huì)觸發(fā)事件（當(dāng)e.target為當(dāng)前元素的時(shí)候）
      5. .once 事件只會(huì)觸發(fā)一次
      6. .passive 告知瀏覽器不阻止事件的默認(rèn)行為

         <!-- 阻止單擊事件繼續(xù)傳播 -->
        <button @click.stop="clickThis"></button >
      
        <!-- 提交事件不再重載頁(yè)面 -->
        <form @submit.prevent="onSubmit"></form>
      
        <!-- 修飾符可以串聯(lián) -->
        <button @click.stop.prevent="clickThis"></button >
      
        <!-- 只有修飾符 -->
        <form @submit.prevent></form>
      
        <!-- 添加事件監(jiān)聽(tīng)器時(shí)使用事件捕獲模式 -->
        <!-- 即元素自身觸發(fā)的事件先在此處處理，然后才交由內(nèi)部元素進(jìn)行處理 -->
        <div @click.capture="clickThis">...</div>
      
        <!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) -->
        <!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
        <div @click.self="clickThis">...</div>
      
        <!-- 點(diǎn)擊事件將只會(huì)觸發(fā)一次 -->
        <button @click.once="doThis"></button>
      
        <!-- 滾動(dòng)事件的默認(rèn)行為 (即滾動(dòng)行為) 將會(huì)立即觸發(fā) -->
        <!-- 而不會(huì)等待 `onScroll` 完成  -->
        <!-- 這其中包含 `event.preventDefault()` 的情況 -->
        <div v-on:scroll.passive="onScroll">...</div>
      

   3. 按鍵修飾符 當(dāng)事件觸發(fā)的 keyCode 是對(duì)應(yīng)的 keyCode 時(shí)觸發(fā)
      1. .enter
      2. .tab
      3. .delete 捕獲刪除del和退格back
      4. .esc
      5. .space
      6. .up
      7. .down
      8. .left
      9. .right
      10. 我們還可以通過(guò)Vue的全局配置來(lái)自定義按鍵修飾符
          vue.config.keyCodes.f1 = 112;

      11.   <input @keyup.enter="save" /> // 當(dāng)按下enter鍵的時(shí)候觸發(fā)save方法
          

   4. 系統(tǒng)按鍵修飾符 當(dāng)事件觸發(fā)的同時(shí)按下了系統(tǒng)按鍵時(shí)才會(huì)正確的觸發(fā)事件
      1. ctrl
      2. .alt
      3. .shift
      4. .meta 在window鍵盤(pán)上對(duì)應(yīng)的是win鍵，在mac系統(tǒng)上對(duì)應(yīng)的是command

      5. <button @click.ctrl="clickThis">按鈕</button> // 當(dāng)按著ctrl鍵的同時(shí)觸發(fā)click事件才可以觸發(fā)clickThis方法
         <input @keyup.alt.up="changeInput"/> // 當(dāng)按下alt的同時(shí)使用 up 鍵觸發(fā)input的keyup事件才會(huì)執(zhí)行changeInput方法
         

      6. 在系統(tǒng)按鍵修飾符中觸發(fā)keyup事件的時(shí)候，并不需要將系統(tǒng)按鍵修飾符松開(kāi)，你必須要保持一直按下對(duì)應(yīng)的系統(tǒng)按鍵，只需要彈起常規(guī)按鍵即可
   5. 事件精準(zhǔn)匹配修飾符
      1. .exact 用來(lái)精準(zhǔn)的控制當(dāng)只有對(duì)應(yīng)的系統(tǒng)修飾符按下的時(shí)候才會(huì)觸發(fā)事件

      2.  <!-- 即使 Alt 或 Shift 被一同按下時(shí)也會(huì)觸發(fā) -->
          <button @click.ctrl="onClick">A</button>
         
          <!-- 有且只有 Ctrl 被按下的時(shí)候才觸發(fā) -->
          <button @click.ctrl.exact="onCtrlClick">A</button>
         
          <!-- 沒(méi)有任何系統(tǒng)修飾符被按下的時(shí)候才觸發(fā) -->
          <button @click.exact="onClick">A</button>
         

   6. 鼠標(biāo)按鈕修飾符
      1. .left 鼠標(biāo)左鍵
      2. .right 鼠標(biāo)右鍵
      3. .middle 鼠標(biāo)中鍵
         
         

3. v-on可以監(jiān)聽(tīng)多個(gè)方法嗎？
   v-on 是可以同時(shí)監(jiān)聽(tīng)多個(gè)方法的，但是必須是監(jiān)聽(tīng)不同的事件，當(dāng)監(jiān)聽(tīng)同樣的事件的時(shí)候，只會(huì)觸發(fā)第一次監(jiān)聽(tīng)時(shí)候的方法

   <div @click="clickThis" @mouseenter="enterThis" @mouseleave="leaveThis"></div>
   // 這些事件都可以被觸發(fā)
   <div @click="firstClick" @click="secondClick"></div>
   // 這個(gè)時(shí)候，vue會(huì)報(bào)錯(cuò)，因?yàn)椴荒苁褂胿-on重復(fù)監(jiān)聽(tīng)同一個(gè)事件
   

4. Vue中key值的作用
   用于管理可復(fù)用的元素。因?yàn)閂ue 會(huì)盡可能高效地渲染元素，通常會(huì)復(fù)用已有元素而不是從頭開(kāi)始渲染。這么做使 Vue 編譯變得非常快

   Vue會(huì)盡可能的復(fù)用當(dāng)前頁(yè)面上所有的元素，如果元素沒(méi)有獨(dú)立的key值的話，如果我們只修改了元素的屬性，那Vue會(huì)重復(fù)使用頁(yè)面上的元素，只是給它修改一個(gè)屬性

   在diff算法中，Vue使用 key 值來(lái)判斷元素是否發(fā)生更改，以達(dá)到重復(fù)使用頁(yè)面上所有可復(fù)用元素，特別是在列表渲染中，Vue通過(guò)key值來(lái)判斷元素是否需要更新，如果元素只是更換位置的話，就不需要重新渲染，這也是為什么我們?cè)诹斜礓秩镜臅r(shí)候?yàn)槭裁词冀K不建議使用元素的索引值來(lái)作為 key 值，因?yàn)樗饕凳冀K會(huì)發(fā)生改變，會(huì)增加Vue的渲染成本
   
   

5. Vue組件中的data為什么必須是函數(shù)
   首先我們要明白，組件的創(chuàng)建就是為了可以重復(fù)使用

   Vue的data的兩種定義方式：object 和 function

   object是引用數(shù)據(jù)類型,如果使用object定義組件的 data 的話，每次重復(fù)使用組件的data 都是內(nèi)存的同一個(gè)地址,一個(gè)數(shù)據(jù)改變了其他也改變了;

   而function構(gòu)成一個(gè)局部作用域，每次復(fù)用組件的時(shí)候，都會(huì)返回一個(gè)新的object，這個(gè)新的object與別的組件的data沒(méi)有任何關(guān)聯(lián)，是一個(gè)新的引用

   達(dá)到每一個(gè)組件都獨(dú)立維護(hù)自己的數(shù)據(jù)，而不是多個(gè)組件維護(hù)同一個(gè)數(shù)據(jù)

友情鏈接：前端經(jīng)典css50道面試題

結(jié)言

感謝您的查閱，有錯(cuò)誤的地方望不吝賜教；菜鳥(niǎo)一枚，請(qǐng)多關(guān)照