Vue9--render和ref

2023-11-06

  1. render
    Vue渲染组件的两种形式:
1.先注册组件,在Vue实例中通过标签名引用,此时不会覆盖实例控制区域
2.注册组件,在Vue实例中通过render方法渲染,此时会覆盖实例控制区域
<body>
<div id="app">
    dddsfsfgdsfggs
</div>
<template id="tem">
    <p>
        只显示模板中的内容
    </p>
</template>
<script>
    Vue.component('temp',{
        template:'#tem'
    })
    let vue = new Vue({
        el:'#app',
        render:function(createElement){
            let html = createElement('temp');
            return html;
        }
    })
</script>
</body>

在这里插入图片描述
2. ref
在Vue中通过ref获取DOM元素

<body>
<div id="app">
    <button @click="getDom">获取DOM</button>
    <temp ref="getTem"></temp>
    <p ref="getP">这是一个原生DOM元素</p>
</div>
<template id="tem">
    <p>
        这是一个自定义标签
    </p>
</template>
<script>
    Vue.component('temp',{
        template:'#tem'
    })
    let vue = new Vue({
        el:'#app',
        methods:{
            getDom(){
                console.log(this.$refs);
                console.log(this.$refs.getTem);
                console.log(this.$refs.getP) //如果组件中有数据和方法,可通过 this.$refs.组件id.data(method名)获取
            }
        }
    })
</script>
</body>

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue9--render和ref 的相关文章

  • vue+C#后台上传excel处理数据

    比较简洁的excel处理方法 希望对大家有所帮助 1 界面
  • Element Plus 配置自动按需引入后,手动引入组件,组件样式丢失

    起因 最近在尝试使用 Element Plus 写一些简单的页面 跟着官方文档走配置了自动按需引入 npm install D unplugin vue components unplugin auto import vite config
  • Vue (三) 生命周期--钩子函数

    生命周期 Vue官网生命周期的描述 钩子函数 1 beforeCreate 创建Vue实例化之前所调用的函数 div h1 message h1 div
  • 生产环境的域名地址与后端给的接口地址不一样时的配置(vue)

    1 找到 config dev env js 文件 module exports merge prodEnv NODE ENV development API ROOT http com 本地开发时用的域名 2 找到 config prod
  • vue:实现锚点双向滚动/文章章节联动滚动效果

    文章目录 需求描述 实现思路 示例代码 参考网址 需求描述 需要实现类似doc中文档大纲的效果 点击对应章节的名称时定位到相应的正文 而当正文滚动时 高亮显示对应的章节名称 实现思路 其实笔者一开始想到的是利用a标签页内跳转 也就是 锚点
  • Vue2运行报错SyntaxError: Cannot use import statement outside a module

    问题描述 像配置vue3那样配置vue config js的路径代理 代替src后 报错 语法错误 不能在模块外部使用导入语句 原因 模块语法一个是CommonJS module 一个是 ES6 module vue config js里的
  • 包管理工具那么多,怎么选?npm、yarn 和 pnpm 三者比较及使用详解!

    1 简介 在 Vue 项目中 我们需要使用许多第三方依赖库 如 Vue Router Vuex Axios Element UI 等等 这些依赖库通常以 NPM 包的形式提供 而且在使用时需要进行版本管理 因此 我们需要使用一个包管理工具来
  • vue prop属性使用方法小结

    Prop 一 基本用法 Prop的基本用法很简单 作用是在子组件中接收父组件的值 父组件传值
  • 8.全配置自动生成模块前后端

    文章目录 学习资料 配置式开发全新的模块 快速实现 字典管理 代码生成器详细属性设置 全智能模块开发 查询调整 多表连接 药品模块 生产厂家下拉框 学习资料 https www bilibili com video BV13g411Y7GS
  • Vue与TypeScript的完美结合

    前言 TypeScript 是 JS类型的超集 并支持了泛型 类型 命名空间 枚举等特性 弥补了 JS 在大型应用开发中的不足 在我们自己单独学习 TS时 时常感觉很多知识点还是比较好理解的 但要和框架结合的话 感觉就有点糟 因为我使用Vu
  • 前端的工程化、模块化和组件化

    什么是工程化 工程化是一种思想而不是某种特定的技术 当然我们在实现项目工程化的过程中 我们也会去使用一些技术 前端工程化是使用软件工程的技术和方法来对前端的开发流程 技术 工具等进行规范化 标准化 其主要目的为了提高效率和降低成本 即提高开
  • 前端将List列表转化为树型结构(reduce函数)

    主要用到了reduce 函数 for循环可以做到的事情reduce 都可以做到 甚至操作起来更加简单方便和高雅 reduce 为数组中的每一个元素依次执行回调函数 不包括数组中被删除或从未被赋值的元素 reduce语法 array redu
  • 大数据毕业设计之前端03:logo、menu的折叠展开实现

    关键字 BuildAdmin pinia logo aside menu 菜单折叠 Vue ElementUI 前言 上一篇文章中 借助aside的实现讲了一些开发的小技巧 以及css的解读 本篇文章主要写一下如何填充aside的内容 as
  • 大事件项目07----10,11,12未录

    1 如果三方jar包对应的对象 2 来自第三方 是无法用 Component及衍生注解生命bean的 3 使用Maven命令 引入jar包 4 这里我们准备了jar包 也提前准备好了jar包的脚本 5 通过本地的方式来安装maven的坐标
  • Vue学习之watch侦听器:案例实现翻译功能

    watch侦听器 作用 监视数据的变化 当数据发生变化时 执行一些业务逻辑或者是异步操作 执行的场景例如在线翻译 当文本区域的内容发生变化时 会发生翻译内容的同时更新 语法 简单的写法 简单数据类型 可以直接的进行监听 完整的写法 添加额外
  • Vue3+Echarts:堆积柱状图的绘制

    一 需求 在Vue3项目中 想用Echarts来绘制堆积柱状图 去展示最近一周APP在不同渠道的登录人数 效果如下 二 实现 关于Echarts的下载安装以及图表的样式设计 此处不展开 1 Templates部分
  • 【vue】$bus 跨组件调用方法

    1 新建bus js import Vue from vue 使用 Event Bus const bus new Vue export default bus 2 main js引用 import bus from libs bus Vu
  • vue项目日期处理day.js

    dayjs安装 1 npm 安装 npm install dayjs save 2 项目使用 import dayjs from dayjs ES 2015 dayjs format 使用介绍 1 秒 获取或设置秒 接受0到59的数字 如果
  • vue中的防抖和节流

    在Vue中 防抖和节流是两种常用的优化技术 用于限制事件的触发频率 以提高页面性能 防抖 Debounce 是指在事件被触发后 等待一段时间后再执行回调函数 如果在这段等待时间内 事件又被触发 则重新计时 防抖通常用于限制重复触发频率较高的
  • ❤ Vue3 使用

    Vue3 使用 Vue3之toRefs的使用 作用 toRefs 可以将一个响应式的对象 转换成普通对象 但是转换后的普通对象的每一个属性值都是响应式的 这样我们可以使用es6的对象解构或者三点运算符等操作 代码

随机推荐

  • 如何构建LAMP平台:Apache,MySQL,PHP

    如何构建LAMP平台 Apache MySQL PHP 一 Apache网站服务 1 Apache的起源 多系统兼容 2 重要特点 3 软件版本 4 编译安装呢http服务器 二 LAMP简介与概述 1 LAMP平台概述 2 构建LAMP平
  • Windows 常用命令-开启多核处理器

    如何进入命令行窗口 方法一 Win S 打开windows搜索框 输入cmd即可 即打开命令提示符 方法二 Win R 输入 cmd 即可 文章目录 常用命令 查看Windows电脑CPU核心数 线程数 开启多核处理器多核CPU 提高资源利
  • Google Maps API开发样例一则

    虽然还有一个多月的时间才过圣诞 但我还是早早的给大家送圣诞礼物了 那么圣诞礼物到底是什么呢 就是Google Maps API开发样例一则 不过这个礼物也不算是我送给大家的 而是谷歌地图中国的开发团队送给大家的 因为我也是从他们的Googl
  • 【转载】高速电路之信号完整性设计check list

    高速PCB设计有很多比较考究的点 包括常规的设计要求 信号完整性的要求 电源完整性的要求 EMC的要求 特殊设计要求等等 本文主要是针对高速电路信号总线做了一些比较常规的要求列举了一些检查要点 其实还可以进一步的细化 比如针对1 6mm板厚
  • Springboot集成websocket实时刷新数据大屏,利用quartz做定时处理(数据可视化大屏),亲测可用

    对于实时动态的数据大屏 我们以前一般都是通过ajax定时轮询去更新数据 实现数据的实时性 这样做对服务器是不友好的 长期频繁的请求会造成服务器压力 同样会造成过多不必要的请求 浪费流量和服务器资源 WebSocket工作流程 客户端 浏览器
  • 波士顿房价预测——线性回归模型

    1 案例背景介绍 数据介绍 该数据是UCI ML房价数据集的副本 以下特征是专家得出的影响房价的结果属性 所以可以直接使用 但很多时候需要我们自己去量化特征找出需要的属性 2 处理流程 基本数据处理 数据很规整 没有需要特别处理的 我们确定
  • VPN的搭建与使用--CentOS7.9(OpenVpn环境配置)

    一 VPN概述 OpenVpn VPN是Virtual Private Network 虚拟私人网络 的缩写 它是一种通过公用网络建立安全 加密通信的技术 VPN的主要功能是创建一个虚拟的专用网络 使得用户可以在这个网络中访问外部网络资源
  • 谁说dubbo接口只能Java调用,我用Python也能轻松稿定

    由于公司使用基于Java语言的Dubbo技术栈 而本人对Python技术栈更为熟悉 为了使不懂JAVA代码的同学也能进行Dubbo接口层的测试 总结一个通过python实现dubbo接口调用的实现方案 01 实现原理 根据Dubbo官方文档
  • AI产业链的划分,主要可分为基础层、技术层和应用层

    基础层 基础层又分为数据层和计算能力 数据层像自身能够不断产生数据的Alphago一样 他会自己不断的产生数据和进化它的模型 计算能力就像我之前提到的硬件的加速 神经网络芯片这一类的计算能力提供商 也有做像GPU云计算的开放给创业公司 技术
  • 第二章 Java入门之Java程序初体验

    第二章 Java程序初体验 2 1 Java背景介绍 2 1 1 Java名称的由来 在最初 Java语言是叫做oak 橡树 是因为刚开始公司门口有一颗橡树 所以就叫做橡树 然后发现oak已经被美国橡树公司注册了 就不能再继续使用了 所以需
  • 常用的共识机制

    1 PoW Proof of Work 工作量证明机制 基本原理 这是比特币采用的共识机制 也是最早的 理解起来 很简单 就是 按劳取酬 你付出多少劳动 工作 就会获得多少报酬 比特币等加密货币 在网络世界里 这里的劳动就是你为网络提供的计
  • 将使用idea编写的项目分享到GIT上

    1 注册账户 登录gitee 登录成功后新建一个仓库 点击创建 2 安装git Windows版 Git官网地址 https git scm com downloads下载 具体安装步骤如下 鼠标右击桌面 看到这个Git GUI Here
  • ajax 跨站返回值,跨域AJAX解决方案

    由于浏览器存在同源策略机制 同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性 同源策略的判定规则 如果两个页面拥有相同的协议 端口 和主机 那么这两个页面就属于同一个源 图示例 同源策略判定 png 特别的 由于同源策
  • 常用ARM汇编指令

    空指令 nop nop 传输指令 MOV MOV R1 3 用c表示 r1 3 MOV R1 0X17 r1 0x17 MOV R0 R1 r0 r1 MVN R0 R1 将RO取反给R1 相当于r1 r0 建议赋值时候直接给16进制方便调
  • Python 自定义异常处理Error函数

    usr bin env python coding utf 8 CODEMSG 2000 u True 4000 u 客户上传的文件格式不正确 4010 u 客户上传的文件格式是要求格式以外的文件 4001 u 客户上传的文件列超过1024
  • 计算机二级wps知识点,计算机二级MS office和WPS office如何备考?

    计算机二级MS office和WPS office如何备考 首先IT考试网带大家看下它们的分值是如何设置的 具体来讲 就是单项选择题 20分 含公共基础知识部分10分 文字处理题 word 30分 电子表格题 excel 30分 演示文稿题
  • 有道网页翻译chrome插件---我用过的最好的翻译插件

    大家知道很多优秀计算机的资源和文章都是用英文写的 对于英文不好的人来说 看纯英文的文章会有点吃力 而且会有恐惧感 但是不看些英文的资料 无疑是对外界精彩的思想精华 前沿技术关上了一扇门 之前用过google的网页翻译 虽然很强大 可以翻译多
  • Android13 编译错误汇总

    1 error New setting keys are not allowed 一版是在Settings中添加了新的字段导致的 解决 在你的字段上面加上 SuppressLint NoSettingsProvider 继续编译应该会出现
  • vCloud Suite Deployment---vCloud 部署

    原文 A vCloud Suite environment combines multiple VMware products and allows you to build and operate software defined dat
  • Vue9--render和ref

    render Vue渲染组件的两种形式 1 先注册组件 在Vue实例中通过标签名引用 此时不会覆盖实例控制区域 2 注册组件 在Vue实例中通过render方法渲染 此时会覆盖实例控制区域 div dddsfsfgdsfggs div