可以获取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元素和组件的更多相关文章

  1. vue 使用ref获取DOM元素和组件引用

    在vue中可以通过ref获取dom元素,并操作它,还可以获取组件里面的数据和方法. HTML部分: <div id="app"> <input type=&quo ...

  2. 第六章 组件 67 使用ref获取DOM元素和组件引用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. 20.Vue中获取DOM元素和组件

    1.获取DOM元素和组件:this.$refs

  4. vue 双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点

    <template> <div id="app"> <h2>{{msg}}</h2> <input type="te ...

  5. Vue 及双向数据绑定 Vue事件 以及Vue中的ref获取dom节点

    <template> <div id="app"> <h2>{{msg}}</h2> <input type="te ...

  6. vue2.* 双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点 04

    <template> <div id="app"> <!-- 双向数据绑定(必须在表单里面使用) m:model v:view mvvm:model改 ...

  7. vue获取dom元素内容

    通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...

  8. Vue自定义指令获取DOM元素

    我们知道,Vue.js的核心是数据驱动,当数据有所变化时,DOM就会被更新,比如: <span v-text="msg"></span> export de ...

  9. vue（4）—— vue的过滤器，监听属性，生命周期函数，获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

随机推荐

  1. JSP之连接SQL Server

    1.在SQL Server中启用sa(请参考本人博客:http://www.cnblogs.com/zhouhb/archive/2011/02/15/1955324.html)2.在SQL Serv ...

  2. css3图片处理方式 object-fit

    .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { ...

  3. MyBatis总结五：#{}和${}的用法和区别

    From: https://www.cnblogs.com/blazeZzz/p/9295634.html #{}的用法: 我们发现,在Mapper.xml映射文件中,经常使用#{属性名} 来作为SQ ...

  4. 史上最全Java面试题整理（附参考答案）

    下列面试题都是在网上收集的,本人抱着学习的态度找了下参考答案,有不足的地方还请指正,更多精彩内容可以关注我的微信公众号:Java团长 1.面向对象的特征有哪些方面? 抽象:将同类对象的共同特征提取出来 ...

  5. JS设计模式——单例模式剖析

    转载于原文地址:https://blog.csdn.net/q1056843325/article/details/52933426 举一个通俗的例子,在页面中点击登录按钮,弹出了一个登录浮窗,这个登 ...

  6. mysql按位的索引判断值是否为1

    DELIMITER $$ DROP FUNCTION IF EXISTS `value_of_bit_index_is_true`$$/*计算某个数字的某些索引的位的值是否都为1,索引类似1,2,3, ...

  7. Serv-u 备份处理

    需求分析 从删库到跑路,大家听过很多,但如果没删备份的话,那只能说玩的不够彻底,不专业.系统管理员一个非常重要的职责就是定期备份,以便在系统出现故障的时候能够及时恢复.我们来看下如何备份Serv-u系 ...

  8. js中 变量的解构赋值

    es6新特性, 提取数组或对象中的值,按照对应位置, 为变量赋值. let [a, b, c] = [1, 2, 3]; 交换变量的值变得容易 let x = 1; let y = 2; [x, y] ...

  9. thinkphp5中使用phpmailer实现发送邮件功能(转载)

    一.开启SMTP服务(使用php发送邮件需要用到SMTP服务,这里以163邮箱的SMTP服务为例). 1.登录163邮箱,在首页上找到“设置”. 2.选择开启的服务,一般都全选,POP3/SMTP/I ...

  10. js中级小知识2

    1.面向对象 js一开始就是写网页特效,面向过程的,作者发现这样写不好,代码重复利用率太高,计算机内存消耗太大,网页性能很差.所以作者就收到java和c的影响,往面向对象靠齐.js天生有一个Objec ...