Vue知识点的总结
Vue中的指令及其基本语法：
第一步：从官网上下载vue开发版本的js文件
引入js文件
语法：
Varvm=new Vue({
El:”#app”,//el相当于element查找方式为queryselector方式
//注意用逗号隔开
Data:{
},
Methods:{
},
Computed:{}
})
具体指令：
1,v-text:这个指令相当于js中innertext，且只对元素起作用，不对属性起作用
2，v-html：这个指令相当于js中innerHTML
3,v-show:这个指令返回的是一个布尔值，当v-show=”false”时，相当于给元素添加了一个display:none;的属性。当v-show=‘true’时显示元素。且当元素切换时触发过渡效果。
4，v-if，v-else，v-else-if：相当于js中的if条件语句是一样的。可以用if来做一些页面的切换。但是明显后面会有更好的方法。这里我就不早说了。
5，v-on：事件：
@是它的缩写，on中其实自带很多事件修饰符：
.stop-调用event.stopPropagation()阻止冒泡事件
.prevent–调用eveent.preventDefault()阻止默认事件
.capture–添加事件侦听器时使用capture模式
.self 只当事件是从侦听器绑定的元素本身触发时才会触发回调
.{keyCode| keyAlias} –只当事件是从特定键触发时才会触发回调
.native–监听组件根元素的原生事件
.once–只触发一次回调
.left–只当点击鼠标左键才会触发
.right -只当点击鼠标右键才会触发
.middle–只当鼠标点击中键才会触发
.passive -这个需要再网上搜一下
v-bind：
缩写：‘：’，
参数：AttrOrProp(optional)
修饰符：
.prop 被用于绑定DOM属性
动态地绑定一个或多个特性，或一个组件prop到表达式
在绑定class或style特性时，支持其它类型的值，如数组或对象。
v-model：
预期：随表单控件类型不同而不同，双向绑定
使用限制：
Components
修饰符：
.lazy 取代input 监听change事件
.number 输入字符串转为数字
.trim 暑促首尾空格过滤
用于表单控件或者组件上双向绑定
V-pre：不需要表达式
用法：跳过这个元素和它的子元素的编程过程。可以用来显示原始mustache标签。跳过大量没有指令的节点时会加快编译速度。简单来理解就是，组件和子元素加了这个东西就不会被编译
V-cloak：不需要表达式（中文意思是掩饰，你应该知道用法了吧？）
用法：这个指令保持在元素上直到关联实例结束编译
v-once：只执行一次
es6新特性：object.assign()；
//参数1：对象，目标对象
//剩余参数：对象，源对象
//方法的作用：将源对象上的所有对象拷贝到目标对象上
语法：obj.assign（obj，obj1，obj2，obj3，obj4）//意思是将obj1，obj2，obj3，obj4都赋值给obj目标对象
Computed方法和methods方法的区别：
[if !supportLists]1， [endif]调用方式不一样：computed是属性的调用，methods是函数的调用
[if !supportLists]2， [endif]计算属性会缓存，如果值没有改变，就算引用再多次，也只会执行一次，其他的调用都是通过缓存来引用的。而methods不一样，methods是方法的引用，不会缓存，且调用几次运行几次。
生命周期函数（钩子函数）；
描述的是实例从创建到销毁的过程。Vue给我们提供生命周期钩子，vue实例的生命周期函数一共有8个，非常简单，分别是：
[if !supportLists]1， [endif]创建前后：beforecreate created
[if !supportLists]2， [endif]挂载前后：beforemount mounted
[if !supportLists]3， [endif]数据更新前后：beforeupdata updated
[if !supportLists]4， [endif]实例销毁前后： boforedestroy destroyed
注意vue组件的生命周期则要多三个生命周期：分别为
当组件出现 ‘keep-alive’时的deactivated activated
Vue2.0中新出的一个异常处理的钩子函数：errorCaptured；
类型（err：error，vm：component，info：string）=>？boolean
当捕获到一个来自子孙组件的错误时调用，收到三个参数：错误对象，发生错误的组件实例，以及一个包含错误来源信息的字符串，当返回false时，可以阻止它向上传播。
自我对生命周期的理解：（自我话语概括）：
Vue实例生命周期钩子：
BeforeCreate：在实例初始化之后，数据观测（data observer）和event/watch事件配置之前调用。
Created：在实例创建完成之后被立即调用。在这步，实例已完成一下的配置：数据观测（data observer），属性和方法的运算，watch/event事件回调。然而，挂载阶段还没有开始，$el还不可见。
BeforeMount：在挂载开始之前被调用：相关的render函数首次被调用。
注意，该钩子在服务器端渲染期间不被调用。
Mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时，vm.$el也在文档内
注意mounted不会承诺所有的子组件也都被一起挂载。如果你希望等到整个视图都渲染完毕，可以用vm.$nextTick替换掉mount：这是什么意思呢？意思是mounted有可能没有等到所有子组件都挂载渲染完成之后才调用，如果希望是全部挂载完之后调用的话其实你可以用：
Mounted：function（）｛
This.$nextTick（function（）｛
｝）
｝来替换mounted钩子函数。但是实际上我觉得还是给mounted上加东西呗。。。
BeforeUpdata：数据更新时调用，发生在虚拟DOM打补丁之前，这里适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器。（注意，该钩子函数在服务器渲染期间不被调用，因为只有初次渲染会在服务端进行），简单来说就是数据改变了需要重新渲染
Updated:由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子
当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。然后在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或watch取而代之。（注意，updated 不会承诺所有子组件也都一起被重绘，如果你希望等到整个视图都重绘完毕，可以用vm.$nextTick替换掉updated）
如下：（题外。。。这个$nextTick()方法挺有意思的，beforeupdata和updated都用到它）
Updated：function（）｛
This.$nextTick（function（）｛
｝）
｝
Activated;组件生命周期函数钩子，在keep-alive组件激活时调用。该钩子在服务器端渲染期间不被调用。
Deactivated：组件生命周期钩子函数，在keep-alive组件停用时调用。该钩子在渲染期间不调用
BeforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用
Destroyed：vue实例销毁后调用。调用后，vue实例指示的所有东西都会解绑定，所有的事件监听器都会被移除，所有的子实例也会被移除。该钩子在渲染期间不被调用
ErrorCaptured：vue2.5.0+中新增的一个组件生命周期钩子函数，类型当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象，发生错误的组件实例以及一个包含错误来源信息的字符串，此钩子可以返回false以阻止该错误继续向上。。
什么叫模块化开发：
每个js都有自己的独立作用域。
作用：将各个功能点一个一个的分割开。
思考，如果没有commit规范，webpack，cmd，amd等模版插件你怎么进行模块化开发？
答：思考，怎么让js拥有独立作用域？可以用匿名函数自执行。匿名函数自执行可以让每个js都有自己的独立作用域。
缓存的最基本的标准：
首先，缓存的路径需要是一样的。
Webpack的功能：
[if !supportLists]1， [endif]编译模块化的js代码
[if !supportLists]2， [endif]编译模块化的css代码
使用loader将css语法转为js的语法
（css-loader，style-loader）
不是webpack自带的，所以我们要
Npm install css-loader style-loader –D去下载
配置webpack的编译：比如图片的编译：
[if !supportLists]3， [endif]编译文件路径：
使用file-loader/url-loader
Npm installfile-loader -D
并且需要配置webpack的编译
4,配置本地服务器
Npminstall webpack-dev-server@2 –g(全局安装)
Npminstall webpack-dev-server@2 –D(局部安装)
启动服务器：
Webpack-dev-server
[if !supportLists]4， [endif]编译es6语法
Cnpm install babel-loader babel-core –D
Es6的模块化方式:匿名函数自执行，然后模块化开发就是让每个文件都有它自己的文件作用域。
Vue路由：
路由的创建方式：
先在需要用到的地方引入vue文件，在index.js中import去引入vue的路由组件
然后在需要用的地方添加一个
路由的重定向：
｛
Path：‘**’，
Redirect：‘/to=>{}’重定向到指定页面
｝
路由跳转的方法总结：
[if !supportLists]1， [endif]js中的：window.localhost.hash=path.通过一个变量去使得文件动态的加载出来。
[if !supportLists]2， [endif]使用vue中的自带方法：
[if !supportLists]1， [endif]this.$router.push([string]|[object]);进入下一页
[if !supportLists]2， [endif]this.$router.back():返回上一页
[if !supportLists]3， [endif]this.$router.forword():前进一页
[if !supportLists]4， [endif]this.$router.replace();进入下一页，然后上一个历史记录将不会再出现
[if !supportLists]5， [endif]this.$router.go(number);去以当前页面为准的第几个页面，可以为负。
什么叫动态路由？
额，给路由的路径传一个变量呗，然后路由就变成了动态路由了
路由守卫（重点）：
什么是路由守卫？路由在跳转前做的一些验证，比如登录验证，是网站中普遍需求。
对此，vue-router提供的beforeRouteUpdate可以方便地实现导航守卫（navigation-guard）。
使用方法：
你可以使用router.beforeEach注册一个全局前置守卫：
Const router=new VueRouterheight（{…}）
Router.beforeEach((to,form,next)=>{
})
当一个导航触发时，全局前置守卫按照创建顺序调用，守卫是异步解析执行，此时导航在所有守卫resolve完之前一直处于等待中。
每个守卫方法接收三个参数：
To：router： 即将要进入的目标路由对象。
From：router：当前导航正要离开的路由。
Next：function：一定要调用该方法来resolve这个钩子，执行效果依赖next方法的调用参数。
Next（），进行管道中下一个钩子，如果全部钩子执行完了，则导航的状态就是confirmed
Next（false）：中断当前的导航，如果浏览器的url改变了（可能是用户手动或者浏览器后退按钮），那么url地址会重置到form路由对应的地址中。
路由守卫的总结：（路由级别的）（全局&路由独享）
Router.beforeEach
全局前置守卫
Router.BeforeResolve
全局解析守卫
Router.afterEach
全局后置守卫钩子
BeforeEnter
可直接定义在路由配置上，和beforeEach方法参数，用法相同
组件内的路由守卫：
[if !supportLists]1， [endif]beforeRouterEnter
在渲染该组件的对应路由被确认前调用，用法和参数与beforeEach类似
[if !supportLists]2， [endif]beforeRouteUpdate
在当前路由改变，并且该组件被复用时调用，可以通过this访问实例，next需要被主动调用，不能传
[if !supportLists]3， [endif]beforeRouteLeave
导航要离开该组件的对应路由时调用，可以调用，可以访问组件实例this，next需要被主动调用，不能传回调。
全局前置守卫：beforeEach
路由beforeEnter守卫
组件路由守卫beforRouteEnter，此时this并不指向该组件实例
全局解析守卫：beforeResolve
全局后置守卫：afterEach
组件生命周期：beforeCreate
组件生命周期：created
组件生命周期：beforeMount
组件生命周期：mounted
组件路由守卫：beforeRouteEnter的next回调
Vue数据的双向绑定的原理：
Vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现，那么vue的双向绑定进行数据劫持。
在vue实例中，data中的属性都有相应的geter，seter方法，vue通过object.defineProperty（1）来实现数据的劫持。
Object.defineproperty()可以用来控制一个对象属性的一些特有的操作。
发布订阅者模式就是指：
[if !supportLists]1， [endif]实现一个监听器observer，用来劫持并监听所有属性。如果有变动没救通知订阅者
[if !supportLists]2， [endif]实现一个订阅者watcher，可以用来收到属性的变化通知并执行相应的函数，从而更新视图
[if !supportLists]3， [endif]实现一个解析器compile，可以扫描和解析每个节点的相关指令，并根据初始化模版数据以及初始化相应的订阅器。
找了一下午，头还是懵的，vue的双向绑定这么6的么。。。数据挟持，发布者订阅模式
defineProperty去实现数据挟持，然后
vue路由实现原理：
前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。改变浏览器地址而不向服务器发出请求有两种方式：
1；在地址中加入#以欺骗浏览器，地址的改变是由于正在进行页内导航
2：使用H5的window.history功能，使用URL的Hash来模拟一个完整的URL
Vuex知识点总结：
[if !supportLists]1， [endif]vuex是什么？
Vuex是一个专门为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
这是官方对于vuex的解释，对于我这个菜鸟来说，完全听完就是一头雾水。还是用简单点的话来解释吧，想象一下，如果当有多个对象都依赖于同一个数据时，我们是不是希望不需要写多次数据，而是将数据设置在所有对象都可以访问到的作用域中，vuex便是这种思想。
它解决的是多个视图依赖于同一状态以及来自不同视图的行为需要变更同一状态的问题，使我们不需要将精力放在组件之间数据的传递上，而只需关心数据是如何更新的。
[if !supportLists]2， [endif]vuex包含了哪些东西？
（1），state
State是vuex存储数据的仓库，是store中唯一的数据源，类似vue组件中的data函数。
（2），getters
Getters好比vue中计算属性，相当于对state中的数据进行再次的处理，比如筛选数据，计算多个数据的操作。
（3），mutaions
改变state中数据的唯一方式，并且是同步的，它类似vue中函数的功能。
（4），actions
用于提交mutation来改变状态，解决了mutation不能处理异步事件的问题
（5），modules
用于项目中各个模块的分离，每个模块各自拥有自己的state，mutation等，便于精确查找各个模块拥有的state，方便快速的定位问题。
vue中过渡及动画效果：
关键字：transition
Vue提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡
[if !supportLists]1， [endif]条件渲染（使用v-if）
[if !supportLists]2， [endif]条件展示（使用v-show）
[if !supportLists]3， [endif]动态组件
[if !supportLists]4， [endif]组件根节点
当插入或删除包含在transition组件中的元素时，vue将会做以下处理：
[if !supportLists]1， [endif]自动嗅探目标元素是否应用了css过渡或动画，如果是，在恰当的时机添加/删除css类名
[if !supportLists]2， [endif]如果过渡组件提供了javascript钩子函数，这些钩子函数将在恰当的时机被调用。
[if !supportLists]3， [endif]如果没有找到javascript钩子并且也没有检测到css过渡/动画，DOM操作（插入/删除）在下一帧立即执行
Transition封装组件为我们提供了6个过渡的类名
在进入/离开的过渡中，会有6个class切换。
1，v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除
2，v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3，v-enter-to：2.1.8版本及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效。
4，v-leave：定义离开过渡的开始状态。在离开过渡被触发时生效，下一帧被移除。
5，v-leave-active：定义离开过渡生效时的状态，在整个离开离开过渡的阶段中应用，在离开过渡被触发时生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6，v-leave-to：在离开过渡被触发之后下一帧生效（与此同时v-leaver被删除），在过渡/动画完成之后移除。
如果两个组件中，一个组件包含另一个组件的话，那么需要父调用子组件，可以通过$slot来管理
对于这些在过渡中切换的类名来说，如果你使用一个没有名字的，则v-是这些类名的默认前缀，如果你使用了
name=’my-transition’>,那么v-enter会替换为my-transition-enter。
v-enter-active和v-leave-active可以控制进入/离开过渡的不同的缓和曲线。
Css动画和过渡；
Css动画用法同css过渡，区别是在动画中v-enter类名在节点插入DOM后不会立即删除，而是在animationend事件触发时删除
深入式相应原理；
Vue最独特的特征之一，是其非侵入性的相应式系统。数据模型仅仅是普通的javascript对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以回避一些常见的问题。在这个章节，我们将进入一些vue响应式系统的底层细节。
如何追踪变化
当你把一个普通的javascript对象传给vue实例的data选项，vue将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter。
Object.defineproperty是ES5中一个无法shim的特性，这也就是为什么vue不支持IE8以及更低版本浏览器的原因。
讲到这里，还是来扩展一下Object.defineproperty（）这个方法吧。
Object.defineproperty（）方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。
语法
Object.defineProperty（obj，prop，descriptor）
参数
Obj：要在其上定义属性的对象
Prop：要定义或修改的属性的名称
Descriptor：将被定义或修改的属性描述符。
感兴趣自己了解，太多啦，太多啦。。。
当你把一个普通的javascript对象传给vue实例的data选项，vue将遍历此对象所有的属性，并使用Objec.defineProperty把这些属性全部转为getter/setter。
Object.defineProperty是ES5中一个无法shim的特征，这也就是为什么vue不支持IE8及一下版本的原因。
这些getter/setter对用户来说是不可见的，但是在内部它们让vue追踪依赖，在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时getter/setter的格式化并不同，所以你可能需要安装vue-devtools来获取更加友好的检查接口。
每个组建实例都有相应的watcher实例对象，它会在组件渲染过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。
