<!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. iOS - Xcode中从动态库剥离不需要的架构

    自从iOS 8发布以来,开发人员已经能够利用动态库对iOS开发的好处.对于一般开发,为所有需要的架构设置一个单一的动态库是非常好的,所以您可以在所有设备和iOS模拟器上运行,而无需更改任何东西.然而, ...

  2. 1+X证书学习日志——定位

    ## 静态定位:                 position:static;    默认值,指定left/right/top/bottom/  没有作用.                 pos ...

  3. sublime的package control的中文镜像

    参加: http://packagecontrol.cn/installation

  4. LINQ按多列分组(Group By)并计算总和(Sum) （转载）

    来源:https://codedefault.com/2018/group-by-multiple-columns-and-sum-in-csharp .NET[C#]LINQ按多列分组(Group ...

  5. 【spark】spark应用（分布式估算圆周率+基于Spark MLlib的贷款风险预测）

    注:本章不涉及spark和scala原理的探讨,详情见其他随笔 一.分布式估算圆周率 计算原理:假设正方形的面积S等于x²,而正方形的内切圆的面积C等于Pi×(x/2)²,因此圆面积与正方形面积之比C ...

  6. PHP标记风格,编码规范

    PHP标记风格PHP一共支持4种标记风格 <?php echo "这是XML风格的标记"; ?> 脚本风格 <script language="php& ...

  7. 【HCIA Gauss】学习汇总-数据库基础介绍-1

    存放在数据库中数据的特点 :永久存储 又组织 可共享 数据库系统是由 数据库 数据库管理系统 应用程序 管理员成员 组成的存储 管理 处理和维护数据的系统 三个阶段:人工阶段 ,文件系统阶段,数据库系 ...

  8. django框架介绍安装-自写框架

    原文链接:https://www.cnblogs.com/maple-shaw/p/8862330.html Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户 ...

  9. SQL server分页的四种方法

    SQL server分页的四种方法 1.三重循环: 2.利用max(主键); 3.利用row_number关键字: 4.offset/fetch next关键字 方法一:三重循环思路  先取前20页, ...

  10. c++第四次作业

    继承与派生--访问控制 一.知识要点 (一)知识回顾: 基类的成员可以有public.protected.private三种访问属性.基类的自身成员可以对基类中任何一个其他成员进行访问,但是通过基类的 ...