兄弟最近特别烦,工资越来越高做的事情越来越简单,学的东西都不用到项目中去,你说烦不烦?最近,在网上找资料的时候,看到一篇不错的文章。尼玛?点击头像一看,这尼玛就傻眼了,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元素用的,你也可以自定义指令,自定义方法如下,以代码的形式列出来。
<input v-focus="{age:56}" />
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上可以通过自定义过滤器实现,减轻的代码,让框架更加的便捷。
<div>{{footHeight | noPx}}</div>
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 千万不要搞反了,不记得就去找资料,我都搞懵几次。 二、跳转带参数,<router-link :to="{path:'/menuOne',query:{id:123}}" /> 接收 this.$route.query.id。 有同学会问,vue 路由跳转后 怎样去掉指定的组件? <banner v-if="$route.path!=='/menuOne'" />//这里做了一个判断,获取的路径为' /menuOne '时候,为false隐藏
7、动画
Vue过度(动画),本质走的是CSS3:transtion,animation,下面做了个很简单的过渡显示隐藏动画。借鉴博客:vue2.0动画