VUE 验收

选择题

1、以下会打印：

new Vue({
    data: { a: 1, b: 2 },
    created: function () {
        console.log(this.a)
    },
    mounted(){
        console.log(this.b)
    }
})

A、1,2                 B、2                 C、1                D、2,1

答案：C        created创建实例对象；mounted挂载(el:"#app");

                      无挂载对象所以不执行mounted 

2、用于监听 DOM 事件的指令是:

A、v-on                 B、v-model                 C、v-bind                 D、v-html

答案：A         v-on

3、以下选项中不属于vuex中的属性？

A、state                 B、getters                 C、actions                 D、init

答案：D         init

4、以下代码打印结果为:

<div id="app"> {{ message.split('').reverse().join('') }} </div> 
<script> new Vue({ el: '#app', data: { message: 'hello' } }) </script>

A、hello                B、hel                C、olleh                D、llo

答案：C        olleh

                .split("") 字符串转数组        .reverse() 数组反转        .join("")数组转字符串

5、以下哪个是阻止默认事件的指令

A、.stop                 B、.self                 C、 .prevent                 D、 .capture

答案：C        prevent

6、创建子组件的正确方式

A、

Vue.component('cz',{

      template:`
                <div>我是一个组件</div>
      `,
      data:{}
    })

B、

Vue.component('cz',{

      template:`
                <div>我是一个组件</div>
      `,
    
      data(){
            return:{}
      }
})

C、

Vue.component('cz',{
      template:`
                <div>我是一个组件</div>
      `,
    
      data(){
        return{ }
      }
})

答案：C

7、以下遍历并获取索引的正确方式

  A、<tr v-for="(book,index) in books" :key="index">

  B、<tr v-for="book,index in books" :key="index">

  C、<tr v-for="(index,book) in books" :key="index">

  D、<tr v-for="(index:book) in books" :key="index"> 

答案：A

8、v-show指令的特点是

A、v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏

B、v-show指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

C、v-show指令是操作js动态的把DOM进行隐藏或显示的效果

D、以上都不对

答案：A

9、创建方法错误的是

A、var fun = () =>{};

B、fun(){}

C、function fun() {}

D、var fun = function () {}

答案：B

10、以下获取动态路由{ path: ‘/user/:id’ }中id的值正确的是:

A、this.$route.params.id

B、this.route.params.id

C、this.$router.params.id

D、this.router.params.id

答案：A

简答题

1、Vue 父子组件间的参数传递是如何做到的？

答案：

        父组件向子组件传值：

                1.子组件在props中创建一个属性，用来接收父组件传递的值

                2.父组件中注册子组件

                3.在子组件标签中添加子组件props中创建的属性（使用v-bind方式）

                4.把需要传给子组件的值赋给该属性

        子组件向父组件传值：

                1.子组件需要以某种方式（如：点击事件）触发自定义事件

                2.将需要传递的数据通过$emit的第二个参数作为实参传入

                3.父组件注册子组件并且在标签上绑定自定义事件（监听）

2、 Class 与 Style 如何动态绑定？

答案：

        class:

                1.对象方式：

                        我们可以传给 v-bind:class 一个对象，以动态地切换 class：

<div v-bind:class="{ active: isActive }"></div>

                2.数组方式：

                        我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

<div v-bind:class="[activeClass, errorClass]"></div>

        style：

                1.对象方式：

                        v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个                         JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔                         (kebab-case，记得用引号括起来) 来命名：

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

                2.数组方式：

                        v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

3、v-show与v-if区别

答案：

        相同点：

                v-if与v-show都可以动态控制DOM元素显示与隐藏

        不同点：

                v-if控制显示隐藏是将DOM元素直接添加或删除；

                v-show控制显示隐藏是通过标签css-display:none来控制，DOM元素并没有被删除。

4、下面程序的输出？

const promise = new Promise((resolve, reject) => {

  resolve('success1');

  reject('error');

  resolve('success2');

});

 
promise.then( (res) => {

  console.log('then:', res);

} ).catch( (err) => {

  console.log('catch:', err);

} );

答案：

        then success1

 5、说出至少5个ES6的新特性，并简述它们的作用。

答案：

        1.let关键字：用于声明只在块级作用域起作用的变量

        2.const关键字：用于声明一个变量，且只能在声明时赋值

        3.for-of 循环遍历：可用来遍历具有lterator接口的数据结构

        4.set：用来存储不重名的成员的集合

        5.map：键名，可以是任何类型键值对的集合

        6.promise：更合理、更规范处理异步操作

        7.class：定义类和更简便的实现类的继承

编程题

请编写一个商品展示前后台数据对接demo。需求如下：

1、后台使用express搭建接口

2、使用mongooseAPI进行分页查询mongdb中数据

3、前台页面使用ElementUI进行搭建，Table展示数据，Pagination分页

4、数据字段：

商品名称：goodsName

商品类型：goodsType

进货价格：money

库存数量：stockNum

供应商：supplier

入库时间：warehousTime

5、数据库名称：demo，表明：goods

6、数据库模拟数据见附件