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允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...
随机推荐
- error connecting: Timeout expired 超时时间已到. 达到了最大池大小 错误及Max Pool Size设置
[参考]Timeout expired 超时时间已到. 达到了最大池大小 错误及Max Pool Size设置 [参考][数据库-MySql] MySqlConnection error connec ...
- NuGet Packages are missing,This project references NuGet package(s) that are missing on this computer. Use NuGet Package Restore to download them.
错误内容 This project references NuGet package(s) that are missing on this computer. Use NuGet Package R ...
- HTTP Status 404(The requested resource is not available)的几种解决方案
1. 未部署Web应用 2．URL输入错误 排错方法:首先,查看URL的IP地址和端口号是否书写正确.其次,查看上下文路径是否正确 Project--------Properties--- ...
- NB-Iot的应用领域、覆盖范围，是什么
该部分分享的是物联网各垂直应用领域里,NB-IoT技术的部署,看看适合NB-IoT技术的垂直应用场景有哪些?垂直应用服务商又该如何部署? 1 NB-IoT适合的垂直应用场景有哪些? 2 NB-IoT垂 ...
- Python Django 配置QQ邮箱发送邮件
一.实验环境 Python2.7 + Django1.10.0 二.获取QQ邮箱授权码 1.什么是授权码? 授权码是QQ邮箱推出的,用于登录第三方客户端的专用密码. 适用于登录以下服务:POP3/IM ...
- 7、 jade 、 ejs、express集成模板
jade/ejs 模板引擎 http://jade-lang.com/ http://www.nooong.com/docs/jade_chinese.htm SSR 服务器端渲染 服务器生成html ...
- mui 卡片视图 遮罩蒙版
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- PHP(一般标签介绍，标签特性，实体名称，绝对路径与相对路径）
h1:为标题 h1~h6 标题会逐渐变小 需更换标签里面的数字 如: <h1>这是标题123</h1>---标题 <h2>这是标题123</h2>-- ...
- Python学习之旅（二十二）
Python基础知识(21):IO编程 一.文件读写 读写文件就是请求操作系统打开一个文件对象(文件描述符),然后,通过操作系统提供的接口从这个文件对象中读取数据(读文件),或者把数据写入这个文件对象 ...
- Ubuntu 14.04循环登录问题(密码正确，无法登录)
今天遇到了ubuntu 的循环登录问题,即使输入的密码是正确的,也无法成功登录.查询资料,发现有各种问题引起的循环登录问题,比如安装了jdk,或者安装了驱动. 最后找到了问题的原由:我的电脑是双显卡, ...