2019-03-28(Vue知识点1)

1、对于Vue是一套渐进式框架的理解

----简单地说就是可以只使用一部分功能而不需要懂其他的模块,也可以vue全家桶一起上。

2、vue.js的两个核心是什么?

----数据驱动(mvvm省去手动操作dom,通过改变数据来渲染模板)和组件化思想(封装,模块化思想)。

3、请问 v-if 和 v-show 有什么区别

----都是动态显示DOM元素。v-if是动态的向DOM树内添加或者删除DOM元素,v-show是通过设置DOM元素的display样式属性控制显隐。v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件,v-show只是简单的基于css切换。v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译,v-show是在任何条件下都被编译,然后被缓存,而且DOM元素保留。v-if有更高的切换消耗,v-show有更高的初始渲染消耗,v-if适合运营条件不大可能改变,v-show适合频繁切换。

4、vue常用的修饰符

.number---如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符

.trim-----如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符

.stop---事件冒泡(事件不会向上传递)

.prevent-----阻止默认事件(不触发默认事件)

.stop.self.prevent-----指定元素触发(不包括子元素)

5、v-on可以监听多个方法吗?

可以,点击事件、鼠标事件、键盘事件都可以同时绑定在同一个元素上面

6、vue中使用v-for的时候,key值作用?

需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确地识别此节点,找到正确的位置插入新的节点

7、vue-cli项目升级vue版本?

在项目目录里运行 npm upgrade vue vue-template-compiler,不出意外的话,可以正常运行和 build。如果有任何问题,删除 node_modules 文件夹然后重新运行 npm i 即可

8、vue事件中如何使用event对象?

事件中传入$event

9、$nextTick的使用?

在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作并无作用,而在created()里使用this.$nextTick()可以等待dom生成以后再来获取dom对象

10、Vue 组件中 data 为什么必须是函数?

在创建或注册模板的时候传入一个 data 属性作为用来绑定的数据。但是在组件中,data必须是一个函数,因为每一个 vue 组件都是一个 vue 实例,通过 new Vue() 实例化,引用同一个对象,如果 data 直接是一个对象的话,那么一旦修改其中一个组件的数据,其他组件相同数据就会被改变,而 data 是函数的话,每个 vue 组件的 data 都因为函数有了自己的作用域,互不干扰。

11、v-for 与 v-if 的优先级?

v-for比v-if优先,如果每一次都需要遍历整个数组,将会影响速度,尤其是当之需要渲染很小一部分的时候,最好的方法是外层包一层template,上面绑定v-if

12、vue中子组件调用父组件的方法?

父组件自定义事件,子组件使用$emit触发这个事件

13、vue中如何编写可复用的组件?

*.规范化命名:组件的命名应该跟业务无关,而是依据组件的功能命名。

**.数据扁平化:定义组件接口时,尽量不要将整个对象作为一个 prop 传进来。每个 prop 应该是一个简单类型的数据。这样做有下列几点好处:

*** 组件接口清晰。***props 校验方便。***当服务端返回的对象中的 key 名称与组件接口不一样时,不需要重新构造一个对象。

扁平化的 props 能让我们更直观地理解组件的接口。

****可复用组件只实现 UI 相关的功能,即展示、交互、动画,如何获取数据跟它无关,因此不要在组件内部去获取数据。

*****.可复用组件应尽量减少对外部条件的依赖。

******.组件在功能独立的前提下应该尽量简单,越简单的组件可复用性越强。

*******.组件应具有一定的容错性。

14、vue生命周期钩子函数有哪些?

beforeCreate:el 和 data 并未初始化 (此方法不常用)

created:完成了 data 数据的初始化,el的初始化未完成。用来发送ajax

beforeMount:(执行此方法时已经完成了 el 和 data 初始化 (已经赋予了对应的值))

渲染DOM之前先确认下是否有要编译的根元素(有无el属性),有才继续确认是否具有模板属性template,如果有模版属性,则会用template的值替换掉HTML中的结构,template模版中只能有一个根元素(而且不能是文本);

mounted:(执行此方法时代表已经挂载结束了)

把编译好的数据挂载到DOM元素上,最后渲染成真实的DOM元素;真实DOM已经渲染完成,可以操作DOM了

beforeUpdate:当页面依赖的数据更改之后触发(此时DOM结构还没有重新加载)

updated:DOM结构重新加载之后触发

调用vm.$destroy()之后触发下面两个事件:

beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。(可在此处清除定时器,清除事件绑定)

destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

15、vue更新数组时触发视图更新的方法?

push(), pop(), shift(), unshift(), splice(), sort(), reverse()

pop() 方法用于删除最后一个元素,把数组长度减 1,并且返回它删除的元素的值。

shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。

unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度

splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。 该方法会改变原始数组。

sort() 方法用于对数组的元素进行排序。

reverse() 方法用于颠倒数组中元素的顺序

Vue.set() 响应式新增与修改数据

你可能感兴趣的:(2019-03-28(Vue知识点1))