# homework-fe-04-01

**Repository Path**: sfljskeprim_admin/homework-fe-04-01

## Basic Information

- **Project Name**: homework-fe-04-01
- **Description**: No description available
- **Primary Language**: NodeJS
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-08
- **Last Updated**: 2021-12-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

库是代码集合的一个产品，供程序员调用，常见的JQuery就是一个库。

框架则是解决一类问题而开发的产品，框架用户一般只需要使用框架提供的类或函数，

即可实现全部功能。Vue.js就是一个框架

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

> Vue.js 是渐进式的框架，数据驱动视图，组件化开发



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

数据驱动视图：

- 数据变化自动更新到对应元素中，无需手动操作DOM，这种称为单项数据绑定。
- 对于输入框等可输入元素，可设置双向数据绑定，在数据绑定基础上，可自动将元素输入内容更新给数据，实现数据与元素内容的双向绑定
- 基于MVVM模型实现：Model层代表数据，View层代表视图模板，ViewModel层 业务处理代码
- 基于MVVM模型实现的数据驱动视图解放了DOM操作，View与Model处理分离，降低代码耦合度
- 但是双向绑定时BUG调试难度增大，大型项目的View与Model过多，维护成本高。

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

Model层代表数据，View层代表视图模板，ViewModel层 业务处理代码

Vue.js中的el选项对应View视图模板

Vue.js中的data选项对应着Model层 数据

Vue.js中的绑定操作v-bind  {{}} methods 计算属性等对应着ViewModel 业务处理代码

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

> el选项用于选取一个DOM元素作为Vue实例的挂载目标，只有挂载元素内部才会被Vue进行处理，外部为普通HTML元素，可以设置 '#app' 选择器，也可以直接设置元素element实例

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

> data 选项用于存储Vue实例需要使用的数据，值为对象类型，可以通过vm.$data.数据或者vm.数据访问。
>
> data中的数据可以直接在视图中通过插值表达式访问。
>
> data中的数据为响应式数据，在发生改变时，视图会自动更新。

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

> data中存在数组时，索引操作与length操作无法自动更新视图，可以借助Vue.set()方法更新视图例如：Vue.set(vm.arr,1,'1111'); 等价于 arr[1] = '1111';

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

> 插值表达式只能书写在标签内容区域，可以与其他内容混合。
>
> 内部只能书写JavaScript表达式，不能书写语句

9.methods 的作用是什么？

> methods 选项 ：用于存储需要在Vue实例中使用的函数，函数中的操作可以通过this访问data中的数据，因为this等于vue的实例对象。

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

> 指令的本质就是HTML自定义属性，vue通过v-开头的自定义属性，通过指令来简化DOM操作，指令的职责就是，当表达式的值改变时，将其产生的连带响应，响应式的作用于DOM

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

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

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

> v-bind指令：用于动态绑定HTML属性
>
> :class 绑定：用来设置HTML的class属性
>
> :style 绑定：用来设置HTML的style属性

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

> v-for 指令：用来遍历数据渲染结构，常用的数组与对象均可遍历
>
> 使用v-for指令时，应始终指定唯一:key属性，提高渲染性能，避免出现问题
>
> <template> 模板占位符，不能进行设置:key 因为:key属性必须设置到一个真实的元素上

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

> v-show ： 用于控制元素的显示和隐藏，本质是控制display:none，<template> 无法使用v-show 因为display是用于真实的元素上的。
>
> v-if: 用于根据条件控制元素的创建和移除，使用v-if的同类元素需要绑定不同的:key
>
> 避免v-if与v-for应用于同一个标签，v-for的优先级更高，然后才会v-if,会浪费不必要的性能

15.如何绑定事件？

> 通过v-on:事件  来进行元素的事件绑定

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

> 在vue中通过v-model指令进行双向的数据绑定，用于给input  textarea  select 元素设置双向数据绑定。
>
> input：绑定字符串值
>
> textarea: 绑定字符串值
>
> radio: 绑定字符串值，value属性的值
>
> checkbox: 单个绑定布尔值，多个绑定数组 
>
> select：单选绑定字符串，多选绑定数组

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

> 自定义指令有全局指令和局部指令：
>
> 全局指令通过：Vue.directive('focus',{ 钩子函数 }) 进行设置，第一个参数为指令名使用时要加上v-,第二个参数为对象，内部监听钩子函数，处理DOM操作。
>
> 自定义指令：在Vue实例的内容，directives:{focus:{钩子函数}}

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

> 过滤器用于进行文本内容格式化处理。用在插值表达式和v-bind中使用。
>
> 全局过滤器：Vue.filter('filterA',处理函数)
>
> 局部过滤器：在Vue实例的内容，filters:{filterA(..){...}}

19.methods 与 computed 有哪些区别？

> computed 具有缓存性，methods没有
>
> computed 通过属性名访问，methods需要调用
>
> computed 仅适用于计算操作，但是例如点击事件不能使用computed，要使用methods
>
> 当data中的值发生改变，computed就会执行更新

20.如何设置侦听器？

> 侦听器用于监听数据变化，并执行指定操作，通过watch对象

```html
<div id="app">
    <input type="text" v-model="value">
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            value: '',
            obj: {
                content1: '内容1',
                content2: '内容2'
            },
            arr: [1, 2, 3, 4]
        },
        //侦听器
        watch: {
            //监听data.value的变化，只要value变了就会触发侦听器的操作
            value(val, oldVal) {
                console.log('侦听器执行了', val, oldVal);
            },
            //监听对象内部的变化
            obj: {
                deep: true,
                //对象内部变换的处理函数
                handler(val, oldVal) {
                    console.log('obj:', val, oldVal);
                }
            },
            //监听数组变化
            arr(val, oldVal) {
                console.log("arr:", val, oldVal);
            }
        }
    });
</script>
```