当前位置： 首页 > news >正文

Vue-2、初识Vue

news 2025/8/30 6:02:56

1、helloword小案列

在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>初始Vue</title><!--引入vue--><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><!--初始Vue:1、想让Vue工作，就必须创建一个实例。且要传入一个配置对象2、root容器里面的代码依然符合html规范，只不过混入了一些特殊的Vue语法3、root容器里面的代码被称为[Vue模板]--><div id="root"><h1>hello，{{name}}</h1><h1>我的年龄是{{age}}</h1></div><script type="text/javascript">Vue.config.productionTip = false //阻止Vue启动时产生生产提示。//创建Vue实例new Vue({el:'#root', //el用于指定当前Vue实例为那个容器服务，值通常为css选择器字符串。data:{  //data中用于存储数据，数据提供el所指定的容器去处理。值我们暂时先写成一个对象。name:'陈晋',age:18}})</script>
</body>
</html>

2、多个容器对应一个vue实例。则vue实例优先对应排名靠前的容器。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>初始Vue</title><!--引入vue--><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div class="root"><h1>hello1，{{name}}</h1><h1>我的年龄是1,{{age}}</h1></div><div class="root"><h1>hello2，{{name}}</h1><h1>我的年龄是2,{{age}}</h1></div><script type="text/javascript">Vue.config.productionTip = false //阻止Vue启动时产生生产提示。//创建Vue实例new Vue({el:'.root', //el用于指定当前Vue实例为那个容器服务，值通常为css选择器字符串。data:{  //data中用于存储数据，数据提供el所指定的容器去处理。值我们暂时先写成一个对象。name:'陈晋',age:18}})</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>初始Vue</title><!--引入vue--><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div class="root"><h1>hello2，{{name}}</h1><h1>我的年龄是2,{{age}}</h1>
</div><div class="root"><h1>hello1，{{name}}</h1><h1>我的年龄是1,{{age}}</h1></div><script type="text/javascript">Vue.config.productionTip = false //阻止Vue启动时产生生产提示。//创建Vue实例new Vue({el:'.root', //el用于指定当前Vue实例为那个容器服务，值通常为css选择器字符串。data:{  //data中用于存储数据，数据提供el所指定的容器去处理。值我们暂时先写成一个对象。name:'陈晋',age:18}})</script>
</body>
</html>

在这里插入图片描述
3.多个容器对应多个vue实例。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>初始Vue</title><!--引入vue--><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="root1"><h1>hello1，{{name}}</h1><h1>我的年龄是1,{{age}}</h1></div><hr><div id="root2"><h1>hello2，{{name}}</h1><h1>我的年龄是2,{{age}}</h1></div><script type="text/javascript">Vue.config.productionTip = false //阻止Vue启动时产生生产提示。//创建Vue实例new Vue({el:'#root1', //el用于指定当前Vue实例为那个容器服务，值通常为css选择器字符串。data:{  //data中用于存储数据，数据提供el所指定的容器去处理。值我们暂时先写成一个对象。name:'陈晋',age:18}})new Vue({el:'#root2',data:{name:'小明2',age:2}})</script>
</body>
</html>

在这里插入图片描述

相关文章：

Vue-2、初识Vue

1、helloword小案列 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>初始Vue</title><!--引入vue--><script type"text/javascript" src"https://cdn.jsdelivr.n…...

编程日记 2024/1/6 13:47:56

机器学习项目标记图像数据 - 安装LabelImg及功能介绍

什么是LabelImg&#xff1f; LabelImg 是一款流行的图像标注工具&#xff0c;主要用于计算机视觉领域。它允许用户为机器学习项目标记图像数据&#xff0c;特别是用于训练目标检测模型。 如何安装LabelImg pip install PyQt5 pip install pyqt5-tools pip install lxml pip …...

编程日记 2024/1/6 13:45:54

12.15 log 122.买卖股票的最佳时机 II，55. 跳跃游戏

122.买卖股票的最佳时机 II class Solution { public:int maxProfit(vector<int>& prices) {int result0;for(int i0;i<prices.size();i){if(i>0&&prices[i]-prices[i-1]>0){resultprices[i]-prices[i-1];}}return result;} }; 这道题贪心贪的时每…...

编程日记 2024/1/6 13:44:53

Redis - 挖矿病毒 db0 库 backup 反复出现解决方案

问题描述 腾讯云的服务器&#xff0c;使用 Docker 部署了 Redis 之后&#xff0c;发现 DB0 中总是出现 4 条 key&#xff0c;分别是 backup01backup02backup03backup04 而自己每次存入 db0 中的数据过一会就会被无缘无故删除掉。 原因分析 挖矿病毒 解决方案 在启动的时候…...

编程日记 2024/1/6 13:40:50

LiveGBS流媒体平台GB/T28181常见问题-国标编号是什么设备编号和通道国标编号标记唯一的摄像头|视频|镜头通道

LiveGBS国标GB28181中国标编号是什么设备编号和通道国标编号标记唯一的摄像头|视频|镜头通道 1、什么是国标编号&#xff1f;2、国标设备ID和通道ID3、ID 统一编码规则4、搭建GB28181视频直播平台 1、什么是国标编号&#xff1f; 国标GB28181对接过程中&#xff0c;可能有的小…...

编程日记 2024/1/6 13:39:50

Unity ShaderGraph 技能冷却转圈效果

Unity ShaderGraph 技能冷却转圈效果 前言项目场景布置代码编写ShaderGraph 连线总结 参考 前言 遇到一个需求&#xff0c;要展示技能冷却的圆形遮罩效果。 项目 场景布置 代码编写 Shader核心的就两句 // 将uv坐标系的原点移到纹理中心 float2 uv i.uv - float2(0.5, 0…...

编程日记 2024/1/6 13:36:47

C++上位软件通过Snap7开源库访问西门子S7-1200/S7-1500数据块的方法

前言 本人一直从事C上位软件开发工作较多&#xff0c;在之前的项目中通过C访问西门子PLC S7-200/S7-1200/S7-1500并进行数据交互的应用中一直使用的是ModbusTCP/ModbusRTU协议进行。Modbus上位开源库采用的LibModbus。经过实际应用发现Modbus开源库单次发送和接受的数据不能超过…...

编程日记 2024/1/6 13:35:46

如何正确安装Axure插件？详细步骤分享

产品经理在使用Axure导出html文件时&#xff0c;如果选择“完成后打开浏览器”&#xff0c;浏览器往往无法识别。此时&#xff0c;我们需要使用Axure官方谷歌浏览器插件直接访问浏览器中的本地html项目&#xff0c;否则我们需要上传到AxureCloud或使用软件本身的预览功能。接下…...

编程日记 2024/1/6 13:33:45

[SwiftUI]工程最低适配iOS13

问题&#xff1a; 新建工程&#xff0c;选择最低支持iOS13报错&#xff1a; main() is only available in iOS 14.0 or newer Scene is only available in iOS 14.0 or newer WindowGroup is only available in iOS 14.0 or newer 解决&#xff1a; 注释掉上面代码&#x…...

编程日记 2024/1/6 13:31:43

MyBatis-Plus框架学习笔记

先赞后看&#xff0c;养成习惯&#xff01;&#xff01;&#xff01;❤️ ❤️ ❤️ 文章码字不易&#xff0c;如果喜欢可以关注我哦&#xff01; ​如果本篇内容对你有所启发&#xff0c;欢迎访问我的个人博客了解更多内容&#xff1a;链接地址 MyBatisPlus &#xff08;简称…...

编程日记 2024/1/6 13:30:42

【Java】——期末复习题题库（六）

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…...

编程日记 2024/1/6 13:24:37

【水文】实现四则运算的简易计算器

代码&#xff1a; #include <stdio.h>int main() {double num1, num2;char operator, ch;printf("请输入两个操作数和运算符&#xff08;空格分隔&#xff09;&#xff1a;");scanf("%lf %lf %c", &num1, &num2, &operator);switch (op…...

编程日记 2024/1/6 13:21:35

计算机毕业设计-----ssm+mysql实现的JavaWeb酒店管理系统

项目介绍 本项目为基于ssmmysql实现的JavaWeb酒店管理系统; 主要功能包括&#xff1a; 管理员登录,收入统计,客房管理,商品管理,客房预订,住宿登记,财务统计,旅客管理,接待对象管理等功能。 环境需要 1.运行环境&#xff1a;最好是java jdk 1.8&#xff0c;我们在这个平台上…...

编程日记 2024/1/6 13:16:31

安防监控EasyCVR视频融合/汇聚平台大华热成像摄像机智能告警上报配置步骤

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…...

编程日记 2024/1/6 13:15:29

关于“Python”的核心知识点整理大全64

目录 20.2.15 确保项目的安全 settings.py 20.2.16 提交并推送修改 20.2.17 创建自定义错误页面 1. 创建自定义模板 500.html settings.py settings.py 注意 views.py 20.2.18 继续开发 往期快速传送门&#x1f446;&#xff08;在文章最后&#xff09;&#xff1a…...

编程日记 2024/1/6 13:14:29

Docker overlay2文件busy，容器不能删除问题解决

文章目录 在删除docker容器的时候报错,说设备正忙通过 docker ps -a 查看有两个状态的dead的容器解决方法&#xff1a;1.查看所有挂载的设备2.截取设备的进程id3.清理进程(kill掉即可) 在删除docker容器的时候报错,说设备正忙 Error response from daemon: Driver overlay2 fai…...

编程日记 2024/1/6 13:12:27

栈的数据结构实验报告

一、实验目的&#xff1a; 1、理解栈的定义&#xff1b; 2、利用栈处理实际问题。 二、实验内容&#xff08;实验题目与说明&#xff09; 利用栈实现数据的分类&#xff0c;将输入的整数以奇偶为标准分别存放到两个栈中&#xff0c;并最终从栈1和栈2输出偶数和奇数序列。 …...

编程日记 2024/1/6 13:10:25

ValueError: Could not find a backend to open path with iomode `wI` 解决

运行如下语句时报错 imageio.mimwrite(os.path.join(savedir, video.mp4)报错信息&#xff1a; ValueError: Could not find a backend to open video.mp4 with iomode wI. Based on the extension, the following plugins might add capable backends:FFMPEG: pip install …...

编程日记 2024/1/6 13:07:23

小白入门基础 - spring Boot 入门

1.简介 spring Boot是为了简化java的开发流程而构建的&#xff0c;即使是使用springMVC框架&#xff0c;也依然需要大量配置和依赖导入&#xff0c; 这无疑是繁琐的&#xff0c;spring Boot采用了”习惯由于配置“的原则&#xff0c;进行一键化部署&#xff0c;这样极大…...

编程日记 2024/1/6 13:06:22

探索Elasticsearch内存应用的关键因素

了解Elasticsearch内存模型 Elasticsearch的内存使用主要包括堆内存和操作系统缓存。堆内存是Elasticsearch用来存储数据结构的内存&#xff0c;例如文档索引、倒排索引等。操作系统缓存则是Elasticsearch缓存磁盘上的数据块以加速读取操作的一种机制&#xff0c;通常被称为OS…...

编程日记 2024/1/6 13:04:20

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2025/8/29 0:56:21

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2025/8/29 16:43:29

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2025/8/22 3:41:23

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2025/8/22 3:26:22

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2025/8/24 22:20:35

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/8/27 20:03:22

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2025/8/25 18:34:02

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2025/8/22 3:17:18

大数据学习（132）-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

编程新知 2025/7/26 19:10:34

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

编程新知 2025/8/28 21:52:02