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('實例銷毀完成') } ```