Vue2基础一、快速入门
零、文章目录
Vue2基础一、快速入门
1、Vue 概念
(1)为什么学
-
前端必备技能
-
岗位多,绝大互联网公司都在使用Vue
-
提高开发效率
-
高薪必备技能(Vue2+Vue3)

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

-
**渐进式:**所谓渐进式就是循序渐进,不一定非得把Vue中的所有API都学完才能开发Vue,可以学一点开发一点
-
Vue的两种开发方式:
-
Vue核心包开发:场景:
局部模块改造 -
Vue核心包&Vue插件&工程化:场景:
整站开发

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

(3)Vue开发方式
-
传统开发模式:基于html/css/js文件开发Vue

-
工程化(脚手架)开发方式:在webpack环境中开发Vue,
这是最推荐, 企业常用的方式
2、创建实例
(1)步骤说明
- 准备容器 (Vue所管理的范围)
- 引包 (开发版本包 / 生产版本包) 官网
- 创建Vue实例 new Vue()
- 添加配置项 => 完成渲染
- el:指定挂载点,选择器指定控制的是哪个盒子
- 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 开发,关注业务的核心逻辑,根据业务修改数据即可,不需要关心视图的更新

(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入门

(2)Chrome浏览器插件
-
下载插件
-
通过谷歌应用商店安装(国外网站)
-
极简插件下载(推荐):https://chrome.zzzmh.cn/
-

-
安装插件
-
Chrome浏览器输入
chrome://extensions/,打开开发者模式 -
把下载的插件直接拖进页面,即安装完成
-

-
使用插件
-
安装之后可以F12后看到多一个Vue的调试面板
-
可以在里面修改对象值调试代码
-

相关文章:
Vue2基础一、快速入门
零、文章目录 Vue2基础一、快速入门 1、Vue 概念 (1)为什么学 前端必备技能 岗位多,绝大互联网公司都在使用Vue 提高开发效率 高薪必备技能(Vue2Vue3) (2)Vue是什么 **概念:…...
【POJ-3279】Fliptile(递推+搜索)
POJ-3279. Fliptile(递推搜索) Vjudge链接 题目描述 农场主约翰知道,一头智力得到满足的奶牛是一头快乐的奶牛,它会产更多的奶。他为奶牛安排了一项脑力活动,让它们摆弄一个 M N M N MN 的方格 ( 1 ≤ M ≤ 15 …...
522个matplotlib绘图案例,包含:折线图、散点图、条形图、饼图、直方图、3D图等,源码可直接运行!
文章目录 matplotlib介绍图表介绍折线图(Line Plot)散点图(Scatter Plot)条形图(Bar Plot)饼图(Pie Chart)直方图(Histogram)箱线图(Box Plot&…...
windows安装Elasticsearch8.9.0
官网解压安装好路径(非中文,无空格) 可参考 言之有李LAX csdn http://t.csdn.cn/S2oju本人使用jdk17 修改配置elasticsearch.yml xpack.security.enabled: false xpack.security.http.ssl:enabled: false直接点击bin\elasticsearch.bat…...
用Delphi编写一个通用视频转换工具,让视频格式转换变得更简单
用Delphi编写的简单视频格式转换程序,它使用TComboBox、TOpenDialog和TSaveDialog组件来选择转换格式、选择源视频文件和选择目标视频文件。程序还使用TEdit组件允许用户输入参数,然后将这些组件中的信息拼接成转换命令并在DOS窗口中运行它。 procedure…...
Kafka系列之:安装Know Streaming详细步骤
Kafka系列之:安装Know Streaming详细步骤 一、相关技术博客二、安装elasticsearch1.下载elasticsearch2.创建数据目录3.创建es用户4.修改最大文件数5.解压elasticsearch6.赋予es用户目录权限7.修改es配置8.切换es用户启动elasticsearch三、安装KnowStreaming1.下载KnowStreami…...
绝杀 GETPOST 嵌套的 JSON 参数
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,常用于Web应用程序中的数据传输。在HTTP数据包信息传递时,JSON扮演着非常正常的角色,因为它是一种通用的数据格式,可以被多种编程语言和应用程…...
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 获…...
信息学奥赛一本通——1258:【例9.2】数字金字塔
文章目录 题目【题目描述】【输入】【输出】【输入样例】【输出样例】 AC代码 题目 【题目描述】 观察下面的数字金字塔。写一个程序查找从最高点到底部任意处结束的路径,使路径经过数字的和最大。每一步可以从当前点走到左下方的点也可以到达右下方的点。 在上面…...
selenium官网文档阅读总结(day 2)
1.selenium元素定位方法 1.1selenium命令 当我们使用chormdriver打开网页后,接下来就要用python操作元素,模拟用户会作出的操作,这些操作元素的方法就是命令。比如 (1) click:点击(按钮,单选框ÿ…...
VMware虚拟机安装VMware tools
一、挂载光驱 执行以下命令来创建 /mnt/cdrom 目录: mkdir -p /mnt/cdrom-p 参数会确保如果 /mnt/cdrom 的上级目录(例如 /mnt)不存在的话也会被创建。 然后,你可以再次尝试挂载光盘: mount /dev/sr0 /mnt/cdrom这次…...
【Linux命令200例】rm用来删除文件或目录(谨慎使用)
🏆作者简介,黑夜开发者,全栈领域新星创作者✌,阿里云社区专家博主,2023年6月csdn上海赛道top4。 🏆本文已收录于专栏:Linux命令大全。 🏆本专栏我们会通过具体的系统的命令讲解加上鲜…...
行云管家荣获CFS第十二届财经峰会 “2023产品科技创新奖”
7月26日至27日,CFS第十二届财经峰会暨2023可持续商业大会在京盛大召开。峰会主题为“激活高质量发展澎湃活力”,超1000位政商领袖、专家学者、企业及媒体代表出席了本次盛会,共同分享新技术新产品新趋势、研判全球新挑战与新变局下企业的机遇…...
uniapp禁止页面滚动
用 touchmove.stop.prevent“moveHandle”,moveHandle 可以用来处理 touchmove 的事件,也可以是一个空函数。 <viewclass“mask” touchmove.stop.prevent“moveHandle”>...
ModuleNotFoundError: No module named ‘_sqlite3‘
前言 遇到报错信息如下: ModuleNotFoundError: No module named _sqlite3解决方式 参考解决方式: https://blog.csdn.net/jaket5219999/article/details/53512071 find / -name _sqlite*.socp /usr/lib64/python3.6/lib-dynload/_sqlite3.cpython-36…...
Rust的入门篇(下)
这篇博客是rust入门篇下 45. 生命周期注释 // 生命周期// 下面代码不能通过编译 // longer 函数取 s1 和 s2 两个字符串切片中较长的一个返回其引用值 // 返回值引用可能会返回过期的引用 // fn longer(s1: &str, s2: &str) -> &str { // if s2.len() >…...
PYTHON-logging-工具类-支持中文字符控制台输出和文件写入-不会导致乱码
import logging import sys import os import time from logging.handlers import RotatingFileHandler import iodef get_logger(tag):# 创建一个新的输出流,并指定编码为UTF-8sys.stdout io.TextIOWrapper(sys.stdout.buffer, encodingutf-8)accPath logsif not…...
对gpt的简单认识
1.gpt是什么? GPT(Generative Pre-trained Transformer 生成式预训练Transformer模型)是一种基于Transformer架构的预训练语言模型,由OpenAI开发。GPT模型以无监督学习的方式使用大规模语料库进行预训练,并具有生成文…...
java类和对象详解(1)
面向对象的初步认知 什么是面向对象 Java是一门纯面向对象的语言(Object Oriented Program, 简称OOP),在面向对象的世界里,一切皆为对象。面向对象是解决问题的一种思想,主要依靠对象之间的交互完成一件事情。 用面向对象的思想来涉及程序,更…...
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…...
【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密
在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
Mac软件卸载指南,简单易懂!
刚和Adobe分手,它却总在Library里给你写"回忆录"?卸载的Final Cut Pro像电子幽灵般阴魂不散?总是会有残留文件,别慌!这份Mac软件卸载指南,将用最硬核的方式教你"数字分手术"࿰…...
在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案
这个问题我看其他博主也写了,要么要会员、要么写的乱七八糟。这里我整理一下,把问题说清楚并且给出代码,拿去用就行,照着葫芦画瓢。 问题 在继承QWebEngineView后,重写mousePressEvent或event函数无法捕获鼠标按下事…...
【笔记】WSL 中 Rust 安装与测试完整记录
#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统:Ubuntu 24.04 LTS (WSL2)架构:x86_64 (GNU/Linux)Rust 版本:rustc 1.87.0 (2025-05-09)Cargo 版本:cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...
Python+ZeroMQ实战:智能车辆状态监控与模拟模式自动切换
目录 关键点 技术实现1 技术实现2 摘要: 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式(自动驾驶、人工驾驶、远程驾驶、主动安全),并通过实时消息推送更新车…...
为什么要创建 Vue 实例
核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...
Java数组Arrays操作全攻略
Arrays类的概述 Java中的Arrays类位于java.util包中,提供了一系列静态方法用于操作数组(如排序、搜索、填充、比较等)。这些方法适用于基本类型数组和对象数组。 常用成员方法及代码示例 排序(sort) 对数组进行升序…...
ArcGIS Pro+ArcGIS给你的地图加上北回归线!
今天来看ArcGIS Pro和ArcGIS中如何给制作的中国地图或者其他大范围地图加上北回归线。 我们将在ArcGIS Pro和ArcGIS中一同介绍。 1 ArcGIS Pro中设置北回归线 1、在ArcGIS Pro中初步设置好经纬格网等,设置经线、纬线都以10间隔显示。 2、需要插入背会归线…...
PydanticAI快速入门示例
参考链接:https://ai.pydantic.dev/#why-use-pydanticai 示例代码 from pydantic_ai import Agent from pydantic_ai.models.openai import OpenAIModel from pydantic_ai.providers.openai import OpenAIProvider# 配置使用阿里云通义千问模型 model OpenAIMode…...
