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允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...
随机推荐
- laravel5.8笔记十：Redis操作
> 位置:\vendor\laravel\framework\src\Illuminate\Redis\Connections\PhpRedisConnection.php > 参考:ht ...
- 【静默】Oracle各类响应文件何在？
[静默]Oracle各类响应文件何在? --root用户下执行: find -name *.rsp / 1.创建数据库的响应文件:$ORACLE_HOME/assistants/dbca/dbca. ...
- CentOS安装和配置Apache(httpd)
1. 安装httpd yum install httpd #安装apache 2. 启动httpd systemctl start httpd.service #启动apache 3. 随服务器自启动 ...
- Oracle 11G 安装文档
一. 将文件win32_11gR2_database_1of2.zip和win32_11gR2_database_2of2.zip解压. 注意:这两个文件解压到同一个目录下,即:将Components ...
- Tomcat启动报错：This file is needed to run this program
Tomcat版本为 8.5.29. 1.情景 kill调用tomcat进程后,重启tomcat报如下错误: Cannot find /usr/local/apache-tomcat-/bin/setc ...
- Redis密码设置与访问限制
https://www.cnblogs.com/ghjbk/p/7682041.html https://ruby-china.org/topics/28094
- TortoiseGit功能介绍
TortoiseGit功能介绍 使用方便 强大的提交对话框 每个项目设置 最小日志消息长度,以避免意外提交空日志消息 用于拼写检查的语言 与问题跟踪系统集成 有用的工具 有多种语言版本 Tortois ...
- 机器学习 —— 深度学习 —— 基于DAGNN的MNIST NET
DAGNN 是Directed acyclic graph neural network 缩写,也就有向图非循环神经网络.我使用的是由MatConvNet 提供的DAGNN API.选择这套API作为 ...
- gitlab服务器IP调整后修改domian或ip
背景 本地搭建的gitlab 服务器,在 /etc/gitlab/gitlab.rb 中 external_url 通常是局域网ip的形式.如下所示 external_url 'http://192. ...
- rabbitmq - java client lib一二事
由于不可抗因素, 需要给对接方撸一个client的demo.基于比较老的jdk. 所幸找到了这里:http://www.rabbitmq.com/releases/rabbitmq-java-clie ...