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>