使用ref进行DOM元素的索引

使用ref进行DOM元素的索引

假设:在vue中，需要操作DOM了，需要拿到页面上某个DOM元素的引用，此时怎么办?

可快速实现对子组件的data数据和样式的改变。

使用ref引用组件实例，使用这个方式从父向子传值方便多了

例

ref实现按钮和文本框的按需使用：点击按钮展示文本框、失去焦点时自动展示按钮、自动获得焦点（需要用到DOM元素，）

在组件Left.vue中

设定两个数据count、fun

data() {
    return {
      count:0,
      fun:12
    }
}

在组件App.vue中

渲染组件Left并添加一个show按钮

template

<button @click="show">SHOW！</button>
<Left ref="myLeft"></Left>

script

methods:{
    showThis(){
      //打印当前APP实例对象，检查发现，有很多$开头的数据变量,都是VUE内置的函数，而接着的count、fun就是自定义的数据。
      console.log(this.$refs.myLeft)
      //验证更改数据是否成功
      console.log(this.$refs.myLeft.count);
      this.$refs.myLeft.count = 998
      console.log(this.$refs.myLeft.count);
      // 改变目标DOM的样式，比如变红
      this.$refs.myH1.style.color = 'red'
    }
}

控制输入框和按钮的按需切换

并在输入框中实现自动聚焦

在任一组件中：

template

    <input type="text" v-if="inputVisible" @blur="showButton" ref="inputReFocus">
    <button v-else @click="showInput">展示输入框</button>

script

showInput(){
      // 显示文本框
      this.inputVisible = true
      // 实现自动聚焦，this.$refs.inputReFocus.focus()会报错
      // 报错显示inputReFocus未定义，而实际上是因为上一行的inputVisible = true
      // 此时本为button，尚未更新出input，所以需要等待页面更新，得到最新的DOM元素
      this.$nextTick(() => {
        this.$refs.inputReFocus.focus()
      })
    },
showButton(){
      // 隐藏文本框 显示按钮
      this.inputVisible = false
}

来自黑马的提醒

jquery牛逼简化了程序员操作DOM的过程

vue优势:MVVM在vue 中，程序员不需要操作DOM。程序员只需要把数据维护好即可!(数据驱动视图)

结论:在vue项目，墙裂不建议大家安装和使用jQuery! ! ! l