Vue实现简单小案例

news2024/9/22 5:29:11

一、创建文件夹

二、引用vue.js

<script src="../js/vue.js"></script>

三、准备一个容器

<div id="app">
    <h1>Hello,{{name}}</h1>
</div>

四、创建实例

<script>
    new Vue({
        el:"#app",  //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
        data:{  //data中用于存储数据，数据供el所指定的容器去使用
            name:'小田'
        }
    })
</script>

五、效果图

六、整体代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>tian</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id="app">
    <h1>Hello,{{name}}</h1>
</div>

<script>
    //创建Vue实例
    new Vue({
        el:"#app",  //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
        data:{  //data中用于存储数据，数据供el所指定的容器去使用
            name:'小田'
        }
    })
</script>
</body>
</html>

七、总结

  1. 想让vue工作，必须创建一个vue实例，且传入一个配置对象
  2. app容器代码依然符合html规范
  3. app容器代码被称为Vue模板

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

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

相关文章

tcache attack

tcache attack

Tcache Attack tcache让堆利用更加简单&#xff1a; tcache回顾&#xff1a; 在 tcache 中新增了两个结构体&#xff0c;分别是 tcache_entry 和 tcache_perthread_struct&#xff1a; /* We overlay this structure on the user-data portion of a chunk when the chunk is …
阅读更多...
数据库概念以及增删改

数据库概念以及增删改

1.概念 、 2.通用语法 3.数据增删改
阅读更多...
mac大文件清理软件哪个好 mac大文件怎么清理 苹果电脑清理软件推荐免费

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

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

通信原理-实验六：实验测验

实验六 实验测验 一&#xff1a;测验内容和要求 测试需要完成以下几个步骤&#xff1a; 配置好以下网络图&#xff1b;占总分10%&#xff08;缺少一个扣一分&#xff09;根据下面图配置好对应的IP和网关以及路由等相关配置&#xff0c;保证设备之间连通正常&#xff1b;占总…
阅读更多...
【日常记录】【JS】对一个数组，按照某个字段的值，进行分组

【日常记录】【JS】对一个数组，按照某个字段的值，进行分组

文章目录 1. 前言2. lodash 的分组3. Object.groupBy()参考链接 1. 前言 在开发中&#xff0c;经常会遇到一组数据&#xff0c;要按照某个字段进行分组&#xff0c;这个时候会有很多种方法&#xff0c;可以使用 forEach、reduce、等其他方法 reduce 方法 function groupBy(arr…
阅读更多...
JS基础知识学习笔记全

JS基础知识学习笔记全

JS基础知识学习笔记全 一、引入方式 1、内部脚本 &#xff08;一般定义在body下面会改善执行速度&#xff09; <body></body><!-- 内部脚本 --><script>/* 打开页面警告框显示的内容 */alert(helloJS);</script>2、外部脚本 外部专门新建一…
阅读更多...
Redis-主从模式

Redis-主从模式

目录 前言 一.主从节点介绍 二.配置redis主从结构 二.主从复制 四.拓扑结构 五.数据同步 全量复制&#xff08;Full Sync Replication&#xff09; 局部复制&#xff08;Partial Replication&#xff09; Redis的学习专栏&#xff1a;http://t.csdnimg.cn/a8cvV 前言 …
阅读更多...
H3CNE（vlan与子接口技术）

H3CNE（vlan与子接口技术）

目录 10.1 vlan间通信技术 示例一&#xff08;多臂路由&#xff09;&#xff1a; 10.2 子接口技术 示例二&#xff08;子接口技术&#xff09;&#xff1a; 10.3 vlannif接口技术 10.3.1 三层交换机与VLANNIF技术 示例三VLANNIF配置&#xff08;将交换机当成路由器使用&…
阅读更多...
鸿蒙仓颉语言【cryptocj 库】RC2、 RC4 、AES对称加密算法

鸿蒙仓颉语言【cryptocj 库】RC2、 RC4 、AES对称加密算法

2 提供RC2、 RC4 、AES对称加密算法 前置条件&#xff1a;NA 场景&#xff1a; 支持对称加密算法。 约束&#xff1a;RC2密钥长度一般16字节&#xff0c;加密块长度8字节&#xff1b;AES加密块长度16字节 性能&#xff1a; 支持版本几何性能持平 可靠性&#xff1a; NA …
阅读更多...
pytest：4种方法实现 - 重复执行用例 - 展示迭代次数

pytest：4种方法实现 - 重复执行用例 - 展示迭代次数

简介&#xff1a;在软件测试中&#xff0c;我们经常需要重复执行测试用例&#xff0c;以确保代码的稳定性和可靠性。在本文中&#xff0c;我们将介绍四种方法来实现重复执行测试用例&#xff0c;并显示当前迭代次数和剩余执行次数。这些方法将帮助你更好地追踪测试执行过程&…
阅读更多...
3.多租户调研1

3.多租户调研1

https://gitee.com/xiaoqiangBUG/hello-ruoyi-cloud.git 1.mybatis plus 的插件 TenantLineInnerInterceptor 是 MyBatis Plus 框架中的一个拦截器&#xff0c;它用于实现多租户系统的数据隔离。在多租户应用中&#xff0c;不同的租户应该只能访问到自己的数据&#xff0c;而…
阅读更多...
URL过滤、DNS过滤和内容过滤的总结

URL过滤、DNS过滤和内容过滤的总结

目录 URL过滤 URL和URI URL -- 统一资源定位符 URI --- 统一资源的标识符 URL和URI之间的区别 URL过滤的方式 HTTP协议获取URL的方式 HTTP协议做控制管理的流程 HTTPS协议做控制管理的流程 1&#xff0c;配置SSL的解密功能 2&#xff0c;直接针对加密流量进行过滤 例…
阅读更多...
javaEE-03-cookie与session

javaEE-03-cookie与session

文章目录 Cookie创建Cookie获取Cookie更新CookieCookie 生命控制Cookie 有效路径 Session 会话创建和获取sessionSession 域数据的存取Session 生命周期控制浏览器和 Session 之间关联 Cookie Cookie 是服务器通知客户端保存键值对的一种技术,客户端有了 Cookie 后&#xff0c…
阅读更多...
深入解析 GPT-4o mini：强大功能与创新应用

深入解析 GPT-4o mini：强大功能与创新应用

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/2301_779549673 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &#x1f4e2;本文由 JohnKi 原创&#xff0c;首发于 CSDN&#x1f649; &#x1f4e2;未来很长&#…
阅读更多...
品牌故事线：如何在活动策划中保持品牌信息的连贯性？

品牌故事线：如何在活动策划中保持品牌信息的连贯性？

在活动运营中保持品牌一致性和传达清晰的品牌信息&#xff0c;是确保活动成功并提升品牌形象的关键。 以下是一些具体的方法和建议。 码字不易&#xff0c;如果回答对你有所帮助&#xff0c;请不吝给一个三连哦&#xff01; 一、明确品牌定位与核心价值 首先&#xff0c;需…
阅读更多...
一起刷C语言菜鸟教程100题（27-35）

一起刷C语言菜鸟教程100题（27-35）

先说明这个虽然菜鸟教程也有答案&#xff0c;但是这个专栏的博客是自己过手写了一遍&#xff0c;有自己的理解&#xff0c;有些习题自己是变化了一些&#xff0c;更适合练手&#xff0c;也会写的更普遍一些~ 今天我们一起继续刷题&#xff0c;链接放在这里供大家自行使用 C 语…
阅读更多...
小红书（社招二面）算法原题

小红书（社招二面）算法原题

萝卜快跑涨价 距离我们上次谈 萝卜快跑 不足半月&#xff0c;萝卜快跑迎来了不少"反转"。 先是被曝远程后台有人操控&#xff0c;真实日成本超 400&#xff1a; 最近还被不少网友吐槽&#xff1a;萝卜快跑涨价了&#xff0c;如今价格和网约车持平。 据不少博主实测&a…
阅读更多...
如何在 Windows 上安装并配置 VNC 远程连接树莓派，并结合Cpolar实现公网远程访问

如何在 Windows 上安装并配置 VNC 远程连接树莓派，并结合Cpolar实现公网远程访问

目录 ⛳️推荐 前言 1. 使用 Raspberry Pi Imager 安装 Raspberry Pi OS 2. Windows安装VNC远程树莓派 3. 使用VNC Viewer公网远程访问树莓派 3.1 安装Cpolar步骤 3.2 配置固定的公网地址 3.3 VNC远程连接测试 4. 固定远程连接公网地址 4.1 固定TCP地址测试 ⛳️推荐…
阅读更多...
FastAPI（六十九)实战开发《在线课程学习系统》接口开发--修改密码

FastAPI（六十九)实战开发《在线课程学习系统》接口开发--修改密码

源码见&#xff1a;"fastapi_study_road-learning_system_online_courses: fastapi框架实战之--在线课程学习系统" 之前我们分享了FastAPI&#xff08;六十八&#xff09;实战开发《在线课程学习系统》接口开发--用户 个人信息接口开发。这次我们去分享实战开发《在线…
阅读更多...
【Linux操作系统】:进程间通信

【Linux操作系统】:进程间通信

目录 进程间通信介绍 1、进程间通信的概念 2、进程间通信的目的 3、进程间通信的本质 4、进程间通信的分类 管道 匿名管道 匿名管道的原理 pipe函数 创建匿名管道 管道的四种情况和五种特性 命名管道 使用命令创建命名管道 创建一个命名管道 命名管道的打开规则 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023