Vue系列之 => ref获取DOM元素和组件
可以获取DOM元素，和组件中的数据，方法
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/jquery2.1.4.min.js"></script>
<script src="./lib/Vue2.5.17.js"></script>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7-dist/css/bootstrap.css">
</head> <body> <div id="app">
<input type="button" value="获取元素" @click="getElement">
<h3 id="myh3" ref="myh3">哈哈哈哈，今天天气真不错！</h3>
<hr>
<login ref="mylogin"></login>
</div> <!-- 模板 -->
<template id="tmpl"> </template> <script>
var login = {
template : '<h1>这f 是登录组件</h1>',
data(){
return {
msg : 'newcontent'
}
},
methods: {
show(){
console.log('嘿嘿黑恶');
}
},
} var vm = new Vue({
el : '#app',
data : {},
methods: {
getElement(){
// ref 是英文单词 【reference】 在浏览器控制台 输入vm 查看
console.log(this.$refs.myh3.innerText);
console.log(this.$refs.mylogin.msg);
this.$refs.mylogin.show()
}
},
components : {
login
}
})
</script>
</body> </html>
Vue系列之 => ref获取DOM元素和组件的更多相关文章
- vue 使用ref获取DOM元素和组件引用
在vue中可以通过ref获取dom元素,并操作它,还可以获取组件里面的数据和方法. HTML部分: <div id="app"> <input type=&quo ...
- 第六章 组件 67 使用ref获取DOM元素和组件引用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 20.Vue中获取DOM元素和组件
1.获取DOM元素和组件:this.$refs
- vue 双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点
<template> <div id="app"> <h2>{{msg}}</h2> <input type="te ...
- Vue 及双向数据绑定 Vue事件 以及Vue中的ref获取dom节点
<template> <div id="app"> <h2>{{msg}}</h2> <input type="te ...
- vue2.* 双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点 04
<template> <div id="app"> <!-- 双向数据绑定(必须在表单里面使用) m:model v:view mvvm:model改 ...
- vue获取dom元素内容
通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...
- Vue自定义指令获取DOM元素
我们知道,Vue.js的核心是数据驱动,当数据有所变化时,DOM就会被更新,比如: <span v-text="msg"></span> export de ...
- vue（4）—— vue的过滤器，监听属性，生命周期函数，获取DOM元素
过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...
随机推荐
- python调用shell脚本时需要切换目录
最近遇到了一个问题,就是python代码调用shell脚本时,发现输入输出的文件,总是和自己预想的有偏差,但是单独在linux下执行命令的时候,却没有错误.后来发现是相对路径的问题,因为执行pytho ...
- xcode8 iOS函数返回值使用警告
没有使用返回值时, 警告 swift: @warn_unused_result func doSomething() -> Bool { return true } OC: - (BOOL)do ...
- git push fatal: The remote end hung up unexpectedly
git push fatal: The remote end hung up unexpectedly git config http.postBuffer git gc --aggressive 不 ...
- iptables 分析(1)
原文:http://blog.chinaunix.net/uid-24207747-id-2622900.html iptables 是用户空间中用于管理包过滤及NAT 等的工具应用程序.它设置防火墙 ...
- 如何生成Junit报告
前言: 对Eclipse的工程写单元测试: 1. 一个工程有多个测试类,将测试类放到一个测试包下. 2. 每一个测试类写好,都单独执行run as ->JUnit Test测一下. 3. ...
- 如何使用Windows防火墙禁止软件联网
很多软件需要联网,当我们为了“某些目的”,不想让软件联网的时候,我们有没有办法做到呢?答案是肯定的,那就是使用Windows系统自带的防火墙来屏蔽软件的联网,禁止软件出站请求,这样就可以了,下面介绍具 ...
- Docker入门1------概念和安装
关于docker的介绍: https://www.cnblogs.com/neptunemoon/p/6512121.html docker入门教程:http://www.docker.org.cn/ ...
- 1_01 vue的双向绑定
听说vue1是双向绑定,不过现在Vue2不能直接双向绑定,需要设置绑定. 一.常见的是input表单的v-model const component = { template: ` <div&g ...
- ARGB与RGB、RGBA的区别
ARGB 是一种色彩模式,也就是RGB色彩模式附加上Alpha(透明度)通道,常见于32位位图的存储结构. RGB 色彩模式是工业界的一种颜色标准,是通过对红(R).绿(G).蓝(B)三个颜色通道的变 ...
- C#基础加强(8)之委托和事件
委托 简介 委托是一种可以声明出指向方法的变量的数据类型. 声明委托的方式 格式: delegate <返回值类型> 委托类型名(参数) ,例如: delegate void MyDel( ...