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允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...
随机推荐
- 解决vscode无法提示golang的问题
https://github.com/Microsoft/vscode-go/wiki/Go-with-VS-Code-FAQ-and-Troubleshooting Q: Auto-completi ...
- java.exe和javaw.exe的区别
相同点:二者都是Java的虚拟机,用来执行Java程序 区别: 1. javaw.exe运行程序时不会输出控制台信息 (注:“w”就是window的意思). 使用案例 start.bat(y以下代码 ...
- 给你的app添加桌面widget
首先,什么是桌面widget,桌面widget是一种桌面插件,如下图: 这种类型的控件叫做widget,一般长按桌面会弹出一个界面让你选择控件,选择完了拖到桌面就能使用了. 下面我们为这个app来添加 ...
- init_ir_技术实现篇
1. 中断的初始化 中断向量号是8位的,那么它一共有256项(0-255),所以中断描述符表最多只有256项,中断向量表也是256项. 对于不同的中断,在中断初始化和中断处理过程中,其处理方式是不一样 ...
- MYSQL 内存模型
- solr搜索分词优化
solr服务器配置好在搜索时经常会搜出无关内容,把不该分的词给分了,导致客户找不到自己需要的内容,那么我们就从配置词典入手解决这个问题. 首先需要知道自带的词典含义: 停止词:停止词是无功能意义的词, ...
- ef报错：实体类型XXX不是当前上下文的模型的一部分。
可能原因:.net框架版本与实体框架版本不匹配,比如:.net框架版本为4.5.实体框架版本为6.2. 解决方法:将实体框架版本降到6.0.
- js中的 substr方法与substring方法 不同
一个参数时: 二者同为 从 第参数个 开始截取,一直到str 末尾,并返回. 二个参数时: substr(a,b): 从第a个字符开始, 截取b个. substring(a,b): 从第a个字符 ...
- socket.io 中文文档
Socket.io是一个WebSocket库,包括了客户端的js和服务器端的nodejs,它的目标是构建可以在不同浏览器和移动设备上使用的实时应用.它会自动根据浏览器从WebSocket.AJAX长轮 ...
- 爬虫IP代理中的http与https
之前使用代理IP,构造的proxies一直都是http模式 proxies={"http": "http://{}".format(ip)} 但是今天遇到的网站 ...