Vue | 04.Vue基础 - el挂载点

最新推荐文章于 2024-04-01 20:01:21 发布
最新推荐文章于 2024-04-01 20:01:21 发布
阅读量1.4k 收藏 7
点赞数 2
分类专栏： Vue 文章标签： vue.js css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xyxyxyxyxyxyx/article/details/120500210
版权

文章目录

1.概述

  • el属性设置Vue对象挂载(管理)的元素
  • Vue对象的作用范围是 挂载的元素及其子元素
  • 如果有多个符合挂载范围的元素，则只会挂载在第一个元素
  • el属性可以使用任意的选择器，但最推荐使用ID选择器(因为只会挂载在第一个元素上，因此ID选择器是最合适的)
  • Vue对象可挂载到除<body>和<html>外的任意双标签

2.何为el(挂载点)？

通过css选择器，设置Vue对象管理(挂载)的元素。以下方代码为例：

<script type="text/javascript">
    let a = new Vue({
       el: ".input",
       data: {
           message: "hello world"
       }
    });
</script>

css选择器定义，".input"将会命中类名为"input"的元素，因此此Vue对象管理(挂载)的元素是类名为"input"的元素

3.Vue对象的作用范围

Vue对象的作用范围，是el命中的元素及其子元素

image-20210918001412073

如上图所示，假设el的值为"#app"，将命中id为"app"的标签

则元素内部以及子标签中的{{message}}都会被渲染

image-20210918001656281

需要注意的是，Vue对象不可挂载到<body>和<html>上，不然会在console中报错

image-20210918002004332

xyx-Eshang
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Learning.Vue.js.2.2016.12.pdf
06-07
Learning.Vue.js.2.2016.12.pdf
vue.js基础第一节笔记
06-08
1.vue挂载点作用 2.{{a}} 插值表达式 3.el属性 4.data方法
vue中的.$mount(#app)手动挂载操作
01-21
在Vue构造函数时，需要配置一个el属性，如果没有没有el属性时，可以使用.$mount(‘#app’)进行挂载。 配置了el属性： new Vue({ el:#app, router }); 如果没有配置el属性，可以使用手动挂载$mount(“#app”) new Vue({ router }).$mount('#app'); var vm = new Vue({ router }); vm.$mount('#app'); 补充知识：Vue手动挂载组件$mount()，实现js插入组件，替换组件 项目中有时候用到需要再页面中使用js插入一个vue组件，这时候就用到vue的
【ElementUI】详细分析DatePicker 日期选择器
最新发布
码农研究僧的博客
04-01 3724
实战结合Element官网的心得体会
vue3.x中使用cesium，vue3.x+Cesium
05-04
在vue3.x版本中使用cesium，基于vue-cli创建项目，手动配置webpack，资源已配置好，下载完 进入项目下npm install 安装依赖后就可以运行了
Pro Vue.js 2(pdf英文原版-2018版)
09-13
Explore Vue.js to take advantage of the capabilities of modern browsers and devices using the fastest-growing framework for building dynamic JavaScript applications. You will work with the power of the Model-View-Controller (MVC) pattern on the client, creating a strong foundation for complex and rich web apps. Best-selling author Adam Freeman explains how to get the most from Vue.js 2. He begins by describing the MVC pattern and the benefits it can offer. He then shows you how to use Vue.js in your projects, starting from the nuts and bolts and building up to the most advanced and sophisticated features, going in-depth to give you the knowledge you need. Chapters include common problems and how to avoid them. What You’ll Learn Gain a solid architectural understanding of the MVC pattern Create rich and dynamic web app clients using Vue.js 2 Extend and customize Vue.js Test your Vue.js projects Who This Book Is For JavaScript developers who want to use Vue.js to create dynamic client-side applications
实例化Vue时的两种挂载方式el与$mount
你若盛开，清风自来
12-17 2825
el 与mount 都是挂载。 选项 / DOM el 类型：string | Element 限制：只在用 new 创建实例时生效。 详细： 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。 在实例挂载之后，元素可以用 vm.$el 访问。 如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显...
Vue学习之el挂载点详解
Code皮皮虾的博客
09-12 4404
文章目录1、Vue实例的作用范围2、el是否可以使用其他选择器3、能否设置其他的dom元素 1、Vue实例的作用范围 Vue会管理el选项命中的元素及其内部的后代元素 2、el是否可以使用其他选择器 目前使用的是id选择器 使用class选择器 可以使用class选择器 使用标签选择器 注意：使用标签选择器，如果存在多个相同的标签，则只会匹配第一个，示例如下： 建议使用id选择器 3、能否设置其他的dom元素 使用h2标签 使用span标签 注意：只能支持双
vue实现两个el-select下拉框联动效果
qiqisix的博客
05-27 3661
只有一个list，多数文章中都是两个list实现联动。
在一个html网页中挂载两个vue对象
cm159177的博客
07-30 1680
在一个html网页中挂载两个vue对象，代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="test1">{{msg1}}</div> <div id="test2">{{msg2}}</div
vue el挂载点
qq_40687516的博客
02-19 339
vue实例的作用范围？ el命中的元素以及其后代元素 是否可以使用其他选择器 可以，但是建议用id 是否可以设置其他的dom元素 可以设置除html和body以外的双标签 ...
Vue.js v2.x 官方教程.pdf
04-20
Vue.js v2.x 官方教程.pdf
vue中使用的threebsp.zip
12-03
在vue中使用的网格对象操作函数库threebsp.js,以实现网对象的相交intersect、联合union、相减subtract
过滤器vue.filters的使用方法实现
12-13
写项目的时候，有一些方法我们是需要全局使用的，比如数字的四色五入保留小数点啊、一些工具方法、字符的格式化啊等等。这些很多页面需要用的、使用频率极高的方法，我们一般会将其封装为全局的方法；我以前是这样做的，有这么几种方式： 1、挂载到vue.prototype 在main.js入口文件中挂载到vue.prototype，如我们封装一个获取时间戳的函数。 Vue.prototype.now = Date.now || function () { return new Date().getTime(); }; 然后就可以在.vue页面中使用了 [removed] export de
vue项目main.js使用方法
01-21
解析 src/main.js是入口文件，主要作用是初始化vue实例并使用需要的插件 在main.js文件中定义了一个vue对象,其中el为实例提供挂载元素 //基础设置 import Vue from ‘vue' //引入路由和vuex import router from './router' import store from './store/store’ import App from './App' //实例化一个Vue，挂载到id为app的div里面，这个vue实例有个局部组件App new Vue({ el: '#app’, router, store,
vue 页面使用两套el-form表单并且嵌套使用el-checkbox
m0_60907575的博客
11-04 1381
vue 页面使用两套el-form表单并且嵌套使用el-checkbox
一个 Vue 模板可以有多个根节点(Fragments)?
高先生的猫
07-29 3107
如果我们试图创建一个没有根节点的vue模板，比如这样： <template> <div>Node 1</div> <div>Node 2</div> </template> 我们就会收到编译或运行时错误，因为模板必须具有单个根元素。 通常，我们通过在最外层包裹一层div来解决这个问题，但这个div元素一般没有啥使用，就是让模板符合单根需求。 <template> <div><!-..
Vue笔记_挂载点(el+$mount)
qq_43260366的博客
09-17 1254
​ 在Vue中不再和HTML直接进行交互了，而是将其挂载到DOM元素上,当数据发生变化的时候 数据变化->操作DOM->更改数据，但是操作DOM->更改数据是通过Vue内部 虚拟DOM 完成的，表现是数据驱动视图改变！// [2]没有设置挂载点，vue不知道将数据渲染到哪个视图上，将插值语法按照普通文本显示。2）若是希望data中的数据能够对多个元素生效，可以将vue实例挂载到父元素上；// [1]此时由于挂载点选择多个HTML元素，则只会对第一个元素生效；
修改element-ui中时间选择器的样式
夏夏
06-07 3912
element中的样式是人家封装好的，有时候改了是不生效的，常用的两种方式： 1.定义在自己的样式下进行修改，stylelang="scss"scoped
vue.extend el-tab
10-11
`vue.extend` 是 Vue.js 提供的一个扩展组件的 API，可以用来创建一个可复用的组件构造器。`el-tab` 可能是一个自定义组件的名称，我不确定具体的含义。 一般来说，我们使用 `vue.extend` 来创建一个组件构造器，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值