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

快速上手Vue

news 2026/3/26 1:44:34

目录

概念

创建实例

插值表达式

 Vue响应式特性

概念

Vue是一个用于 构建用户界面 的 渐进式 框架

构建用户界面：基于数据渲染出用户看到的页面

渐进式：Vue相关生态：声明式渲染<组件系统<客户端路由<大规模状态管理<构建工具

               Vue的两种使用方式：

                       ①Vue核心包开发

                               场景：局部模块改造

                       ②Vue核心包&Vue插件 工程化开发

                               场景：整站开发

               Vue 是一种非常适合循序渐进学习和开发的前端框架，无需一次性掌握所有技术，可以根据自己的需求和进度逐步深入学习和应用                

框架：一套完整的项目解决方案

          优点：开发效率提升

          缺点：框架具有一些语法限制，可以去官网获得

Vue相关生态

创建实例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>001创建一个Vue实例</title><!-- 引入 Vue2 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head><body><div id="box1"><h1>{{msg}}</h1><h1>{{count}}</h1></div><div id="box2"><h1>{{msg}}</h1><h1>{{count}}</h1></div><div id="app"><h1>{{msg}}</h1><h1>{{count}}</h1></div><script>const vm = new Vue({el: '#app',//该vm实例渲染id="app"的元素data: {//在Vue2中使用data 属性来声明响应式数据msg: 'Hello Vue',count: 666}})console.log(vm)</script>
</body></html>

 ​​​​​

插值表达式

作用：利用 表达式 进行插值渲染，将数据渲染于页面中

语法：{{表达式}}

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>002插值表达式</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head><body><div id="app"><p>{{nickname}}</p><p>{{nickname.toUpperCase()}}</p><p>{{nickname+'你好'}}</p><p>{{age>=18?'成年':'未成年'}}</p><p>{{friend.name}}</p><p>{{friend.desc}}</p></div><script>const app = new Vue({el: '#app',data: {nickname: 'tony',age: 18,friend: {name: 'jepson',desc: '热爱Vue'}}})</script>
</body></html>

 Vue响应式特性

即 数据驱动视图（数据改变，视图会自动更新）

Vue底层监听到数据修改->进行Dom操作,自动更新视图

使用Vue开发，关注业务的核心逻辑，根据业务修改数据即可

data中的数据，被添加到实例上

  1. 访问数据：实例.属性名
  2. 修改数据：实例.属性名=值
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>003Vue响应式特性</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head><body><div id="app"><h1>{{msg}}</h1><h1>{{count}}</h1></div><script>const vm = new Vue({el: '#app',data: {msg: 'Hello Vue',count: 100}})console.log(vm)</script>
</body></html>

相关文章：

快速上手Vue

目录 概念 创建实例 插值表达式 Vue响应式特性 概念 Vue是一个用于 构建用户界面 的 渐进式 框架 构建用户界面&#xff1a;基于数据渲染出用户看到的页面 渐进式&#xff1a;Vue相关生态&#xff1a;声明式渲染<组件系统<客户端路由<大规模状态管理<构建工具 V…...

编程日记 2024/4/15 1:19:57

java 目录整理

Java知识相关目录主要参考黑马程序员 风清扬老师的视屏，参考链接为 Java_黑马刘意(风清扬)2019最新版_Java入门视频_Java入门_Java编程_Java入门教程_黑马教程_黑马程序员_idea版_哔哩哔哩_bilibili 1、java 基础 java基本认识？java跨平台原理？jdk、jre、jvm的联系？ 链接：…...

编程日记 2024/4/15 1:18:56

使用Python的Pillow库进行图像处理书法参赛作品

介绍&#xff1a; 在计算机视觉和图像处理领域&#xff0c;Python是一种强大而流行的编程语言。它提供了许多优秀的库和工具&#xff0c;使得图像处理任务变得轻松和高效。本文将介绍如何使用Python的wxPython和Pillow库来选择JPEG图像文件&#xff0c;并对选中的图像进行调整和…...

编程日记 2024/4/15 1:14:52

docker 容器指定utf-8编码

在运行 Docker 容器的时候&#xff0c;如果容器内应用需要使用 UTF-8 编码来正常处理中文&#xff0c;你可以通过设置环境变量来指定编码。 可以使用 -e 或者 --env 标志来设置环境变量。比如&#xff0c;设置 LANG 和 LC_ALL 环境变量为 C.UTF-8 或者 en_US.UTF-8&#xff1a…...

编程日记 2024/4/15 1:13:51

单例模式以及常见的两种实现模式

单例模式是校招中最常考的设计模式之一. 设计模式其实就是类似于“规章制度”&#xff0c;按照这个套路来进行操作。 单例模式能保证某个类在程序中只存在唯一 一份实例。而不会创建出多个实例&#xff0c;如果创建出了多个实例&#xff0c;就会编译报错。而不会创建出多个实…...

编程日记 2024/4/15 1:10:48

Java hashCode() 和 equals()的若干问题解答

Java hashCode() 和 equals()的若干问题解答 本章的内容主要解决下面几个问题&#xff1a; 1 equals() 的作用是什么&#xff1f; 2 equals() 与 的区别是什么&#xff1f; 3 hashCode() 的作用是什么&#xff1f; 4 hashCode() 和 equals() 之间有什么联系&#xff1f; …...

编程日记 2024/4/15 1:08:45

高级IO——React服务器简单实现

3.4Reactor服务器实现 1.connect封装 ​ 每一个连接都要有一个文件描述符和输入输出缓冲区&#xff0c;还有读、写、异常处理的回调方法&#xff1b; ​ 还包括指向服务器的回指指针&#xff1b; class connection; class tcpserver;using func_t std::function<void(s…...

编程日记 2024/4/15 1:05:41

Qt使用插件QPluginLoader 机制开发

简介&#xff1a; 插件(Plug-in,又称addin、add-in、addon或add-on,又译外挂)是一种遵循一定规范的应用程序接口编写出来的程序。 Qt 提供了2种APIs来创建插件&#xff1a; 一种高级API&#xff0c;用于为Qt本身编写插件&#xff1a;自定义数据库驱动程序&#xff0c;图像格…...

编程日记 2024/4/15 1:02:38

双子座 Gemini1.5和谷歌的本质

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

编程日记 2024/4/15 1:00:37

二百三十、MySQL——MySQL表的索引

1 目的 梳理一下目前MySQL维度表的索引情况&#xff0c;当然网上也有其他博客专门讲MySQL索引的&#xff0c;我这边只是梳理一下目前的索引状况而已 2单列索引 2.1 索引截图 2.2 建表语句 3 联合索引 3.1 索引截图 3.2 建表语句 4 参考的优秀博客 http://t.csdnimg.cn/ZF7…...

编程日记 2024/4/15 0:58:34

并发编程之ThreadLocal使用及原理

ThreadLocal主要是为了解决线程安全性问题的 非线程安全举例 public class ThreadLocalDemo {// 非线程安全的private static final SimpleDateFormat sdf new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");public static Date parse(String strDate) throws ParseExc…...

编程日记 2024/4/15 0:57:33

软件测试 测试开发丨Pytest结合数据驱动-yaml，熬夜整理蚂蚁金服软件测试高级笔试题

编程语言 languages: PHPJavaPython book: Python入门: # 书籍名称 price: 55.5 author: Lily available: True repertory: 20 date: 2018-02-17 Java入门: price: 60 author: Lily available: False repertory: Null date: 2018-05-11 yaml 文件使用 查看 yaml 文件 pych…...

编程日记 2024/4/15 0:56:32

软考数据库---2.SQL语言

主要记忆&#xff1a;表、索引、视图操作语句&#xff1b;数据操作&#xff1b;通配符、转义符&#xff1b;授权&#xff1b;存储过程&#xff1b;触发器 这部分等等整理一下: “”" 1、 数据定义语言。 SQL DDL提供定义关系模式和视图、 删除关系和视图、 修改关系模式的…...

编程日记 2024/4/15 0:51:28

基于顺序表实现通讯录

上篇我们讲了顺序表是什么&#xff0c;和如何实现顺序表。这篇文章我们将基于顺序表来实现通讯录。 文章目录 前言一、基于顺序表是如何实现的二、通讯录的头文件和实现文件三、通讯录的实现3.1 定义通讯录结构3.2 初始化通讯录3.3 销毁通讯录3.4 通讯录添加数据3.5 查找联系人…...

编程日记 2024/4/15 0:49:26

咸鱼之王_手游_开服搭建架设_内购修复无bug运营版

视频演示 咸鱼之王_手游_开服 游戏管理后台界面 源码获取在文章末尾 源码获取在文章末尾 源码获取在文章末尾 或者直接下面 https://githubs.xyz/y28.html 1.安装宝塔 yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh &…...

编程日记 2024/4/15 0:48:25

【JSON2WEB】14 基于Amis的CRUD开发30分钟速成

【JSON2WEB】系列目录 【JSON2WEB】01 WEB管理信息系统架构设计 【JSON2WEB】02 JSON2WEB初步UI设计 【JSON2WEB】03 go的模板包html/template的使用 【JSON2WEB】04 amis低代码前端框架介绍 【JSON2WEB】05 前端开发三件套 HTML CSS JavaScript 速成 【JSON2WEB】06 JSO…...

编程日记 2024/4/15 0:44:20

Java入门教程||Java 变量

Java 变量 Java教程 - Java变量 变量由标识符&#xff0c;类型和可选的初始化程序定义。变量还具有范围&#xff08;可见性/生存期&#xff09;。 Java变量类型 在Java中&#xff0c;必须先声明所有变量&#xff0c;然后才能使用它们。变量声明的基本形式如下所示&#xff1…...

编程日记 2024/4/15 0:42:17

基于Java的校园快递一站式服务系统 （源码+文档+包运行）

一.系统概述 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本校园快递一站式服务系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞…...

编程日记 2024/4/15 0:39:13

通讯录的实现（顺序表版本）

我们知道通讯录是基于顺序表的前提下&#xff0c;要写好通讯录我们就要深入了解好顺序表。我们先来看看什么是顺序表。&#xff08;注意今天代码量有点多&#xff0c;坚持一下&#xff09;。冲啊&#xff01;兄弟们&#xff01; 顺序表的简单理解 对于顺序表&#xff0c;我们首…...

编程日记 2024/4/15 0:38:12

利用Sentinel解决雪崩问题（一）流量控制

1、解决雪崩问题的常见方式有四种: 超时处理:设定超时时间&#xff0c;请求超过一定时间没有响应就返回错误信息&#xff0c;不会无休止等待;舱壁模式:限定每个业务能使用的线程数&#xff0c;避免耗尽整个tomcat的资源&#xff0c;因此也叫线程隔离;熔断降级:由断路器统计业务…...

编程日记 2024/4/15 0:36:09

用MATLAB玩转三维可视化：手把手教你绘制动态曲面图（含peaks函数详解）

MATLAB三维可视化实战&#xff1a;从静态曲面到动态交互的全方位指南 科研工作者常面临海量数据的可视化挑战&#xff0c;而MATLAB提供的三维图形工具链能将这些抽象数字转化为直观的空间形态。本文将带您深入探索三维可视化的核心技巧&#xff0c;从基础绘图到高级交互&#x…...

编程新知 2026/3/26 0:36:37

收藏！后端岗遇冷，大模型+算法岗成程序员新出路（小白必看）

最近刷招聘软件的开发者们&#xff0c;想必都感受到了一股明显的“寒意”&#xff1a;后端开发岗位数量肉眼可见地锐减&#xff0c;薪资涨幅彻底停滞&#xff0c;甚至有不少求职者吐槽&#xff0c;自己投递了70份后端简历&#xff0c;最终只收到3个面试邀约&#xff0c;更让人无…...

编程新知 2026/3/25 23:36:05

ANSYS仿真焊接—切割—激光熔覆仿真、温度场、应力场、热应力、残余应力仿真 3D打印，增材制造

ANSYS仿真焊接—切割—激光熔覆仿真、温度场、应力场、热应力、残余应力仿真 3D打印&#xff0c;增材制造&#xff0c;附带完整的APDL命令流代码与讲易与实例 赠送apdl命令参考手册&#xff0c;多本焊接相关pdf版书籍 适合本科生写毕设论文&#xff0c;或者研究生初学APDL增材制…...

编程新知 2026/3/25 22:53:36

OpenClaw对接Qwen3-32B-Chat私有镜像：5步完成本地AI助手部署

OpenClaw对接Qwen3-32B-Chat私有镜像&#xff1a;5步完成本地AI助手部署 1. 为什么选择OpenClawQwen3-32B-Chat组合&#xff1f; 上周我在整理历年积累的技术文档时&#xff0c;面对散落在十几个文件夹里的2000多份PDF和Markdown文件&#xff0c;突然意识到手动分类已经不可能…...

编程新知 2026/3/25 22:45:11

风电调频翻车实录：当虚拟惯性遇上二次跌落

双馈风力电机虚拟惯性控制下垂控制三机九节点一次调频模型 [1]系统为三机九节点模型&#xff0c;所有参数已调好且可调&#xff0c;可直接运行&#xff0c;风电渗透率19.4% [2]风机采用虚拟惯性下垂控制&#xff0c;转速回复模块&#xff0c;在系统频率跌落时释放转子动能提供有…...

编程新知 2026/3/25 21:42:41

用Pyecharts玩转动态图表：Flask整合3种数据源实战教程（CSV/MySQL/Linux集群）

用Pyecharts玩转动态图表&#xff1a;Flask整合3种数据源实战教程&#xff08;CSV/MySQL/Linux集群&#xff09; 数据可视化是现代数据分析不可或缺的一环&#xff0c;而将数据以动态、交互式的方式呈现则能极大提升信息传达的效率。对于Python开发者来说&#xff0c;Pyecharts…...

编程新知 2026/3/25 21:32:38

如何快速导出原神祈愿记录：完整的数据分析与可视化指南

如何快速导出原神祈愿记录&#xff1a;完整的数据分析与可视化指南 【免费下载链接】genshin-wish-export biuuu/genshin-wish-export - 一个使用Electron制作的原神祈愿记录导出工具&#xff0c;它可以通过读取游戏日志或代理模式获取访问游戏祈愿记录API所需的authKey。 项…...

编程新知 2026/3/25 20:13:46

深度解析：7大深度学习模型构建PyTorch文本分类框架

深度解析&#xff1a;7大深度学习模型构建PyTorch文本分类框架 【免费下载链接】Text-Classification-Pytorch Text classification using deep learning models in Pytorch 项目地址: https://gitcode.com/gh_mirrors/te/Text-Classification-Pytorch 文本分类作为自然…...

编程新知 2026/3/25 20:09:45

Crowd.dev 开发者指南：如何扩展新的集成和自定义数据处理逻辑

Crowd.dev 开发者指南&#xff1a;如何扩展新的集成和自定义数据处理逻辑 【免费下载链接】crowd.dev ⚡️ The developer data platform to centralize community, product, and customer data 项目地址: https://gitcode.com/gh_mirrors/cr/crowd.dev Crowd.dev 是一款…...

编程新知 2026/3/25 19:47:33

华为ModelEngine赋能HR：打造智能面试分析Agent的实战指南

1. 为什么HR需要智能面试分析Agent&#xff1f; 招聘工作对任何企业来说都是核心环节&#xff0c;但传统面试流程存在几个明显痛点&#xff1a;简历筛选耗时长、面试问题缺乏针对性、评估标准不统一、面试记录整理繁琐。这些问题直接影响了招聘效率和人才匹配度。 我去年帮一家…...

编程新知 2026/3/25 19:11:25