vue基础 ref的作用
1. ref 获取dom元素,除了能获取dom元素也能获取组件dom,
<div id="app">
<p ref="mybutton"></p>
<div ref="mybutton"></div> <!-- 会覆盖 -->
<!--遇见循环 输出是一个数组-->
<template v-for="i in 3">
<div ref="mybutton">ww</div>
</template>
<my-button ref="myComponent"></my-button>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
mounted(){
console.log(this.$refs.mybutton);
console.log(this.$refs.myComponent);
console.log(this.$refs.myComponent.msg); //获取组件的数据
this.$refs.myComponent.fn(); //获取组件的元素和方法
},
components:{
"my-button":{
template:"<div>myYilia</div>",
data(){
return {
msg:"1212"
}
},
methods:{
fn(){
console.log("121");
}
}
}
} });
</script>
vue基础 ref的作用的更多相关文章
- vue基础----key的作用
1.key 在虚拟dom中 标记不同的结构,for循环中需要添加上 <body> <div id="app"> <div v-if="fla ...
- Vue基础以及指令
Vue 基础篇一 一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇:传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- Vue 基础精讲
Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例,vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
- Vue基础以及指令, Vue组件
Vue基础篇一 Vue指令 Vue的指令directive很像我们所说的自定义属性,指令时Vue模板中最常用的功能,它带有v-前缀,功能是当表达式改变的时候,相应的行为作用在DOM上. <div ...
随机推荐
- deeplearning.ai 序列模型 Week 2 NLP & Word Embeddings
1. Word representation One-hot representation的缺点:把每个单词独立对待,导致对相关词的泛化能力不强.比如训练出“I want a glass of ora ...
- Eclipse安装tomcat插件
安装插件:Pivotal tc Server Integration for Eclipse右击server可以定位到web项目部署的目录http://marketplace.eclipse.org/ ...
- Token最主要的作用.个人观点
Token除了登陆验证以外,我个人觉得最主要的作用就是可反解,通过token可以在服务器端查找出Token相关信息.这样可以省去一些不必要的参数. 关于token是否可以代替session来使用看个人 ...
- 吴裕雄--天生自然python学习笔记:Python3 输入和输出
输出格式美化 Python两种输出值的方式: 表达式语句和 print() 函数. 第三种方式是使用文件对象的 write() 方法,标准输出文件可以用 sys.stdout 引用. 如果你希望输出的 ...
- geoserver整合swagger2支持自动生成API文档
网上各种博客都有关于swagger2集成到springmvc.springboot框架的说明,但作者在整合到geoserver中确碰到了问题,调试一番最后才解决,遂总结一下. swagger2集成只需 ...
- unicode编码与解码
unicode编码与解码,代码如下 package com.fenqiguanjia.api.services; /** * Created by daixianjun on 2017/9/3. */ ...
- MySQL5.6 数据库主从(Master/Slave)同步安装与配置详解
.安装环境 .基本环境配置 .Master的配置 .Slave的配置 .添加需要同步的从库Slave .真正的测试 安装环境 1 操作系统 :CentOS 6.5 2 数据库版本:MySQL 5.6. ...
- Dykin's blog
回归分析是一种很重要的预测建模技术.主要是研究自变量与因变量之间的因果关系.本文将会从数学角度与代码角度分析不同类型的回归.当你想预测连续型的非独立变量,或者对一系列独立变量或输入项有所反应时,就会使 ...
- 神州优车挂牌新三板!专车B2C对决C2C将愈发狂暴?
近日,全国中小企业股份转让系统公告显示,神州优车已获准在新三板挂牌.神州优车作为神州专车的主营主体,此次挂牌新三板意味着神舟专车成功突围,成为"专车第一股".相比滴滴.Uber中国 ...
- 代码演示C#各版本新功能
代码演示C#各版本新功能 C#各版本新功能其实都能在官网搜到,但很少有人整理在一起,并通过非常简短的代码将每个新特性演示出来. 代码演示C#各版本新功能 C# 2.0版 - 2005 泛型 分部类型 ...