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

初识Vue

news 文章来源：https://blog.csdn.net/mu_tong_/article/details/128938172 2025/1/15 22:53:12

文章目录

  • 1. 前言
  • 2. Vue 的特点
  • 3. 安装 Vue
  • 4. HelloWord

 

1. 前言

 
vue是什么 ？

引用 ： vue.js 文档
 
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只
 
关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单
 
页应用提供驱动。

 
可以看到 上面说 vue 是 一套用于构建用户界面的渐进式框架 啥意思呢 ？

构建用户界面 : 将我们拿到的数据 通过某些方法 ， 变成用户所能看到的界面 。

渐进式 ： Vue 可以自底向上逐层的应用 .

简单来说 : 如果我们自己写的应用非常简单 就可以 引入一个轻量小巧的核心库 。 如果应用比较复杂 就可以引入各式各样的Vue 插件 。

 

2. Vue 的特点

 

1.采用组件化模式 ，提高代码复用率 ，且让代码更好维护。

在这里插入图片描述

 
2. 声明式编码 , 让编码人员无需直接操作 DOM ，提高开发效率 .

 
假设 有一组数据

[{id = '001', name :"张三" , age :18}{id = '002', name :"李四" , age :18}{id = '003', name :"王五" , age :18}
]

 

在提供一个容器 ： <ul id = "list" ></ul>

 
想要实现下面这样的效果 ：

在这里插入图片描述

 

这里先使用 js 写 , 命令式 编码

 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><ul id="list"></ul></ul><script>// 数据let persons = [{id: '001', name: "张三", age: 18},{id: '002', name: "李四", age: 18},{id: '003', name: "王五", age: 18}]// 准备 html 字符串let htmlStr = ''persons.forEach(p => {htmlStr += `<li>${p.id} - ${p.name} - ${p.age}</li>`})// 获取 list 内容let list = document.getElementById('list');// 修改内容 (亲自操作 DOM )list.innerHTML = htmlStr;</script>
</body></html>

 
使用 vue 完成 ： 声明式 编码


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../js/vue.js"></script>
</head><body><div id="root"><ul><li v-for="(person,index) in persons" :key="index">{{person.id}} - {{person.name}} - {{person.age}}</li></ul></div><script>new Vue({el: "#root",data: {persons: [{id: '001', name: "张三", age: 18},{id: '002', name: "李四", age: 18},{id: '003', name: "王五", age: 18}]}})</script>
</body></html>

 
3. 使用虚拟DOM + 优秀的 Diff算法 , 尽量复用 DOM 节点.

在这里插入图片描述

 

3. 安装 Vue

 
这里可以通过 官方文档 下载 ：Vue.js (vuejs.org)

在这里插入图片描述

 
这里我们安装完 vue ， 引入 vue .

在这里插入图片描述

 

vue 开发者工具安装

 
下面通过 vue 来 写一个 helloword 程序

 

4. HelloWord

在这里插入图片描述

 
这里我们想要通过 vue 来让页面显示HelloWord ， 就需要先创建一个 vue 实例对象 ， 让后通过 配置项 el 指定服务的容器 ， el 指定完 后 ，就可以通过 data 存储数据 来为 el 所指定的容器使用 。 (此时涉及到插值语法 ,后面说).

 
下面我们根据这个 案例

 
引出一个注意事项 : 容器和实例一一对应

在这里插入图片描述

 
另外 ：

在这里插入图片描述

相关文章：

初识Vue

文章目录1. 前言2. Vue 的特点3. 安装 Vue4. HelloWord1. 前言 vue是什么 &#xff1f; 引用 &#xff1a; vue.js 文档   Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层…...

编程日记 2023/2/9 22:24:15

TOUGH系列软件建模实践方法及在地下水、CO2地质封存、水文地球化学、地热等多相多组分系统多过程耦合

查看原文>>> https://mp.weixin.qq.com/s?__bizMzAxNzcxMzc5MQ&mid2247578057&idx7&sn75f8d2c1c6edb28af76a8db4bb773de3&chksm9be2aed9ac9527cf0081082cdcf781e6c37f9f3ba383332ed1116abcbee0f05c0593187e964d&token2070450548&langzh_CN#r…...

编程日记 2023/2/9 22:23:08

Codeforces Round #699 (Div. 2)

E. 题意:n本书,每本书有颜色a[i],一次操作可以将其中一本书放在末尾,求满足:相同颜色的书都是相邻的 的最小操作次数. 显然最多只需要n次,考虑能节省多少次.倒着考虑,记f[i]为i~n最多能节约的次数.先预处理出每种颜色的出现的位置范围l[i],r[i]. 1.不节约这本书f[i] f[i 1]…...

编程日记 2023/2/9 22:22:01

MySQL存储过程的传参和流程控制

目录 一.存储过程传参—in 演示 二.存储过程传参—out 演示 三.存储过程传参—inout 演示 四.流程控制—判断 格式 演示 五.流程控制—case 语法 演示 六.流程控制—循环 循环—while 循环—repeat 循环—loop 一.存储过程传参—in in表示传入的参数&#xff0c;可以传…...

编程日记 2023/2/9 22:20:53

MySQl学习（从入门到精通11）

MySQl学习&#xff08;从入门到精通11&#xff09;第 14 章_视图1. 常见的数据库对象2. 视图概述2. 1 为什么使用视图&#xff1f;2. 2 视图的理解3. 创建视图3. 1 创建单表视图3. 2 创建多表联合视图3. 3 基于视图创建视图4. 查看视图5. 更新视图的数据5. 1 一般情况5. 2 不可…...

编程日记 2023/2/9 22:19:44

关于ThreadLocal

弱引用 1.1 java中的各种引用和测试: https://blog.csdn.net/thewindkee/article/details/102723838 1.2 treadlocal中的弱引用测试: https://blog.csdn.net/thewindkee/article/details/103726942 (这篇很重要) 内存泄露: https://zhuanlan.zhihu.com/p/523628871 综合考虑 …...

编程日记 2023/2/9 22:18:38

【C++】类和对象(中)

文章目录1. 类的6个默认成员函数2. 构造函数概念特性3. 析构函数概念特性4. 拷贝构造函数概念特征5. 运算符重载5.1 前置和后置重载5.2 赋值运算符重载6. 日期类的实现7. const成员8. 取地址及const取地址操作符重载1. 类的6个默认成员函数 如果一个类中什么成员都没有&#x…...

编程日记 2023/2/9 22:17:30

js下载文件

url为文件的src地址 url必须符合同源策略或者url的接口地址允许跨域&#xff0c;否则浏览器会报跨域错误 axios.get(data.url ,{ responseType: ‘blob’, }) .then( response>{ let blob new Blob([response.data]); let url window.URL.createObjectURL(blob); // 创建 …...

编程日记 2023/2/9 22:16:22

ESP8266 + STC15+ I2C OLED带网络校时功能的定时器时钟

ESP8266 + STC15+ I2C OLED带网络校时功能的定时器时钟 📍相关篇《ESP8266 + STC15基于AT指令通过TCP通讯协议获取时间》 📌ESP8266 AT固件基于安信可AT固件，相关刷AT固件可以参考《NodeMCU-刷写AT固件》 🔖STC15 单片机采用的是：STC15F2K60S2 晶振频率采用内部：22.11…...

编程日记 2023/2/9 22:15:13

计算机入门基础知识大全

♥️作者&#xff1a;小刘在C站 ♥️个人主页&#xff1a;小刘主页 ♥️每天分享云计算网络运维课堂笔记&#xff0c;努力不一定有收获&#xff0c;但一定会有收获加油&#xff01;一起努力&#xff0c;共赴美好人生&#xff01; ♥️夕阳下&#xff0c;是最美的&#xff0c;绽…...

编程日记 2023/2/9 22:14:06

Python程序出现错误怎么办？

Python 异常处理 python提供了两个非常重要的功能来处理python程序在运行中出现的异常和错误。你可以使用该功能来调试python程序。 异常处理: 本站Python教程会具体介绍。 断言(Assertions):本站Python教程会具体介绍。 python标准异常 异常名称 描述 BaseException 所有异常…...

编程日记 2023/2/9 22:12:59

【Vue3】v-if和v-for优先级

&#x1f388;博客主页&#xff1a;&#x1f308;我的主页&#x1f308; &#x1f388;欢迎点赞 &#x1f44d; 收藏 &#x1f31f;留言 &#x1f4dd; 欢迎讨论&#xff01;&#x1f44f; &#x1f388;本文由 【泠青沼~】 原创&#xff0c;首发于 CSDN&#x1f6a9;&#x1f…...

编程日记 2023/2/9 22:11:52

Windows上实现 IOS 自动化测试

本文介绍如何使用tideviceWDAairtest/facebook-wda实现在Windows上进行IOS APP自动化测试 环境准备 Windows Python环境 Python 3.6 WebDriverAgent安装 下载最新的项目到Mac&#xff1a;https://github.com/appium/WebDriverAgent $ git clone https://github.com/appiu…...

编程日记 2023/2/9 22:10:46

Linux云服务器下怎么重置MySQL8.0数据库密码

文章目录一、修改my.cnf配置文件为mysql免登陆二、免密登陆mysql三.给root用户重置密码1、首先查看当前root用户相关信息&#xff0c;在mysql数据库的user表中2、把root密码置为空3、退出mysql&#xff0c;删除/etc/my.cnf文件中添加进去的skip-grant-tables 重启mysql服务4、使…...

编程日记 2023/2/9 22:09:40

JVM调优

JVM调优-VisualVmVisualVm/ Jconsule远程连接第一种方式第二种方式&#xff1a;java 11开启远程GC连接如果还连不上考虑防火墙拦截了端口firewall-cmd --list-all,查看一下并暴露对应端口连接配置VisualVm界面简介采集GC信息的一些命令垃圾回收器切换VisualVm/ Jconsule远程连接…...

编程日记 2023/2/9 22:08:27

【配电网规划】SOCPR和基于线性离散最优潮流（OPF）模型的配电网规划( DNP )（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/2/9 22:07:21

锦正茂EM3电磁铁的技术参数

产品特点&#xff1a; ※U形结构、视野开阔、磁场强度高、磁场强度大小调节方便 ※体积小、重量轻、占空比小、结构紧凑、磁场性能更佳 ※电磁铁的工作气隙调节轻便灵活&#xff0c;极头处设有螺纹&#xff0c;更换极头装卸方便 ※可选配工作间隙刻度指示 ※小气隙时用于铁…...

编程日记 2023/2/9 22:06:13

Go最新版下载 Go1.20版新特性

Go官方正式发布了Go1.20稳定版 该版本依然保持 Go1 兼容性&#xff0c;可以升级到 Go1.20&#xff0c;而不需要做任何代码改动。 可以使用你任何喜欢的方式升级&#xff1a; 比如&#xff1a; go install golang.org/dl/go1.20latest 具体的可以参考官网教程&#xff1a; ht…...

编程日记 2023/2/9 22:05:05

Pywirt：一款基于Python的Windows安全应急响应工具

关于Pywirt Pywirt是一款基于Python开发的网络安全工具&#xff0c;该工具专门针对Windows操作系统设计&#xff0c;可以帮助广大研究人员使用winrm并通过在Windows操作系统上收集各种信息来加快安全事件应急响应的速度。 该工具已在Windows 10操作系统上进行过完整测试。 功…...

编程日记 2023/2/9 22:03:58

KDZD832 智能蓄电池活化仪

一、产品概述 KDZD832 智能蓄电池活化仪&#xff08;2V-24V 一体机&#xff0c;适用于 2V、6V、12V/24V 蓄电池&#xff0c;以下简称活化仪&#xff09;&#xff0c;是专用于日常维护中对落后蓄电池处理的便携式产品&#xff0c;它具有四种独立的使用方式&#xff1a;电池放电…...

编程日记 2023/2/9 22:02:50

纯css实现loading加载中（多种展现形式）

前言 现如今网页越来越趋近于动画&#xff0c;相信大家平时浏览网页或多或少都能看到一些动画效果&#xff0c;今天我们来做一个有意思的动画效果&#xff0c;纯 css 实现 loading 加载中&#xff08;多种展现形式&#xff09;&#xff0c;下面一起看看吧。 1. 常规 loading 实…...

编程日记 2023/2/9 22:01:40

【面试题】2023 vue高频面试知识点汇总

一、MVVM原理在Vue2官方文档中没有找到Vue是MVVM的直接证据&#xff0c;但文档有提到&#xff1a;虽然没有完全遵循MVVM模型&#xff0c;但是 Vue 的设计也受到了它的启发&#xff0c;因此在文档中经常会使用vm(ViewModel 的缩写) 这个变量名表示 Vue 实例。为了感受MVVM模型的…...

编程日记 2023/2/9 22:00:33

跨境电商选品重要吗？

选品很重要&#xff01;跨境电子商务选择的核心要求&#xff1a;优质商品&#xff0c;价格优势&#xff0c;符合跨境销售特点&#xff0c;满足目标海外市场需求&#xff0c;突出自身特色竞争优势。跨境电商是如何选择产品的&#xff1f;这个问题也很流行&#xff0c;应该考虑以…...

编程日记 2023/2/9 21:59:26

SpringBoot

这里写目录标题1.入门程序1.1 spring-boot-starter-parent1.2 启动器1.3 EnableAutoConfiguration(重要)1.4 如何注册多个Controller?1.5 引导类2.完整的SpringBoot项目2.1 启动类2.1.1 创建一个启动类2.1.2 扩展: SpringBootConfiguration2.2 使用配置类定义组件2.3 SpringBo…...

编程日记 2023/2/9 21:58:15

python--turtle

前言 就随便练练&#xff0c;学习一下turtle库的使用 正文 1.语法学习 import turtle #导入库 turtle.showturtle() #画笔显示箭头 turtle.write("我是大帅逼") #写下字符串 turtle.forward(300) …...

编程日记 2023/2/9 21:57:05

NodeJS的后端Express项目部署到Ubuntu服务器，为前端提供API服务

之前参与的web3项目后端是用NodeJS开发的&#xff0c;因为可以共用NPM库&#xff0c;采用的Express框架&#xff0c;第一次弄&#xff0c;记录下大致的部署过程如下&#xff1a; 1、服务器上安装NodeJS sudo apt-get install nodejs 2、安装全局NPM工具&#xff0c;node_mod…...

编程日记 2023/2/9 21:55:58

作为研发如何使用Github Api？

文章目录使用步骤账号创建进行开发者相关设置API操作演示Github API好处推荐的Github API&#x1f31f;个人主页: 个人主页 &#x1f6b5;‍♀️个人介绍:每天进步一点点&#xff0c;生活变得好一点点。 &#x1f4cc;作为一位开发&#xff0c;不管是非工作的还是工作中的人士&…...

编程日记 2023/2/9 21:54:48

Java volatile学习

面试题&#xff1a; 1、请谈谈你对volatile的理解&#xff1f; volatile是Java虚拟机提供的轻量级的同步机制1.保证可见性2.不保证原子性3.禁止指令重排 2、JMM你谈谈?Java内存模型 3、你在哪些地方用到过volatile?单例模式CAS底层代码 目录 一、概述 1、可见性 2、原子性…...

编程日记 2023/2/9 21:53:41

用神经网络分类上和下

( A, B )---3*30*2---( 1, 0 )( 0, 1 ) 做一个网络&#xff0c;输入为3个点&#xff0c;训练集A,B各有4张图片。让B的4张图片全是0.排列组合A&#xff0c;记录迭代次数平均值的变化。收敛误差为7e-4&#xff0c;每个网络收敛199次。 其中得到一组数据 差值结构 1-A-B 迭代次…...

编程日记 2023/2/9 21:52:23

VS Code 1.75 发布！

欢迎使用 2023 年 1 月版的 Visual Studio Code。希望您喜欢此版本中的许多更新&#xff0c;其中一些主要亮点包括&#xff1a;配置文件、VS Marketplace 签名、辅助功能改进、更轻松地调整多视图大小、树视图搜索历史、新的 Git 命令等等。让我们一起看看吧&#xff01; 配置文…...

编程日记 2023/2/9 21:51:10

做asp动态网站制作流程/建站软件可以不通过网络建设吗

栈与队列就像一对兄弟一样&#xff0c;学习的时候可以一块学习。 栈的特点&#xff1a;先进后出 队列的特点&#xff1a;先进先出 一、头文件 栈的头文件 #include<stack> 队列的头文件 #include<queue> 二、定义 栈的定义&#xff1a;stack<TYPE> s; 队列…...

编程日记 2025/1/15 16:17:20

网站想建设子站/可以推广赚钱的软件

熟悉C的童鞋都知道&#xff0c;为了避免“野指针”&#xff08;即指针在首次使用之前没有进行初始化&#xff09;的出现&#xff0c;我们声明一个指针后最好马上对其进行初始化操作。如果暂时不明确该指针指向哪个变量&#xff0c;则需要赋予NULL值。除了NULL之外&#xff0c;C…...

编程日记 2025/1/15 13:53:59

西安网站维护 策划/学seo网络推广

IIS添加MIME类型&#xff1a;　　 文件扩展名　　 MIME类型　 .svg　　 image/svgxml .woff 　　 application/x-font-woff .woff2　　 application/x-font-woff .eot 　　 application/vnd.ms-fontobject .otf　　 application/octet-stream .ttf 　　 applic…...

编程日记 2025/1/15 8:53:49

wordpress 1 s/seo是一种利用搜索引擎的

1、修改忽略文件权限 git config core.filemode false 2、查看配置 git config --list 发现core.filemodefalse表明成功...

编程日记 2025/1/15 8:38:33

网站建设柒首先金手指2/竞价排名适合百度吗

第一次做性能测试&#xff0c;按照操作文档磕磕碰碰的完成了&#xff0c;并且拿到了结果&#xff0c;看到一堆的指标和数据&#xff0c;还是傻眼了&#xff0c;不知道各个指标是什么意思了。 咨询了大牛和度娘&#xff0c;消化理解了一下&#xff0c;不知道是不是正确的。 CPU使…...

编程日记 2025/1/15 7:13:07

网站建设包含哪些/营销型网站建设服务

&#xff08;1&#xff09;mall-swarm是一套微服务商城系统&#xff0c;采用了 Spring Cloud Hoxton & Alibaba、Spring Boot 2.3、Oauth2、MyBatis、Docker、Elasticsearch、Kubernetes等核心技术&#xff0c;同时提供了基于Vue的管理后台方便快速搭建系统。mall-swarm在电…...

编程日记 2025/1/15 6:16:37