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

Vue学习计划--Vue2（一）简单了解vue

news 2026/3/26 23:27:31

Vue2的终止支持时间为2023年12月31日。
在这个矛盾的时间点，还是决定先把vue2的笔记放出来，在Vue2完结后再把Vue3的笔记补上。这样呢，2和3都不落下，也算是来一个启承的作用吧。在工作中呢，旧的项目可以维护，新的项目也可以上手。

后续呢会有react16和react18、node、webpack、vite、以及实战项目，期间会包含umijs,nextjs, nuxtjs等等更多的更前沿的前端技术笔记

也算是对自己的一种督促，不断充实自己，分享自己的学习笔记，让自己和朋友们可以在前端的道路上越走越远。

  1. vue是什么？
    vue是一套用于构建用户界面的渐进式jacascript库
    构建用户界面： 把一系列的数据转换成界面
    渐进式：循序渐进
    简单应用：只需一个轻量小巧的核心库
    复杂应用：可以引入各式各样的vue插件
    2. Vue作者？
    尤雨溪
    1. 13年,受到Angular框架的启发，开发出了一套轻量级框架-- Seed，同年12月，Seed更名为Vue 0.6.0
    2. 14年，正式对外发布， 版本号0.8.0
    3. 15年，10月27日，正式发布Vue1.0.0 Evangelion(超世纪福音战士)
    4. 16年，10月1日 正式发布Vue2.0.0 Chost in the Shell(攻壳机动队)
    5. 20年，9月18日，正式发布Vue3.0.0 One piece(海贼王)
    …
    后起之秀，生态完善，已然成为国内工程师必备技能
    3. Vue 特点：
    1. 采用组件化模式，提高的复用率，且让代码更好的维护
    2. 声明编码，让编码人员无需直接操作DOM
    3. 使用虚拟DOM+优秀的DIFF算法, 尽量复用DOM节点
    命令式: 数据 => 真实DOM
    声明式: 数据 => 虚拟DOM => 真实DOM
    核心

    1. 初始Vue
      想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象
      root容器里的代码依然符合html规范
      root容器里的代码被称为[Vue模板]
      Vue实例与容器是一一对应的
      真实开发中只有一个Vue实例,并且配合组件一起使用
      {{ xxx }} 要写js表达式,且xxx会自动读取到data中所有的属性
      注意区分: js表达式和js代码(语句)
      表达式: 一个表达式会产生一个值,可以放在任何一个需要的地方
      a: 变量
      b: a + b
      demo(1)
      x === y ? ‘a’ : ‘b’
      js代码(语句)
      if()
      for()

      一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新
      注意：

      • 取消控制台的vueTools提示，安装vue-Tools

        安装一个vue-Tools工具，方便开发，其实就是谷歌浏览器的插件件，可以访问此链接，进入最后一个网址（收藏猫）进行下载，该网上还有教程，如何安装谷歌插件,点击进入

      • 取消控制台的生产环境提示 Vue.config.productionTip = false
        示例：
      <!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"><script src="./vue.js"></script> 	<!--	此处在Vue2官网把vue.js下载到本地即可	--><!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>--><title>Document</title></head><!-- 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象root容器里的代码依然符合html规范root容器里的代码被称为[Vue模板]Vue实例与容器是一一对应的真实开发中只有一个Vue实例,并且配合组件一起使用{{ xxx }} 要写js表达式,且xxx会自动读取到data中所有的属性注意区分: js表达式和js代码(语句)表达式: 一个表达式会产生一个值,可以放在任何一个需要的地方a: 变量b: a + bdemo(1)x === y ? 'a' : 'b'js代码(语句)if()for() --><body><div id="app">{{ name }} <br>{{ 1 + 2 }} <br>{{ false ? name : age }} </div><div id="list">{{ nameList }}</div><div class="classVue">{{ className }}  {{ className2 }}</div><script>new Vue({el: "#app",  // el用于指定当前Vue实例为哪个容器服务，值通常为class选择器字符串data:{ // 用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象name: '财经',age: 19}})new Vue({el: "#list",  data:{ nameList: 'list的data',}})new Vue({el: ".classVue",  data:{ className: '小猪佩奇',}})new Vue({el: ".classVue",  data:{ className2: '乔治',}})</script></body></html>

    2. Vue模板语法有2大类
      插值语法： {{ XXX }}
      功能： 用于解析标签体内容
      写法： {{ xxx }} 中的xxx要写js表达式，vm实例上的所有属性
      指令语法：
      功能： 用于解析标签（包括：标签属性，标签体内容，绑定事件…）
      备注： Vue中有很多指令，形式都是v-xxx

    3. Vue中有两种绑定数据方式：
      单向绑定: v-bind 绑定动态属性 // 数据只从data流向页面
      v-bind 定义属性: 包括class style

          <input type="text" v-bind:value = "name"><!-- 简写 --><input type="text" :name = "name">

      双向绑定: v-model 数据不仅能从data流向页面,还可以从页面流向data

          <input type="text" v-model:value = "name"><!-- 简写 --><input type="text" v-model = "name">

      备注：
      v-model 一般用于表单元素 （如input select等），因为v-model默认收集的是value的值
      v-model: value 可以简写成 v-model,

相关文章：

Vue学习计划--Vue2（一）简单了解vue

Vue2的终止支持时间为2023年12月31日。 在这个矛盾的时间点&#xff0c;还是决定先把vue2的笔记放出来&#xff0c;在Vue2完结后再把Vue3的笔记补上。这样呢&#xff0c;2和3都不落下&#xff0c;也算是来一个启承的作用吧。在工作中呢&#xff0c;旧的项目可以维护&#xff0c…...

编程日记 2023/12/5 21:32:23

微信小程序生成二维码并保存到本地方法

微信小程序生成二维码请保存到本地方法 官方weapp-qrcode插件 github链接 功能完成样子 wxml <view class"qrcode"><canvas style"width: 275px; height: 275px;" canvas-idmyQrcode></canvas> </view> <view class" …...

编程日记 2023/12/5 21:31:22

shell_exec 和 exec区别

shell_exec 和 exec 都是用于在 PHP 中执行系统命令的函数&#xff0c;但它们之间有一些区别。 返回值类型&#xff1a;shell_exec 函数返回命令的输出结果作为字符串&#xff0c;而 exec 函数将输出结果存储在数组中。 输出结果&#xff1a;shell_exec 函数返回命令的完整输出…...

编程日记 2023/12/5 21:29:20

WPF创建进度条

使用wpf做一个原生的进度条&#xff0c;进度条上面有值&#xff0c;先看效果。 功能就是点击按钮&#xff0c;后台处理数据&#xff0c;前台显示处理数据的变化&#xff0c;当然还可以对进度条进行美化和关闭的操作&#xff0c;等待后台处理完毕数据&#xff0c;然后自动关闭。…...

编程日记 2023/12/5 21:26:16

全网最新最全面的Appium自动化：Appium常用操作之混合应用webview页面操作--待补充！

上下文操作&#xff1a; 在appium中&#xff0c;对于混合应用&#xff0c;需要进行WebView页面和原生应用的切换 常用的方法如下&#xff1a; 1、context(self) / current_context(self)&#xff1a;返回当前会话的当前上下文&#xff0c;context可以理解为可进入的窗口。对于…...

编程日记 2023/12/5 21:25:16

基于OpenCV+YOLOv5实现车辆跟踪与计数(附源码)

导 读 本文主要介绍基于OpenCVYOLOv5实现车辆跟踪与计数的应用&#xff0c;并给出源码。 资源下载 基础代码和视频下载地址&#xff1a; https://github.com/freedomwebtech/win11vehiclecount main.py代码:​​​​​​​ import cv2import torchimport numpy as npfrom tr…...

编程日记 2023/12/5 21:24:15

05、pytest断言确定的异常

官方用例 # content of test_sysexit.py import pytestdef f():raise SystemExit(1)def test_mytest():with pytest.raises(SystemExit):f()解读与实操 ​ 标准python raise函数可产生异常。pytest.raises可以断言某个异常会发现。异常发生了&#xff0c;用例执行成功&#x…...

编程日记 2023/12/5 21:23:14

金蝶云星空单据编辑界面，不允许批量填充操作

文章目录 金蝶云星空单据编辑界面&#xff0c;不允许批量填充操作案例演示开发设计测试 金蝶云星空单据编辑界面&#xff0c;不允许批量填充操作 案例演示 售后单&#xff0c;明细信息单据体&#xff0c;物料编码字段禁止批量填充。 开发设计 编写表单插件&#xff0c;在Be…...

编程日记 2023/12/5 21:22:13

Springboot项目启动成功后可通过五种方式继续执行

实现CommandLineRunner接口 项目初始化完毕后&#xff0c;才会调用方法&#xff0c;提供服务 Component public class StartRunner implements CommandLineRunner {Overridepublic void run(String... args) throws Exception {System.out.println("CommandLineRunner&qu…...

编程日记 2023/12/5 21:21:12

什么是供应链金融分账系统？

一、供应链金融的重要性 供应链金融在很多行业都是要用到,比如在抖音,快手店铺的商家资金回笼,通常需要7-21天的回款周期,这对于商家的周转来说是一件很困难的事情,在供应链金融中&#xff0c;分账就扮演着至关重要的角色&#xff0c;不仅是金融流程中的一环&#xff0c;更是保…...

编程日记 2023/12/5 21:20:11

【测绘程序设计】——坐标换带与高程投影

测绘工程中经常遇到 “坐标换带” 与 “高程投影” 问题，前者是在改变投影的分带号——即投影的中央子午线，通过 “(x,y)->(B,L)->(x,y)” 进行；而后者则是为减小投影变形（高程投影变短、高斯投影变长，详情可参考博客《测绘综合能力》真题易错本 第（37）条）通过平…...

编程日记 2023/12/5 21:17:08

企业计算机服务器中了Mallox勒索病毒如何解密，Mallox勒索病毒数据恢复

随着计算机技术的不断应用与发展&#xff0c;网络为企业的生产运营提供了极大帮助&#xff0c;越来越多的企业开始利用网络办公&#xff0c;因此&#xff0c;随之而来的网络安全威胁也在不断增加。近期&#xff0c;云天数据恢复中心陆续接到很多企业的求助&#xff0c;企业的计…...

编程日记 2023/12/5 21:16:07

一套rk3588 rtsp服务器推流的 github 方案及记录 -01

我不生产代码&#xff0c;我只是代码的搬运工&#xff0c;相信我&#xff0c;看完这个文章你的图片一定能变成流媒体推出去。 诉求&#xff1a;使用opencv拉流&#xff0c;转成bgr数据&#xff0c;需要把处理后的数据&#xff08;BGR&#xff09;编码成264&#xff0c;然后推流…...

编程日记 2023/12/5 21:11:03

PyQt6 QComboBox下拉组合框控件

​锋哥原创的PyQt6视频教程&#xff1a; 2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~共计34条视频&#xff0c;包括&#xff1a;2024版 PyQt6 Python桌面开发 视频教程(无废话…...

编程日记 2023/12/5 21:09:01

常用类与比较器

常用类 学一个类&#xff0c;先搞清楚继承关系&#xff0c;再看源码 包装类Wrapper jdk5之前是手动装箱拆箱 jdk5及之后是自动装箱拆箱&#xff08;调用valueOf方法&#xff08;自动默认&#xff09;/创建对象的构造方法&#xff0c;XXXvalue方法…...

编程日记 2023/12/5 21:08:00

【上海大学《面向对象程序设计A》课程小项目报告】抽象向量类模板及其派生类

1 项目内容及要求 本项目通过设计一个抽象向量类模板&#xff0c;以及一个通用的向量类模板和一个字符串类作为其派生类&#xff0c;以满足各种应用场景中的数据存储和处理需求。 项目内容&#xff1a; 抽象向量类模板。派生向量类。派生字符串类。测试及异常处理。联合测试…...

编程日记 2023/12/5 21:02:56

Leetcode每日一题学习训练——Python3版（到达首都的最少油耗）

版本说明 当前版本号[20231205]。 版本修改说明20231205初版 目录 文章目录 版本说明目录到达首都的最少油耗理解题目代码思路参考代码 原题可以点击此 2477. 到达首都的最少油耗 前去练习。 到达首都的最少油耗 ​ 给你一棵 n 个节点的树&#xff08;一个无向、连通、无环…...

编程日记 2023/12/5 21:01:56

Java面试题（每天10题）-------连载（42）

目录 Spring篇 1、Spring Bean的作用域之间有什么区别&#xff1f; 2、什么是Spring inner beans&#xff1f; 3、Spring框架中的单例Beans是线程安全的吗&#xff1f; 4、请举例说明如何在Spring中诸如一个Java Collection&#xff1f; 5、如何向Spring Bean中诸如一个J…...

编程日记 2023/12/5 21:00:55

netty websocket学习

【硬核】肝了一月的Netty知识点 超详细Netty入门&#xff0c;看这篇就够了&#xff01; bzm_netty_sb netty-chat vuewebsokect实现实时聊天&#xff0c;可单聊、可群聊&#xff08;一&#xff09; vue实现聊天栏定位到最底部&#xff08;超简单、可直接复制使用&#xff09;…...

编程日记 2023/12/5 20:59:54

【数据结构】环形队列

环形队列 1. 定义 环形队列就是将队列在逻辑上看作环形结构、物理上仍是数组形式存储的一种数据结构。 其实现主要分为两种情况&#xff1a; 浪费空间法记录空间法 2. 实现 实现要考虑的是成员变量 2.1 记录空间法 使用used标识当前存储了多少元素&#xff0c;如果为空&a…...

编程日记 2023/12/5 20:57:52

终极指南：使用compressorjs实现专业级前端图片压缩与编辑功能

终极指南&#xff1a;使用compressorjs实现专业级前端图片压缩与编辑功能 【免费下载链接】compressorjs compressorjs: 是一个JavaScript图像压缩库&#xff0c;使用浏览器原生的canvas.toBlob API进行图像压缩。 项目地址: https://gitcode.com/gh_mirrors/co/compressorjs…...

编程新知 2026/3/26 22:24:19

Webots仿真实战：如何用C语言控制四轮小车实现自动行驶

Webots仿真实战&#xff1a;C语言控制四轮小车自动行驶全攻略 引言 在机器人开发领域&#xff0c;仿真环境的重要性不言而喻。它不仅能大幅降低硬件成本&#xff0c;还能加速开发周期&#xff0c;让开发者专注于算法和控制逻辑的优化。Webots作为一款专业的机器人仿真软件&…...

编程新知 2026/3/26 21:52:03

AI超清画质增强作品集：3倍放大修复，让模糊图片重获新生

AI超清画质增强作品集&#xff1a;3倍放大修复&#xff0c;让模糊图片重获新生 1. 从模糊到高清的视觉革命 你是否遇到过这样的情况&#xff1a;翻出多年前的老照片&#xff0c;却发现画面模糊不清&#xff1b;从网上下载的图片分辨率太低&#xff0c;放大后全是马赛克&#…...

编程新知 2026/3/26 21:44:01

如何让Windows任务栏焕然一新？TranslucentTB给你答案

如何让Windows任务栏焕然一新&#xff1f;TranslucentTB给你答案 【免费下载链接】TranslucentTB A lightweight utility that makes the Windows taskbar translucent/transparent. 项目地址: https://gitcode.com/gh_mirrors/tr/TranslucentTB 您是否曾对Windows系统一…...

编程新知 2026/3/26 20:41:48

Excel 技巧：一键批量填充空值

&#x1f680; 操作步骤选中区域首先&#xff0c;用鼠标选中包含空值的目标数据区域。定位空值按下快捷键 Ctrl G 打开“定位”对话框&#xff1a;点击左下角的 「定位条件...」。选择 「空值」。点击「确定」。✅ 此时&#xff0c;区域内所有空白单元格已被高亮选中。输入公式…...

编程新知 2026/3/26 18:52:40

3步掌握文字转手写工具：免费高效实用指南

3步掌握文字转手写工具&#xff1a;免费高效实用指南 【免费下载链接】text-to-handwriting So your teacher asked you to upload written assignments? Hate writing assigments? This tool will help you convert your text to handwriting xD 项目地址: https://gitcod…...

编程新知 2026/3/26 18:20:16

HCIA复习作业

一、 实验拓扑二、 实验需求1.学校内HTTP客户端可以正常通过域名www.baidu.com访问百度的服务器 2.学校网络内部基于192.168.1.0/24划分&#xff0c;PC1可以访问3.3.3.0/24网段&#xff0c;PC2不允许 3.学校内部使用静态路由&#xff0c;R1和R2之间浮动静态路由 4.运营商使用动…...

编程新知 2026/3/26 17:43:48

OpenMPI进程绑定实战：如何用--bind-to和--map-by提升HPC应用性能（附Slurm配置示例）

OpenMPI进程绑定实战&#xff1a;NUMA架构下的性能优化与Slurm集成指南 1. 高性能计算中的进程绑定核心原理 在现代高性能计算环境中&#xff0c;CPU核心绑定技术已成为提升并行计算效率的关键手段。当我们在双路CPU服务器上运行计算密集型应用时&#xff0c;经常会遇到"一…...

编程新知 2026/3/26 16:25:08

Simulink新手必看：Enable和Trigger模块的5种实战用法（附模型下载）

Simulink新手必看&#xff1a;Enable和Trigger模块的5种实战用法&#xff08;附模型下载&#xff09; 在工业自动化、信号处理和控制系统设计中&#xff0c;Simulink作为一款强大的仿真工具&#xff0c;其子系统控制功能尤为重要。Enable和Trigger模块作为Simulink中的两大核心…...

编程新知 2026/3/26 15:48:29

嵌入式软件开发规范与最佳实践指南

嵌入式软件开发最佳实践指南1. 项目概述1.1 嵌入式开发核心挑战现代嵌入式系统开发面临代码复杂度增加、团队协作需求提升以及产品迭代周期缩短等多重挑战。高效的开发流程和规范的编码实践成为保证项目成功的关键因素。1.2 开发环境配置建议推荐采用以下硬件配置方案&#xff…...

编程新知 2026/3/26 13:08:56