<!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. 解决SecureCRT 中文乱码??

    在linux服务器上搭建solr,用的是SecureCRT  连接linux服务器,发现不能输入中文,配置文件中的中文也是乱码:先以为是SecureCRT工具编码的问题,把编码改成utf-8之后发现还 ...

  2. 删除注册在Eureka的服务（无效，多余）

    例子:http://140.143.67.146:8000/eureka/eureka/apps/ZKR-PRODUCT/172.21.0.10:zkr-product:6868 Request Me ...

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

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

  4. 大数据的前世今生【Hadoop、Spark】

      一.大数据简介 大数据是一个很热门的话题,但它是什么时候开始兴起的呢? 大数据[big data]这个词最早在UNIX用户协会的会议上被使用,来自SGI公司的科学家在其文章“大数据与下一代基础架构 ...

  5. Android笔记(七十三) Android权限问题整理 非常全面

    Android权限系统非常庞大,我们在Android系统中做任何操作都需要首先获取Android系统权限,本文记录了所有的Android权限问题,整理一下分享给大家. 访问登记属性 android.p ...

  6. Nginx配置文件示例

    Nginx的配置文件示例:(仅供参考) 强烈建议先将默认的配置文件备份再进行操作! 请根据自己项目的实际路径来配置相关路径! uwsgi配置文件请参考:uwsgi配置文件示例 # For more i ...

  7. android studio创建模拟器

    开发环境: 操作系统: windows10 教育版 1903 Android studio :  Android Studio 3.5.1Build #AI-191.8026.42.35.590020 ...

  8. Linux命令——systemctl

    前言 systemctl本身的意义并不仅仅是一个命令那么简单,他标志着SysV时代的终结,Systemd时代的开始.CentOS 7.X系列已经抛弃SysV,全面拥抱Systemd这个init sys ...

  9. Vue+Express实现登录状态权限控制

    前提须知 对Vue全家桶有基本的认知. 拥有node环境 了解express 本篇只是介绍登录状态的权限验证,以及登录,注销的前后端http交互.前端布局,后端密码验证等以后有时间再对这些内容进行补充 ...

  10. Windows 远程访问 ubuntu 16 lts

    remote access ubuntu 使用安装使用vncserver (除非必要,不要使用图形界面,底层码农真的应该关心效率) $ sudo apt-get install vncsever wi ...