2 Vue.js进阶
生命周期_钩子函数（重点）
生命周期函数：在某一时刻, 自动执行的函数。到什么时候做什么事，自动！！
生命：拟人化
// 与el data 平级
created() {
console.log("this.$data: ", this.$data, "this.$el: ", this.$el);
},
beforeCreate, created,beforeMount, mounted
beforeCreate: 在实例生成之前会自动执行的函数
created: 在实例生成之后会自动执行的函数
beforeMount: 在组件内容被渲染到页面之前自动执行的函数
mounted: 在组件内容被渲染到页面之后自动执行的函数
此四个函数在页面加载结束后，会以此执行。
beforeUpdate,updated
beforeUpdate: 当数据发生变化时会立即自动执行的函数
updated: 当数据发生变化，页面重新渲染后，会自动执行的函数
在控制台使用
vm.$data可以修改数据
beforeDestroy destroyed
beforeDestroy 组件销毁前要执行的方法
destroyed 销毁之后要执行的方法
keep-live
自定义属性
我们可以定义一个属性, 它既不在 data 里面, 也不再 methods 里面, 它和 data, methods 等等属性是同级的, 通过
this.$options来访问<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> {{ $options.msg }} </div> <script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> let app = new Vue({ el: '#app', data() { return { msg: '定义在msg' } }, msg:"定义在外部", // 自定义属性 methods: { showMsg() { console.log(this.$options.msg); } }, }) </script> </body> </html>
自定义指令
假设我们有如下代码, 一个 input 框, 加载页面后自动聚焦, 我们可以这么写
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <!-- 自定义指令 v-on v-model v-bind --> <div id="app"> <button type="button" @click="fun"></button> <input type="text" v-model="input" v-focus v-height /> </div> <script type="text/javascript"> let app = new Vue({ el: '#app', data() { return { msg: value } }, directives: { focus: { inserted(el) { el.focus(); //实现被绑定该指令的文本框自动获得焦点 } }, // 修改style height: { inserted(el) { el.style.height = '200px' } } } }) </script> </body> </html>
自定义指令-钩子函数
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
v-change="100"传值,binding.value接收并使用
我们也可以把 top 的参数值写成 data
<div class="box" style="width: 100px; height: 100px; background-color: aqua;" v-change:top="400"> </div>change:{ bind(el,binding) { //常用 el.style.width = binding.value + 'px'; console.log(binding); }, }接下来, 我们想要这样的效果
v-pos:left="200"代表距离左边 200px,v-pos:top="400"代表距离顶部 400px, 那我们的自定义指令应该怎么写呢?<div class="box" style=" position: absolute; width: 100px; height: 100px; background-color: aqua;" v-change:top="400" v-change:left="120"> </div> <div class="box" style=" position: absolute; width: 100px; height: 100px; background-color: aqua;" v-change:top="100" v-change:width="500" v-change:left="320"> </div>change:{ bind(el,binding) { //常用 el.style[binding.arg] = binding.value + 'px' }, }
自定义事件
先留个坑
Vue.js 过渡 & 动画
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。
CSS3
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
transition 属性是一个简写属性，用于设置四个过渡属性：
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
<transition name = "nameoftransition"> <div></div> </transition>
总结 实例的一些特殊 $开头的属性和方法
$data
Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象 property 的访问。
$el
Vue 实例使用的根 DOM 元素。
$refs
一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例.
$options
用于当前 Vue 实例的初始化选项。需要在选项中包含自定义 property 时会有用处 还可以调用过滤属性
