vue基础2

ref和$refs及部分生命周期函数（钩子函数）

ref把这DOM元素放到 this. $ref 对象中属性名就是ref=‘这里的值’
因为选出的是DOM元素所以一般不建议使用

<div id="app">
    </div>
    <script src="vue/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            template:`
                <div>
                <button ref="btu"></button> 
				</div>
             `,
            data(){return{msg:'1'}},
            beforeCreate(){ // 实例初始化之后这时候各种监听还没有开始
                console.log(this.$refs.btu) // undefined
                console.log(this.msg) // undefined
            },
            created(){ // 实例化加载结结束之后数据侦测已经开始，挂载还没开始el属性不可见
                console.log(this.$refs.btu) // undefined
                console.log(this.msg) // 1
            },
            beforeMount(){  // 组件挂载之前，render相关的函数第一次调用
                console.log(this.$refs.btu) // undefined
                console.log(this.msg) // 1
            },
            mounted(){  // 组件挂载之后,可以进行DOM操作了
                console.log(this.$refs.btu) // htmlObject
                console.log(this.msg) // 1
            }
        })
    </script>

slot(插槽)

在子组件上放一个空槽在使用这个组件的时候把这个空槽填上

 <div id="app">
    </div>
    <script src="vue/vue.js"></script>
    <script>
        var mySlot = {
            template:`
	         <div>
	            <span>123</span>
	            <slot name="slot1"></slot> // 这里相当于我在放了一个空槽name='slot1'
	            <span>12335</span>
	            <slot name="slot2"></slot>
	          </div>
            `
        }
        new Vue({
            el:'#app',
            template: `
                <div>
                    <mySlot>
                        <h3 slot="slot2">1</h3>
                        <h3 slot="slot1">2</h3> // 我在使用这个子组件的时候把slot='slot1'的内容放到那个空槽中
                     </mySlot>
                 </div>
            `,
            components:{
                mySlot
            }
        })
     </script>

效果这里：

$nextTick（主要是对刚更新完的DOM元素使用）

用来延迟执行括号里的函数，使用场景：在更新或者加载了某个组件时，根据声明周期函数要先beforeCreate，created，beforeMount,mount我修改数据后他更新

 created(){
    this.$nextTick(function(){  //不使用this.$nextTick()方法会报错 此时DOM还没				有挂载好
        that.$refs.aa.innerHTML="created中更改了按钮内容";  //写入到DOM元素
    });
  }

对刚刚更新的DOM进行操作，就是等到那个DOM更新结束了，我也只能获取到才能操作，如果不用这个$nextTick(),就获取不到这个元素,原理大概就是一个延迟回调函数

生命周期函数

第一次页面加载会触发那几个生命周期函数？

beforeCreate created beforeMount mounted

new Vue({
 	beforeCreate(){},// 实例初始化之后这时候各种监听还没有开始
 	created(){}, // 实例化加载结结束之后数据侦测已经开始，挂载还没开始el属性不可见
 	beforeMount(){},  // 组件挂载之前，render相关的函数第一次调用
 	mounted(){},  // 组件挂载之后,可以进行DOM操作了
	beforeUpdate(){}. // 数据更新前
	updated(){}.   	// 数据更新完成
	beforeDestory(){}, // 组件销毁前
	destoryed(){},	// 组件销毁后
	activated(){}, //组件被激活
	deactivated(){} // 组件被停用
})