初识Vue
文章目录
- 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是什么 ? 引用 : vue.js 文档 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层…...
TOUGH系列软件建模实践方法及在地下水、CO2地质封存、水文地球化学、地热等多相多组分系统多过程耦合
查看原文>>> https://mp.weixin.qq.com/s?__bizMzAxNzcxMzc5MQ&mid2247578057&idx7&sn75f8d2c1c6edb28af76a8db4bb773de3&chksm9be2aed9ac9527cf0081082cdcf781e6c37f9f3ba383332ed1116abcbee0f05c0593187e964d&token2070450548&langzh_CN#r…...
Codeforces Round #699 (Div. 2)
E. 题意:n本书,每本书有颜色a[i],一次操作可以将其中一本书放在末尾,求满足:相同颜色的书都是相邻的 的最小操作次数. 显然最多只需要n次,考虑能节省多少次.倒着考虑,记f[i]为i~n最多能节约的次数.先预处理出每种颜色的出现的位置范围l[i],r[i]. 1.不节约这本书f[i] f[i 1]…...
MySQL存储过程的传参和流程控制
目录 一.存储过程传参—in 演示 二.存储过程传参—out 演示 三.存储过程传参—inout 演示 四.流程控制—判断 格式 演示 五.流程控制—case 语法 演示 六.流程控制—循环 循环—while 循环—repeat 循环—loop 一.存储过程传参—in in表示传入的参数,可以传…...
MySQl学习(从入门到精通11)
MySQl学习(从入门到精通11)第 14 章_视图1. 常见的数据库对象2. 视图概述2. 1 为什么使用视图?2. 2 视图的理解3. 创建视图3. 1 创建单表视图3. 2 创建多表联合视图3. 3 基于视图创建视图4. 查看视图5. 更新视图的数据5. 1 一般情况5. 2 不可…...
关于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 综合考虑 …...
【C++】类和对象(中)
文章目录1. 类的6个默认成员函数2. 构造函数概念特性3. 析构函数概念特性4. 拷贝构造函数概念特征5. 运算符重载5.1 前置和后置重载5.2 赋值运算符重载6. 日期类的实现7. const成员8. 取地址及const取地址操作符重载1. 类的6个默认成员函数 如果一个类中什么成员都没有&#x…...
js下载文件
url为文件的src地址 url必须符合同源策略或者url的接口地址允许跨域,否则浏览器会报跨域错误 axios.get(data.url ,{ responseType: ‘blob’, }) .then( response>{ let blob new Blob([response.data]); let url window.URL.createObjectURL(blob); // 创建 …...
ESP8266 + STC15+ I2C OLED带网络校时功能的定时器时钟
ESP8266 + STC15+ I2C OLED带网络校时功能的定时器时钟 📍相关篇《ESP8266 + STC15基于AT指令通过TCP通讯协议获取时间》 📌ESP8266 AT固件基于安信可AT固件,相关刷AT固件可以参考《NodeMCU-刷写AT固件》 🔖STC15 单片机采用的是:STC15F2K60S2 晶振频率采用内部:22.11…...
计算机入门基础知识大全
♥️作者:小刘在C站 ♥️个人主页:小刘主页 ♥️每天分享云计算网络运维课堂笔记,努力不一定有收获,但一定会有收获加油!一起努力,共赴美好人生! ♥️夕阳下,是最美的,绽…...
Python程序出现错误怎么办?
Python 异常处理 python提供了两个非常重要的功能来处理python程序在运行中出现的异常和错误。你可以使用该功能来调试python程序。 异常处理: 本站Python教程会具体介绍。 断言(Assertions):本站Python教程会具体介绍。 python标准异常 异常名称 描述 BaseException 所有异常…...
【Vue3】v-if和v-for优先级
🎈博客主页:🌈我的主页🌈 🎈欢迎点赞 👍 收藏 🌟留言 📝 欢迎讨论!👏 🎈本文由 【泠青沼~】 原创,首发于 CSDN🚩…...
Windows上实现 IOS 自动化测试
本文介绍如何使用tideviceWDAairtest/facebook-wda实现在Windows上进行IOS APP自动化测试 环境准备 Windows Python环境 Python 3.6 WebDriverAgent安装 下载最新的项目到Mac:https://github.com/appium/WebDriverAgent $ git clone https://github.com/appiu…...
Linux云服务器下怎么重置MySQL8.0数据库密码
文章目录一、修改my.cnf配置文件为mysql免登陆二、免密登陆mysql三.给root用户重置密码1、首先查看当前root用户相关信息,在mysql数据库的user表中2、把root密码置为空3、退出mysql,删除/etc/my.cnf文件中添加进去的skip-grant-tables 重启mysql服务4、使…...
JVM调优
JVM调优-VisualVmVisualVm/ Jconsule远程连接第一种方式第二种方式:java 11开启远程GC连接如果还连不上考虑防火墙拦截了端口firewall-cmd --list-all,查看一下并暴露对应端口连接配置VisualVm界面简介采集GC信息的一些命令垃圾回收器切换VisualVm/ Jconsule远程连接…...
【配电网规划】SOCPR和基于线性离散最优潮流(OPF)模型的配电网规划( DNP )(Matlab代码实现)
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...
锦正茂EM3电磁铁的技术参数
产品特点: ※U形结构、视野开阔、磁场强度高、磁场强度大小调节方便 ※体积小、重量轻、占空比小、结构紧凑、磁场性能更佳 ※电磁铁的工作气隙调节轻便灵活,极头处设有螺纹,更换极头装卸方便 ※可选配工作间隙刻度指示 ※小气隙时用于铁…...
Go最新版下载 Go1.20版新特性
Go官方正式发布了Go1.20稳定版 该版本依然保持 Go1 兼容性,可以升级到 Go1.20,而不需要做任何代码改动。 可以使用你任何喜欢的方式升级: 比如: go install golang.org/dl/go1.20latest 具体的可以参考官网教程: ht…...
Pywirt:一款基于Python的Windows安全应急响应工具
关于Pywirt Pywirt是一款基于Python开发的网络安全工具,该工具专门针对Windows操作系统设计,可以帮助广大研究人员使用winrm并通过在Windows操作系统上收集各种信息来加快安全事件应急响应的速度。 该工具已在Windows 10操作系统上进行过完整测试。 功…...
KDZD832 智能蓄电池活化仪
一、产品概述 KDZD832 智能蓄电池活化仪(2V-24V 一体机,适用于 2V、6V、12V/24V 蓄电池,以下简称活化仪),是专用于日常维护中对落后蓄电池处理的便携式产品,它具有四种独立的使用方式:电池放电…...
Label Studio实战:如何为NLP项目自定义标注模板(含模板代码分享)
Label Studio实战:如何为NLP项目自定义标注模板(含模板代码分享) 在自然语言处理项目中,数据标注的质量往往直接决定模型性能的上限。Label Studio作为当前最主流的开源标注工具之一,其灵活的自定义模板功能让NLP工程师…...
如何用torchtext快速构建文本分类模型?5分钟上手RoBERTa与T5实战教程
如何用torchtext快速构建文本分类模型?5分钟上手RoBERTa与T5实战教程 【免费下载链接】text Models, data loaders and abstractions for language processing, powered by PyTorch 项目地址: https://gitcode.com/gh_mirrors/te/text 想要在PyTorch生态中快…...
SpeedyStepper Forked:嵌入式步进电机硬实时控制库解析
1. SpeedyStepper Forked:面向嵌入式实时控制的高性能步进电机驱动库深度解析1.1 库定位与工程价值SpeedyStepper Forked 是一个专为嵌入式平台(尤其是基于Arduino生态的MCU)设计的轻量级、高精度步进电机运动控制库。其核心目标并非提供图形…...
编写程序实现智能鱼竿鱼线拉力检测,拉力超标提示“小心断线”。
🎣 项目实战:基于应变片的智能鱼竿拉力监测系统一、实际应用场景描述 (Scenario)在海钓或路亚钓法中,鱼竿的调性(Action)和钓线的磅数(LB)至关重要。新手往往凭感觉遛鱼,当大鱼突然发…...
免费内容解锁工具:提升信息获取效率的技术解决方案
免费内容解锁工具:提升信息获取效率的技术解决方案 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在信息爆炸的数字时代,专业内容与普通用户之间往往隔着一道…...
TVM构建系统详解:CMake与Makefile配置最佳实践
TVM构建系统详解:CMake与Makefile配置最佳实践 引言:TVM构建系统的核心挑战 深度学习编译器TVM(Tensor Virtual Machine)作为一个跨平台、多后端的开源项目,其构建系统面临着独特的复杂性。开发者需要在不同架构&#…...
League-Toolkit:英雄联盟智能辅助工具的效率提升之道
League-Toolkit:英雄联盟智能辅助工具的效率提升之道 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit League-Toolkit是…...
【GNSS定位原理及算法杂记2】GNSS观测量:从捕获到解算,揭秘接收机内部信号处理链路
1. GNSS观测量:定位技术的三大支柱 当你打开手机地图查看自己的位置时,背后是GNSS接收机在默默工作。它通过处理来自太空卫星的信号,最终计算出你所在的位置。这个过程中最关键的就是三种观测量:伪距、载波相位和多普勒频移。这三…...
成本对比实测:OpenClaw本地部署Qwen3.5-9B比API节省40%
成本对比实测:OpenClaw本地部署Qwen3.5-9B比API节省40% 1. 为什么我要做这个测试 上个月我给自己定了个目标:用OpenClaw实现个人知识库的自动化更新。这个任务需要每天抓取20篇行业文章,提取关键信息,整理成结构化笔记。最初我直…...
java的for循环
public class Demo6 {public static void main(String[] args) {for (int money1;money<10;money){System.out.println("换一元纸币"money"张。换5角硬币"(10-money)*2"个");}} }public class Demo8 {public static void main(String[] args)…...
