目录

一、Vue2.x：快速上手+插值表达式+指令上

1.1 Vue快速上手

1.1.1 Vue概念

1.1.2 创建实例

1.1.3 插值表达式 { { }}

1.1.4 响应式特性

1.1.5 开发者工具

1.2 Vue指令

1.2.1 v-html

1.2.3 v-show / v-if

v-show

v-if

1.2.4 v-else / v-else-if

1.2.5 v-on

v-on 调用传参

1.2.6 v-bind

图片切换案例 - 波仔学习之旅

1.2.7 v-for

图书管理案例-小黑的书架

v-for 中的 key

v-for 中的 key - 不加 key

v-for 中的 key

1.2.8 v-model

1.3 综合案例-小黑记事本

二、Vue2.x：指令下+计算属性+侦听器

2.1 指令补充

2.1.1 指令修饰符

2.1.2 v-bind 对于样式操作的增强

v-bind 对于样式控制的增强 - 操作class

案例：京东秒杀tab导航高亮

v-bind 对于样式控制的增强 - 操作style

2.1.3 v-model 应用于其他表单元素

2.2 computed计算属性

2.2.1 基础语法

2.2.2 computed 计算属性 VS methods 方法

2.2.3 完整写法

2.2.4 成绩案例

2.3 watch侦听器

2.3.1 基础语法

2.3.2 完整写法

2.4 综合案例 - 水果购物车

一、Vue2.x：快速上手+插值表达式+指令上

1.1 Vue快速上手

1.1.1 Vue概念

Vue 是什么？

概念：Vue是一个用于  ①构建用户界面的  ②渐进式   ③框架

解释如下：

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

②渐进式：循序渐进   

Vue的两种使用方式：

①Vue核心包开发

  • 场景：局部模块改造

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

  • 场景：整站开发

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

优点：大大提升开发效率(70%↑)

缺点：需要理解记忆规则→官网


 

Vue2官网：https://v2.cn.vuejs.org/

Vue3官网：https://cn.vuejs.org/

总结：

Vue是什么?

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

  1. 构建用户界面：基于数据动态渲染页面
  2. 渐进式：循序渐进的学习
  3. 框架：一套完整的项目解决方案，提升开发效率↑ (理解记忆规则)  规则→官网
     

1.1.2 创建实例

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

总结：

创建Vue实例，初始化渲染的核心步骤：

  1. 准备容器
  2. 引包(官网) - 开发版本 / 生产版本
  3. 创建Vue实例 new Vue()
  4. 指定配置项 el data =>渲染数据

① el 指定挂载点，选择器指定控制的是哪个盒子

② data提供数据
 

1.1.3 插值表达式 { { }}

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

1. 作用：利用表达式进行插值，渲染到页面中

表达式：是可以被求值的代码，JS引擎会将其计算出一个结果


 

2. 语法：{ { 表达式 }}

3. 注意点：

(1) 使用的数据必须存在(data)


 

(2) 支持的是表达式，而非语句，比如：if、for ...


 

(3) 不能在标签属性中使用 { {  }} 插值

<!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.使用的数据要存在2.支持的表达式，不是语句  if   for 3.不能在标签属性中使用 {{  }}--><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.7.14/dist/vue.js"></script><script>const app = new Vue({el: "#app",data: {nickname: "tony",age: 18,friend: {name: "小明",desc: "喜欢唱歌",},},});</script>
</body></html>

总结：

1. 插值表达式的作用是什么?

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

2. 语法格式?

  • { { 表达式 }}

3. 插值表达式的注意点：

①使用的数据要存在(data)

②支持的是表达式，而非语句 if ... for

③不能在标签属性里面使用
 

1.1.4 响应式特性

Vue核心特性：响应式

我们已经掌握了基础的模板渲染，其实除了基本的模板渲染，Vue背后还做了大量工作。

比如：数据的响应式处理 → 响应式：数据变化，视图自动更新


 

数据改变，视图会自动更新

聚焦于数据 → 数据驱动视图

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

总结：

1. 什么是响应式呢?

  • 数据改变，视图自动更新
  • 使用Vue开发→专注于业务核心逻辑即可

2. 如何访问或修改数据呢?

  • data中的数据，最终会被添加到实例上
  • ①访问数据："实例.属性名"
  • ②修改数据："实例.属性名"= "值"
     

1.1.5 开发者工具

安装Vue开发者工具：装插件调试Vue应用

(1)通过谷歌应用商店安装(国外网站)

(2)极简插件：下载→开发者模式→拖拽安装→插件详情允许访问文件

https://chrome.zzzmh.cn/index

打开 Vue 运行的页面，调试工具中 Vue栏，即可查看修改数据，进行调试。

1.2 Vue指令

Vue 会根据不同的【指令】，针对标签实现不同的【功能】

指令：带有 v-前缀 的 特殊 标签属性
 

1.2.1 v-html

作用：设置元素的 innerHTML

语法：v-html= "表达式"


 

总结：

1. 什么是Vue指令呢?

  • 指令就是带有 v-前缀 的特殊 属性，不同属性 对应 不同的功能
  • 学习不同指令 → 解决不同业务场景需求

2.如果需要动态解析标签,可以用哪个指令?语法?
v-html="表达式"→动态设置元素 innerHTML

1.2.3 v-show / v-if

v-show

作用：控制元素显示隐藏

语法：v-show= "表达式"  表达式值  true显示，false隐藏

原理：切换 display:none 控制显示隐藏

场景：频繁切换显示隐藏的场景



 

v-if

作用：控制元素显示隐藏(条件渲染)

语法：v-if="表达式"       表达式值true显示，false 隐藏

原理：基于条件判断，是否创建或移除元素节点

场景：要么显示， 要么隐藏，不频繁切换的场景

总结：

  • v-show 底层原理：切换 CSS 的 display:none 来控制显示隐藏
  • v-if 底层原理：根据判断条件控制元素的 创建 和 移除
     

1.2.4 v-else / v-else-if

作用：辅助 v-if 进行判断渲染

语法：v-else     v-else-if = "表达式"

注意：需要紧挨着 v-if 一起使用


 

1.2.5 v-on

作用：注册事件 = 添加监听 + 提供处理逻辑

语法：① v-on：事件名= "内联语句"    ② v-on：事件名= "methods中的函数名"

简写：@事件名


 

注意：methods函数内的 this指向Vue实例

v-on 调用传参

<!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><style>.box {border: 3px solid #000000;border-radius: 10px;padding: 20px;margin: 20px;width: 200px;}h3 {margin: 10px 0 20px 0;}p {margin: 20px;}</style>
</head><body><div id="app"><div class="box"><h3>小黑自动售货机</h3><button @click="buy(5)">可乐5元</button><button @click="buy(10)">咖啡10元</button></div><p>银行卡余额：{{ money }}元</p>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/web/93904.shtml
繁体地址，请注明出处：http://hk.pswp.cn/web/93904.shtml
英文地址，请注明出处：http://en.pswp.cn/web/93904.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SCAU学习笔记 - 自科三面前端方向实战演示

SCAU学习笔记 - 自科三面前端方向实战演示

本来是准备写完二面直接开始写算法三面的&#xff0c;maimai那个封面图我都做好了。但是可恶的出题人说要等我出完解析再针对性避开出题&#xff0c;所以swan决定把那个先搁置&#xff0c;本文我们先以2023年的自科三面前端方向题为例带各位快速入门前端三件套&#xff08;因为…
阅读更多...
前后端联合实现文件上传，实现 SQL Server image 类型文件上传

前后端联合实现文件上传，实现 SQL Server image 类型文件上传

1、前端 Vue3QualityFileInfoDialog.vue<script setup lang"ts" name"QualityFile"> ...... // 上传&#xff0c;防抖 const onUploadClick debounce(() > {// 模拟点击元素if (fileInputRef.value) {// 重置以允许重复选择相同文件fileInputRef…
阅读更多...
使用安卓平板，通过USB数据线（而不是Wi-Fi）来控制电脑（版本1）

使用安卓平板，通过USB数据线（而不是Wi-Fi）来控制电脑（版本1）

这是一个对延迟和稳定性要求很高的场景。 核心原理是&#xff1a;利用USB数据线&#xff0c;在手机和电脑之间创建一个高速的“虚拟网络连接”&#xff0c;然后在这个稳定的网络通道上运行远程控制软件。 方案1&#xff1a; 在完全没有无线网络&#xff08;Wi-Fi&#xff09;和…
阅读更多...
linux报permission denied问题

linux报permission denied问题

linux报permission denied问题 一般是没有可执行权限&#xff0c;需要先添加执行权限 1. 确认文件权限 在你的项目目录下执行&#xff1a; ls -l ./folder你可能会看到类似&#xff1a; -rw-r--r-- 1 user user 1234 Aug 18 12:00 script.sh注意&#xff1a;这里缺少 x&#xf…
阅读更多...
Vue深入组件：组件事件详解2

Vue深入组件：组件事件详解2

声明触发的事件 为了让组件的用法更清晰（作为文档），同时让 Vue 能区分事件与透传 attribute，推荐显式声明组件要触发的事件。根据组件是否使用 <script setup>，声明方式有所不同。 使用 <script setup> 时：defineEmits() 宏 在 <script setup> 中，…
阅读更多...
FLASK项目快速构建

FLASK项目快速构建

Flask 项目构建 exts.py # flask_sqlalchemy from flask_sqlalchemy import SQLAlchemy from flask_mail import Mail from flask_caching import Cache from flask_wtf import CSRFProtect from flask_avatars import Avatars from flask_jwt_extended import JWTManager from…
阅读更多...
数据结构--2：ArrayList与顺序表

数据结构--2：ArrayList与顺序表

1.顺序表的创建 2.常见操作 3.遍历 4.扩容机制 5.例子1.顺序表的创建在集合框架中&#xff0c;ArrayList是⼀个普通的类&#xff0c;实现了List接口&#xff0c;具体框架图如下&#xff1a;2.常见操作代码…
阅读更多...
【Kubesphere】K8s容器无法访问内网xx网络问题

【Kubesphere】K8s容器无法访问内网xx网络问题

问题遇到的现象和发生背景 Kubesphere中运行的一个容器&#xff0c;可以ping通我们公司内网网段172.16.XX.XX&#xff0c;但是在容器内无法ping通192.168.5.XX&#xff0c;但是我在宿主机是可以ping通192.168.5.XX&#xff0c;这个192.168.5.XX是通过xx设备接进来的&#xff0c…
阅读更多...
【开发语言】Groovy语言：Java生态中的动态力量

【开发语言】Groovy语言：Java生态中的动态力量

博客目录一、Groovy 的诞生与发展二、核心特性深度解析1. 与 Java 的无缝集成2. 动态类型与可选静态类型3. 强大的集合操作三、Groovy 在实际开发中的应用场景1. 构建自动化&#xff08;Gradle&#xff09;2. 测试开发&#xff08;Spock 框架&#xff09;3. 脚本任务自动化四、…
阅读更多...
Obsidian 1.9.10升级

Obsidian 1.9.10升级

概述 Obsidian发布了更新版本1.9.10&#xff0c;是一次比较大的升级&#xff0c;尤其是增加了一些以前没有的核心插件&#xff0c;尤其是重磅的数据库功能。虽然可能还是比较初期&#xff0c;但是这意味着OB还是往更好的方向进化了。 本文以一些目前的视频教程加自己的实际上手…
阅读更多...
内容审计技术

内容审计技术

一、 内容审计需求背景1.网络安全法要求明确责任人&#xff1a;制定内部安全管理制度和操作规程&#xff0c;落实安全保护责任。监测、记录并保留日志&#xff1a;采取监测、记录网络运行状态、网络安全事件的技术措施&#xff0c;并按照规定留存相关网络日志不少于六个月。采取…
阅读更多...
反序列化漏洞

反序列化漏洞

php反序列化 1.什么是序列化和反序列化 office word是程序 doc/docx是数据 保存word文件&#xff1a;程序--保存(序列化)-->数据文件 打开word文件&#xff1a;程序--加载数据文件-->还原(反序列化) 游戏存档&#xff1a;角色等级&#xff0c;任务&#xff0c;人物坐…
阅读更多...
Lecture 4 Mixture of experts课程笔记

Lecture 4 Mixture of experts课程笔记

什么是MoE?用&#xff08;多个&#xff09;大型前馈网络和一个选择器层取代大型前馈网络。你可以在不影响浮点运算次数的情况下增加专家数量。 MoE受欢迎的原因 相同的浮点运算次数&#xff0c;更多的参数表现更好训练混合专家模型&#xff08;MoEs&#xff09;速度更快训练混…
阅读更多...
微服务架构的演进：从 Spring Cloud Netflix 到云原生新生态

微服务架构的演进：从 Spring Cloud Netflix 到云原生新生态

过去十年，Spring Cloud 凭借 Netflix 全家桶（Eureka、Ribbon、Hystrix、Zuul 等）几乎成为 Java 微服务的事实标准。但随着这些核心组件逐步停止更新或进入维护模式，微服务架构正经历一场深刻的演进。新的微服务架构更加注重 云原生兼容性、社区活跃度、企业级稳定性和低运维…
阅读更多...
网络流量分析——基础知识

网络流量分析——基础知识

文章目录所需技能和知识TCP/IP 堆栈和 OSI 模型基本网络概念常用端口和协议IP 数据包和子层的概念协议传输封装环境与设备常见的流量分析工具BPF 语法执行网络流量分析NTA工作流程NTA工作流程网络 - 第 1-4 层OSI / TCP-IP 模型寻址机制MAC地址IP 寻址IPv4IPv6IPv6 寻址类型IPv…
阅读更多...
ansible playbook 实战案例roles | 实现基于 IHS 的 AWStats 访问监控系统

ansible playbook 实战案例roles | 实现基于 IHS 的 AWStats 访问监控系统

文章目录一、核心功能描述二、roles内容2.1 文件结构2.2 主配置文件2.3 tasks文件内容三、files文件内容四、关键价值免费个人运维知识库&#xff0c;欢迎您的订阅&#xff1a;literator_ray.flowus.cn 一、核心功能描述 这个 Ansible Role 的核心功能是&#xff1a;​实现 ​…
阅读更多...
DELL服务器 R系列 IPMI的配置

DELL服务器 R系列 IPMI的配置

1、iDRAC功能默认都是关闭&#xff0c;需要在BIOS面启用&#xff0c;首先重启计算机&#xff0c;按F2然后进入BIOS&#xff0c;选择iDRAC Setting进行iDRAC配置 2、重置一下idrac卡-重置才能恢复默认密码 3、进入iDRAC Setting之后&#xff0c;选择设置网络Network 4、启用iDRA…
阅读更多...
模式组合应用-桥接模式(一)

模式组合应用-桥接模式(一)

写在前面Hello&#xff0c;我是易元&#xff0c;这篇文章是我学习设计模式时的笔记和心得体会。如果其中有错误&#xff0c;欢迎大家留言指正&#xff01;文章为设计模式间的组合使用&#xff0c;涉及代码较多&#xff0c;个人觉得熟能生巧&#xff0c;希望自己能从中学习到新的…
阅读更多...
【clion】visual studio的sln转cmakelist并使用clion构建32位

【clion】visual studio的sln转cmakelist并使用clion构建32位

我想在linux上运行，所以先转为cmake工程 例如可以把exe mfc 部分不构建，这样ubuntu就不用移植。 先转cmakelist，而后clion完成win32的构建，与vs构建对比，验证脚本正确性。 Vcxproj2CMake https://github.com/gns333/Vcxproj2CMake cmakeconverter https://github.com/pave…
阅读更多...
MySQL之分区功能

MySQL之分区功能

序言 随着业务发展&#xff0c;我们维护的项目数据库中的数据可能会越来越大&#xff0c;那么单张表的数据变多后&#xff0c;接口查询效率可能会变慢&#xff0c;那我们就直接照抄大厂常见的分库分表吗&#xff1f;—— 当然不是的&#xff0c;分库分表不是万能的。 分库分表…
阅读更多...
最新文章

Copyright @ 2022~2023