1、什么是ref？

　　ref是用于快速定位到dom结构，vue中一般不去操作dom结构，他是数据驱动的。jQuery会疯狂操作DOM

{{msg}}

mounted(){ let h = this.$refs.aa }

案例音乐播放案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <audio ref='audio' src="./vadio/王茗 - 大眠 (男声版).mp3" controls autoplay></audio>
        <div>   
            <button @click='play'>播放</button>
            <button @click='pause'>暂停</button>
        </div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
            },
            mounted(){
                console.log(this.$refs.audio)
            },
            methods:{
                play(){
                    this.$refs.audio.play()
                },
                pause(){
                    this.$refs.audio.pause()
                }
            }
        })
    </script>
</body>
</html>

播放 暂停
里面的video中的 src属性可以链接本地的音乐，或者是网上的音乐api地址
 
2 ref使用场景：
　　音乐 播放     视频播放  歌词等等
 
3 vue中的注意点 
　　vue中尽量少的去操作dom，除非需求必须借助于操作dom实现

vue中的ref属性的更多相关文章

  1. Vue 中的 ref $refs

    ref 被用来给DOM元素或子组件注册引用信息.引用信息会根据父组件的 $refs 对象进行注册.如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例 注意:只要想 ...

  2. spring property标签中的 ref属性和ref 标签有什么不同？ 如下：<property name="a" ref="b" />

    spring property标签中的 ref属性和ref 标签有什么不同? 如下:<property name="a" ref="b" /> sp ...

  3. [转]spring property标签中的 ref属性和ref 标签有什么不同

    spring property标签中的 ref属性和ref 标签有什么不同? 如下:<property name="a" ref="b" /> sp ...

  4. Vue学习之vue中的计算属性和侦听器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Vue基础系列（二）——Vue中的methods属性

      写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...

  6. vue 中的slot属性(插槽)的使用

    总结如下: VUE中关于插槽的文档说明很短,语言又写的很凝练,再加上其和方法,数据,计算机等常用选项在使用频率,使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经 ...

  7. Vue中的计算属性与$watch

    计算属性:在模板中绑定表达式是非常便利的,但是他们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么vue.js将绑定表达式限制为一个表达式. ...

  8. 浅尝 Vue 中的 computed 属性 与 watch

    对于 computed 的理解: ①.computed 用来监控自己定义的变量,该变量不在 data 里面声明,直接在 computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其 ...

  9. Vue中的computed属性

    阅读Vue官网的过程中,对于计算属于与监听器章节的内容有点理解的不清晰:https://cn.vuejs.org/v2/guide/computed.html. 后来上网查询了资料,结合官网的说明,总 ...

随机推荐

  1. Javascript之盒子拖拽（跟随鼠标、边界限定、轨迹回放）

    本文通过拖拽案例,实现"跟随鼠标.边界限定.轨迹回放"三大效果: 完整代码中有详尽注释,故不再进行细致讲解: 对于案例中需要注意的重点或易错点问题,会总结在最后. 效果图(仅演示左 ...

  2. 从ISTIO熔断说起-轻舟网关熔断

    最近大家经常被熔断洗脑,股市的动荡,让熔断再次出现在大家眼前.微服务中的熔断即服务提供方在一定时间内,因为访问压力太大或依赖异常等原因,而出现异常返回或慢响应,熔断即停止该服务的访问,防止发生雪崩效应 ...

  3. 如何设置mysql远程访问

    如何设置mysql远程访问 Mysql默认是不可以通过远程机器访问的,通过下面的配置可以开启远程访问 在MySQL Server端: 执行mysql 命令进入mysql 命令模式, mysql> ...

  4. Building Applications with Force.com and VisualForce (DEV401) （二一）：Visualforce Componets (Tags) Library Part 1

    Dev401-022:Visualforce Pages: Visualforce Componets (Tags) Library Part 1 Module Objectives1.List ke ...

  5. 使用Keras构建深度图像搜索引擎

    动机 想象一下,如果有数十万到数百万张图像的数据集,却没有描述每张图像内容的元数据.我们如何建立一个系统,能够找到这些图像的子集来更好地回答用户的搜索查询? 我们基本上需要的是一个搜索引擎,它能够根据 ...

  6. PyTorch1.2.0版本来啦！居然还有全套视频！让你快速熟练掌握深度学习框架！

    [翻到文末, 还能让你看尽CV和NLP完整技术路径以及前沿+经典论文篇目,助你构建深度学习知识框架] 今年8月!PyTorch 1.2.0 版本来啦!! 据我们了解,在学术领域,特别是CV/NLP方向 ...

  7. 用libevent写个简单的server/client

    libevent是一个轻量级的事件触发库,可以很好地利用在网络通讯上面,用其进行大量的异步,延时,重发等场景. 下面是一个server的demo #include include void cb_fu ...

  8. coding++：error Could not read JSON: Unexpected token (START_OBJECT), expected START_ARRAY: need JSON Array to contain As.WRAPPER_ARRAY type information for class java.lang.Object

    Spring源码中是使用容器中的ObjectMapper对象进行序列化和反序列化. 当我们将自定义的ObjectMapper对象放入IOC容器中后,会自动覆盖SpringBoot自动装载的Object ...

  9. [React]Hook初探

    Hook是什么 Hook是React从16.8开始支持的特性,使用Hook可以在不使用class时使用state Hook支持在不需要修改组件状态的情况下复用逻辑状态,从而解决使用render pro ...

  10. TCP 的断包和粘包

    以太网中存在一个对于帧的有效数据大小的限制,即 MTU,以太网的 MTU 为 1500 字节. 一.断包 就是说发送端一次发送的消息长度过大,如果超过了 MTU,那么 ip 会对其进行分片. 在网络编 ...