jquery 是为了开发者更容易的操作dom
vue中有 mvvm的概念 我们只需要关注数据
如果想要在 vue中操作dom元素 可以使用ref
我们可以实现一个点击事件 打印下当前实例 this
可以看到当前this中有$refs的对象 ,里面的内容就是我们生命的ref
ref使用案例1
通过按钮改变h2标签的颜色?
<h2 ref="reference">通过ref操作Dom改变颜色</h2>
<button @click="refChangeColor">通过ref操作Dom</button>
refChangeColor(){
console.log(this);
this.$refs.reference.style.color='red'
},
案例2
点击按钮隐藏 并显示输入框
<button @click="showInput" v-if="show">显示输入框</button>
<input v-else type="text" @blur="showButton" ref="fouceRef">
showInput(){
this.show=false
this.$nextTick(v=>this.$refs.fouceRef.focus())
},
showButton(){
this.show=true
}
解释一下
show是我定义在data中的一个变量 默认为true
当show=true 的时候 button按钮默认显示
点击button调用了我们的click showInput方法 隐藏了当前button ,并显示了 input
当input失去焦点 会调用showButton 将show改为true 显示button
注意 showInput中 有一个 this.$nestTick() 这个是当dom绘制完成在加载里面的内容 可以这么理解
如果此处不使用this.$nestTick() 会出现undefund 找不到 当前操作的ref
原因如下:点击按钮 显示input ,只是改变了里面变量show 当前dom 还没有刷新 ,所以获取不到
使用this.$nestTick()能保证 dom刷新后 在 操作当钱ref