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允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...
随机推荐
- Zookeeper系列六：服务器角色、序列化与通信协议、数据存储、zookeeper总结
一.服务器角色 1. Leader 1)事务请求的唯一调度者和处理者.保证事务处理的顺序性 事务请求:导致数据一致性的请求(数据发生改变).如删除一个节点.创建一个节点.设置节点数据,设置节点权限就是 ...
- php -- 断点调试 之 选择合适的xdebug
这里不讲如何在不同的ide里安装断点调试,讲一个不起眼却很容易犯的错误: 如何寻找适合你的环境的xdebug! 不要小看这个问题,如果说xdebug都错了,你再怎么安装断点调试,都不会成功,反而还找不 ...
- 使用SMART监控Ubuntu
参考:完全用 GNU/Linux 工作 - 29. 檢測硬碟 S.M.A.R.T. 健康狀態 1.安装 sudo apt-get install smartmontools 2.查看硬盘的参数,需要获 ...
- Idea2018旗舰版破解方法
完整请参考 https://www.jianshu.com/p/3c87487e7121 1.在hosts文件里添加一行: 0.0.0.0 account.jetbrains.com 2.在Activ ...
- JS的eval函数解密反混淆
https://www.hhtjim.com/js-decryption-de-obfuscate-eval-function.html JS的eval函数解密反混淆
- docker 搭建lnmp环境以及docker常用命令
1.首先docker 的基本操作. 2.然后命令深入,网络映射. 3.访问docker 内的应用 端口映射网桥之类. docker pull hub.c.163.com/library/php:7.0 ...
- js call 理解
首先直接放定义: 总结 1.前提:fun是函数 2.thisArg是在fun函数运行时 指定的this值 1.使用call来继承,新函数使用已经定义好的函数里的方法 下面直接上实例 函数b直接使用函 ...
- [Golang] 编译程序时打上git提交信息标记
1.加入代码 //version.go package version import ( "flag" "fmt" "os" ) var ( ...
- array_rand
array_rand — 从数组中随机取出一个或多个单元 mixed array_rand ( array $array [, int $num = 1 ] ) 从数组中取出一个或多个随机的单元,并返 ...
- 用友U8存货分类通过DataTable生成EasyUI Tree JSON
<%@ WebHandler Language="C#" Class="InventoryClass" %> using System; using ...