Vue.js培训笔记 4月22日

2 Vue.js进阶

生命周期_钩子函数（重点）

// 与el data 平级
created() {
    console.log("this.$data: ", this.$data, "this.$el: ", this.$el);
},

beforeCreate, created,beforeMount, mounted

beforeUpdate,updated

beforeDestroy destroyed

keep-live

自定义属性

自定义指令

自定义指令-钩子函数

life: {
						bind() { //常用
							alert('指令第一次绑定到元素上时调用，只调用一次，可以执行初始化操作');
						},
						inserted() {
							alert('指令所绑定的元素插入到DOM中时调用');
						},
						update() {
							alert('被绑定元素所在模板更新时调用');
						},
						componentUpdated() {
							alert('被绑定元素所在模板完成一次更新周期时调用');
						},
						// v-if
						unbind() {
							alert('指令与元素解绑时调用，只执行一次');
						}
					}

自定义指令-参数

 bind(el,binding){
     console.log('bind函数的参数el',el);    //el是当前指令所绑定的元素，DOM对象
     el.style.backgroundColor='red';    //对el进行操作
     console.log('bind函数的参数binding',binding);    //一个对象，包含很多property
     console.log('指令名(不带v-)',binding.name);        //指令名(不带v-)
     console.log('指令名(带有v-)',binding.rawName);    //指令名(带有v-)
     console.log('指令的绑定值',binding.value);                //指令的绑定值
     console.log('指令的绑定值字符串形式',binding.expression);    //绑定值的字符串形式
     console.log('指令的参数',binding.arg);                    //传给指令的参数
     console.log('指令的包含修饰符的对象',binding.modifiers);    //一个包含修饰符的对象
 }
v-change:top='100' 自定义指令的参数
bing name rawName 
value 指令的绑定值
arg 自定义的参数
expression 

自定义事件

Vue.js 过渡 & 动画

总结 实例的一些特殊 $开头的属性和方法

$data

$el

$refs

$options