一、Vue基础——el挂载点（2)

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

#vue.js

本文详细讲解了Vue实例的作用域，如何管理元素，以及el选择器的不同用法，包括ID选择器、class选择器和div选择器。特别强调了使用ID选择器的建议，并指出除了body和html外，其他DOM元素的选择可能性。

1、Vue实例的作用范围

        1）、Vue会管理el选项命中的元素：

                

 

        2）、el选项命中内部的后代元素：

 

2、el除了id选择器还可以使用其他选择器

建议使用id选择器

1）、class选择器：

 

2）、div选择器：

 

3、是否可以设置其他的dom元素——可以使用其他双标签，但body和html除外

Vue的入门学习
卓汶的博客
09-10 726
1、Vue是JavaScript框架 2、简化DOM操作 3、响应式的数据驱动（当数据改变，页面也会同步更新）1、导入Vue的CDN 2、创建Vue实例对象，设置el属性和data属性 3、使用模板语法将数据渲染到页面上 el属性：设置挂载点 通过CSS选择器，设置Vue实例管理的元素。设置之后，被el命中的元素内部使用两个大括号 {{}} 修饰的部分，会被data中同名的数据说替换Vue的作用范围是el所挂载的标签内部el挂载不仅可以使用id选择器，而也可以使用其他选择器，但是建议使用id选择器，因为id
vue P2—— el挂载点
肥不溜秋大梅子
05-03 200
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>P2 el挂载点&l...
Vue 源码分析 —— 实例挂载流程
yan__shang的博客
03-02 1180
实例挂载基本流程 Vue 在选项合并完成之后，进行了一系列函数调用，这些函数包括了初始化事件中心、定义渲染函数等等。在 _init 方法的最后，会对象 el 选项进行判断，如果 el 选项存在，则会调用 $mount 方法挂载实例。 /* istanbul ignore else */ if (process.env.NODE_ENV !== 'production') { initProxy(vm) } else { vm._renderProxy = vm } // expose real se
Vue2 ——2. 创建实例
weixin_63215361的博客
07-04 470
methods选项用于定义实例的方法，这些方法可以通过this访问实例的数据和其他方法。< div id = " app " > < p > 计数: {{ count }} </ p > < button @click = " increment " > 增加 </ button > < button @click = " decrement " > 减少 </ button > </ div > < script > new Vue({return {
Vue基础语法——挂载点、模板、实例、插值表达式
weixin_44066534的博客
07-18 302
Vue的基础语法 挂载点：vue实例的挂载点，el属性所对应的id所在的标签，vue只会处理挂载点里面的东西。 模板：写在挂载点里面的内容（也可以现在实例的template属性里面。） 实例：只需要指定挂载点，将模板和数据写上，vue会自带将模板里的东西处理显示在挂载点之中。 上述例子中 vue实例的挂载点为id=root所在的div标签。 template里为模板 data里为数据 插值表达式 插值表达式语法：{{}} 如：<h1>hello {{msg}}</h1>
Vue2 —— 学习（一）
qq_63342197的博客
04-05 2743
一套用于 构建用户界面 的渐进式 JavaScript 框架构建用户界面：把手中的数据变成用户看见的界面渐进式：自底向上逐层的应用，就是如果是简单的程序 只需要一个轻量小型的核心库；复杂应用需要引入各式各样的 Vue 插件。所以就是由小型的库逐步递进到复杂的库，看程序的复杂程度 逐层递进。
Vue基础——自定义指令
蜡笔不新的博客
11-27 443
Vue自定义指令局部和全局注册
（一）Vue基础——快速入门Vue
weixin_45189258的博客
07-02 540
目录 文章目录 前言 一、Vue简介 二、第一个Vue程序 三、el:挂载点 el是用来设置Vue实例挂载（管理）的元素 Vue实例的作用范围是什么？ 是否可以使用其他的选择器？ 是否可以设置其他的Dom元素？ 四、data:数据对象 总结 前言 B站“黑马程序员vue前端基础教程-4小时带你快速入门vue”，学习笔记整理 一、Vue简介 Vue是一个Javascript框架 Vue简化Dom操作 响应式数据驱动（页面由数据生成） 响应式？在浏览器开发者...
【vue3】el-input 的获取焦点——el挂载：自定义指令，focus使 input 获取焦点（el-input 的Input Methods）
清凌的博客
06-03 8840
参考网址： （适用vue2）让element-ui的输入框聚焦的4种方式 ElementUI：使input自动聚焦的两种方法 使el-form中的el-input自动获取焦点 在vue3中，保留了自定义指令的特性——【官网链接】：自定义指令 代码：  注意这里的el需要使用el.children[0].focus();  因为el-input这是个组件，input外面被一层 div 包裹着, el打印出来是外面这个 div，需要找到内层的input 详情见：分析（点击跳转到分析） directives
浅析vue源码—— vue之挂载
qf2019的博客
06-10 207
Vue 中我们是通过 mount实例方法去挂载vm的，mount 实例方法去挂载 vm 的，mount实例方法去挂载vm的，mount 方法在多个文件中都有定义，如 src/platform/web/entry-runtime-with-compiler.js、src/platform/web/runtime/index.js、src/platform/weex/runtime/index.js。因为 $mount 这个方法的实现是和平台、构建方式都相关的。我们在纯前端浏览器环境分析 Vue 的工作原理，有
深入探究 Vue 实例挂载过程与场景 —— 代码实例详解
向着太阳迎着光
11-22 909
Vue 实例的挂载过程分为实例创建、模板编译、渲染虚拟 DOM、挂载到 DOM 和生命周期钩子执行等步骤。单页面应用（SPA）：通常将 Vue 实例挂载到整个页面。按需挂载组件：可以将 Vue 实例挂载到某个特定的 DOM 元素，渲染指定的组件。动态挂载组件：通过条件判断和事件控制动态挂载组件。懒加载和异步组件：通过异步加载组件来优化性能，按需加载。通过这些技术，Vue 提供了强大的灵活性，可以让我们在不同的场景下构建高效、灵活的前端应用。
Vue2+Vue3基础入门到实战项目（一）—— 课程学习笔记
upgrade_bro的博客
08-21 3276
2023新版Vue2+Vue3基础入门到实战项目。Vue快速上手！
Vue2x挂载mountVueextend函数的作用
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
10-05 1216
是两个非常重要的方法，它们在Vue组件的创建与渲染过程中扮演着关键的角色。通过这个函数，我们可以基于现有的Vue构造器创建“子类”，这些“子类”可以拥有自己的属性、方法和生命周期钩子。在开发过程中，保持组件的单一职责原则，每个组件只负责一部分功能，这有助于提高组件的复用率和可测试性。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。当面对复杂的业务逻辑时，建议先评估是否可以通过Vue的内置机制解决问题，然后再考虑使用更底层的方法。
数码商城系统|电子|基于SprinBoot+vue的数码商城系统(源码+数据库+文档)
伟庭的博客
12-02 644
本文介绍了一个基于SpringBoot和Vue.js开发的数码商城系统。系统采用B/S架构，包含前台用户模块（商品浏览、购物车、会员中心）、后台管理模块（用户、商家、商品分类管理）和商家模块（商品发布、抢购活动）。使用MySQL数据库存储数据，Redis缓存高频访问数据，并采用Redisson分布式锁解决抢购超卖问题。系统实现了商品多级分类、动态属性、库存预警等功能，通过定时任务管理活动上下架，集成富文本编辑器支持资讯发布。该系统有效降低了运营成本，提高了电商管理效率。
Vue3常用的组合式API 超详细讲解
只会写bug
12-03 304
Vue3响应式系统核心API解析：ref与reactive的底层原理、使用场景及对比 摘要： Vue3的响应式系统基于Proxy实现，主要提供ref和reactive两个基础API。ref通过包装对象处理基本类型（需.value访问），兼容复杂类型时会自动转为reactive；reactive直接代理对象/数组，支持深层属性响应。两者各有适用场景：ref适合基本类型和需要替换整个对象的场景，reactive适合简单对象操作。此外，computed提供响应式派生值并具有缓存机制。使用时需注意：ref避免直接覆
vue实现页面不断插入内容并且自动滚动功能
weixin_50606255的博客
12-04 102
我们在看视频时经常会看到黑客入侵别人电脑会在屏幕上显示一串代码，并且代码不断插入自动滚动，看起来很厉害的样子，现在就在此纪录实现此功能：
js实现替换输入框中选中的文字
最新发布
h_未来可期_的博客
12-04 115
如果已知一个文本框内输入值，想点击替换掉里面选中的值，可以采用以下方法;
计算机毕业设计|基于springboot + vue零食商城管理系统(源码+数据库+文档)
12-03 333
本文介绍了一个基于SpringBoot+Vue的零食商城管理系统。系统采用前后端分离架构，后端使用SpringBoot框架简化开发流程，前端采用Vue.js实现响应式界面，数据库选用MySQL存储数据。文章详细阐述了系统设计原则、技术选型理由，并提供了代码片段和测试用例参考。此外还包含毕设选题推荐和源码获取方式，适合作为计算机专业毕业设计的参考项目。系统功能完善，技术栈主流，具有实际应用价值。
【Vue知识点总结】Vue2与Vue3中的 v-model
这是个栗子的博客
12-04 16
组件必须接收 value 并在需要更新时触发 input 事件。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值