精华内容
下载资源
问答
  • Vue中ref的使用

    千次阅读 2019-06-19 12:52:57
    为什么出现ref 在没有学习Vue之前,我们实现直接操作页面上的DOM元素都是通过JS/jQuery,因为jQuery对DOM元素的操作非常的方便。但是学习了Vue之后,对DOM的操作完全交给VM了,这个时候手动的获取DOM元素再使用JS/...

    为什么出现ref

    在没有学习Vue之前,我们实现直接操作页面上的DOM元素都是通过JS/jQuery,因为jQueryDOM元素的操作非常的方便。但是学习了Vue之后,对DOM的操作完全交给VM了,这个时候手动的获取DOM元素再使用JS/jQuery就没有那么方便。于是出现了ref,即ref的功能之一就是获取DOM元素的,当然还有其他的功能。
    所以ref主要的两个作用如下:

    • 使用ref获取页面DOM元素
    • 使用 ref获取子组件对象

    ref使用原理

    refVue中是用来给元素或是子组件注册引用信息到父组件或是 Vue实例上,注册后的引用信息都会呈现在父组件/Vue实例的 $.refs 上,这时,我们就可以通过$.refs 获取到引用的 DOM 对象或是子组件信息。

    使用ref获取DOM元素使用案例

    例如,我们可以获取到页面上添加了 refinput输入框的值,对于子组件来说,我们可以直接获取到子组件data 选项中的数据,或是直接调用子组件的方法。

    在下面的代码中,我在 input上添加了一个 ref属性,之后,我们就可以在 Vue实例中获取到这个 input 输入框的值。这里,我在 beforeMount、mounted这两个 Vue 中的生命周期钩子函数以及一个按钮的点击事件中尝试获取到这个 input 输入框的值。

    <div id="app">
        <input type="text" ref="msgText" v-model="msg" />
        <button @click="getElement">获取元素值</button>
    </div>
    
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: 'Hello ref'
            },
            beforeMount() {
                console.log('beforeMount: ' + this.$refs.msgText.value)
            },
            mounted() {
                console.log('mounted: ' + this.$refs.msgText.value)
            },
            methods: {
                getElement() {
                    console.log(this.$refs.msgText.value)
                }
            }
        });
    </script>
    
    

    运行代码,从结果中可以看到,在beforeMount 这个钩子函数中,我们是无法获取到这个DOM 元素的值,结合之前学习的 Vue 生命周期的相关知识,当执行到beforeMount 钩子函数时,Vue虽然已经将模板编译完成,但是尚未挂载到页面 DOM 元素上,还只是挂载在虚拟DOM上,因此我们可以得出 ref是在页面渲染完成后才被创建的

    使用 ref获取子组件对象使用案例

    同使用ref 获取页面的DOM元素相似,当我们需要获取子组件时,只需要将使用到子组件上的地方添加 ref属性即可。在下面的示例代码中,我添加了一个子组件,当我们点击 Vue 实例上的按钮时,会先调用子组件的方法,然后获取子组件的数据。

    <div id="app">
        <input type="text" ref="msgText" v-model="msg" />
        <button @click="getElement">获取元素值</button>
    
        <hr>
    
        <child ref="childComponent"></child>
    </div>
    
    <template id="child">
        <div>
            <input type="datetime" name="datetime" v-model="local">
            <button @click="getLocalData">获取当前时间</button>
        </div>
    </template>
    
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: 'Hello ref'
            },
            mounted() {
                console.log('mounted: ' + this.$refs.msgText.value)
            },
            methods: {
                getElement() {
                    console.log('input 输入框的值为:' + this.$refs.msgText.value)
                    this.$refs.childComponent.getLocalData()
                    console.log('子组件 input 输入框的值为:' + this.$refs.childComponent.local)
                }
            },
            components: {
                'child': {
                    template: '#child',
                    data() {
                        return {
                            local: ''
                        }
                    },
                    methods: {
                        getLocalData() {
                            var date = new Date()
                            this.local = date.toLocaleString()
                        }
                    },
                }
            }
        });
    </script>
    
    

    可以看到,当我们将 ref添加到子组件上,我们就可以在 Vue 实例上获取到这个注册的组件引用,同注册的DOM 元素一样,我们都可以使用添加的ref 属性值作为key 获取到注册的对象。此时,我们就可以获取到这个子组件上的 data选项和 methods 选项。

    总结

    因为Vue 采用 Virtual DOM (关于虚拟DOM详见:Vue中的虚拟DOM)的做法渲染网页,如果我们直接操作 DOM,很容易产生实际网页跟 Vue 产生的 Virtual DOM 不同步的问题,而通过使用ref 属性之后,在一些需要获取 DOM 元素的情况下,我们就可以很方便的获取 DOM 元素。当然,当我们决定在项目中使用 Vue,还是需要转变我们的思路,将操作 DOM 转变成操作数据。同样的,通过将ref属性添加到子组件上,我们就可以很轻松的获取到子组件的相关信息,这无疑给父组件获取子组件数据、调用子组件的方法提供了一种新的思路。

    展开全文
  • Vue中ref的作用???

    2020-11-18 16:44:22
    为什么出现ref ...refVue中是用来给元素或是子组件注册引用信息到父组件或是 Vue实例上,注册后的引用信息都会呈现在父组件/Vue实例的 (.refs)上,这时,我们就可以通过(.refs) 上,这时,我们就可以通过(.ref

    为什么出现ref

    在没有学习Vue之前,我们实现直接操作页面上的DOM元素都是通过JS/jQuery,因为jQuery对DOM元素的操作非常的方便 但是学习了vue之后 就比jquery更方便
    所以它的作用是什么呢?

    • 使用ref获取页面DOM元素
    • ’使用 ref获取子组件对象

    ref使用原理

    ref在Vue中是用来给元素或是子组件注册引用信息到父组件或是 Vue实例上,注册后的引用信息都会呈现在父组件/Vue实例的 ( . r e f s ) 上 , 这 时 , 我 们 就 可 以 通 过 ( .refs) 上,这时,我们就可以通过( .refs)(.refs) 获取到引用的 DOM 对象或是子组件信息。

    那我们应该怎么使用呢?(获取dom元素)

    例如,我们可以获取到页面上添加了 ref 的input输入框的值,对于子组件来说,我们可以直接获取到子组件data 选项中的数据,或是直接调用子组件的方法。

    <div id="app">
        <input type="text" ref="addget" v-model="msg" />
        <button @click="getElement">获取元素值</button>
    </div>
    

    js代码

     var vm = new Vue({
            el: "#app",
            data: {
                msg: 'Hello ref'
            },
            beforeMount() {
                console.log('beforeMount: ' + this.$refs.addget.value)
            },
            mounted() {
                console.log('mounted: ' + this.$refs.addget.value)
            },
            methods: {
                getElement() {
                    console.log(this.$refs.addget.value)
                }
            }
        });
    

    运行代码,从结果中可以看到,在beforeMount 这个钩子函数中,我们是无法获取到这个DOM 元素的值,结合之前学习的 Vue 生命周期的相关知识,当执行到beforeMount 钩子函数时,Vue虽然已经将模板编译完成,但是尚未挂载到页面 DOM 元素上,还只是挂载在虚拟DOM上,因此我们可以得出 ref是在页面渲染完成后才被创建的。

    展开全文
  • Vue ref 属性详解

    万次阅读 多人点赞 2018-10-05 15:42:39
    Vue ref 属性详解 我们先来读一下vue的官方文档 我们来分析官方文档 首先ref的引用是相当于一个DOM节点(如果是子组件则指向的是其实例),而且是一个string类型的值。 通俗的将就类似于原生js用document....

    Vue 中的 ref 属性详解

    我们先来读一下vue的官方文档
    在这里插入图片描述

    我们来分析官方文档
    首先ref的引用是相当于一个DOM节点(如果是子组件则指向的是其实例),而且是一个string类型的值。
    通俗的将就类似于原生js用document.getElementById("#id")
    但是只是类似,他们的不同点是Vue是操控虚拟DOM ,也就是说在渲染初期并没有这个ref的属性,这个属性是在创建Vue实例以后才被加到虚拟DOM中的。所以在官方文档的最后提醒开发者不能将ref的结果在模版中进行数据绑定。
    说了这么多那么如何具体使用呢?
    首先尝试普通DOM元素

    <div id="app">
                <input type="text" value="HelloWorld" alt="captcha"  ref="text">
                <button @click="changeText">change word</button>
            </div>
    

    这是一段特别简单的html中加input和button代码
    目的是运用ref属性点击按钮更改input中的文字。

    我们在标签中加入ref属性

    var app = new Vue({ 
        el: '#app',
        data: {
        },
        //添加一个方法
         methods:{
      //改变文字
      	changeText () {
      		this.$refs.text.value = 'Hello Vue!'
      	}
      }
    });
    
    网页初始时input现实的文字是HelloWorld

    在这里插入图片描述

    当点击change word按钮时,input中的文字发生变化

    在这里插入图片描述

    那么刚才代码中的this.$refs是什么呢?

    通俗的将就是搜集所有的ref的一个对象。通过this.$refs 可以访问到此vue实例中的所有设置了ref属性的DOM元素,并对其进行操作。

    其实组件中的子组件的ref原理也类似,只是指向的不是原组件而是组件的实例。
    用法和普通DOM元素一样。

    展开全文
  • vue中ref属性

    2019-08-15 16:13:14
    但是只是类似,他们的不同点是Vue是操控虚拟DOM ,也就是说在渲染初期并没有这个ref的属性,这个属性是在创建Vue实例以后才被加到虚拟DOM的。所以在官方文档的最后提醒开发者不能将ref的结果在模版...

    在这里插入图片描述
    首先ref的引用是相当于一个DOM节点(如果是子组件则指向的是其实例),而且是一个string类型的值。
    通俗的将就类似于原生js用document.getElementById("#id")
    但是只是类似,他们的不同点是Vue是操控虚拟DOM ,也就是说在渲染初期并没有这个ref的属性,这个属性是在创建Vue实例以后才被加到虚拟DOM中的。所以在官方文档的最后提醒开发者不能将ref的结果在模版中进行数据绑定。

    1 <input ref='text>
      this.$refs.text.value = 'Hello Vue!'
    
    2 <div v-for='(item,key) in buildList' :key="key"  ref="list">
      this.$refs.list[key].style.color = "#5E72E4";
    

    那么刚才代码中的this.$refs是什么呢?
    通俗的将就是搜集所有的ref的一个对象。通过this.$refs 可以访问到此vue实例中的所有设置了ref属性的DOM元素,并对其进行操作。

    其实组件中的子组件的ref原理也类似,只是指向的不是原组件而是组件的实例。
    用法和普通DOM元素一样。

    展开全文
  • 前情回顾:vue2绑定原理 访问器属性+虚拟DOM树 vue2绑定的问题: 只能在首次创建new Vue()对象时初始就有的属性,添加 监视(访问器属性)。 今后动态添加进来的成员,就无法自动添加访问器属性,也就无法自动得到...
  • 1. Vue怎么获取到设置的指令钩子 以下面一段Vue模板为例 <div v-test v-test2></div> 以上的模板会被编译成渲染函数 with(this) { return _c('div', { directives: [{ name: 'test', rawName: 'v-...
  • vueref和$refs的理解

    2020-03-26 22:08:25
    详细来说ref 被用来给DOM元素或子组件注册引用信息。 ...如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例 注意:只要想要在Vue中直接操作DOM元素,就必须用ref属性进行注册 ...
  • ref 处理基础类型的例如字符串,数字(注:修改值需要用value,但使用时不需要点value vue3内部已经将其处理) reactive 处理引用类型 例如 数组,对象。 内部原理通过 ref reactive ({context:'aa'})会变成...
  • Vue3的的ref函数和reactive函数及其浅层次响应式原理 ​ 在这里我会用通俗易懂的语言和浅层次的原理来帮助学习Vue的小伙伴去理解ref函数和reactive函数和二者的区别以及其响应式原理,帮助大家少走弯路。这里...
  • Vue 模板编译原理

    2019-12-31 08:04:10
    关于vue的内部原理其实有很多个重要的部分,变化侦测,模板编译,virtualDOM,整体运行流程等。之前写过一篇《深入浅出 - vue变化侦测原理》讲了关于变化侦测的实现原理。那今天...
  • vueref ($refs)用法

    2020-10-29 14:06:17
    一开始在自己的项目里经常用到ref操作DOM元素或者调用子组件的方法(啥也不知道,啥都敢用),但是并不明确ref原理,通过看官网API和各位大佬的总结终于get啦啦!!做个记录。 ref 官网API : ...
  • vue的框架原理

    2021-03-30 11:48:31
    1、vue数据双向绑定原理 采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 Javascript ...
  • 公共部分: <script src=...原理:通过proxy 对数据进行封装,当数据变化时,触发模板等内容的更新 a.处理基础型数据: <script> const app = Vue.createApp({ template: ` .
  • // ref和reactive底层实现 function reactive (obj) { // 首先判断obj的类型 if (typeof obj === 'object') { if (obj instanceof Array) { // 如果是数组那么取出数组的每一个元素,判断每一个元素是否又是...
  • vue核心面试题:vue中模板编译原理

    千次阅读 2020-07-15 16:41:28
    一、vue怎么将template 转化成 render 函数 1.源码文件路径:src/compiler/index.js // 创建了一个编辑器 export const createCompiler = createCompilerCreator(function baseCompile ( template: string, ...
  • Vue $refs 原理

    千次阅读 2019-12-29 12:48:45
    这篇文章分析Vue实例怎么通过$refs 访问到dom元素的。通过上一篇的例子来进行分析: <html> <head> <style type="text/css"> </style> </head> <body> <script src...
  • 本文我们一起通过学习Vue模板编译原理(二)-AST生成Render字符串来分析Vue源码。预计接下来会围绕Vue源码来整理一些文章,如下。 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学Vue模板编译原理(一)-...
  • 面试官问: “Vue中组件通信的常用方式有哪些?” 我答: 1. props 2. 自定义事件 3. eventbus 4. vuex 5. 还有常见的边界情况$parent、$children、$root、$refs、provide/inject 6. 此外还有一些非props特性$attrs...
  • VUE原理

    2021-04-30 19:08:07
    VUE原理 组件化 响应式 vdom和diff 模板编译 渲染过程 前端路由 组件化基础 数据驱动视图 传统组件,只是静态渲染,更新还要依赖于操作DOM 数据驱动视图-Vue MVVM MVVM Vue响应式 组件data一旦发生变化,立即...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,379
精华内容 2,151
关键字:

vue中ref原理

vue 订阅