<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

    </head>

    <body>

        <div id="app">

            <p ref="good">不要啦</p>

            <button @click="add()">添加</button>

        </div>

    </body>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>

        var app = new Vue({

          el: '#app',

          data: {

            message: 'Hello Vue!'

          },

          methods:{

              add:function () {

                  console.log(this.$refs.good,)

                  this.$refs.good.style.color="red"

              }

          },

          created:function(){

              // this.getGood()

          }

        })

    </script>

</html>

要注意的是：

因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

一个方法，直接在created里面调,是不可以的,出现的是undefined.

vue的ref试用的更多相关文章

  1. Vue.js-11：第十一章 - Vue 中 ref 的使用

    一.前言 在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取 ...

  2. Vue使用Ref跨层级获取组件实例

    目录 Vue使用Ref跨层级获取组件实例 示例介绍 文档目录结构 安装vue-ref 根组件自定义方法[使用provide和inject] 分别说明各个页面 结果 Vue使用Ref跨层级获取组件实例 ...

  3. 【vue】vue中ref用法

    1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'p ...

  4. vue中$ref的基本用法

    1.使用在一般的标签上 <div id="app"> <input ref="count" type="text" v-m ...

  5. vue里ref ($refs)用法

    ref 有三种用法: 1.ref 加在普通的元素上,用this.ref.name 获取到的是dom元素 2.ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方 ...

  6. vue 使用ref获取DOM元素和组件引用

    在vue中可以通过ref获取dom元素,并操作它,还可以获取组件里面的数据和方法. HTML部分: <div id="app"> <input type=&quo ...

  7. Vue使用ref 属性来获取DOM

    注意,在父组件中可以使用this.$refs.属性名  获取任何元素的属性和方法,子组件不可以获取父组件中的 <!DOCTYPE html> <html lang="en& ...

  8. 17、前端知识点--Vue中ref的使用

    methods里面的方法,需要手动触发才会执行. 如果想让页面一上来就执行的话,就需要写在mounted这个钩子函数中. <body> <div id="app" ...

  9. vue之ref

    ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件. 1.ref ...

随机推荐

  1. 删除链表的倒数第 n 个节点

    难度: 中等 leetcode地址: https://leetcode.com/problems/remove-nth-node-from-end-of-list/description/ 分析: 1 ...

  2. 如何使用NPM？CNPM又是什么？

    背景介绍 什么是npm? npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装.卸载.管理依赖等), NPM是随同NodeJS一起安装的包管理工具 ...

  3. gitlab异地备份并验证MD5值

    最近公司发生了蛮多事情的,唉,咱也不管问啊,好好干活吧 需求 把gitlab的备份文件异地备份一份,备份无论失败还是成功通知某邮箱 实现思路 先rsync文件过去,判断rsync这个步骤有没有成功,失 ...

  4. MMU与cache

    这一快理解的非常浅: MMU 虚拟存储器对内存进行了逻辑上的扩充.比如一个32位的CPU系统,逻辑上的寻址可以达到4GB,但是如果直接对物理地址进行寻址,就要受到主存大小的限制. 在这种条件下,虚拟地 ...

  5. Python学习日记(十八) 序列化模块

    什么是序列? 就是每一个元素被有序的排成一列 什么是序列化? 就是将原本的列表.字典等内容转化成字符串的过程 什么时候会用到序列化? 数据存储(把数据放在文件.数据库),网络传输等 序列化的目的 1. ...

  6. k8s pv无法删除问题

    一般删除步骤为:先删pod再删pvc最后删pv 但是遇到pv始终处于“Terminating”状态,而且delete不掉.如下图: 解决方法: 直接删除k8s中的记录: kubectl patch p ...

  7. 关于linux的档案随笔

    刚才在看鸟哥的linux的私房菜,然后看到的部分是关于linux的档案配置部分,之前就强调过,在linux中所有的一切都是以档案的形式存在的,不过不同的文件有一定的区别,linux中是有副档案这个说法 ...

  8. [bluez] linux下蓝牙鼠标的延迟问题

    引言 现在的便携设备,接口越来越少了.所以我们没有理由不用蓝牙鼠标.高大上也不贵. 蓝牙4.0之前,蓝牙设备的问题是特别费电.蓝牙4.0之后省电的要命,我的上一个鼠标Microsoft Designe ...

  9. 云计算---记一次黑客攻击openstack创建的虚拟机

    一:问题定位 现象: 近期发现有几台openstack云主机被修改密码并被肉鸡. 黑客操作日志: -- :: ##### root tty1 : #### -- :: top -- :: ##### ...

  10. Django之路——6 Django的模型层（二）

    多表操作 创建模型 实例:我们来假定下面这些概念,字段和关系 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息.作者详情模型和作者模型之间是一对 ...