生命周期钩子
beforeCreate 在挂载开始之前被调用:相关的 render
函数首次被调用。
created 在实例创建完成后被立即调用。
beforeMount 在挂载开始之前被调用。
mounted 挂载完成后调用。
beforeUpdate 数据改变,未渲染之前。
Updated 数据渲染完成之后。
beforeDestroy 实例销毁之前调用,在这一步,实例仍然可用。
destroyed 实例销毁后调用。
计算属性,方法与监听
computed: 有缓存 只监听所依赖的数据,其他不相关的数据发生改变并不会影响到computed里的方法,只有所依赖的数据发生改变才会触发computed里相应的方法
methods:数据发生变化就会执行methods里的方法,无论发生变化的是不是其所依赖的数据
watch:跟computed类似,但代码比起computed来说不够简洁
样式绑定
1、v-bind:class和对象(通过true或false)
2、v-bind:class和数组(可设置多个值,数组内的每一项都是对象)
3、v-bind:style="一个对象"
4、v-bind:style="数组"(数组内的每一项都是对象)
组件参数校验
Vue.component('child',{ // props:['content'], 如果子组件要约束父组件传过来的参数 props:{ content:{ type:[String,Number,Boolean]//约束数据类型 required:true,//是否必填(true or false) default:'aaa'//设置默认值,父组件未传值时生效 validator(value){ return (value.length>5)//自定义校验器,value为父传子的值 } } }, template:'<div>{{content}}</div>' })
组件绑定原生事件
1、在组件模板中绑定的事件是组件的原生事件
2、在使用组件时,绑定的事件是自定义事件
3、如果想通过自定义事件直接绑定原生事件可以有两种实现方式
3.1、一种方式是先在模板中定义原生事件,并通过this.$emit触发一个自定义事件,再在使用组件的地方监听这个自定义事件,并在根组件中实现对应的函数。
3.2、另一种则省去了上面的传递事件的麻烦,只需要在组件使用时,在自定义事件上增加一个.native即可。这样就表示了自定义事件是一个原生事件。
非父子组件间的通信
<div id="root"> <child content='Dell'></child> <child content='Lee'></child> </div> <script> Vue.prototype.bus = new Vue() Vue.component('child',{ props:{ content:String }, data(){ return{ selfContent:this.content } }, template:'<div @click="handleClick">{{selfContent}}</div>', methods:{ handleClick(){ this.bus.$emit('change',this.selfContent) } }, mounted(){ var this_=this; this.bus.$on('change',msg=>{ this_.selfContent = msg }) } }) var vm = new Vue({ el:'#root' })
动态组件与v-once指令
<component :is="type"></component> Vue自带的动态组件,用is绑定data的数据,动态切换组件。
v-once:只渲染一次组件,将数据保存在内存中,优化性能。
Vue动画原理
transition的一些属性
<transition :duration="{enter: 5000,leave:10000}" type="transition" appear name="fade" enter-active-class="animated swing fade-enter-active" leave-active-class="animated shake fade-leave-active" appear-active-class="animated swing" > <div v-if="show">hello world</div> </transition>
Vue中的js动画与Velocity.js库
动画勾子:
@before-enter 动画开始之前
@enter 动画开始
@after-enter 动画结束
<div id="root"> <transition name='fade' @before-enter='handleBeforeEnter' @enter='handleEnter' @after-enter='handleAfterEnter' > <div v-show="show">hello world</div> </transition> <button @click="handleClick">切换</button> </div> <script> var vm = new Vue({ el:'#root', data:{ show:true }, methods:{ handleClick(){ this.show = !this.show },
// el参数代表当前动画的dom元素 handleBeforeEnter(el){ el.style.opacity = 0; },
//done代表回调函数,表示动画结束 handleEnter(el,done){
//Velocity库的用法 Velocity(el,{opacity:1},{duration:2000,complate:done}) }, handleAfterEnter(el){ console.log('game over') } } }) </script>
Vue列表过渡
<style> .v-enter { opacity: 0; } .v-enter-active{ transition: opacity 1s; } </style> </head> <body> <div id="root"> <transition-group> <div v-for="(item,index) of list" :key="item.id"> {{item.title}} </div> </transition-group> <button @click='handleBtnClick'>Add</button> </div> <script> var count = 0 ; var vm = new Vue({ el:'#root', data:{ list:[] }, methods:{ handleBtnClick(){ this.list.push({ id: count++, title:'hello world' }) } } }) </script>