littleyu
littleyu

有没有入门VUE，就看这份自测题了♨

精选的四十五道vue自测题，每五道题公布一次答案。

一、

html


  
    鼠标悬停几秒钟查看此处动态绑定的提示信息！

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 应用时，需要首先创建一个 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


    
      {{obj.a}} 
    
    
      {{obj.b}}

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


    
      {{obj.a}} 
    
    
      {{obj.b}}

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

五、

关于 Object.freeze() 正确的有

A: Object.freeze() 方法可以冻结一个对象，冻结指的是不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。
B: const object2 = Object.freeze(object1); 其中 object2 和 object1 是同一个对象
C: 被冻结对象有一个属性也是对象，那么这个作为属性的对象也是被冻结的。

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

七、

关于模板语法说法正确的是

A: Vue.js 使用了基于 XML 的模板语法
B: 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。
C: 结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
D: 你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。

八、

...
请问 .prevent 在 Vue 被称作什么（三个汉字）？

九、

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让_______???______

请按照文档作答。
模板过重且难以维护

所以，对于 Vue 模板中任何复杂逻辑，你都应当使用_______???______

请按照文档作答。

十、

html


    
      {{computedMessage}} 
      {{computedMessage}} 
      {{computedMessage}} 
    
    
      {{calcMessage()}}
      {{calcMessage()}}
      {{calcMessage()}}

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


    
       {{obj.count}}
    
    

      
      
    

    

      你改了 {{modified}} 次

js

var app = new Vue({
  el: '#app',
  data: {
    obj:{count: 1},
    modified: 0
  },
  watch:{
    _______???________
      this.modified += 1
    }
  }
})
要如何写代码才能监听 obj.count 的变化？

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

十二、

html


    
       {{obj.a}} {{obj.b}} {{obj.c}}
    
    

      
      
      
    

    

      你改了 {{modified}} 次

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 个属性，要怎么才能监听所有属性呢？

十三、

html

js

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

result
请问为什么 fontSize 没有生效？

十四、

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。
这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 _____??______ 属性即可

十五、

关于 v-if 和 v-show 的描述，正确的有

A: 有 v-show 的元素会被渲染并保留在 DOM 中，v-show 只是简单地切换元素的 CSS 属性 display
B: v-show 不支持