vue2.0中的ref.html
前置知识请戳这里
获取DOM对象以及组件对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<button @click="getdom">获取DOM对象</button>
<div ref="mydiv" id="box">hello vue</div> <button @click="getcom">获取组件对象</button>
<login ref="mycom"></login>
</div> <script>
new Vue({
el: '#app',
methods:{
getdom:function(){
//获取id=box的div对象
//1、通过传统的document
console.log(document.getElementById('box').innerHTML); //2、vue2.0的写法
console.log(this.$refs.mydiv.innerHTML);
},
getcom:function(){
console.log(this.$refs.mycom.subname);
}
},
components:{
'login':{
data:function(){
return {
subname:"子组件的名称"
}
},
template:"<h3>这是一个子组件</h3>"
}
}
});
</script>
</body>
</html>
vue2.0中的ref.html的更多相关文章
- Vue2.0中的transition组件
组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...
- router-view在vue2.0中不显示，解决方法
学习的router-view路由一直不显示,我翻看vue文档,花费1个小事终于找到原因,希望我的问题能给初学的同学,带来福音,版本不一样,真的烦 在此总结记录,以免以后在此遇到此问题 //配置路由 c ...
- vue2.0中使用pug(jade)
第一部分:pug(jade)模板引擎 pug,原名jade,是流行的HTML模板引擎,它是HAML在JavaScript上的实现,最大的特色是使用缩进排列替代成对标签. 它简化了HTML的成对标签的写 ...
- vue2.0中使用less
第一部分:Less语言 与上一篇<vue2.0中使用sass>介绍的Sass语言一样,Less语言也是一种CSS的扩展语言,增加了变量.混合(minin).函数等功能,让CSS更易维护.方 ...
- vue2.0中使用sass
第一部分:Sass语言 Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量.嵌套规则.mixins.导入等css没有但开发语言(如Java.C#.Ruby等)有的一些特性 ...
- vue2.0 中#$emit,$on的使用详解
vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on 1. vm.$on( event, callback ) 监听当前实例上的自定义事件.事件可以 ...
- Vue2.0中v-for迭代语法变化（key、index）【转】
转自:http://blog.csdn.net/sinat_35512245/article/details/53966788 Vue2.0的代码中发现 $key这个值并不能渲染成功,问题如下:但是v ...
- Vue2.0中的路由配置
Vue2.0较Vue1.0,路由有了较大改变.看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下: ...
- vue2.0中，由于页面完成之后dom还未加载完成如何进行操作
再vue中,当页面加载完成以后,dom还没有加载,是无法获取进行操作的,但是在vue2.0中提供了一个方法:this.$nextTick,在这个回调函数里面写dom操作即可: 如下代码: create ...
随机推荐
- 赋值运算与深浅copy
1.复制运算 l1 = [1,2,3,['a','b']] l2 = l1 l1[0] = 111 print(l1) # [111, 2, 3, ['a', 'b']] print(l2) # [1 ...
- J15W-J45W全铜质截止阀厂家，J15W-J45W全铜质截止阀价格 - 专题栏目 - 无极资讯网
无极资讯网 首页 最新资讯 最新图集 最新标签 搜索 J15W-J45W全铜质截止阀 无极资讯网精心为您挑选了(J15W-J45W全铜质截止阀)信息,其中包含了(J15W-J45W全铜质截止阀)厂 ...
- Centos7修改主机名称、DNS、网卡信息
1 hostnamectl set-hostname wangshuyi 2 vi /etc/hostname 3 vi /etc/resolv.conf 4 vi /etc/sysconfig/ne ...
- 010-JedisUtils工具类模板
redis.properties配置文件 redis.maxIdle=30 redis.minIdle=10 redis.maxTotal=100 redis.url=192.168.204.128 ...
- unity 工具开发基础
using System.Collections; using System.Collections.Generic; using System.IO; using System.Text; usin ...
- Shiro： 权限管理
一.权限管理 1.什么是权限管理 权限管理属于系统安全的范畴,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户可以访问且只能访问自己被授权的资源. 权限管理包括用户身份认证和 ...
- LVS+keepalived DR模式配置高可用负载均衡集群
实验环境 LVS-Master 10.0.100.201 VIP:10.0.100.203 LVS-Slave 10.0.100.204 WEB1-Tomcat 10.0.2.29 gat ...
- ASP.NET Core项目中新增和删除的内容
最新一版的.NET几经改名,最终得到了.NET Core这个高大上的名称,相应的ASP.NET MVC也跟着提供了ASP.NET Core MVC版本. 在.NET Core没有稳定名称时,叫做MVC ...
- C# xml操作word-->word转2003xml
1.第一步,准备word模版
- CSS学习(二)
display : block inline-block inline block此元素将显示为块级元素,此元素前后会带有换行符. inline默认.此元素会被显示为内联元素,元素前后 ...