Vue 知识点小结

1、什么是Vue？
Vue是构建用户界面的渐进式框架。

2、MVC和MVVM的区别？
MVC是后端分层开发的概念，MVVM是前端视图层的概念，关注视图层的分离，

MVC中的M是model，V是view，C是contorller，model是模型层用于与数据库进行交互，view是视图层用于与用户进行交互，contorller是调度层用于接受请求，处理请求，然后返回响应。

MVVM中的M是model，V是view，VM是viewModel，model是模型层进行业务逻辑，处理数据，view是视图层用于界面的展示，viewModel是用于把model和view进行双向绑定。

3、框架和库的区别？
框架：是一套完整的解决方案，对项目的侵入性较大，如果需要更换框架，需要重新构建项目。

库：是提供一个小功能，对项目的侵入性较小，如果这个库无法实现这个功能，可以很容易的更换其他库完成。

4、差值表达式？
插值表达式{undefined{}}，可以在前后插入一些内容

5、vue指令界面防止闪烁？
v-cloak

6、v-text和v-html的区别？
v-text 只会返回标签的内容 不会把标签的效果渲染出

v-html 会带着标签效果一样显示,适合对接后台返回富文本内容

7、vue指令-属性绑定及简写？
v-bind 简写：

8、vue指令-事件绑定及简写？
v-on 简写@

9、vue事件修饰符？
.stop:阻止冒泡

.prevent:阻止默认事件

.capture:添加事件捕获模式

.once:事件只触发一次

.self:只有当事件作用于本身才能触发

10、vue指令-双向数据绑定？
v-model

原理：vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，首先是对数据进行监听，然后当监听的属性发生变化时则告诉订阅者是否要更新，若更新就会执行对应的更新函数从而更新视图。Object.defineProperty()来实现数据劫持的。

11、vue指令-循环渲染？
v-for

12、vue指令-显示隐藏
v-show、v-if

13、vue指令-v-for如何遍历对象、数组、数字
遍历对象：v-for=‘（value,key,index）’in list；

遍历数组：v-for=‘（item，index）’ in list；

遍历数字：v-for=‘num in 9’；

14、vue指令-v-for为什么设置key？
key：提高重排效率，就地复用。

key只能是数字或者字符串、必须是唯一的。

15、vue指令-v-if和v-show的区别？
v-if：删除dom元素，用于只修改一次的情况

v-show：设置display：none；，用于反复切换

16、vue绑定class方式？
数组：:class="[]";

三目表达式：:class="flag?'red':'green'";

对象：:class="{}" 对象的属性值是布尔类型；

数组内置对象：:class="[{}]";

17、vue绑定style方式？
对象：：style="style";

数组路是对象：:style="[]";

绑定方法，拿返回值；

18、vue过滤器全局和局部声明方式及使用？
通过vue.filter方法定义；

参数：过滤器的名字和过滤器执行函数

全局：vue.filter；

私有：vue.filters;

19、vue键盘修饰符使用？
监听所有按键：@keyup

监听指定按键：@keyup.按键码

20、vue键盘修饰符设置别名
Vue.config.keyCodes.a = 65

21、vue自定义指令全局和局部声明方式及使用？
指令的名字（定义的时候不加v-,使用vue指令的时候加上v-）

 对象，里面包含三个钩子方法

bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
inserted 这个元素已经渲染到界面上之后执行
update 当元素有更新的时候执行
 这三个方法的参数有哪些

el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated钩子中可用。无论值是否改变都可用。
全局：vue.directive();

私有：vue.directives();
22、vue生命周期的钩子函数有什么，分别有什么特点？

1. 在 beforeCreate 生命周期函数执行的时候，数据还没有没初始化，一般用于重定向

2. 在 created 中，一般用于接口请求和数据初始化

3. 在 beforeMount 中页面数据未更新，在中已经解析好模版，虚拟dom

4. mounted 是 页面更新完成，需要依赖dom的操作，在此完成

5. 当执行 beforeUpdate 的时候，数据更新前，触发0次或多次

6. updated事件执行的时候，数据更新后

7. 当执行 beforeDestroy的时候，组件销毁前，清除定时器还有页面监听

8. 当执行到destroyed函数的时候，组件销毁后 

24、vue-resource如何发送get，post请求？

getInfo() { // get 方式获取数据
this.$http.get('http://yapi.shangyuninfo.com/mock/36/web02/category').then(res => {
  console.log(res.body);
})
}

25、vue-resource发送post请求第三个参数写什么？

postInfo() {
var url = 'http://yapi.shangyuninfo.com/mock/36/web02/list/goods/category';
// post 方法接收三个参数：
// 参数1： 要请求的URL地址
// 参数2： 要发送的数据对象
// 参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded
this.$http.post(url, {categoryId: 'zs' }, { emulateJSON: true }).then(res => {
  console.log(res.body);
});
}