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

Vue2基础一、快速入门

news 2026/5/18 18:31:23

零、文章目录

Vue2基础一、快速入门

1、Vue 概念

（1）为什么学

  • 前端必备技能

  • 岗位多，绝大互联网公司都在使用Vue

  • 提高开发效率

  • 高薪必备技能（Vue2+Vue3）

image-20230705092512823

（2）Vue是什么

  • **概念：**Vue (读音 /vjuː/，类似于 view) 是一套 **构建用户界面 ** 的 渐进式 框架
  • 官网：https://v2.cn.vuejs.org/
  • 构建用户界面：基于数据渲染出用户可以看到的界面

1681875887026

  • **渐进式：**所谓渐进式就是循序渐进，不一定非得把Vue中的所有API都学完才能开发Vue，可以学一点开发一点

    • Vue的两种开发方式：

    • Vue核心包开发：场景：局部模块改造

    • Vue核心包&Vue插件&工程化：场景：整站开发

    image-20230705095852701

  • **框架：**就是一套完整的解决方案

    • 特点：有一套必须让开发者遵守的规则或者约束，学框架就是学习的这些规则
    • **优点：**大大提高开发效率
    • 库VS框架
      • 库：类似工具箱，是一堆方法的集合，比如 axios、lodash、echarts等
      • 框架：是一套完整的解决方案，实现了大部分功能，我们只需要按照一定的规则去编码即可。

    1681876620277

（3）Vue开发方式

  • 传统开发模式：基于html/css/js文件开发Vue

    image-20210228083641377

  • 工程化(脚手架)开发方式：在webpack环境中开发Vue，这是最推荐, 企业常用的方式

    image-20230628161206620

2、创建实例

（1）步骤说明

  1. 准备容器 (Vue所管理的范围)
  2. 引包 (开发版本包 / 生产版本包) 官网
  3. 创建Vue实例 new Vue()
  4. 添加配置项 => 完成渲染
    1. el:指定挂载点，选择器指定控制的是哪个盒子
    2. data提供数据

（2）代码演示

<!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><!-- 创建Vue实例，初始化渲染1. 准备容器 (Vue所管理的范围)2. 引包 (开发版本包 / 生产版本包) 官网3. 创建实例 new Vue()4. 添加配置项 => 完成渲染--><!-- 不是Vue管理的范围 --><div class="box2">box2 -- {{ count }}</div><div class="box">box -- {{ msg }}</div>-----------------------------------------------------<!-- Vue所管理的范围 --><div id="app"><!-- 这里将来会编写一些用于渲染的代码逻辑 --><h1>{{ msg }}</h1><a href="#">{{ count }}</a></div><!-- 引入的是开发版本包 - 包含完整的注释和警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>// 一旦引入 VueJS核心包，在全局环境，就有了 Vue 构造函数const app = new Vue({// 通过 el 配置选择器，指定 Vue 管理的是哪个盒子el: '#app',// 通过 data 提供数据data: {msg: 'Hello world',count: 666}})</script>
</body></html>

3、插值表达式

（1）常规用法

  • 插值表达式是一种Vue的模板语法

  • 我们可以用插值表达式渲染出Vue提供的数据

  • 表达式：是可以被求值的代码，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><!-- 插值表达式：Vue的一种模板语法作用：利用 表达式 进行插值渲染语法：{{ 表达式 }}--><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 src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {nickname: 'tony',age: 18,friend: {name: 'jepson',desc: '热爱学习 Vue'}}})</script>
</body></html>

（2）错误用法

1.在插值表达式中使用的数据 必须在data中存在
<p>{{hobby}}</p>  //如果在data中不存在 则会报错2.支持的是表达式，而非语句，比如：if   for ...
<p>{{if}}</p>3.不能在标签属性中使用 {{  }} 插值 (插值表达式只能标签中间使用)
<p title="{{username}}">我是P标签</p>

4、响应式特性

（1）响应式是什么

  • 数据变化，视图自动更新
  • 使用 Vue 开发，关注业务的核心逻辑，根据业务修改数据即可，不需要关心视图的更新

image-20230705132344822

（2）如何访问 和 修改 data中的数据

  • data中的数据, 最终会被添加到实例上
    • 访问数据： “实例.属性名”
    • 修改数据： “实例.属性名” = “值”
<!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><div id="app">{{ msg }} {{ count }}</div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {// 响应式数据 → 数据变化了，视图自动更新msg: 'hello world',count: 100}})// data中的数据，是会被添加到实例上// 1. 访问数据  实例.属性名console.log(app.msg)// 2. 修改数据  实例.属性名 = 新值app.msg = 'hello world ok'</script></body></html>

5、开发插件安装

（1）VSCode插件

  • VSCode插件安装：Vetur,VueHepler
  • VSCode相关知识请参考VSCode入门

image-20230628093901575

（2）Chrome浏览器插件

  • 下载插件

    • 通过谷歌应用商店安装（国外网站）

    • 极简插件下载（推荐）：https://chrome.zzzmh.cn/

image-20230705143331078

  • 安装插件

    • Chrome浏览器输入chrome://extensions/，打开开发者模式

    • 把下载的插件直接拖进页面，即安装完成

image-20230705134152404

  • 使用插件

    • 安装之后可以F12后看到多一个Vue的调试面板

    • 可以在里面修改对象值调试代码

image-20230705142849726

相关文章：

Vue2基础一、快速入门

零、文章目录 Vue2基础一、快速入门 1、Vue 概念 &#xff08;1&#xff09;为什么学 前端必备技能 岗位多&#xff0c;绝大互联网公司都在使用Vue 提高开发效率 高薪必备技能&#xff08;Vue2Vue3&#xff09; &#xff08;2&#xff09;Vue是什么 **概念&#xff1a;…...

编程日记 2023/8/2 1:52:56

【POJ-3279】Fliptile（递推+搜索）

POJ-3279. Fliptile&#xff08;递推搜索&#xff09; Vjudge链接 题目描述 农场主约翰知道&#xff0c;一头智力得到满足的奶牛是一头快乐的奶牛&#xff0c;它会产更多的奶。他为奶牛安排了一项脑力活动&#xff0c;让它们摆弄一个 M N M N MN 的方格 ( 1 ≤ M ≤ 15 …...

编程日记 2023/8/2 1:51:55

522个matplotlib绘图案例，包含：折线图、散点图、条形图、饼图、直方图、3D图等，源码可直接运行！

文章目录 matplotlib介绍图表介绍折线图&#xff08;Line Plot&#xff09;散点图&#xff08;Scatter Plot&#xff09;条形图&#xff08;Bar Plot&#xff09;饼图&#xff08;Pie Chart&#xff09;直方图&#xff08;Histogram&#xff09;箱线图&#xff08;Box Plot&…...

编程日记 2023/8/2 1:50:54

windows安装Elasticsearch8.9.0

官网解压安装好路径&#xff08;非中文&#xff0c;无空格&#xff09; 可参考 言之有李LAX csdn http://t.csdn.cn/S2oju本人使用jdk17 修改配置elasticsearch.yml xpack.security.enabled: false xpack.security.http.ssl:enabled: false直接点击bin\elasticsearch.bat…...

编程日记 2023/8/2 1:49:53

用Delphi编写一个通用视频转换工具，让视频格式转换变得更简单

用Delphi编写的简单视频格式转换程序&#xff0c;它使用TComboBox、TOpenDialog和TSaveDialog组件来选择转换格式、选择源视频文件和选择目标视频文件。程序还使用TEdit组件允许用户输入参数&#xff0c;然后将这些组件中的信息拼接成转换命令并在DOS窗口中运行它。 procedure…...

编程日记 2023/8/2 1:48:50

Kafka系列之：安装Know Streaming详细步骤

Kafka系列之：安装Know Streaming详细步骤 一、相关技术博客二、安装elasticsearch1.下载elasticsearch2.创建数据目录3.创建es用户4.修改最大文件数5.解压elasticsearch6.赋予es用户目录权限7.修改es配置8.切换es用户启动elasticsearch三、安装KnowStreaming1.下载KnowStreami…...

编程日记 2023/8/2 1:47:49

绝杀 GETPOST 嵌套的 JSON 参数

JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;常用于Web应用程序中的数据传输。在HTTP数据包信息传递时&#xff0c;JSON扮演着非常正常的角色&#xff0c;因为它是一种通用的数据格式&#xff0c;可以被多种编程语言和应用程…...

编程日记 2023/8/2 1:46:48

Spring 项目过程及如何使用 Spring

文章目录 1.创建 Spring 项目步骤1.1 创建 Maven 项目1.2添加 Spring 框架支持1.3 添加启动项2.如何使用 Spring2.1 存储 Bean 对象2.1.1 创建 Bean对象2.1.2 将 Bean对象注册到容器中 2.2 获取并使用 Bean对象2.2.1 使用 ApplicationContext 获取对象2.2.2 使用 BeanFactory 获…...

编程日记 2023/8/2 1:45:47

信息学奥赛一本通——1258：【例9.2】数字金字塔

文章目录 题目【题目描述】【输入】【输出】【输入样例】【输出样例】 AC代码 题目 【题目描述】 观察下面的数字金字塔。写一个程序查找从最高点到底部任意处结束的路径&#xff0c;使路径经过数字的和最大。每一步可以从当前点走到左下方的点也可以到达右下方的点。 在上面…...

编程日记 2023/8/2 1:44:45

selenium官网文档阅读总结（day 2）

1.selenium元素定位方法 1.1selenium命令 当我们使用chormdriver打开网页后&#xff0c;接下来就要用python操作元素&#xff0c;模拟用户会作出的操作&#xff0c;这些操作元素的方法就是命令。比如 (1) click&#xff1a;点击&#xff08;按钮&#xff0c;单选框&#xff…...

编程日记 2023/8/2 1:43:43

VMware虚拟机安装VMware tools

一、挂载光驱 执行以下命令来创建 /mnt/cdrom 目录&#xff1a; mkdir -p /mnt/cdrom-p 参数会确保如果 /mnt/cdrom 的上级目录&#xff08;例如 /mnt&#xff09;不存在的话也会被创建。 然后&#xff0c;你可以再次尝试挂载光盘&#xff1a; mount /dev/sr0 /mnt/cdrom这次…...

编程日记 2023/8/2 1:42:42

【Linux命令200例】rm用来删除文件或目录（谨慎使用）

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;本文已收录于专栏&#xff1a;Linux命令大全。 &#x1f3c6;本专栏我们会通过具体的系统的命令讲解加上鲜…...

编程日记 2023/8/2 1:41:39

行云管家荣获CFS第十二届财经峰会 “2023产品科技创新奖”

7月26日至27日&#xff0c;CFS第十二届财经峰会暨2023可持续商业大会在京盛大召开。峰会主题为“激活高质量发展澎湃活力”&#xff0c;超1000位政商领袖、专家学者、企业及媒体代表出席了本次盛会&#xff0c;共同分享新技术新产品新趋势、研判全球新挑战与新变局下企业的机遇…...

编程日记 2023/8/2 1:40:38

uniapp禁止页面滚动

用 touchmove.stop.prevent“moveHandle”&#xff0c;moveHandle 可以用来处理 touchmove 的事件&#xff0c;也可以是一个空函数。 <viewclass“mask” touchmove.stop.prevent“moveHandle”>...

编程日记 2023/8/2 1:39:36

ModuleNotFoundError: No module named ‘_sqlite3‘

前言 遇到报错信息如下&#xff1a; ModuleNotFoundError: No module named _sqlite3解决方式 参考解决方式&#xff1a; https://blog.csdn.net/jaket5219999/article/details/53512071 find / -name _sqlite*.socp /usr/lib64/python3.6/lib-dynload/_sqlite3.cpython-36…...

编程日记 2023/8/2 1:38:34

Rust的入门篇(下)

这篇博客是rust入门篇下 45. 生命周期注释 // 生命周期// 下面代码不能通过编译 // longer 函数取 s1 和 s2 两个字符串切片中较长的一个返回其引用值 // 返回值引用可能会返回过期的引用 // fn longer(s1: &str, s2: &str) -> &str { // if s2.len() >…...

编程日记 2023/8/2 1:37:33

PYTHON-logging-工具类-支持中文字符控制台输出和文件写入-不会导致乱码

import logging import sys import os import time from logging.handlers import RotatingFileHandler import iodef get_logger(tag):# 创建一个新的输出流&#xff0c;并指定编码为UTF-8sys.stdout io.TextIOWrapper(sys.stdout.buffer, encodingutf-8)accPath logsif not…...

编程日记 2023/8/2 1:36:32

对gpt的简单认识

1.gpt是什么&#xff1f; GPT&#xff08;Generative Pre-trained Transformer 生成式预训练Transformer模型&#xff09;是一种基于Transformer架构的预训练语言模型&#xff0c;由OpenAI开发。GPT模型以无监督学习的方式使用大规模语料库进行预训练&#xff0c;并具有生成文…...

编程日记 2023/8/2 1:35:31

java类和对象详解（1）

面向对象的初步认知 什么是面向对象 Java是一门纯面向对象的语言(Object Oriented Program, 简称OOP),在面向对象的世界里&#xff0c;一切皆为对象。面向对象是解决问题的一种思想&#xff0c;主要依靠对象之间的交互完成一件事情。 用面向对象的思想来涉及程序&#xff0c;更…...

编程日记 2023/8/2 1:34:26

RxJava 倒计时，轮询器

笔记 倒计时 /*** 短信倒计时** param s*/private Subscription subscription30;public void startCountdownFinishRx30(int s) {clearFinishSubscription30();subscription30 Observable.interval(0, 1, TimeUnit.SECONDS).take(s 1).map(new Func1<Long, Long>() {O…...

编程日记 2023/8/2 1:33:25

AI智能体评估框架AgentEval：模块化设计与自动化评测实践

1. 项目概述&#xff1a;AgentEval&#xff0c;一个为AI智能体“打分”的裁判最近在折腾AI智能体&#xff08;Agent&#xff09;的开发&#xff0c;从简单的自动化脚本到复杂的多步推理系统&#xff0c;我前前后后也做了不少。但每次做完一个Agent&#xff0c;最头疼的问题就来…...

编程新知 2026/5/18 18:30:49

Linux挖矿木马Linux.BtcMine.174技术剖析与防御实战

1. 新型Linux挖矿木马深度剖析&#xff1a;从Linux.BtcMine.174看现代恶意软件的演进最近安全圈里一个来自俄罗斯Dr.Web公司的分析报告引起了我的注意&#xff0c;他们披露了一个代号为Linux.BtcMine.174的新型木马。这玩意儿可不是什么小打小闹的脚本小子作品&#xff0c;而是…...

编程新知 2026/5/18 17:52:26

AutoGen多角色协作内幕：如何在对话中实现复杂任务的自动分解

AutoGen多角色协作内幕：对话式复杂任务自动分解的底层原理与工程实现 关键词 AutoGen、多智能体协作、任务自动分解、大语言模型对话系统、多角色工作流、LLM编排、工具调用集成 摘要 本文从第一性原理出发，系统拆解微软AutoGen框架中多角色协作下的复杂任务自动分解机制…...

编程新知 2026/5/18 17:48:14

在Windows上安装APK的终极指南：5步掌握APK Installer工具

在Windows上安装APK的终极指南&#xff1a;5步掌握APK Installer工具 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 你是否曾经想在Windows电脑上直接安装Android应用…...

编程新知 2026/5/18 17:35:49

深度学习嵌入操作优化与DAE架构实践

1. 嵌入操作与DAE架构的核心挑战在深度学习推荐系统和图神经网络中&#xff0c;嵌入操作&#xff08;Embedding Operations&#xff09;占据了超过60%的计算时间。这类操作本质上是一种特殊的稀疏-密集张量乘法&#xff08;SpMM&#xff09;&#xff0c;其计算模式具有两个显著…...

编程新知 2026/5/18 15:28:46

SoC芯片设计全流程解析：从架构定义到流片制造

1. 项目概述&#xff1a;从“黑盒子”到“城市蓝图”当我们谈论智能手机、智能手表、路由器乃至汽车里的智能座舱时&#xff0c;我们谈论的核心&#xff0c;往往是一个被称为“片上系统”或SoC的硅片。对于很多刚入行的朋友&#xff0c;甚至是一些有经验的软件工程师来说&#…...

编程新知 2026/5/18 15:26:43

DETR模型ONNX推理实战：从输出张量到可视化检测框的完整解析

DETR模型ONNX推理实战&#xff1a;从输出张量到可视化检测框的完整解析 在目标检测领域&#xff0c;DETR&#xff08;Detection Transformer&#xff09;以其独特的端到端架构和简洁的流程设计&#xff0c;正在改变传统基于锚框&#xff08;anchor-based&#xff09;方法的格局…...

编程新知 2026/5/18 15:16:24

STM32驱动段码屏实战：手把手教你用HT1621B做个简易电子钟（附完整代码）

STM32与HT1621B打造高精度电子钟&#xff1a;从硬件连接到动态显示全解析 在嵌入式开发领域&#xff0c;能够将理论知识转化为实际项目的能力至关重要。本文将带您完成一个完整的电子钟项目&#xff0c;使用STM32微控制器和HT1621B驱动器来驱动段码液晶屏。不同于简单的驱动演示…...

编程新知 2026/5/18 15:08:10

心理学实验小白必看：用E-Prime 3.0从零设计你的第一个Stroop任务（附完整流程）

心理学实验入门&#xff1a;用E-Prime 3.0构建专业级Stroop实验全指南 第一次打开E-Prime时&#xff0c;满屏的控件和属性面板可能让你感到无从下手——这几乎是每个心理学研究生的必经之路。作为认知心理学最经典的实验范式之一&#xff0c;Stroop任务不仅能验证注意与自动加…...

编程新知 2026/5/18 13:54:09

轻量级推荐系统MiniOneRec：从协同过滤到服务部署的实践指南

1. 项目概述&#xff1a;一个轻量级、高可用的推荐系统引擎在数据驱动的今天&#xff0c;推荐系统早已不是大型互联网公司的专属。无论是电商平台、内容社区&#xff0c;还是企业内部的知识库、工具集&#xff0c;个性化推荐都已成为提升用户体验和业务效率的核心能力。然而&am…...

编程新知 2026/5/18 13:47:44