vue 中的el诞生的时机和内容

最新推荐文章于 2025-01-29 00:02:38 发布
原创 最新推荐文章于 2025-01-29 00:02:38 发布 · 818 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#el

本文深入探讨了Vue.js中组件的生命周期，特别是在beforeMount阶段前Vue如何处理未声明的EL属性。文章指出，在此阶段前，EL将显示为空值，而在后续的生命周期中，Vue会自动将整个组件的HTML内容视为EL，但不包括最外层的template标签。

1. 时机   （可以看出来在beforeMount 之前，vue会看看有没有el，所以在create 打印el是空值，只能在之后的生命周期中获取）

2. 内容：还是如上图，没有在组件中没有声明el，会自动执行vm.smount(el);会自动的把你本组件的全部的html作为el，除了最外层的template。

Vue中的el是什么简写？
PixelNinja的博客
09-29 1191
el是Vue中用于指定Vue实例要挂载的HTML元素的选项。通过指定el，我们可以告诉Vue在哪个DOM元素中渲染和管理Vue实例。在Vue中，el是一个缩写，表示"element"（元素）的意思。el的值可以是一个CSS选择器字符串，它指定了我们想要将Vue实例挂载到哪个DOM元素上。一旦Vue实例被挂载到指定的元素上，Vue会控制该元素及其子元素，并将其转换为Vue组件。在上面的示例中，我们创建了一个Vue实例并将其挂载到id为"app"的元素上。方法手动将Vue实例挂载到指定的元素上。
前端-Vue生命周期
qq_59946873的博客
07-27 347
Vue 实例有⼀个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期。 1. beforeCreate（创建之前） 数据观测和初始化事件还未开始，此时 data 的响应式追踪、event/watcher 都还没有被设置，也就是说不能访问到data、computed、watch、methods上的方法和数据。 2. created（创建后） 实例创建完成，实例上配...
Vue 基础
Zhangzhang15的博客
08-16 1116
Vue 基础
Vue（数据绑定、el和data多种写法、理解MVVM、数据代理）
weixin_57920269的博客
04-23 1311
get() {},},});
vue中el解析
zhangfeng1742的专栏
10-09 3万+
  vue官方API文档中，对el有如下描述： https://cn.vuejs.org/v2/api/#el el 的作用大家都知道，用于指明 Vue 实例的挂载目标。我们重点关注上面两个红色叹号部分，总结一下就是：如果存在 render 函数或 template 属性，则挂载元素会被 Vue 生成的 DOM 替换；否则，挂载元素所在的 HTML 会被提取出来用作模版   &lt...
VUE 学习之 el
liubangbo的专栏
07-17 4063
百度了一下： 为实例提供挂载元素。值可以是 CSS 选择符，或实际 HTML 元素，或返回 HTML 元素的函数 说是官网上也有介绍。目前先这么理解着。 <!DOCTYPE html> <html> <head> <title>VUE hello world</title> <script src="htt...
vue基础用法&基础原理整理
热门推荐
hangao233的博客
04-06 7万+
vue基础用法&基础原理整理 1. vue基础知识和原理 1.1 初识Vue 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象 demo容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法 demo容器里的代码被称为【Vue模板】 Vue实例和容器是一一对应的 真实开发中只有一个Vue实例，并且会配合着组件一起使用 {{xxx}}是Vue的语法：插值表达式，{{xxx}}可以读取到data中的所有属性 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新
vue_t_v14
l1029455098的博客
03-21 3024
vue
【学习笔记】前端（I）—— Vue2（Ⅰ）
Eddie_hyh的博客
04-30 1231
前端第一部分：Vue（Ⅰ）
Vue基础6天实施笔记
weixin_44867717的博客
02-09 2084
Vue 基础课程 课程介绍 Vue基础语法 指令、过滤器、按键修饰符、生命周期、自定义指令、computed计算属性、watch监听器 axios、ES6模块化、组件、vue单文件组件、WebStorage SPA单页应用、router路由、Promise VueCLI脚手架、element-ui组件库、eslint代码规范检测等等 vue介绍 三大前端框架 Vue Vue.js (view)是一...
Vue.js实例学习：watch与computed
若水弹丸之地
02-16 3373
watch：监视单个属性 computed：监视多个属性 注：v-model是双向绑定数据，但并未将数据与方法挂钩；为了解决这个问题，watch与computed诞生了。 一、watch watch是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。 由于watch监视...
Vue中el是什么
qq_42931285的博客
03-16 2642
Vue中el是什么
关于vue中的el属性
moon_zq的博客
03-21 650
el是vue中的一个重要属性，存在于根实例或者需要被挂载的父组件中，用于指定vue实例将要管理的DOM元素。这意味着当我们创建vue的根实例时，我们可以通过el属性来告诉vue哪个DOM元素应该被实例接管。
vue中的el是指什么
最新发布
2301_80484340的博客
01-29 1814
具体来说，el是一个选项，用于指定Vue实例应该挂载到哪个DOM元素上。通过这个选项，Vue可以知道应该从哪个元素开始进行模板编译和渲染。它可以是一个CSS选择器字符串，也可以是一个直接的DOM元素。el是Vue实例的一个选项，用于指定Vue实例应该挂载到哪个DOM元素上。
Vue之el，data
浩泽学编程的博客
05-23 524
Vue内的el，data属性（1）el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串（而这里所谓的容器就是带有id选择器的div的DOM对象，当然也可以用其他选择器）（2）Vue要想工作，肯定要实例一个Vue对象，且传入一个配置对象，而这个配置对象就是要制定的容器，这个对象配置也就是挂载，挂载之后Vue对象就可以和容器相关联（3）data用于储存数据，数据供el所指定的容器去使用。
Vue-$el属性
qq_37581764的博客
10-30 2410
Vue.js自定义指令可以用于扩展HTML元素功能，其中用到了$el属性。el.focus();});$el提供了一种在Vue中直接操作DOM元素的途径。但实际开发中，要谨慎使用$el属性，避免过度依赖$el破坏Vue.js数据驱动的优势。充分利用$el属性的强大功能，结合Vue.js其他API，构建更加灵活高效的Vue.js应用程序。
Vue中el的理解
dongnihao的博客
10-12 1万+
Vue中的el，称之为挂载点。原理来自于：MVC架构中，使用一个标签当做容器包住一些标签，使得标签被重新渲染，同时保留一些必要的属性。 <body id="body"> {{ message }} <h2 id="app" class="app"> {{ message }} <span> {{ message }} </span> </h2> <!-- 开发环境版本，包含了有帮助的命令行警告 -->
vue-el：主题
洪君的博客
05-25 344
npm install sass-loader -D npm install node-sass -D
简单说说vue中的el属性
Goooo
01-23 2万+
每个vue2.0项目中我们都会看到入口文件(即main.js)中，在生成根实例时会配置el属性，而我们自己创建的组件中则不能配置该属性，下面引用了官方文档中对el属性的说明： el 类型：string | Element 限制：只在用new创建实例时生效。 详细： 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。 在实例挂载之后，元素可以用vm.$el访问。 如果在实例...
Vue2中el-tabs动态排序功能实现指南
4. 确保在数据数组更新后，被移动的标签页能够记住其之前的内容和状态，以便在新位置正确显示。 具体实现时，我们可以在Vue组件的methods对象中定义移动标签页的方法，例如： ```javascript methods: { moveTab...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值