Vue中el与data的两种写法

想必大家对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: "张三"
            }
        }
    })

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

结构工程师软件 Naviate Core MEP for Revit 3.4 Crk

Naviate Fabrication - 先进的建模和制造命令&#xff0c;可提高 VDC 设计师、细节设计师和承包商的生产力和收入。 Naviate MEP - 通过 MEP 工程师和设计师的建模和参数提高效率 导航架构 Naviate Architecture 完全集成到 Revit 平台中&#xff0c;增强了 BIM 提供的协作可能…

工业除尘器笔记

工业除尘器用于对工业生产产生的有害气体和粉尘进行吸附。相关标准的制定最早可以追溯到1960年代以前。注意&#xff0c;本文的附录包含一起完整的工业除尘器事故的分析和定责过程。相关事故分析定责文档源头摘自上海市政府网站。 在产品设计行业和关联下游行业&#xff0c;在…

java--俄罗斯方块

一、先看一下游戏运行时的画面 二、代码部分 1. Cell.java Cell.java&#xff1a; package demo1;import java.awt.image.BufferedImage; import java.util.Objects;/* 编写小方块类属性&#xff1a;行、列、每个小方格的图片方法&#xff1a;左移一格、右移一格、下落一格 …

【 云原生 | K8S 】kubeadm 部署Kubernetes集群

目录 1 环境准备 2 所有节点安装docker 3 所有节点安装kubeadm&#xff0c;kubelet和kubectl 4 部署K8S集群 4.1 查看初始化需要的镜像 4.2 初始化kubeadm 4.3 设定kubectl 4.4 所有节点部署网络插件flannel master&#xff08;2C/4G&#xff0c;cpu核心数要求大于2&am…

第一讲之递归与递推下篇

第一讲之递归与递推下篇 带分数费解的开关飞行员兄弟翻硬币 带分数 用暴力将所有全排列的情况都算出来 > 有三个数&#xff0c;a,b,c 每种排列情况&#xff0c;可以用两层for循环&#xff0c;暴力分为三个部分&#xff0c;每个部分一个数 当然注意这里&#xff0c;第一层fo…

Linux常用命令——bzdiff命令

在线Linux命令查询工具 bzdiff 直接比较两个.bz2压缩包中文件的不同 补充说明 bzdiff命令用于直接比较两个“.bz2”压缩包中文件的不同&#xff0c;省去了解压缩后再调用diff命令的过程。 语法 bzdiff(参数)参数 文件1&#xff1a;指定要比较的第一个.bz2压缩包&#xf…

《洛谷深入浅出基础篇》P1536 村村通——并查集

上链接&#xff1a;P1536 村村通 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn)https://www.luogu.com.cn/problem/P1536 上题干&#xff1a; 题目描述 某市调查城镇交通状况&#xff0c;得到现有城镇道路统计表。表中列出了每条道路直接连通的城镇。市政府 "村村通工程…

全民运动时代,气膜建筑备受瞩目

气膜体育场馆&#xff0c;作为当今新型的临时建筑运动场馆&#xff0c;在满足大型体育赛事需求方面展现出显著的优势。相较于传统体育场馆&#xff0c;气膜建筑不仅拥有更宽敞的空间&#xff0c;而且造价成本更为经济&#xff0c;成为体育场馆领域备受关注的建筑形式。 气膜建筑…

郑州市管城区工信局局长任华民一行莅临中创算力调研指导工作

2023年11月15日&#xff0c;为深入了解企业生产经营情况&#xff0c;解决发展诉求。郑州市管城区工信局局长任华民等领导一行莅临中创算力&#xff0c;中创副总经理杨光、技术总监刘朝阳、行政主管生田等人员陪同调研。 调研期间&#xff0c;双方就生产经营、“算力数据中心”…

基于SSM的校园二手物品交易市场设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

界面组件DevExpress Reporting v23.1亮点 - 全新升级报表查看器

DevExpress Reporting是.NET Framework下功能完善的报表平台&#xff0c;它附带了易于使用的Visual Studio报表设计器和丰富的报表控件集&#xff0c;包括数据透视表、图表&#xff0c;因此您可以构建无与伦比、信息清晰的报表 界面组件DevExpress Reporting v23.1已经发布一段…

如何快速找到华为手机中下载的文档

手机的目录设置比较繁杂&#xff0c;尤其是查找刚刚下载的文件&#xff0c;有时候需要捣鼓半天&#xff0c;如何快速找到这些文件呢&#xff1f;以下提供了几种方法&#xff1a; 方法一&#xff1a; 文件管理-》搜索文档 方法二&#xff1a; 文件管理-》最近 方法三&#xf…

BMS系统项目

1、通过电压监测是否冲满&#xff0c;通过电压可以监测是否放完电 电池得参数 单体过压&#xff08;充满电&#xff09; 过压恢复&#xff08;百分之90多&#xff09; 欠压保护&#xff08;百分之几得电&#xff0c;快关机了&#xff09; 欠压恢复&#xff08;就是欠压之上…

阿里云轻量应用服务器特价87元和165元1年测评,看看是否值得购买

2023年11月&#xff0c;阿里云推出了两款特价轻量应用服务器&#xff0c;2核2G4M特惠价格只要87元1年&#xff0c;2核4G5M特惠价格只要165元1年&#xff0c;那么这两款轻量应用服务器到底怎么样呢&#xff1f;可以用来做什么&#xff1f;是否值得购买呢&#xff1f;下面我们一起…

(四)什么是Vite——冷启动时vite做了什么(源码、middlewares)

vite分享ppt&#xff0c;感兴趣的可以下载&#xff1a; ​​​​​​​Vite分享、原理介绍ppt 什么是vite系列目录&#xff1a; &#xff08;一&#xff09;什么是Vite——vite介绍与使用-CSDN博客 &#xff08;二&#xff09;什么是Vite——Vite 和 Webpack 区别&#xff0…

python递归求数字各个位数相加_和

python递归求数字的各项和&#xff0c;例如数字一千零二十四&#xff1a;“1024”&#xff0c;输出结果为“10247” 第一种方法&#xff1a; def sum(a): #求一个数字各项和&#xff0c;第一种递归方法if 0<a<9: #从前到最后一个&#xff0c;出循环…

swiper垂直方向全屏实现鼠标滚轮滚动一下切换一屏

效果 20231116092014 添加mousewheelControl: true,这个属性即可 <div class"swiper-container"><div class"swiper-wrapper"><div class"swiper-slide" > <div class"" style"height: 100%; background-…

一个前端非侵入式骨架屏自动生成方案

目录 背景 现有方案调研 侵入业务式手写代码 非侵入业务式手写代码 非侵入式骨架屏代码自动生成 技术方案 设计原则 架构图 骨架屏生成 骨架屏注入 优化点 部分技术细节解析 puppeteer 文本块处理 图片块处理 a 标签处理 自定义属性处理 首屏HTML处理 首屏样…

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

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

使用 Gradle 命令了解项目构建信息

引言 首先&#xff0c;Gradle 作为使用 Android Studio 开发 Android 项目的默认构建工具&#xff0c;它里面的任何东西都基于两个概念&#xff1a; projects ( 项目 )tasks ( 任务 ) 每一个构建由一个或多个 projects 构成&#xff0c;每一个 project 由一个或多个 tasks 构…