Vue中el与data的两种写法

news2025/1/23 17:43:18

想必大家对Vue中的el与data并不陌生,接下来,让我为大家介绍一下el与data的两种写法吧!

一、el的两种写法

1.new Vue时候配置e1属性。
2.先创建Vue实例,随后再通过vm.$mount('#root)指定el的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="root">
        <div>我的名字叫{{name}}</div></div>
    </div>
</body>
<script src="../JS/vue.js"></script>
<script>
    Vue.config.productionTip = false
    // el的两种方法
    const vm = new Vue({
        // el的第一种写法
        // el:"#root",
        data:{
            name:"张三"
        }
    })
    // el的第二种写法
    // 使用$mount mount有挂载的意思
    vm.$mount("#root")
</script>
</html>

在这里插入图片描述

二、data的两种写法

1.对象式
2.函数式

    const vm = new Vue({
        el: "#root",
        // 第一种 对象式
        // data:{
        //     name:"张三"
        // }
        // 第二种 函数式
        data() {
            return {
                name: "张三"
            }
        }
    })

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

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

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

相关文章

03.智慧商城——路由配置

01. 路由配置 - 一级路由 但凡是单个页面&#xff0c;独立展示的&#xff0c;都是一级路由 路由设计&#xff1a; 登录页首页架子 首页 - 二级分类页 - 二级购物车 - 二级我的 - 二级 搜索页搜索列表页商品详情页结算支付页我的订单页 router/index.js 配置一级路由&#x…

三种跨域解决方案:HttpClient、注解、网关

注解&#xff1a;CrossOrigin网关整合Httpclient 为什么会有跨域问题 因为浏览器的同源政策&#xff0c;就会产生跨域。比如说发送的异步请求是不同的两个源&#xff0c;就比如是不同的的两个端口或者不同的两个协议或者不同的域名。由于浏览器为了安全考虑&#xff0c;就会产…

systrace分析 之 问题初步定位

2、systrace分析 之 问题初步定位 1、找到问题点2、有buffer&#xff0c;SF却什么没有取 2.1、GPU 处理时间长导致2.2、区分HWC release 是否有异常&#xff1a;2.3、SF 异常导致2.4、SF 自身处理时间长2.5、RenderThread处理时间长3、案例分享 1、找到问题点 2、有buffer&a…

【PHP】医院麻醉临床信息系统源码

麻醉临床信息系统以服务围术期临床业务工作的开展为核心&#xff0c;为医护人员、业务管理人员、院级领导提供流程化、信息化、自动化、智能化的临床业务综合管理平台。 麻醉信息系统处理的数据包含病人的手术信息、麻醉信息、病人手术过程中从监护仪上采集到的数据和病人情况等…

解决STM32F429烧录程序后还需复位才能植入程序的bug

1.打开魔术棒&#xff0c;打开debug 2.打开setting 3.打开Flas Download 4.开启Reset and Run 5.点进去Pack选项页面&#xff0c;去掉enable

合肥数字孪生赋能工业制造,加速推进制造业数字化转型

聚焦国家战略需求和先进制造业发展方向&#xff0c;加快数字化发展战略部署&#xff0c;数字孪生、工业互联网、工业物联网已被广泛认为是工业革命的新引擎。合肥数字孪生正在推动工业制造从制造转向智造。通过数字化建模和仿真的方式&#xff0c;优化设计、生产、质量管理、供…

centos图形化桌面中火狐浏览器无法访问项目页面问题处理

项目场景&#xff1a; 使用centos环境中的火狐浏览器访问项目界面 问题描述&#xff1a; 在客户的demo环境中部署了项目&#xff0c;但是使用机器上自带的火狐浏览器访问界面确实白屏&#xff0c;联系开发同事后认为是浏览器版本的问题。 更新火狐浏览器版本后&#xff0c;问…

Python 3.6.10 中的 requests 库 TLS 1.2 强制使用问题及解决方案

Python 3.6.10中&#xff0c;requests库已经强制使用TLS 1.2协议&#xff0c;不再支持TLS 1.3协议。这一变化可能会导致在使用Python 3.6.10时&#xff0c;与使用TLS 1.3的服务器进行通信时出现问题。为了解决这个问题&#xff0c;我们可以采取一些措施来确保安全且有效的网络通…

寒冬只是表象,网安才是归宿

“简历基本没人看” “已读不回” “简历都没看直接告诉你不合适” “能约面试的很少” 据统计&#xff0c;现在的互联网行业都是上面这几种情况。不仅是今年&#xff0c;这两三年以来&#xff0c;互联网大厂的工作岗位缩减了又缩减&#xff0c;计算机专业的毕业生工作难上加难…

振弦传感器表面应变计与振弦采集仪形成岩土工程监测的解决方案

振弦传感器表面应变计与振弦采集仪形成岩土工程监测的解决方案 振弦传感器表面应变计与振弦采集仪可以结合使用&#xff0c;形成岩土工程监测的解决方案。具体的方案包括以下几个步骤&#xff1a; 1. 安装振弦传感器表面应变计&#xff1a;首先需要在需要监测的岩土结构表面安…

前三季度亏损近亿元,「缺钱」的北斗智联拟变更控股股东

本月初&#xff0c;北斗星通发布《关于深圳证券交易所重组问询函回复的公告》&#xff0c;针对公司全资子公司拟出售孙公司北斗星通智联科技有限责任公司&#xff08;以下简称北斗智联&#xff09; 15%的股权事宜做出进一步解读。 按照此前计划&#xff0c;15%的股权&#xff0…

Windows10关闭系统自动更新

1.背景 2.步骤 第一步: 第二步: 完美

基础课5——垂直领域对话系统架构

垂直领域对话系统是指针对特定领域或行业的需求而构建的对话系统。这种系统通常需要具备高度的专业知识和对特定领域的知识库进行深入的学习和训练&#xff0c;以便能够提供准确、高效、实用的服务。 垂直领域对话系统的构建通常包括以下步骤&#xff1a; 确定目标领域或行业…

Java虚拟机运行时数据区结构详解

Java虚拟机运行时数据区结构如图所示 程序计数器 程序计数器&#xff08;Program Counter Register&#xff09;是一块较小的内存空间&#xff0c;它可以看作是当前线程所执行的字节码的行号指示器。 多线程切换时&#xff0c;为了能恢复到正确的执行位置&#xff0c;每条线程…

2022年03月 Scratch(一级)真题解析#中国电子学会#全国青少年软件编程等级考试

一、单选题(共25题,每题2分,共50分) 第1题 天天收到了一个语音机器人,当天天说“a”的时候,机器人会说“apple”,当天天说“b”的时候,机器人会说“banana”, 当天天说“c”的时候,机器人会说“cat”,如果天天说其它内容,机器人就会说“I don’t know”。机器人可…

AIGC实战——变分自编码器(Variational Autoencoder, VAE)

AIGC实战——变分自编码器 0. 前言1. 变分自编码器1.1 基本原理1.2 编码器 2. 构建VAE编码器2.1 Sampling 层2.2 编码器2.3 损失函数2.4 训练变分自编码器 3. 变分自编码器分析小结系列链接 0. 前言 我们已经学习了如何实现自编码器&#xff0c;并了解了自编码器无法在潜空间中…

红米K40解BL锁以及刷国外EU版系统

解BL锁准备工作 进入手机 “设置“ > 我的设备 > 全部参数信息 > MIUI 版本连续点击 7 下&#xff0c;直到显示已开启开发者选项 回到设置主界面 > 更多设置 > 开发者选项 將 OEM 解锁开启&#xff0c;点入装置解锁状态并绑定自己的小米账号168小时之后再进行手…

UE基础必学系列:UMG

一、教程: 官方教程: 官方文档: 创建和显示UI 二、理解知识点: 2.1 RemoveFromParent 从视口中删除,但仍保留在内存中,并且变量仍然存在有效的 2.2 3D交互组件测试

如果你的内存比较大,对于windows11可以做出如下优化

在程序界&#xff0c;常有这种思想&#xff1a;用空间换时间&#xff0c;用时间换空间。都是相对而言&#xff0c;在内存足够大的情况下&#xff0c;下面说几点优化其中有一些是利用空间换时间的思想&#xff0c;适用范围&#xff1a;建议内存最小16G&#xff0c;最好是32G及以…

Hutool 实现敏感信息展示脱敏及其反脱敏

业务需求 将用户敏感信息脱敏展示到前端是出于保护用户隐私和信息安全的考虑。 敏感信息包括但不限于手机号码、身份证号、银行卡号等&#xff0c;这些信息泄露可能导致用户个人信息的滥用、身份盗用等严重问题。脱敏是一种常用的保护用户隐私的方式&#xff0c;它的目的是减少…