Vue生命週期中的 mounted
阿新 • • 發佈：2018-10-31
mounted() { } //真實dom渲染完了，可以操作dom了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p ref="myp">{{msg}}</p> <div ref='warp'> <div v-for='a in arr'>{{a}}</div> </div> </div> </body> <script> //this.$data vm上得資料 //this.$watch 監控 //this.$el 當前的el元素 //this.$set 後加得元素實現響應式的變化 //this.$options vm上的所有屬性 //this.$nextTick 非同步方法，等待dom渲染完成後來獲取vm //this.$refs let vm=new Vue({ el:"#app", data:{ msg:'hello', arr:[1,2,3] }, mounted() { //真實dom渲染完了，可以操作dom了 //如果dom元素不是通過v-for迴圈出來的只能獲取一個，如果是通過v-for迴圈出來的可以獲取多個 //console.log(this.$refs.myp); // this.$nextTick(()=>{ // console.log(vm); // }) this.arr=[1,2,3,4]; console.log(this.$refs.warp.length); }, }) </script> </html>