vue的ref试用
<!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试用的更多相关文章
- Vue.js-11：第十一章 - Vue 中 ref 的使用
一.前言 在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取 ...
- Vue使用Ref跨层级获取组件实例
目录 Vue使用Ref跨层级获取组件实例 示例介绍 文档目录结构 安装vue-ref 根组件自定义方法[使用provide和inject] 分别说明各个页面 结果 Vue使用Ref跨层级获取组件实例 ...
- 【vue】vue中ref用法
1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'p ...
- vue中$ref的基本用法
1.使用在一般的标签上 <div id="app"> <input ref="count" type="text" v-m ...
- vue里ref ($refs)用法
ref 有三种用法: 1.ref 加在普通的元素上,用this.ref.name 获取到的是dom元素 2.ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方 ...
- vue 使用ref获取DOM元素和组件引用
在vue中可以通过ref获取dom元素,并操作它,还可以获取组件里面的数据和方法. HTML部分: <div id="app"> <input type=&quo ...
- Vue使用ref 属性来获取DOM
注意,在父组件中可以使用this.$refs.属性名 获取任何元素的属性和方法,子组件不可以获取父组件中的 <!DOCTYPE html> <html lang="en& ...
- 17、前端知识点--Vue中ref的使用
methods里面的方法,需要手动触发才会执行. 如果想让页面一上来就执行的话,就需要写在mounted这个钩子函数中. <body> <div id="app" ...
- vue之ref
ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件. 1.ref ...
随机推荐
- echart 人头
<template> <div :class="className"> <div :id="id" class="spi ...
- Jest did not exit one second after the test run has completed.
使用 Jest 进行单元测试时出现如下问题: Jest did not exit one second after the test run has completed. This usually m ...
- Java 之 常用函数式接口
JDK提供了大量常用的函数式接口以丰富Lambda的典型使用场景,它们主要在 java.util.function 包中被提供.下面是最简单的几个接口及使用示例. 一.Supplier 接口 java ...
- Java之Math类使用小结
Java的Math类封装了很多与数学有关的属性和方法,大致如下: public class Main { public static void main(String[] args) { // TOD ...
- pre-departure preparation-to chengdu or shenzhen
编辑本文 (一)思想要点 1.行动改变自己,做自己的救世主. 2.成为一个技术大拿. 3.当生活吊打了你,不用悲伤,尽快反击(力所能及的做事),不要停歇,因为不能再给生活喘息的机会. 4.遇到什么问题 ...
- TypeScript_泛型
typescript 中很多地方都和 java 和 C# 相似,如果 有 java 和 C# 的同学入手typeScript 会简单很多, 下面这里使用代码来表示和展现泛型的定义和使用 //泛型:在类 ...
- python接口自动化11-post传data参数案例
前言: 前面登录博客园的是传json参数,有些登录不是传json的,如jenkins的登录,本篇以jenkins登录为案例,传data参数. 一.登录jenkins抓包 1.登录jenkins,输入账 ...
- 本地安装部署Jira
https://blog.csdn.net/u013492736/article/details/83315650 1. 首先在官网下自行搭建服务器的版本,有适合于windows的,也有linux版本 ...
- WPYOU主题加密码代码的解码
我手上管理一个公司的wordpress网站的主题用的是wpyou的主题,但是在网站有安全隐患的情况下,看到wpyou有把代码进行加密过. 这种加密代码的行为,会被D盾认为是后门,所以一度觉得其文件和代 ...
- Centos7.3云服务器上安装Nginx、MySQL、JDK、Tomcat环境
安装的软件路径建议放到/usr/local目录下 Tomcat 首先从最简单的Tomcat开始,进入到Apache的官网:http://www.apache.org,下载合适的版本来装,一般建议8.0 ...