Vue中el的两种写法

大家好我是前端寄术区博主PleaSure乐事。今天了解到了Vue当中有关el的两种写法,记录下来与大家分享,希望对大家有所帮助。


方法一

解释

第一种方法我们直接用new创建并初始化一个新的 Vue 实例,并定义了 Vue 实例的数据对象,在给出的例子当中我们将message的值指定为pleasure。当message数据改变时,Vue 将自动更新页面上与这些数据相关的元素。比如我改成csdn,那么在网页中也会将显示hello,csdn的字样。

在Vue实例的构造函数中直接指定el选项时,Vue会在实例创建完成后立即查找并挂载到指定的Dom元素上。这种方式简洁明了,适用于大多数情况,特别是在单页面应用(SPA)中

代码与效果

<body><div id="root"><h1>hello,{{message}}</h1></div><script src="node_modules/vue/dist/vue.js"></script><script>new Vue({el:'#root',data(){return {message:'pleasure'}}})</script>
</body>

方法二

解释

如果我们不使用el与new的vue实例进行配合,那么我们应该怎么做呢?此时如果我们删除el,会出现这样的效果:

此时我们就需要拿出mount方法进行对el的等效替代。使用mount方法允许延迟挂载 Vue 实例。这意味着可以在实例创建之后,根据应用的逻辑或条件来决定何时以及挂载到何处。代码实例如下:

代码与效果

<body><div id="root"><h1>hello,{{message}}</h1></div><script src="node_modules/vue/dist/vue.js"></script><script>const v = new Vue({//el:'#root',data(){return {message:'pleasure'}}})v.$mount('#root')</script>
</body>

使用mount方法可以在以下方面提供更多优势:

  1. 动态决定挂载点:如果挂载点是动态生成的或是依赖于某些条件,使用mount可以提供更多的灵活性。
  2. 异步加载或延迟加载:在某些情况下,你可能希望等到某些异步操作完成后再挂载实例,比如数据预加载完成,或者在服务器端渲染(SSR)环境中,等待服务器响应后再挂载到客户端。
  3. 可复用的组件:如果你正在开发一个可复用的 Vue 组件,使用mount可以让使用者决定如何以及何时挂载这个组件。

此时我们甚至可以配合其他代码进行书写,比如我们可以让代码延迟1秒再发生,如下:

    <script>const v = new Vue({//el:'#root',data(){return {message:'pleasure'}}})setTimeout(()=>{v.$mount('#root')},1000)</script>

这样,代码在1秒后才会显示pleasure,而非一开始就直接显示pleasure。


今天对vue当中el的两种书写方式的分享就到这里,希望对大家有所帮助,如果对您有帮助,希望您可以留下点赞投币与收藏,这对我真的很重要,非常感谢!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/875301.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mac大文件清理软件哪个好 mac大文件怎么清理 苹果电脑清理软件推荐免费

mac采用固态硬盘技术&#xff0c;数据存储和系统响应速度优势明显&#xff0c;但是mac的内存弊端同样体现在其固态硬盘的技术&#xff0c;导致用户无法通过机械硬盘进行扩充内存。而我们日常使用电脑会产生大量系统垃圾、用户缓存等文件&#xff0c;平时下载的电影和大型游戏安…

前端:Vue学习 - 购物车项目

前端&#xff1a;Vue学习 - 购物车项目 1. json-server&#xff0c;生成后端接口2. 购物车项目 - 实现效果3. 参考代码 - Vuex 1. json-server&#xff0c;生成后端接口 全局安装json-server&#xff0c;json-server官网为&#xff1a;json-server npm install json-server -…

基于毫米波生物感知雷达+STM32设计的独居老人居家监护系统(微信小程序)(192)

基于毫米波生物感知雷达设计的独居老人居家监护系统(微信小程序)(192) 文章目录 一、前言1.1 项目介绍【1】项目功能介绍【2】项目硬件模块组成1.2 设计思路【1】整体设计思路【2】60G毫米波生物感知雷达原理【3】ESP8266模块配置【4】供电方式1.3 项目开发背景【1】选题的意义…

增材制造与智能制造关系

在撰写的增材制造技术与装备书籍中有着明确的描述&#xff0c;增材制造是智能制造的典型范例&#xff0c;是智能制造“类”的实例化过程。这种借助于计算机编程面向对象思想的解释可以更全面的理解增材制造和智能制造的关系。增材制造实例具备了智能制造类的属性&#xff0c;智…

钉钉 ai卡片 stream模式联调

sdk连接 新建卡片模板下载node.js sdkconfig.json 配置应用信息 启动项目npm i npm run build npm run start连接成功 获取卡片回调 注册卡片回调事件调用https://api.dingtalk.com/v1.0/card/instances 创建卡片实例&#xff0c;返回实例Id //参数结构 {"cardTempla…

【STM32】当按键具有上拉电阻时GPIO应该配置什么模式?怎么用按键去控制LED翻转?

当按键具有上拉电阻时&#xff0c;可以通过正确配置STM32的GPIO端口和编写相应的控制代码来实现按键控制LED灯的功能。具体来说&#xff0c;需要配置按键所连接的GPIO端口为输入模式&#xff0c;并启用内部上拉电阻&#xff0c;这样在按键未操作时该端口保持高电平状态&#xf…

Redis 7.x 系列【30】集群管理命令

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Redis 版本 7.2.5 源码地址&#xff1a;https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 概述2. 集群信息2.1 CLUSTER INFO 3. 节点管理3.1 CLUSTER MYID3.2 CLUSTER NODES3…

LC617-合并二叉树

文章目录 1 题目描述2 思路优化代码完整输入输出 参考 1 题目描述 https://leetcode.cn/problems/merge-two-binary-trees/description/ 给你两棵二叉树&#xff1a; root1 和 root2 。 将其中一棵覆盖到另一棵之上时&#xff0c;两棵树上的一些节点将会重叠&#xff08;而另…

mysql设置root密码

mysql设置root密码 在MySQL中设置root用户的密码可以通过几个简单的步骤完成。以下是在已经安装并启动MySQL的情况下如何设置root密码的方法: 1. 登录到MySQL服务器 首先,使用以下命令以root身份登录到MySQL服务器。系统会提示你输入密码,如果是第一次登录或者还没有设置…

sql 常用建表脚本

建表 CREATE TABLE your_table (id INT PRIMARY KEY AUTO_INCREMENT,name VARCHAR(255),remark remark TEXT,created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ); 已有表添加字段 ALTER TABLE y…

数据结构排序合集(笔记)

目录 一.插入排序与希尔排序 二.选择排序与堆排序 三.冒泡排序和快速排序 四.归并排序 五.计数排序 一.插入排序与希尔排序 时间复杂度空间复杂度稳定性插入排序O&#xff08;N^2&#xff09;O(1)稳定希尔排序O(N^1.3)O(1)不稳定 插入排序&#xff1a; 希尔排序&#xff…

报红:找不到名称ref ts(2304)、‘ref‘ is not defined. eslint(no-undef)

接上篇 在上篇介绍了使用 unplugin-auto-import 和 unplugin-vue-components 配置完成后&#xff0c;项目可以正常运行&#xff0c;并且页面也正常显示&#xff0c;但vscode里就是报红 这个报红可能是由于 ts 发出的&#xff0c;也可能是由于 eslint 发出的 具体可以用鼠标…

打卡第22天------回溯算法

开始学习了,希望我可以尽快成功上岸! 一、回溯理论基础 什么是回溯法?回溯法也可以叫做回溯搜索法,它是一种搜索的方式。 回溯是递归的副产品,只要有递归就会有回溯。 回溯法的效率回溯法的本质是穷举,穷举所有可能,然后找出我们想要的答案。如果想让回溯法高效一些,可…

Docker-Compose实现MySQL之主从复制

1. 主服务器(IP:192.168.186.77) 1.1 docker-compose.yml services:mysql-master:image: mysql:latest # 使用最新版本的 MySQL 镜像container_name: mysql-master # 容器的名称environment:MYSQL_ROOT_PASSWORD: 123456 # MySQL root 用户的密码MYSQL_DATABASE: masterd…

我用Tauri开发的待办效率工具开源了!

开源仓库地址 gitee Git仓库地址:https://gitee.com/zhanhongzhu/zhanhongzhu.git 应用地址 windows应用地址下载 https://kestrel-task.cn 具体内容 也可以看&#x1f389;使用Taurivitekoa2mysql开发了一款待办效率应用 这篇文章。 &#x1f4bb;技术栈 Tauri: Tauri…

传统自然语言处理(NLP)与大规模语言模型(LLM)详解

自然语言处理&#xff08;NLP&#xff09;和大规模语言模型&#xff08;LLM&#xff09;是理解和生成人类语言的两种主要方法。本文将介绍传统NLP和LLM的介绍、运行步骤以及它们之间的比较&#xff0c;帮助新手了解这两个领域的基础知识。 传统自然语言处理&#xff08;NLP&…

Angular中component和directive的区别?

在Angular中&#xff0c;Component和Directive都是重要的构建块&#xff0c;用于构建和组织应用程序的UI。然而&#xff0c;它们有不同的用途和特点。以下是Component和Directive的主要区别&#xff1a; Component&#xff08;组件&#xff09; 1、定义&#xff1a;Component…

采集PCM,将base64片段转换为wav音频文件

需求 开始录音——监听录音数据——结束录音 在监听录音数据过程中&#xff1a;客户端每100ms给前端传输一次数据&#xff08;pcm数据转成base64&#xff09;&#xff0c;前端需要将base64片段解码、合并、添加WAV头、转成File、上传到 OSS之后将 url 给到服务端处理。 {num…

Redis分布式系统中的主从复制

本篇文章主要对Redis的主从复制进行讲解。主要分析复制的原理&#xff0c;包括:建立复制、全量复制、部分复制、全量复制、心跳检测等。希望本篇文章会对你有所帮助。 文章目录 一、主从复制简介 二、配置主从复制模式 断开主从复制 安全性 只读 传输延迟 三、拓扑结构 四、主…

【git】太大了失败: fatal: fetch-pack: invalid index-pack output

#‘’ Git仓库过大致使clone失败的解决方法 上述大神的方法&#xff0c;亲测有效 中途失败: 太大了 fetch-pack: unexpected disconnect while reading sideband packet fatal: early EOF fatal: fetch-pack: invalid index-pack output关闭压缩 git config --global core.…