VUE（3）el 小结

最新推荐文章于 2024-06-09 07:45:01 发布
最新推荐文章于 2024-06-09 07:45:01 发布
阅读量517 收藏
点赞数
分类专栏： web开发 文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_41838539/article/details/104384126
版权

根据vue官方教程与网友资料

el

  • 类型：string | Element

  • 限制：只在用 new 创建实例时生效。

  • 详细：

    提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。

    在实例挂载之后，元素可以用 vm.$el 访问。

    如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。

    重点：

  • 提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到 <html> 或者 <body> 上。

  • 如果 render 函数和 template 属性都不存在，挂载 DOM 元素的 HTML 会被提取出来用作模板，此时，必须使用 Runtime + Compiler 构建的 Vue 库。

番茄啊土豆给出了一个示例

相当于原始<div id="ppp"> 被vue生成的 APP 替换.

来源：

API — Vue.js

vue中el解析_zhangfeng1742的专栏-CSDN博客_vue的el

JonesZon
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue.js入门教程之基础语法小结
12-28
前言 Vue.js是一个数据驱动的web界面库。Vue.js只聚焦于视图层，可以很容易的和其他库整合。... el: '#demo', data: { message: 'Hello Vue.js!' } }) vue.js的基础语法 插入文本 <span>Message: {{
vue+element项目中过滤输入框特殊字符小结
12-08
Vue.prototype.validSe = function (value, number = 255) { value = value.replace(/[`～*~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%&hellip;&hellip;&*（）——\-+={}|《》？：“”【】、；‘'，。、]/g, '').replace...
Vue基础3——el与data写法和MVVM
qq_52983897的博客
09-09 584
b.先创建Vue实例，随后通过vm.$mount(“root”)指定的el的值。注意：由Vue管理的函数，不要写箭头函数，否则this就不再是Vue的实例了。b.函数式：data（）{return{}}a.创建Vue实例对象的时候配置el属性。组件data必须使用函数，否则会报错。a.对象式：data：{ }1.el与data的两种写法。
vue3 使用ref 获取真实dom的方法ele.value.$el
qq_17335549的博客
08-16 582
普通标签: ele.value组件: ele.value.$el
一文掌握Vue3：深度解读Vue3新特性、Vue2与Vue3核心差异以及Vue2到Vue3转型迭代迁移重点梳理与实战
最新发布
JINGWHALE
06-09 1190
每次技术革新均推动着应用性能与开发体验的提升。本文深度解读Vue3 响应式数据data、生命周期钩子、计算属性computed、监听watch、模板语法、指令、事件处理、组件注册、Props、emits、Mixins等新特性、Vue2与Vue3核心差异以及Vue2到Vue3转型迭代迁移重点梳理。Vue3 的迭代进步体现在性能优化、API重构与增强型TypeScript支持等方面，从而实现更高效开发、更优运行表现，促使升级成为保持竞争力与跟进现代前端趋势的必然选择。
vue2升级vue3：getCurrentInstance—Composition api/hooks中如何获取$el
周陆军的博客，分享it技术。
01-25 2760
Vue3 x中的核心方法：getCurrentInstance，用于 获取当前组件的实例、上下文来操作router和vuex等。
VUE中$refs和$el的使用
小太阳的博客
08-12 6655
ref: 给元素或者子组件注册引用信息 ref有三种用法： 1.ref加在普通元素上，获取用this.$ref.xxx可以获取到dom元素。 <div ref="system">测试</div> // 获取 mounted() { console.log(this.$refs.system); } 2.ref加在子组件上，用this.$ref.xxx可以获取到组件实例，可以使用子组件的所有方法。 使用： // this.$ref.xxx.方法名() // 父组件 <con
Vue3 基本语法
二哈喇子！
07-12 1158
MVVM框架、文本渲染指令 v-text、属性绑定指令:、条件渲染指令、事件绑定 @事件名、循环遍历指令
Vue.directive 自定义指令的问题小结
12-28
1.今天复习一下Vue自定义指令的代码，结果出现一个很无语的结果，先贴代码。 2. <div id=example v-change-by=myColor></div> [removed][removed] [removed] new Vue({ el:#example, data:{ msg:, myColor:#...
Vue中jsx不完全应用指南小结
12-13
Vue CLI 3.x版本默认已经集成了Babel，因此可以通过修改`.babelrc`或`babel.config.js`文件来启用JSX支持： ```json { "presets": [ "@vue/app" ], "plugins": [ "@vue/babel-plugin-jsx" ] } ``` 基础用法...
vue各种事件监听实例(小结)
12-28
计算属性的Get方法和...vue小练习</title> </head> <body> <a>{{name}} </body> </html> [removed][removed] [removed] let app = new Vue({ el: '#calc' ,data: { counter:0
前端VUE3.0,DAY5，el和data的两种写法。
疯子的梦想@的博客
08-03 791
VUE3.0,DAY5el第一种写法el第二种写法data第一种写法data第二种写法总结 el第一种写法 1.建好基本框架代码，包括引入vue和创建vue实例。这里的代码实际效果如下图所示，是在网页中显示“您好，哈哈”。此种方式是通过el与div容器内的内容建立联结。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-U
vue3 中如何像 vue2 的 extend 一样挂载未挂载的组件，拿到标签本身（$el）
热门推荐
前端开发者
12-01 2万+
vue3 中如何像 vue2 的 extend 一样挂载未挂载的组件，拿到标签本身（$el） 简介：最近在用 vue3 写个新项目，需要挂载自定义的组件，但是发现 vue3 中不再支持 extend 方法了，于是查看了 vant 最新的源码，发现里面类似实现，特此提炼总结出来。 1.vue2 写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <met
Vue2 + Vue3学习笔记（四）el和data的两种写法
qq_41867900的博客
11-29 713
el和data的两种写法，以及注意事项
vue中$el等属性
qq_42526440的博客
11-24 702
属性: vm.$el 获取Vue实例关联的DOM元素 vm.$data 获取Vue实例的data选项（对象） options获取Vue实例的自定义属性（如vm.options 获取Vue实例的自定义属性（如vm.options获取Vue实例的自定义属性（如vm.options.methods,获取Vue实例的自定义属性methods） vm.refs获取页面中所有含有ref属性的DOM元素（如vm.refs 获取页面中所有含有ref属性的DOM元素（如vm.refs获取页面中所有含有ref属性的DOM元素（
Vue3与Element-plus整合及项目实战
sinat_30844883的博客
05-14 7273
Element-plus简介是ElementUI的升级版，是一套基于vue2与vue3的桌面端组件库，它提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的前端页面。
【Vue】全套$...方法使用
qq_45677671的博客
07-25 2066
文章目录一、事件监听事件：$on监听一次：$once移除监听：$off触发事件：$emit二、数据监听数据：$watch添加数据：$set删除数据：$delete三、生命周期手动挂载：$mount()强制渲染：$forceUpdate()延迟更新：$nextTick()销毁实例：$destroy()四、属性根元素：$el根属性：$root父组件：$parent子组件：$children各组件：$refs各配置：$options() 一、事件 监听事件：$on $on：监听当前实例上的自定义事件。 事件可以
vue3 中通过$refs 获取子组件数据
weixin_52688746的博客
06-25 3993
vue2 中获取子组件中的数据方法，可以使用 $refs ，但此方式在vue3中不适用了。 问题： 点击删除行的同时修改表格中数据选中状态，需要通过 refs 操作表格中的数据。 具体代码如下：
vue 手动挂载$mount() 获取 $el
dicha7140的博客
02-07 347
手动挂载$mount() 如果没有挂载的话，没有关联的 DOM 元素。是获取不到$el的。 https://vuejs.org/v2/api/#vm-mount var MyComponent = Vue.extend({ template: '<div>Hello!</div>' }) // create and mount to #ap...
vue3 el-menurouter
05-23
Vue 3 是目前 Vue.js 的最新版本，它引入了许多新特性和改进。其中，Vue 3 中的 el-menu-router 是一个非常实用的组件，它可以让我们更方便地实现页面导航和菜单展示。el-menu-router 是一个基于 Vue.js 和 ElementUI 的组件，可以将路由和菜单栏结合起来，让用户可以通过菜单栏来切换不同的页面。 具体来说，el-menu-router 组件可以实现以下功能： 1. 根据路由配置自动生成菜单栏。 2. 点击菜单栏可以实现路由跳转。 3. 支持多级菜单的展示。 4. 可以通过配置实现菜单栏的样式和布局。 在 Vue 3 中，el-menu-router 组件的使用方式与 Vue 2.x 版本中的 el-menu 组件类似，但有些细节上的变化需要注意。如果您需要了解更多关于 el-menu-router 组件的信息，可以查看 ElementUI 的官方文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值