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 ...
随机推荐
- fatal: 不是一个有效的对象名：'master'。
听说git比svn的branch功能好,所以装了个msysgit玩.执行完了git init操作后想建branch,用git branch develop命令,结果报错,说 fatal: Not a ...
- 哪个参数用来区分请求来自客户（手机）端还是服务器（PC）端?
cookie 和 session 会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session. Cookie通过在客户端记录信息确定用 ...
- python3基础之“小练习（2）”
(十三)创建一个你最喜欢歌手的列表. # singer=list() # singer=['a','b','c'] # print(singer) (十四)创建一个由元组构成的列表,每个元组包含居住过 ...
- 第五周（web，machine learning笔记）
2019/11/2 1. 表现层状态转换(REST, representational state transfer.)一种万维网软件架构风格,目的是便于不同软件/程序在网络(例如互联网)中互相 ...
- HelloWorld! C++纠错版
例题:1 #include<iostream> int main() { cout << "HelloWorel!" ; ; } #include < ...
- TypeScript_泛型
typescript 中很多地方都和 java 和 C# 相似,如果 有 java 和 C# 的同学入手typeScript 会简单很多, 下面这里使用代码来表示和展现泛型的定义和使用 //泛型:在类 ...
- Android笔记（四十） Android中的数据存储——SQLite（二） insert
准备工作: 我们模拟一个注册的页面,先看UI 我们需要创建一个数据库:user,数据库包含表user,user表包含字段id.username.password.mobilephone MainAct ...
- hive介绍及架构设计
hive介绍及架构设计 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 我们知道MapReduce和Spark它们提供了高度抽象的编程接口便于用户编写分布式程序,它们具有极好的扩展性 ...
- pdftk - handy tool for manipulating PDF 免费的pdf合并工具
Linux pdf合并的工具 安装工具 $ sudo apt-get install pdftk 使用 $ pdftk *.pdf cat output all-in-one.pdf &&am ...
- SQLyog(MYSQL图形化开发工具)
安装:下载一个免安装的SQLyog,可以直接使用 使用:输入用户名.密码,点击连接按钮,进行访问MySQL数据库进行操作 在Query窗口中,输入SQL代码,选中要执行的SQL代码,按F8键运行,或按 ...