vue小小面试题------vue（1）

1，v-show 和v-if的区别？分别说明他们的使用场景。

：v-show 和v-if都是true的时候显示，false的时候隐藏
但是：false的情况下，v-show是采用的display:none;,v-if采用惰性加载。
如果需要频繁切换显示隐藏需要使用v-show

2、父组件向子组件通信
：在子组件的标签上定义一个变量，：变量=‘传的值’，在子级中使用props接收变量

3、子组件向父组件通信
：在子组件中写一个事件，事件中使用this.$emit(‘自定义事件名’，’数据’)；在父级中的子标签上使用@自定义事件 = ‘父级事件’来接收

4、请列出至少4个vue基本指令，并简要说明其作用。
：v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model）
v-for 格式： v-for=“字段名 in(of) 数组json” 循环数组或json(同angular中的ng-repeat),需要注意从vue2开始取消了$index
v-show 显示内容 （同angular中的ng-show）
v-hide 隐藏内容（同angular中的ng-hide）
v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）
v-else-if 必须和v-if连用
v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
v-bind 动态绑定 作用： 及时对页面的数据进行更改
v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面
v-text 解析文本
v-html 解析html标签
v-bind:class 三种绑定方法 1、对象型 ‘{red:isred}’ 2、三元型 ‘isred?“red”:“blue”’

5、vue组件的作用是什么？如何定义和使用组件？
：组件是可复用的 Vue 实例, 如果网页中的某一个部分需要在多个场景中使用，那么我们可以将其抽出为一个组件进行复用。组件大大提高了代码的复用率。
定义组件有两种方式：
(1)全局方式
直接使用Vue.component()创建的组件，所有的Vue实例都可以使用。
(2)局部方式
三部曲1.创建这个组件；2.注册这个组件；3.使用这个组件；

6、vue.js的两个核心是什么？
：数据驱动、组件系统
数据驱动：ViewModel，保证数据和视图的一致性。
组件系统：应用类UI可以看作全部是由组件树构成的。

7、vue中动态样式绑定（class）的方式都有哪些？

：对象方法：
	:class="{ 'active': isActive }"
	:class="{'active':isActive==-1}"
或者
	:class="{'active':isActive==index}"
绑定并判断多个
	:class="{ 'active': isActive, 'sort': isSort }"
第二种（放在data里面）
	:class="classObject"
	data() {
		return {
	 		classObject:{ active: true, sort:false }
		}
	}
数组方法
	:class="[isActive,isSort]"
	data() {
		return{
			isActive:'active',
			isSort:'sort'
		}
	}
	:class="[isActive?'active':'']"
	:class="[isActive==1?'active':'']"

8、vue第一次页面加载会触发哪几个生命周期钩子函数？
：会触发下面这几个 beforeCreate, created, beforeMount, mounted

9、组件中的data为什么不是一个对象而是一个函数？
：组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

10、写出vue中is的使用场景

：改变html标签的默认规则，比如ul里放li，dl里放dt等，
动态切换组件：<component v-bind:is="currentView"></component>
特殊嵌套：
<table>
	<tr is="my-row"></tr>
</table>

11、vue数组发生改变了，但是页面没有渲染，怎么办？
：
arr.splice()
Vue.set()
vm.$set()

12、vue实例中有哪些常见的配置选项，分别用来干嘛？

	el挂载的节点
	data 数据
	methods  事件方法
	computed 计算属性
	watch  监听器
	components  局部组件
	filters   过滤器
	directives  自定义指令
	生命周期钩子函数

13、过滤器的作用是什么？如何注册过滤器？如何使用过滤器？

作用: 对数据进行一些加工处理，比如 数字保留几位小数 
// 全局注册
    // console.log(Vue.filter);
    // 定义：Vue.filter('过滤器名',过滤器函数)  
                // 过滤器函数一定要有返回值
            /*
            Vue.filter('过滤器名',functon(变量值,传入的参数){
                // 过滤处理
                return  处理后的结果
            })
            */
    // 局部注册：

        /*
            new Vue({
                el:""
                ...,
                filters:{
                    过滤器名:function(变量值，传入的参数=参数默认值){
                        // 过滤处理
                         return  处理后的结果
                    }
                }
            })


        */        

    // 使用： {{ 变量 | 过滤器名 }}
    // 使用： {{ 变量 | 过滤器名(参数1，参数2) }}
    // 使用： {{ 变量 | 过滤器名1 | 过滤器名2 | 过滤器名3 |... }}

14、vue常见的修饰符有哪些？并简要说明他们的作用？

Stop：阻止冒泡；
prevent：阻止默认事件；
once：只执行一次；
capture：将事件流设为捕获方式；
self：直对自身触发事件；  enter：回车键；Up:上； down：下；left:左；right：右；
esc:退出；space：空格；delete：删除

15、对应vue是一套渐进式框架的理解？

渐进式代表的含义是：主张最少。
Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。

16、watch和computed区别？

Watch只能监听data中的数据变化，computed不需要，watch可以进行异步操作，computed不可以，computed不修改原始数据，通过return返回处理的数据，可以包含大量的逻辑运算

17、vue在什么场景下可以给任何元素和组件添加进入/离开的过渡效果？
条件渲染 (使用 v-if)；
条件展示 (使用 v-show)；
动态组件；
组件根节点

18、vue中watch和methods的区别有哪些？
watch .是观察的动作，自动执行
methods 是方法，主动调用

19、vue中key值得作用？
在v-for时使用，标识组件的唯一性，更好的区分组件，高效的更新虚拟DOM

20、v-model是什么？怎么使用？vue中标签怎么绑定事件？

可以实现表单元素的双向绑定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model层的data属性。绑定事件：<input @click=doLog() />

呐呐呐呐 20个小题，并不全面，有错误之处，欢迎指点=。=、