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. 毫米波大规模阵列中的AOA估计

    1.AOA估计在毫米波大规模MIMO中的重要性 在毫米波大规模MIMO的CSI估计中,AoA估计具有重要地位,主要原因归纳如下: 毫米波大规模MIMO 的信道具有空域稀疏性,可以简单通过AoA 和路径 ...

  2. Effective python（五）：内置模块

    1,考虑使用contextlib和with语句改写可复用的try/finally代码 with lock:print('lock is held')相当于try:print('lock is held ...

  3. （数据科学学习手札81）conda+jupyter玩转数据科学环境搭建

    本文示例yaml文件已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 我们在使用Python进行数据分析时,很 ...

  4. test命令的使用以及判断语法

    test命令 Shell中的 test 命令用于检查某个条件是否成立,它可以进行数值.字符和文件三个方面的测试. 语法:test EXPRESSION 或者 [ EXPRESSION ] 字符串判断( ...

  5. python,keras,tensorflow安装问题 module 'tensorflow' has no attribute 'get_default_graph'

    module ‘tensorflow’ has no attribute ‘get_default_graph’当我使用keras和tensorflow做深度学习的时候,python3.7报了这个错误 ...

  6. HDU - 1005 Number Sequence 矩阵快速幂

    HDU - 1005 Number Sequence Problem Description A number sequence is defined as follows:f(1) = 1, f(2 ...

  7. Jmeter接口测试之参数传递(十三)

    在接口自动化测试中,经常会遇到的一种场景就是参数的场景,比如在用户列表中获取所有的用户列表,然后获取到某一个用户的ID,查看该用户的详细信息.首先在这里理清思路,它的流程是,首先获取到数据,然后在Jm ...

  8. ES6语法：函数新特性（一）

    ES6 函数 引言: 函数在任何语言中偶读很重要,java里面的函数通常叫做方法,其实是一个东西,使用函数可以简化更多的代码,代码结构看着更加清晰.今天我们来学学ES6语法中,函数有什么变化. 虽然现 ...

  9. 基于vue-cli-和element-ui的开发admin（1）

    //首先以下仅是记录个人本次vue后台管理系统的登录界面部分操作的流程以及踩坑的注意点 一.首先是搭建vue-cli工作环境 这里有两种方式:1.用npm:(在安装了vue,vue-cli以及webp ...

  10. 文件输入输出实例&Ptask的编写

    前言 最近在写Ptask,顺便了解了如何进行文件读入输出.而在Ptask中最重要,也是最最容易出bug的地方就是文件操作.那么如何进行文件输入输出,在程序中起到重要作用呢? 输入 首先为了保证可以在控 ...