vue 自定义指令 $refs

自定义指令-注册
局部注册
// 目标: 创建 "自定义指令", 让输入框自动聚焦
// 1. 创建自定义指令
// 全局 / 局部
// 2. 在标签上使用自定义指令  v-指令名
// 注意:
// inserted方法 - 指令所在标签, 被插入到网页上触发(一次)
// update方法 - 指令对应数据/标签更新时, 此方法执行

export default {
    directives: {
        focus: {
            inserted(el){
                el.focus()
            }
        }
    }
}
全局注册
 在main.js中注册

// 全局指令 - 到处"直接"使用
Vue.directive("gfocus", {
  inserted(el) {
    el.focus() // 触发标签的事件方法
  }
})
$refs-获取DOM
利用 ref 和 $refs 可以用于获取 dom 元素

<template>
  <div>
      <p>1. 获取原生DOM元素</p>
      <h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1>
  </div>
</template>
 
<script>
// 目标: 获取组件对象
// 1. 创建组件/引入组件/注册组件/使用组件
// 2. 组件起别名ref
// 3. 恰当时机, 获取组件对象
export default {
    mounted(){
        console.log(document.querySelector("h")); // h1
        console.log(this.$refs.myH); // h1
    }
}
</script>
 
<style>
 
</style>
7.$refs-获取组件对象
目标组件添加ref属性

this.$refs.名字获取组件对象

8.$nextTick使用
// vue监测数据更新, 开启一个DOM更新队列(异步任务)

// 原因: Vue更新DOM异步
            // 解决: this.$nextTick()
            // 过程: DOM更新完会挨个触发$nextTick里的函数体

v-model的本质
向标签内的value属性赋值

给标签绑定input事件, 并把收到的值, 赋予给vue变量