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变量

vue 自定义指令 $refs相关推荐

clientsideevents能定义几个click事件_分享8个非常实用的Vue自定义指令
作者:lzg9527 https://juejin.cn/post/6906028995133833230 在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也 ...
9、Vue自定义指令
Vue自定义指令 1.vue指令和自定义指令 2.使用自定义指令 2.1.全局注册 2.2.局部注册 3.钩子函数 1.vue指令和自定义指令什么是指令? v-model.v-bind.v-on.v ...
vue自定义指令的使用
vue2.x自定义指令的使用此处举一个表格高度自适应的例子 1.新建一个js文件 import Vue from 'vue';let resize = null;resize = Vue.direc ...
vue自定义指令使用
前言一.Vue的自定义指令分为? vue中除了核心功能内置的指令外,也允许注册自定义指令.有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令. 自定义指令分为全局自定义指令和局部的自 ...
vue - 自定义指令
1.v-test绑定的是bgcolor var app = new Vue({ el: '#app', data: { num: 123, color: 'red', age: 12, bgcolor ...
如何写一个Vue自定义指令
Vue除了核心功能默认内置的指令 ,Vue 也允许注册自定义指令. 自定义指令是用来操作DOM的.尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动.自定义指令就是一种有效的补充和扩展,不 ...
vue 自定义指令
除了内置的指令外,Vue 也允许注册自定义指令. vue用Vue.directive(id,definition)方法注册一个全局自定义指令,它接受两个参数,指令ID和定义对象.也可以用directi ...
vue——自定义指令
Vue.directive指令(自定义指令) 全局api Vue.directive指令自定义指令的生命周期全局api概述全局api并不在构造器里面,而是先声明全局变量或者直接在vue中定义一些 ...
[Vue]自定义指令
前言系列文章目录: [Vue]目录老师的课件笔记,不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU 笔记在线版: https://note.youdao ...

vue 自定义指令 $refs

vue 自定义指令 $refs相关推荐

最新文章

热门文章