有沒有入門VUE，就看這份自測題了?

精選的四十五道vue自測題，每五道題公布一次答案。

一、

html

<div id="app">
  <span ____________???____________>
    鼠標懸停幾秒鐘查看此處動態(tài)綁定的提示信息！
  </span>
</div>

js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
問號處應該填入什么，才能使得 span 的 title 為 message 的值？

A: title="message"
B: :title="message"
C: bind:title="message"
D: v-bind:title="message"
E: title="{{message}}"
F: :title=message
G: v-bind:title=message

二、

我們在初始化一個 Vue 應用時，需要首先創(chuàng)建一個 Vue 實例：

var vm = new Vue(options)
其中 options 是一個對象，請問文檔中說 options 可以包含哪些 key ？

A: data props propsData computed methods watch
B: el template render renderError
C: beforeCreate created beforeMount mounted beforeUpdate updated activated deactivated beforeDestroy destroyed errorCaptured
D: directives filters components parent mixins extends provide inject
E: name delimiters functional model inheritAttrs comments

三、

html

<div id="app">
    <span class=span-a>
      {{obj.a}} 
    </span>
    <span class=span-b>
      {{obj.b}}
    </span>
  </div>

js

var app = new Vue({
  el: '#app',
  data: {
    obj: {
      a: 'a',
    }
  },
})
app.obj.b = 'b'
請問最終 span-a 和 span-b 中分別展示什么字符串？

A: span-a 中顯示a，span-b 中顯示 b
B: span-a 中顯示a，span-b 中顯示 undefined
C: span-a 中顯示a，span-b 中不顯示

四、

html

<div id="app">
    <span class=span-a>
      {{obj.a}} 
    </span>
    <span class=span-b>
      {{obj.b}}
    </span>
  </div>

js

var app = new Vue({
  el: '#app',
  data: {
    obj: {
      a: 'a',
    }
  },
})
app.obj.a = 'a2'
app.obj.b = 'b'
請問最終 span-a 和 span-b 中分別展示什么字符串？

A: span-a 中顯示a2，span-b 中不顯示
B: span-a 中顯示a2，span-b 中顯示b

五、

關(guān)于 Object.freeze() 正確的有

A: Object.freeze() 方法可以凍結(jié)一個對象，凍結(jié)指的是不能向這個對象添加新的屬性，不能修改其已有屬性的值，不能刪除已有屬性，以及不能修改該對象已有屬性的可枚舉性、可配置性、可寫性。
B: const object2 = Object.freeze(object1); 其中 object2 和 object1 是同一個對象
C: 被凍結(jié)對象有一個屬性也是對象，那么這個作為屬性的對象也是被凍結(jié)的。

1.BDFG 2.ABCDE 3.C 4.B 5.AB

六、

var vm = new Vue({
  el: '#example',
  data: {message: 'hi'}
})
請問這個 vm 有哪些屬性（API）？

A: $data $props $el $options $parent $root $children $slots $scopedSlots $refs $isServer $attrs $listeners
B: $watch $set $delete
C: $on $once $off $emit
D: $mount $forceUpdate $nextTick $destroy

七、

關(guān)于模板語法說法正確的是

A: Vue.js 使用了基于 XML 的模板語法
B: 在底層的實現(xiàn)上，Vue 將模板編譯成虛擬 DOM 渲染函數(shù)。
C: 結(jié)合響應系統(tǒng)，Vue 能夠智能地計算出最少需要重新渲染多少組件，并把 DOM 操作次數(shù)減到最少。
D: 你也可以不用模板，直接寫渲染 (render) 函數(shù)，使用可選的 JSX 語法。

八、

<form v-on:submit.prevent="onSubmit">...</form>
請問 .prevent 在 Vue 被稱作什么（三個漢字）？

九、

模板內(nèi)的表達式非常便利，但是設計它們的初衷是用于簡單運算的。在模板中放入太多的邏輯會讓_______???______

請按照文檔作答。
模板過重且難以維護

所以，對于 Vue 模板中任何復雜邏輯，你都應當使用_______???______

請按照文檔作答。

十、

html

<div id="app">
    <span>
      {{computedMessage}} 
      {{computedMessage}} 
      {{computedMessage}} 
    </span>
    <span>
      {{calcMessage()}}
      {{calcMessage()}}
      {{calcMessage()}}
    </span>
  </div>

js

var app = new Vue({
  el: '#app',
  data: {
    message: 'hi'
  },
  computed:{
    computedMessage(){
      console.log('computed')
      return 'computed ' + this.message
    },
  },
  methods:{
    calcMessage(){
      console.log('methods')
      return 'calc ' + this.message
    }
  }
})
問，打印了幾次「computed」，幾次「methods」

A: 三次 computed，三次 methods
B: 一次 computed，一次 methods
C: 一次 computed，三次 methods

6.ABC 7.BCD 8.修飾符 9.計算屬性 10.C

十一、

html

<div id="app">
    <span>
       {{obj.count}}
    </span>
    <div>
      <button @click="obj.count+=1">+1</button>
      <button @click="obj.count-=1">-1</button>
    </div>
    <div>
      你改了 {{modified}} 次
    </div>
  </div>

js

var app = new Vue({
  el: '#app',
  data: {
    obj:{count: 1},
    modified: 0
  },
  watch:{
    _______???________
      this.modified += 1
    }
  }
})
要如何寫代碼才能監(jiān)聽 obj.count 的變化？

A: obj.count(){
B: obj(){
C: 'obj.count':function(){

十二、

html

<div id="app">
    <span>
       {{obj.a}} {{obj.b}} {{obj.c}}
    </span>
    <div>
      <button @click="obj.a+=1">a+1</button>
      <button @click="obj.b+=1">b+1</button>
      <button @click="obj.c+=1">c+1</button>
    </div>
    <div>
      你改了 {{modified}} 次
    </div>
  </div>

js

var app = new Vue({
  el: '#app',
  data: {
    modified: 0,
    obj: {a:1,b:2,c:3}
  },
  created(){
      this.$watch('obj', ()=>{
        this.modified += 1
      }, ___________????_________)
  }
})
接上題，如果 obj 有 N 個屬性，要怎么才能監(jiān)聽所有屬性呢？

十三、

html

<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>

js

data: {
  activeColor: 'red',
  fontSize: 30
}

result

<div style="color: red;"></div>
請問為什么 fontSize 沒有生效？

十四、

Vue 會盡可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染。這么做除了使 Vue 變得非?？熘?，還有其它一些好處。
這樣也不總是符合實際需求，所以 Vue 為你提供了一種方式來表達“這兩個元素是完全獨立的，不要復用它們”。只需添加一個具有唯一值的 _____??______ 屬性即可

十五、

關(guān)于 v-if 和 v-show 的描述，正確的有

A: 有 v-show 的元素會被渲染并保留在 DOM 中，v-show 只是簡單地切換元素的 CSS 屬性 display
B: v-show 不支持 <template> 元素，也不支持 v-else
C: v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當?shù)乇讳N毀和重建。
D: v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r，才會開始渲染條件塊。相比之下，v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染
E: 一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。

11.C 12.{ deep: true } 13.沒有單位 14.key 15.ABCDE

十六、

關(guān)于 v-for，正確的有

A: 可以使用 v-for 來迭代或遍歷一個數(shù)組： <li v-for="(item, index) in items">
B: 可以使用 v-for 來迭代或遍歷一個對象： <li v-for="(value, key, index) in object">
C: v-for 在遍歷對象時，是按 Object.keys() 的結(jié)果遍歷，但是不能保證它的結(jié)果在不同的 JavaScript 引擎下是一致的。

十七、

代碼：http://jsbin.com/gacokit/8/edit?html,js,output

上面代碼有一個 BUG，進行如下操作就會看到 BUG：

  1. 點擊3次 add 按鈕
  2. 點擊前兩個「點我」按鈕，會看到兩個 true
  3. 刪除其中一個 true
  4. 發(fā)現(xiàn)依然有兩個 true
請問出現(xiàn) BUG 的原因是？（說出解決這個 BUG 的關(guān)鍵點即可，答案是一個英文單詞）

十八、

代碼 http://jsbin.com/sidazuy/2/edit?html,js,output

上面代碼中有一個 BUG：點擊 add 后 this.items 變化了，但是頁面卻沒有變化

add(){ 
    this.items[this.items.length] = {name:'xxx',clicked:false,id:Math.random()}
    console.log(this.items) //this.items 確實變化了
}
請問這是為什么？

A: 由于 JavaScript 的限制，Vue 不能檢測到 this.items[this.items.length] 的變化，所以頁面沒有重新渲染。
B: 如果改成 this.items.push 就可以解決這個 BUG 了，因為 Vue 在 this.items.push 方法上做了一些手腳
C: 使用 this.$set(this.items, this.items.length, ...) 能解決這個 BUG

十九、

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>
這段代碼的結(jié)果是？

A: 頁面中顯示 0 1 2 3 4 5 6 7 8 9 10
B: 頁面中顯示 1 2 3 4 5 6 7 8 9 10
C: 頁面中顯示 1 0

二十、

代碼： http://jsbin.com/hiyuqak/2/edit?html,js,output

<div id="app">
    <table>
        <child v-for="(item,index) in items">
        </child>
    </table>
<button @click=add>add</button>
</div>
點擊 add 后發(fā)現(xiàn) child 組件全都位于 table 外面，請問是什么原因？

A: html 中 table 的子元素不能是 child，因此 child 被解析到 table 的外面了
B: 可以使用 <tr is="child" 類似的語法來解決這個問題

16.ABC 17.key 18.ABC 19.B 20.AB

二十一、

Vue 事件處理相關(guān)知識中，$event 是什么？

A: event 是指對應的事件信息 B: 對于原生元素（如 button、input）來說，event 是原始的 DOM 事件
C: 對于自定義組件（如 child）來說，event 是其自身emit 發(fā)出的第一個參數(shù)
D: 對于自定義組件（如 child）來說，event 是其自身emit 發(fā)出的所有參數(shù)

二十二、

Vue 提供的修飾符有

A: 事件修飾符：.stop .prevent .capture .self .once .passive
B: 鍵盤修飾符：.數(shù)字 .enter .tab .delete .esc .space .up .down .left .right .page-down .ctrl .alt .shift .meta .exact 等
C: 鼠標按鈕修飾符：.left .right .middle

二十三、

Vue 支持自定義的修飾符嗎？https://github.com/vuejs/vue/issues/6982

A: 支持
B: 不支持

二十四、

Vue 文檔中提到的「關(guān)注點分離原則」是什么？ Google一下

A: 是處理復雜性的一個原則。由于關(guān)注點混雜在一起會導致復雜性大大增加，所以把不同的關(guān)注點分離開來分別處理
B: 關(guān)注點分離在計算機科學中，是將計算機程序分隔為不同部分的設計原則。每一部分會有各自的關(guān)注焦點。比如網(wǎng)站可以分離為前端和后端，前端的網(wǎng)頁又可以分離為 HTML、CSS 和 JS 等。

二十五、

html

<div id="app">
    <input type="text" v-model="value1" :value="value2">
  </div>

js

var app = new Vue({
  el: '#app',
  data: {
    value1:'1',
    value2:'2'
  },
})
請問最終 input 的 value 是多少？

A: 1
B: 2

21.ABC 22.ABC 23.B 24.AB 25.A

二十六、

<select v-model="selected">
  <option v-bind:value="{ number: 123 }">123</option>
</select>
如果用戶選擇了該 option，請問 vm.selected 的值為

A: 使用錯誤，option 的 :value 不能是對象
B: vm.selected 為 123
C: vm.selected 為 "number"
D: vm.selected 為 {"number":123} 對象

二十七、

在默認情況下，v-model 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進行同步 (除了上述輸入法組合文字時)。你可以添加.__?__修飾符，從而轉(zhuǎn)變?yōu)槭褂?change 事件進行同步：

<!-- 在“change”時而非“input”時更新 -->
<input v-model.__?__="msg" >

二十八、

v-model 其實只是一個語法糖，因為

<input v-model="searchText">

等價于

<input
  v-bind:__A__="searchText"
  v-on:__B____="searchText = _____C______"
>
請問 A B C 三個空應該分別填入什么？

二十九、

v-model 用到自定義組件上時，跟 input 稍有不同

<custom-input v-model="searchText"></custom-input>

等價于

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = ____?_____"
></custom-input>
請問空格處應該填入什么

三十、

Vue.component('button-counter', options) 可以全局注冊一個組件，關(guān)于這個 options 說法正確的是

A: 因為組件是可復用的 Vue 實例，所以它們與 new Vue 接收幾乎相同的選項，例如 data、computed、watch、methods 以及生命周期鉤子等。
B: 這里的 options 不接受 el
C: 這里的 options.data 選項必須是一個函數(shù)

26.D 27.lazy 28.value/input/$event.target.value 29.$event` 30.ABC

三十一、

<component v-bind:is="currentTabComponent"></component>
通過修改 currentTabComponent 的值，我們就可以讓 component 在不同組件之間進行動態(tài)切換

A: 對
B: 錯

三十二、

遵循了 W3C 規(guī)范中的自定義組件名規(guī)則的組件名有

A: xdialog
B: x-dialog
C: xDialog
D: XDialog

三十三、

關(guān)于「全局注冊」和「局部注冊」的描述，正確的有：

A: 一個組件，在全局注冊之后，可以用在任何新創(chuàng)建的 Vue 根實例的模板中。
B: 使用 webpack 等構(gòu)建工具時，全局注冊所有的組件意味著即便你已經(jīng)不再使用一個組件了，它仍然會被包含在你最終的構(gòu)建結(jié)果中。這造成了用戶下載的 JavaScript 的無謂的增加。這個時候可以考慮使用局部注冊。

三十四、

props 支持哪些寫法？
假設有如下代碼：

Vue.components('x-component', {
    ... //省略其他選項
    props: ____?_____
})
請問以下哪些代碼可以放在 ____?_____ 處

A: ['title', 'likes', 'isPublished', 'commentIds', 'author']
B: {propA: Number}
C: {propB: [String, Number] }
D: {propC: { type: String, required: true } }
E: {propD: { type: Number, default: 100 }}
F: {propE: { type: Object, default: function () { return { message: 'hello' } } } }

三十五、

BlogPost 組件的注冊

Vue.component('blog-post', {
    props: {
        isPublished: Boolean
    }
})

html

<blog-post is-published></blog-post>
請問 blog-post 組件得到的 prop.isPublished 的值是多少？

A: undefined
B: true

31.A 32.B 33.AB 34.ABCDEF 35.B

三十六、

假設 post 只有 id 和 title 兩個屬性，
那么

<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>

可以縮寫成

<blog-post v-bind="post"></blog-post>

A: 是的
B: 不行

三十七、

關(guān)于單向數(shù)據(jù)流，對的有

A: 不應該在一個子組件內(nèi)部改變（父組件傳給它的）prop。如果這樣做了，Vue 會在瀏覽器的控制臺中發(fā)出警告。
B: 有些情況下，我們實在想要改變 prop，可以考慮定義一個本地的 data 屬性，并將這個 prop 用作其初始值
C: 有些情況下，我們需要轉(zhuǎn)換 prop 的值。那么可以使用計算屬性
D: 假設某個 prop 是一個對象，如 props.user = {name:'frank'}，如果子組件改變了 user.name，那么 Vue 會檢測不到這種違反約定的代碼，導致父組件的狀態(tài)受到影響。

三十八、

假設 bootstrap-date-input 的模板是這樣的：

<input type="date" class="form-control">

假設我是這樣使用這個組件的：

<bootstrap-date-input type="input" class="hi"></bootstrap-date-input>

請問最終得到的 HTML 是什么？
A: <input type="input" class="form-control hi">
B: <input type="input" class="hi">
C: <input type="date" class="form-control hi">
D: <input type="date" class="hi">

三十九、

接上題，上題中的 type 和 class 會替換或合并到 bootstrap-date-input 組件的根元素上。

如果我希望「禁用特性繼承」，請問應該使用什么選項？

四十、

<text-document v-bind:title.sync="doc.title"></text-document>

等價于

  v-bind:___A___="doc.title"
  v-on:___B___="doc.title = ___C___"
></text-document>
A、B、C 三處分別填寫什么？

***36.A 37.ABCD 38.A 39.inheritAttrs: false 40.title/update:title/$event

四十一、

關(guān)于插槽的描述，正確的有

A. 假設有一個組件 <navigation-link>，如果 <navigation-link> 的 template 里沒有包含一個 <slot> 元素，則任何傳入 <navigation-link> 的內(nèi)容都會被拋棄。
例如

      <navigation-link>
        你好
      </navigation-link>

其中的你好將會被 Vue 刪除。
B. 使用具名插槽 <slot name="xxx'> 可以實現(xiàn)一個組件擁有多個插槽
C. 可以使用 <slot>默認內(nèi)容</slot> 來指定插槽里的默認內(nèi)容
D. 可以用 this.$slots 來讀取傳入的所有插槽內(nèi)容（建議用 jsbin 驗證一下）
E. 通過設置 slot 屬性可以設置內(nèi)容對應的插槽名字
F. 通過設置 slot-scope 屬性，可以從子組件中獲取數(shù)據(jù)

四十二、

我們之前曾經(jīng)在一個多標簽的界面中使用 is 特性來切換不同的組件：

<component v-bind:is="currentTabComponent"></component>

當在這些組件之間切換的時候，你有時會想保持這些組件的狀態(tài)，以避免反復重渲染導致的性能問題。

為了解決這個問題，我們可以用一個 <_____?_____> 元素將其動態(tài)組件包裹起來。

四十三、

關(guān)于異步組件，正確的有：
A. 異步組件是指，在需要用到它的時候才從服務器加載一個組件
B. 如果項目支持 webpack 2+ 和 ES 2015+，那么可以這樣實現(xiàn)異步組件

  Vue.component(
      'async-webpack-example',
      () => import('./my-async-component')
  )

C. 如果項目支持 webpack 2+ 和 ES 2015+，那么可以這樣實現(xiàn)異步組件

  new Vue({
      // ...
      components: {
          'my-component': () => import('./my-async-component')
      }
  })

D. 根據(jù) Vue 的文檔來說，異步組件就是動態(tài)組件

四十四、

這里有一個關(guān)于依賴注入的例子：http://jsbin.com/zuvuhot/3/edit?html,js,output
看完例子后請判斷對錯
html

<div id="app">
    <component-one>
      <component-two>
        <component-three>

        </component-three>
      </component-two>
    </component-one>

  </div>

js

Vue.component('component-one', {
  template: `
    <div><slot></slot></div>
  `,
  provide:{
    provide1(){
      console.log('這是component-one提供的函數(shù)')
    }
  }
})
Vue.component('component-two', {
  template: `
    <div><slot></slot></div>
  `,

})
Vue.component('component-three', {
  template: `
    <button @click="provide1">Click me</button>
  `,
  inject: ['provide1']
})

var app = new Vue({
  el: '#app',

})

A: 點擊 component-three 里的 Click me 按鈕，將產(chǎn)生報錯，因為這個組件沒有這個 method
B: 點擊 component-three 里的 Click me 按鈕，將不會報錯，因為這個組件通過依賴注入（provide/inject）得到了 provide1 方法

四十五、

關(guān)于事件 API，正確的有

A: 我們可以通過 $on(eventName, eventHandler) 偵聽一個事件
B: 我們可以通過 $once(eventName, eventHandler) 一次性偵聽一個事件
C: 我們可以通過 $off(eventName, eventHandler) 停止偵聽一個事件
D: 我們可以通過 $trigger(eventName,eventData) 觸發(fā)一個事件

41.ABCEF 42.keep-alive 43.ABC 44.B 45.ABC

來源
有疑惑的小胖友，歡迎在底下留言哦~

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • # 傳智播客vue 學習## 1. 什么是 Vue.js* Vue 開發(fā)手機 APP 需要借助于 Weex* Vu...
    再見天才閱讀 3,788評論 0贊 6
  • 沒想到回家路上會遭遇連環(huán)追尾事故 好好的一輛車被撞的嚴重變形 到現(xiàn)在心里都是怦怦直跳 車禍就在一瞬間 轉(zhuǎn)眼就成這樣...
    野里拐閱讀 321評論 0贊 1
  • Schema與數(shù)據(jù)類型優(yōu)化 選擇優(yōu)化的數(shù)據(jù)類型 1.更小的通常更好 更小的數(shù)據(jù)類型通常更快,因為它們占用更少的磁盤...
    羅志贇閱讀 944評論 0贊 50
  • 1、 安晴在大學室友的眼里是個很奇怪的女孩子。 她很漂亮，頭發(fā)像海藻一樣濃密，眼睛里好像有星星，當她眨著眼睛看著你...
    狐貍化作公子身閱讀 605評論 1贊 15
  • 一朵熬過一天暴曬仍然盛放的蘭花，感動于弱小生命的美麗堅韌！ 清晨下樓，正是六月天，雖然剛過七點，太陽已經(jīng)升得很高，...
    簡知恩閱讀 657評論 6贊 15

友情鏈接更多精彩內(nèi)容