首页 > 其他分享 >Vue之ref

Vue之ref

时间:2022-12-26 21:56:42浏览次数:35  
标签:School Vue DOM App vue ref refs

ref属性 1. 被用来给元素或子组件注册引用信息(id的替代者) 2. 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc) 3. 使用方式:     1. 打标识:```<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx"></School>```     2. 获取:```this.$refs.xxx```

代码结构:

 

 School.vue

<template>
    <div class="school">
        <h2>学校名称:{{name}}</h2>
        <h2>学校地址:{{address}}</h2>
    </div>
</template>

<script>
    export default {
        name:'School',
        data() {
            return {
                name:'School',
                address:'北京·昌平'
            }
        },
    }
</script>

<style>
    .school{
        background-color: gray;
    }
</style>

 

App.vue:

<template>
    <div>
        <h1 v-text="msg" ref="title"></h1>
        <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
        <School ref="sch"/>
    </div>
</template>

<script>
    //引入School组件
    import School from './components/School'

    export default {
        name:'App',
        components:{School},
        data() {
            return {
                msg:'欢迎学习Vue!'
            }
        },
        methods: {
            showDOM(){
                console.log(this.$refs.title) //真实DOM元素
                console.log(this.$refs.btn) //真实DOM元素
                console.log(this.$refs.sch) //School组件的实例对象(vc)
            }
        },
    }
</script>

 

输出:

 

 

 main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
    el:'#app',
    render: h => h(App)
})

 

标签:School,Vue,DOM,App,vue,ref,refs
From: https://www.cnblogs.com/anjingdian/p/17006995.html

相关文章

  • C#基础⑧——方法(函数、重载、out、ref)
    目录​​一、什么是方法(函数)?​​​​二、使用方法有什么好处呢?​​​​三、语法:​​​​四、实战演练​​     ​​五、ref和out传参的区别​​​​①、out的传参:​......
  • [CTF] 攻防世界-xff_referer
    X-Forwarded-For:,,https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/X-Forwarded-For大致理解:就是你有代理服务器,它只能看到你最后代理的那个IP,但是用这......
  • 小记Vue动态修改表头的方法
    背景:列表A:初始列名称列表对象B:{name1:newName1;name2:newName2}对象B记录了一部分需要修改的列名称。根据列表A使用v-for动态渲染......
  • 记录--vue.config.js 的完整配置(超详细)!
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前段时间,对部门的个别项目进行Vue3.0+ts框架的迁移,刚开始研究的时候也是踩坑特别多,尤其我们的项目还有些......
  • Vue2.00.WebPack
    本次系统学习以黑码教程为主,后期随笔中不特殊说明均为黑马教程内容01.对webpack的了解a.webpack是前端项目工程化的具体解决方案;b.主要功能:1.提......
  • VueX基础篇
    1.VueX是什么:“Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。”......
  • 关于优化前端vue项目的思考
    背景:前端项目 125M启动时间5-10分钟F12会出现崩溃原因:打包出来的css样式文件体积过大解决办法:1.启动太久,将vue-cli升级到版本5,能优化不少的时间2.vue.conf......
  • vue 多项目nginx部署---二级目录
    vue多项目部署---二级目录新项目:同一域名下部署多个vue项目,根目录vue项目不需要按下面的方式进行打包部署https://www.bitedit.com/下面三个项目以二级目录部署htt......
  • Flask+Vue 用户登录
    后端开发环境Flask2.2.2Flask-Cors3.0.10Flask-HTTPAuth4.5.0Flask-RESTful0.3.9itsdangerous2.0.1代码目录结构D:.│......
  • 兼容IE6和Firefox的PNG背景透明CSS…
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""​​http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd​​​"><htmlxmlns="​​​http://ww......