Vue2.0 ref的使用（6）

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