vue2.0特殊对象的用法及变化

兄弟最近特别烦，工资越来越高做的事情越来越简单，学的东西都不用到项目中去，你说烦不烦？最近，在网上找资料的时候，看到一篇不错的文章。尼玛？点击头像一看，这尼玛就傻眼了，90后，女的，博客的内容是webpack+vue.js+node.js前端全栈。羞愧的我，立马关闭了网站，好好沉思下自己接下来该做些什么。

vue2.0相对比vue1.0有很多属性、词汇都进行改变，词汇更语义话、属性更加简介，方便了。

1、生命周期

生命周期就是创建VUE实例开始到结束这一过程，以下图很好反应了VUE实例的生老病死。

生命周期

2、组件

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 js 特性扩展。这里的组件分两种，全局组件和局部组件。

全局组件：

全局组件

局部组件：

局部巨剑

3、指令

vue2.0有很多都有自己的指令，v-for循环dom元素、v-if判断dom元素、v-show显示隐藏dom元素，大家有木有发现一些规律呢？是的，没有错，它们都有相同的共性，那就是操作dom元素用的，你也可以自定义指令，自定义方法如下，以代码的形式列出来。

Vue.directive("focus", {                                                                                                                                                                           inserted:function(el,value){          //el当前元素，value获取当前对象，inserted（钩子函数，当元素插入的时候）             el.value=value.value.age;     //console.log(value.value.age)                打印出要传入的对象值                                                                    }                                                                                                                                                                                                                    } );

默认情况下，input的value值为传入对象age的值。

4、过滤器

vue1.0上自带了很多过滤器，orderBy按大小排序，filterBy筛选出关键词，lowercase字母转换成小写，这些在vue2.0上统统都没有了，在vue2.0上可以通过自定义过滤器实现，减轻的代码，让框架更加的便捷。

{{footHeight | noPx}}

                       

Vue.filter("noPx",function(value){                                                                                                                                                                             var val = parseInt(value);        //value是footHeight的值                                                                                                                                      return val;       //返回的值，就是footHeight属性的值 。                                                                                                                              })

var vm = new Vue({ el:"#app", data:{ footHeight:'350px' } })

5.路由

vue2.0路由功能比vue1.0简化了太多了，vue2.0也更容易实现单页面应用。1.先配置入口文件（app.vue）的菜单组件及其样式结构，router-link组件进行跳转（渲染出来就是a标签），router-view切换路由显示的位置。

入口文件

2.创建一个专门存放路由配置(routerConfig.vue)的信息文件，要导入进来的文件，导出router配置。path入口文件中router-link跳转的链接地址，component要导入进来的组件。

路由配置

3.main.js的配置，首先还是要导入路由的配置文件，然后挂载到VUE实例上。路由就是这么配置的，是不是so easy，是不是妈妈在也不用担心你的学习了。这里有几点要注意，一、router 和 routes 千万不要搞反了，不记得就去找资料，我都搞懵几次。     二、跳转带参数，  接收  this.$route.query.id。  有同学会问，vue 路由跳转后 怎样去掉指定的组件？      //这里做了一个判断，获取的路径为' /menuOne '时候，为false隐藏

，main.js

7、动画

Vue过度(动画)，本质走的是CSS3：transtion，animation，下面做了个很简单的过渡显示隐藏动画。借鉴博客：vue2.0动画

过渡动画