<!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. 关于阿里 iconfont 的使用步骤

    第一步: 在iconfont库中,找到你想要的图标,加入到购物车,再在购物车中将图标加入到你的项目中去    第二步: 在项目中,可以看到刚刚加入的图标,这里是你在项目中所有用到的iconfont,选 ...

  2. Oracle 创建数据表

    数据库中的每一个表都被一个模式(或用户)所拥有,因此表是一种典型的模式对象.在创建数据表时,Oracle 将在一个指定的表空间中为其分配存储空间.最初创建的表时一个空的逻辑存储结构,其中不包含任何数据 ...

  3. Linux (x86) Exploit 开发系列教程之三(Off-By-One 漏洞 (基于栈))

    off by one(栈)? 将源字符串复制到目标缓冲区可能会导致off by one 1.源字符串长度等于目标缓冲区长度. 当源字符串长度等于目标缓冲区长度时,单个NULL字节将被复制到目标缓冲区上 ...

  4. ScheduledExecutorService周期性的定时任务

    从j2se的api文档上查看ScheduledExecutorService的方法都是推迟一段时间然后相隔一段时间之后再去执行,没有想Timer定时器一样的可以在定点时间执行的api,如果也想像Tim ...

  5. python之文件的相关操作

    一..文件操作的函数 open("文件名(路径)" ,mode = "模式" , encoding="字符集") 注:文件路径: (1)绝对 ...

  6. Spring-Security-Oauth2 基于JDBC存储令牌和RBAC权限认证

    相关配置来自李哥博客:  https://funtl.com/zh/spring-security-oauth2/   (本文仅记录自己学习过程,说的不详细,可以观看李哥博客) 认证服务器和资源服务器 ...

  7. Kubernetes系统基础

    Kubernetes系统基础 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.容器编排系统概述 1>.容器编排系统生态圈 Docker通过“镜像”机制极富创造性地解决了应用 ...

  8. 使用Cloudera Manager搭建HDFS完全分布式集群

    使用Cloudera Manager搭建HDFS完全分布式集群 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 关于Cloudera Manager的搭建我这里就不再赘述了,可以参考 ...

  9. sshd安全加固

    常见的防护措施: ——用户限制,黑白名单 ——更改验证方式(密码——>密钥对) ——防火墙..... 修改 sshd 配置文件 /etc/ssh/sshd_config -port 3389 # ...

  10. gsoup webservice

    SoapUI调用webservice实现的两种方式 gsoup https://blog.csdn.net/zhuzhihai1988/article/details/8131370