ref ***** `<input type="text" ref="userinfo">` ``` this.$refs.box.style.background='red'; this.$refs.userinfo.value; ``` ***** $event事件对象 ***** `<button data-aid="123" @click="eventFn($event)">事件对象</button>` ``` eventFn(e){ console.log(e); e.srcElement.style.background='red'; // 获取自定义属性的值 console.log(e.srcElement.dataset.aid); } ``` ***** `@keydown="doAdd($event)` ``` doAdd(e){ console.log(e.keyCode); if(e.keyCode==13){ // alert('add'); this.list.push({ title:this.todo, checked:false }); this.todo=''; } }, ``` ***** ``` localStorage.setItem('list',JSON.stringify(this.list)) var list=JSON.parse(localStorage.getItem('list')); ``` ` ***** 生命周期函数/生命周期钩子 组件挂载以及组件更新,组件销毁的时候触发的一系列的方法 这些方法就叫做生命周期函数 ``` beforeCreate () { console.log('实例创建之前1') }, created () { console.log('实例创建完成2') }, beforeMount () { console.log('模板编译之前3') }, mounted () { // 请求数据,操作dom,放在这个里面 mounted console.log('模板编译完成4') }, beforeUpdate () { console.log('数据更新之前') }, updated () { console.log('数据更新完毕') }, beforeDestroy () { // 页面销毁的时候要保存一些数据,就可以监听这个销毁的生命周期函数 console.log('实例销毁之前') }, destroyed () { console.log('实例销毁完成') } ```