ref 引用
jquery 牛逼 企业管理系统定制开发简化了程序员操作DOM的过程
vue 优势: 在 vue 中,企业管理系统定制开发程序员不需要操作DOM。企业管理系统定制开发只需要把数据维护好!(数据驱动视图)
结论:在 vue 项目,强烈不建议大家安装和使用jQuery!!!
1. 什么是 ref 引用
-
ref 用来辅助开发者在不依赖于 jQuery 的情况下,获取 DOM 元素或组件的引用。
-
每个 vue 的组件实例上,都包含一个 $refs 对象,里面存储着对应的 DOM 元素或组件的引用。
-
默认情况下, 组件的 $refs 指向一个
空对象
。
下面的代码仅仅是为了拿到组件的实例对象,用于说明 $ 默认指向空对象
凡是以$开头的都是vue的内置成员
2. 使用 ref 引用 DOM 元素
如果想要使用 ref 引用页面上的 DOM 元素,则可以按照如下的方式进行操作:
3. 使用 ref 引用组件实例
如果想要使用 ref 引用页面上的组件实例,则可以按照如下的方式进行操作:
这样就可以通过拿到组件my-counter
实例,调用组件里的 add() 方法
给 ref 起名字时,建议在后面加上 Ref,便于 ref 识别度
4. 后面为 ref 栗子:控制文本框和按钮的按需切换
通过布尔值 inputVisible 来控制组件中的文本框与按钮的按需切换。示例代码如下:
5. 让文本框自动获得焦点
当文本框展示出来之后,如果希望它立即获得焦点,则可以为其添加 ref 引用,并调用原生 DOM 对象的 .focus() 方法即可。示例代码如下:
会报如下错误:
该错误在前端经常出现,意思并不是’focus’为undefined,而是调用该属性或者方法的前面那个为undefined
此时不生效,因为在执行完this.inputVisible = true
时,会立刻执行this.$refs.ipt.focus()
页面还没有来的及渲染,所以 this.$refs.ipt 是 undefined
6. this.$nextTick(cb) 方法
组件的 $nextTick(cb) 方法,会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是:等组件的 DOM 更新完成之后,再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。
不用生命周期函数updated的的原因是,当input切换到button的时候,还是会触发updated,此时没有已经input,所以没有‘ipt’会报错。