zoukankan      html  css  js  c++  java
  • 如何理解Vue.js中的ref及$ref,$

    1.vue官方文档

    首先我们来看一下vue官方是怎么解释的

    好了,我知道很多刚接触的vue的小白其实都不太看的懂官方文档在讲什么,下面我用自己的话翻译一下。

    2.ref以及$ref

    通过 ref 标注 DOM 元素

     // 在 DOM 元素上通过 ref 属性标注,属性名称自定义
    <div ref="info">hello</div>
    

    通过 $refs 获取 DOM 元素

    // 通过 Vue 实例的 $refs 获取标记 ref 属性的元素
    let info = this.$refs.info.innerHTML
    console.log(info) // hello
    

    所以说ref$refs其实就是用来获取/操作DOM元素的,类似于jQuery中的$('.xx')

    3.$是什么?

    Vue官方文档的解释

    看完文档的介绍,里面有这么一句话

    除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来

    我的理解是$就是内部函数的一种特殊命名方式,表示这个属性或者方法存在于 Vue 实例的原型上,然后在外部可以使用$去调用
    例如:

            var num = {a:1}
            var vm =new Vue({
                el:'#app',
                data:num
            })
            console.log(vm.$data);
    

    打印结果

    使用$data,就可以调用vue实例中data这个属性

  • 相关阅读:
    Smarty模板引擎技术(三)
    Smarty模板引擎技术(二)
    Smarty模板引擎技术(一)
    Ajax技术
    JavaScript--XML DOM
    JavaScript--HTML DOM
    [转]常用正则表达式
    JavaScript--事件
    CentOS 下开启PHP错误提示
    JavaScript实例
  • 原文地址:https://www.cnblogs.com/mingo233/p/13522072.html
Copyright © 2011-2022 走看看