<meta charset="utf-8">

语法糖：通过更简单易理解的语法方式，优化原语法的表达形态，增强代码的可读性，从而直接减少代码出错的机会。

VUE读音类似view

版本 v1.0 v2.0

·是一个构架用户界面的框架，前端框架

· 是一个轻量级MVVM（Model-View-ViewModel）框架，和angular、react类似（且都不兼容低版本IE），本质就是数据双向绑定

·数据驱动+组件化思想

·API简单易懂

·小巧

VUE和angular的区别

angular

上手难

指令以ng.xxx开头

google维护和更新

VUE

简单、易学、轻量

指令以v-xxx开头

个人维护 尤雨溪 2014年2月开源

vue2.0与vue1.0最大的区别就是引用Virtual VDOM（Diff算法）。

VUE的全局配置

Vue.config.silent = true

取消 Vue 所有的日志与警告

Vue.config.devtools = true

是否允许vue-devtools检查代码。默认是true

Vue.config.productionTip = true

设置为 false 以阻止 vue 在启动时生成生产提示

常用指令

什么是指令？用来扩展html标签的功能

angular

ng-model

ng-repeat

vue

v-model

v-for

:key()的作用：VDOM使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。

当页面的数据发生变化时，Diff算法只会比较同一层级的节点：

1. 如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点以后的子节点了。
2. 如果节点类型相同，则会重新设置该节点的属性，从而实现节点的更新。

算法为每一个节点设置唯一id，当设置：key时，算法就为每一条数据与节点id建立了一对一的绑定关系，如果此时要在节点中间添加节点，Diff可以通过数据的值获取到变化节点的前一节点索引，所以直接在该索引后新建节点即可，不需要比较这个节点以后的节点。

所以一句话，key的作用主要是为了高效的更新虚拟DOM

v-on动态参数：动态的为input的设置事件类型。

<template> <div> <input @[eventName]="event" /> <button @click="eventName='change'">change</button> <button @click="eventName='focus'">focus</button> <button @click="eventName=1">1</button> </div> </template>

修饰符

v-on:click="方法或直接表达式操作" 为元素绑定事件

v-on可简写成@

阻止事件的冒泡（父子组件同时响应事件）

通过修饰符stop。@click.stop = “add()”

只触发一次修饰符@click.once（在保存按钮场景实用）

v-if vs v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

语法

模板语法，mustache语法{{}}

数据绑定

双向绑定

v-model

单向绑定

1.mustache{{}}

2.v-text，v-html，input的value

v-once只绑定一次 v-pre不编译直接原样显示

过滤器

vue2.0删除所有内置过滤器

都要使用自定义过滤器

1.在组件的选项中定义本地的过滤器

2.通过Vue实例定义过滤器

Vue.filter（’functionName‘ ， function (value){

}）

Ajax请求

Vue本身不支持发送Ajax请求

Vue2.0使用axios插件

axios是基于Promise的HTTP请求客户端，用来发送请求，Vue2.0官方推荐

Vue的生命周期

5.png

beforeCreate：Vue示例初始化完成，el和data并未初始化。

created：完成了data数据的初始化，el没有。

mounted：完成挂载。

计算属性

基本用法：a.数据可以进行逻辑处理操作 b.对计算属性中的数据进行观测。

计算属性分为get和set方法，默认只写get方法获取计算后的返回值。

get方法与method的区别。

a.计算属性是基于他的依赖进行更新的，只有在相关依赖改变时才能更新变化。

b.计算属性是缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果。

Vue实例的属性和方法

属性：

$el：获取vue实例关联的元素，即获取vue实例对应的template。

$data：获取vue实例中的data对象。

$options：获取自定义的属性，（除data、monted、method、component、watch、computed

），可以自定义属性，通过$options.属性名获取。

$refs：获取页面中所有添加ref属性的元素。

方法：

vm.$mount（template的id 'app'），手动为Vue实例挂载el。等同于new Vue({

el:'app'

})

vm.$destory()

vm.$nextTick()：DOM还没更新完，Vue实现响应式并不是数据发生改变之后DOM立即变化，需要按照一定的策略进行DOM更新，需要一定的时间。

$watch

方式1：使用vue实例的$watch()

vm.$watch('属性名',function(newval,oldval){

},true（深度监视）)

方式2：vue提供watch选项，与data、method平级

watch:{

'属性名'：(newval,oldval) => {

}，

deep:true

}

组件component

1.什么是组件

组件是Vue.js最强大的功能之一，组件可以扩展HTML元素，封装可重用代码。

2.定义组件的方式

方式1：先创建组件构造器，构造器创建组件

方式2：直接创建组件

3.组件的分类

全局组件和局部组件

4.引用模板

将组件内容放到模板template中引用。

5.动态组件(挂载点动态选择挂载组件)

<keep-alive>(缓存组件状态，避免重复渲染组件)

<component :is = flag></component>

</keep-alive>

父子组件

指的是在一个组件内部定义另一个组件，称为父子组件

子组件只能父组件内部使用，非父组件则不能直接挂载子组件

组件间传值（通信）

父组件传给子组件

a.父组件在引用子组件的时候使用v-bind :name="老杨" :age="30"传递属性信息

b.子组件通过props:['name','age']接收值。

注：组件中的数据有三种形式。

一、data选项 二、props 三、computed

子组件传给父组件

a.在子组件中使用vm.$emit('事件名=postdata','数据')触发一个自定义的事件，事件名自定义

b.父组件在使用子组件的地方@postdata="fanction()"监听子组件触发的事件，并在父组件中定义方法fanction()，用来接传递过来的数据。

注：子组件通过events给父组件发送消息，实际上就是子组件把自己的数据发送到父组件。

单向数据流

props是单向绑定的，当父组件的属性变化时，将传导给子组件，但反之则不可以。

而且不允许子组件直接修改父组件中的数据，报错。

解决方式：

方式1：如果子组件想把它作为局部数据来使用，可以将数据存入另一个变量中再操作，就不会影响父组件中的数据。

方式2：如果子组件想修改数据并且同步更新到父组件，两个方法：

方法1：父组件引用子组件传值时使用.sync修饰符，子组件显式的触发一个事件this.$emit('update:name','alice')。

方法2：可以将父组件的数据包装成对象，然后在组件中修改对象的属性（因为对象是引用类型，指向同一个内存空间）

内容分发slot

目的是在子组件标签内添加新的内容或者说是Dom元素。

就是把父组件的内容分发给子组件

子组件在哪个位置显示内容，就在哪里写<slot></slot>标签。

如果需要分发不同内容，则通过<div slot = 'content' />，在子组件的适当位置放插槽，通过name属性取内容并展示<slot name = 'content'></slot>。

零碎知识点

1.动态绑定样式:class可与普通的class并存。

2.可通过[]动态的为控件设置事件类型。v-bind:[eventType] = "eventfunction"。

3.对于自定义组件的自带样式，引用组件的时候为其设置样式，两类样式并存，不覆盖。

4.从2.3起，可以为style绑定的属性提供一个包含多个值的数组，用于适配不同浏览器

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

这样写，浏览器只会渲染数组中最后一个被浏览器支持的值，此例中，如果浏览器支持flex，那么style则为display：flex。

5.v-show由于DOM元素始终是已渲染状态，所以v-show不支持tamplate元素，控制多个元素展示只能用v-if。

6.VUE将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新，这些被包裹的方法有

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

就是说一旦被侦听的数组调用了这些方法，会触发视图更新。

对于数组元素排序等不重置数组原始数据的方法，可以是计算属性实现数据侦听，视图更新。

7.在template上使用v-for，可循环渲染包含多个元素的内容，如：

<ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider" role="presentation"></li> </template> </ul>

8.在自定义组件上使用v-for循环渲染的时候，一定要定义:key

9.可为组件绑定按键修饰符，

<input v-on:keyup.enter="submit">

<input v-on:keyup.page-down="onPageDown">

上面两个例子分别是监听键盘的Enter和PageDown事件。也支持按键码，不过为了支持旧浏览器，最好还是使用别名.enter、.tab、.space、.esc。

可通过事件修饰符实现，按住键盘ctrl、shift的时候，点击鼠标才生效的功能。

.exact修饰符，则控制同时按下ctrl、shift的时候不触发shift。

<button v-on:click.shift.exact="onCtrlClick">A</button>（有且只有shift被按下的时候才触发）

10.用v-on绑定事件的形式，使得ViewModel都是非常纯粹的逻辑代码，和DOM完全解耦。

11.select也好，checkbox也好。v-model绑定的是数组，就是复选，绑定的是字符串变量，就是单选。

12.如果想过滤掉input的空格，可以直接<input v-model.trim=“msg”>

13.父组件给子组件传数据，通过prop接受。可以传字符串、数字、对象、数组、布尔值。

14.子组件prop属性，不要做修改，否则会发警告。可以通过新建变量赋值后，对新建变量操作。如果需要对这个传入的变量最转换运算，最后新建一个计算属性。

15.$set的作用和应用场景。

vue是数据双向绑定响应式的，但如果动态为对象添加属性，vue则检测不到数据变化，就是说要想让对象中的属性双向绑定，就一定要定义在data()中。

使用set(原对象, key值,value值)。