简答题

1.库与框架的区别是什么？

库是将代码集合成的一个产品，供开发使用在实际开发中，如果需要用到库，只需要使用库内我们所需的某个部分类或者函数，然后自己再实现其他部分的功能
框架则是为了解决一个或一类问题而开发的产品我们在开发使用框架的时候，框架为我们提供了一条龙服务，一整套的服务，我们调用框架的时候，取的是整个框架

2.Vue.js 的核心特性有哪些？

数据驱动视图
组件化开发

3.什么是数据驱动视图？

数据变化会自动更新到对应元素中，无需手动操作 DOM，这种行为称作单向数据绑定。
对于输入框等可输入元素，可设置双向数据绑定。
双向数据绑定是在数据绑定基础上，可自动将元素输入内容更新给数据，实现数据与元素内容的双向绑定。

4.MVVM 模型各部分含义是什么，在 Vue.js 中分别对应哪些功能？

Vue.js 的数据驱动视图是基于 MVVM 模型实现的。

MVVM (Model – View – ViewModel )是一种软件开发思想 • Model 层，代表数据 • View 层，代表视图模板 • ViewModel 层，代表业务逻辑处理代码

5.el 选项的作用是什么，可以设置哪几种值？

用于选取一个 DOM 元素作为 Vue 实例的挂载目标。

只有挂载元素内部才会被 Vue 进行处理，外部为普通 HTML 元素。
代表 MVVM 中的 View 层（视图）。

可以为 CSS 选择器格式的字符串或 HTMLElement 实例，但不能为 html 或 body。挂载完毕后，可以通过 vm.$el 进行访问。

6.设置在 data 中的数据有什么特点？

用于存储 Vue 实例需要使用的数据，值为对象类型。
data 中的数据可以通过 vm.$data.数据或 vm.数据访问。
data 中的数据可以直接在视图中通过插值表达式访问。
data 中的数据为响应式数据，在发生改变时，视图会自动更新。
data 中存在数组时，索引操作与 length 操作无法自动更新视图，这时可以借助 Vue.set() 方法替代操作。

7.Vue.set() 可以解决什么问题？

data 中存在数组时，索引操作与 length 操作无法自动更新视图

8.插值表达式内有哪些书写要求？

插值表达式只能书写在标签内容区域，可以与其它内容混合。
内部只能书写 JavaScript 表达式，不能书写语句。
挂载元素可以使用 Vue.js 的模板语法，模板中可以通过插值表达式为元素进行动态内容设置，写法为 {{ }}。

9.methods 的作用是什么？

用于存储需要在 Vue 实例中使用的函数
methods 中的方法可以通过 vm.方法名访问
方法中的 this 为 vm 实例，可以便捷的访问 vm 数据等功能

10.谈谈你对指令的理解。

指令的本质就是 HTML 自定义属性
是以 v- 开头的自定义属性

11.常用的内容处理指令有哪些？

v-once 指令使元素内部的插值表达式只生效一次
v-text 指令元素内容整体替换为指定纯文本数据
v-html 指令元素内容整体替换为指定的 HTML 文本

12.常用的属性绑定操作有哪些？

v-bind 指令 v-bind 指令用于动态绑定 HTML 属性 Vue.js 还为 v-bind 指令提供了简写方式'：' 与插值表达式类似，v-bind 中也允许使用表达式如果需要一次绑定多个属性，还可以绑定对象
Class 绑定 class 是 HTML 属性，可以通过 v-bind 进行绑定，并且可以与 class 属性共存对于 class 绑定， Vue.js 中还提供了特殊处理方式 'class="'
Style 绑定 style 是 HTML 属性，可以通过 v-bind 进行绑定，并且可以与 style 属性共存当我们希望给元素绑定多个样式对象时，可以设置为数组

13.v-for 指令的注意点？

用于遍历数据渲染结构，常用的数组与对象均可遍历
使用 v-for 的同时，应始终指定唯一的 key 属性，可以提高渲染性能并避免问题
通过 <template> 标签设置模板占位符，可以将部分元素或内容作为整体进行操作

14.v-if 与 v-show 的区别？

v-show 指令:

用于控制元素显示与隐藏，适用于显示隐藏频繁切换时使用
<template> 无法使用 v-show 指令 v-if 指令:
用于根据条件控制元素的创建与移除
给使用 v-if 的同类型元素绑定不同的 key
出于性能考虑，应避免将 v-if 与 v-for 应用于同一标签

15.如何绑定事件？

绑定事件：

<div id="app">
    <p>{{ content }}</p>
    <button v-on:click = "content = '新内容'">按钮</button>
</div>

var vm =  new Vue({
    el:'#app',
    data: {
        content: '默认内容'
    }
})

简写方式：

<div id="app">
    <p>{{ content }}</p>
    <button @click = "fn(content, $event)">按钮</button>
</div>

var vm =  new Vue({
    el:'#app',
    data: {
        content: '默认内容'
    },
    methods: {
        fn (content, event) {
            console.log(content);
            console.log(event);
        }
    }
})

16.谈谈你对双向数据绑定的理解？

基于MVVM 模型实现的数据驱动视图解放了DOM操作
View 与 Model 处理分离，降低代码耦合度
但双向绑定时的 Bug 调试难度增大
大型项目的 View 与 Model 过多，维护成本高

17.如何设置自定义指令？

自定义全局指令：

<div id="app">
    <input type="text" v-focus>
</div>

Vue.directive('focus',{
    inserted: function (el) {
        el.focus();
    }
})

自定义局部指令：

<div id="app">
    <input type="text" v-focus>
<div>

new Vue({
    directives: {
        focus: {
            inserted (el) {
                el.focus();
            }
        }
    }
})

18.过滤器通常用来做什么？

过滤器用于进行文本内容格式化处理过滤器可以在插值表达式和 v-bind 中使用

19.methods 与 computed 有哪些区别？

computed 具有缓存型，methods 没有
computed 通过属性名访问，methods 需要调用
computed 仅适用于计算操作

20.如何设置侦听器？

var vm =  new Vue({
    el:'#app',
    data: {
        content: {
            obj1: '默认内容1',
            obj2: '默认内容2',
        },
    watch: {
        content {
            deep: true,
            handler (var, oldVal) {
                console.log(val, oldVar);
            }
        }
    }
})

VUE基础入门20分

简答题