![](https://img-blog.csdnimg.cn/direct/508ff9c747d24170a253e61c9fbfd7d9.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
Vue (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架
只会CV只会CV只会CV
路漫漫我不畏
展开
-
【Java】三元运算符
三元运算符的最终结果一定要被使用,要么赋值给一个变量,要么直接打印出来,如果单独在代码中写一个三元表达式,是会报错的。作用:可以进行判断,根据判断的结果得到不同的内容。在Java中涉及了很多的运算符,每一种运算符都有各自的优先级。 一座寺庙里住着三个和尚,已知他们的身高分别为150cm、210cm、165cm。 动物园里有两只老虎,两只老虎的体重分别为通过键盘录入获得, 请用程序实现判断两只老虎的体重是否相同。 请用程序实现获取这三个和尚的最高身高。需求:使用三元运算符,获取两个数的较大值。原创 2024-06-20 10:24:10 · 367 阅读 · 0 评论 -
什么是Vue
所谓渐进式就是循序渐进,不一定非得把Vue中的所有API都学完才能开发Vue,可以学一点开发一点。概念:Vue (读音 /vjuː/,类似于 view) 是一套 **构建用户界面 ** 的。如果把一个完整的项目比喻为一个装修好的房子,那么框架就是一个毛坯房。我们只需要在“毛坯房”的基础上,增加功能代码即可。优点:大大提升开发效率 (70%↑)框架的特点:有一套必须让开发者遵守的。Vue核心包&Vue插件&工程化。所谓框架:就是一套完整的解决方案。咱们学框架就是学习的这些规则。下图是 库 和 框架的对比。原创 2024-05-29 13:47:43 · 263 阅读 · 0 评论 -
创建Vue实例
生产版本的体积会小一些,这个是在我们上线的时候,vue.js的核心包就会用这个生产版本。比如就上面这个数据,基于提供好的msg 怎么渲染后右侧可展示的数据呢?// 一旦引入 VueJS核心包,在全局环境,就有了 Vue 构造函数。引包(开发版本包 / 生产版本包)(官网) — 开发版本/生产版本。// 通过 el 配置选择器,指定 Vue 管理的是哪个盒子。同样的,上面是用来学习的开发版本,而下面对应的是生产版本。可以发现没有被Vue所管理的模版语法是不会被Vue解析的。'Hello 传智播客'原创 2024-05-29 13:52:46 · 335 阅读 · 0 评论 -
【Vue】插值表达式 {{ }}
插值表达式是一种Vue的模板语法我们可以用插值表达式渲染出Vue提供的数据作用:利用表达式进行插值,渲染到页面中表达式:是可以被求值的代码,JS引擎会将其计算出一个结果。原创 2024-05-29 13:57:32 · 321 阅读 · 0 评论 -
【Vue】响应式特性
其实底层还是Dom操作,只不过Vue把Dom操作封装起来了,而我们开发者只需要关心于数据就行了。例如这里,app身上就会拥有msg属性,修改msg的值,界面的值也会自动变化!使用 Vue 开发,关注业务的核心逻辑,根据业务修改数据即可。如何访问 和 修改 data中的数据(响应式演示)我们经常会听说Vue是数据驱动,只需要修改数据即可。响应式:简单理解就是数据改变,视图会自动更新。data中的数据, 最终会被添加到实例上。聚焦于数据 → 数据驱动视图。原创 2024-05-29 14:01:34 · 154 阅读 · 0 评论 -
Vue开发者工具安装
极简插件下载(推荐):下载 → 解压 → 点击左上角的三个小点 → 开发者模式 → 拖拽安装 → 插件详情允许访问文件。安装之后可以F12后看到多一个Vue的调试面板,我们也可以把Vue拖到最前面,这样找起来更方便。打开 Vue 运行的页面,调试工具中 Vue 栏,即可查看修改数据,进行调试。下面我们就可以通过调试工具的方式去修改数据,进而看看视图是不是会自动更新。root表示我们所渲染的根实例,根实例有了对应的我们这两个数据。通过谷歌应用商店安装(国外网站)原创 2024-05-29 14:04:08 · 157 阅读 · 0 评论 -
Vue中的常用指令
可以看见,总共14个指令,但这14个并不都是常用的,只用下述用红框框起来的这10个指令才是常用的。Vue 会根据不同的【指令】,针对标签实现不同的【功能】指令是 vue 开发中最基础、最常用、最简单的知识点。<h3>学前端~来黑马!为啥要学:提高程序员操作 DOM 的效率。具体有哪些指令可以查询官网。学习 --> API。原创 2024-05-29 14:05:16 · 302 阅读 · 0 评论 -
【Vue】内容渲染指令
内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。v-html(类似 innerHTML)v-text(类似innerText)原创 2024-05-29 14:07:16 · 134 阅读 · 0 评论 -
【Vue】v-if / v-show条件渲染指令
条件判断指令,用来辅助开发者按需控制 DOM 的显示与隐藏。表达式值为 true 显示, false 隐藏。作用: 控制元素显示隐藏(简单的显示隐藏)场景:频繁切换显示隐藏的场景。原创 2024-05-29 14:10:30 · 696 阅读 · 0 评论 -
【Vue】v-else 和 v-else-if
作用:辅助v-if进行判断渲染。PS:需要紧接着v-if使用。原创 2024-05-29 14:12:09 · 195 阅读 · 0 评论 -
【Vue】v-on事件绑定指令
【代码】【Vue】v-on事件绑定指令。原创 2024-05-29 14:13:54 · 259 阅读 · 0 评论 -
【Vue】<button v-on:事件名=“methods中的函数名“>按钮</button>
/ 但是这样写就有问题,一旦对象名变了,下面的带有app对象的都需要变!// Vue中让提供的所有methods中的函数,this都指向当前实例。原创 2024-05-29 14:20:22 · 141 阅读 · 0 评论 -
【Vue】v-bind属性绑定指令
*作用:**动态设置html的标签属性 比如:src、url、title。属性值,是一个图片地址。这个地址在数据 data 中存储。**v-bind:**可以简写成 =>比如,有一个图片,它的。'hello 波仔'原创 2024-05-29 14:22:27 · 168 阅读 · 0 评论 -
【Vue】小案例-波仔的学习之旅
5.当展示第一张的时候,上一页按钮应该隐藏。展示最后一张的时候,下一页按钮应该隐藏。需求:默认展示数组中的第一张图片,点击上一页下一页来回切换数组中的图片。2.可以准备个下标index 去数组中取图片地址。3.通过v-bind给src绑定当前的图片地址。4.点击上一页下一页只需要修改下标的值即可。1.数组存储图片路径。原创 2024-05-29 14:35:39 · 202 阅读 · 0 评论 -
【Vue】v-for列表渲染指令
Vue 提供了 v-for 列表渲染指令,用来辅助开发者 基于数据循环, 多次渲染整个元素。--> 数据指的是:数组、对象、数字…v-for 指令需要使用。原创 2024-05-29 14:37:08 · 292 阅读 · 0 评论 -
【Vue】小案例-小黑的书架
点击删除按钮时,应该把当前行从列表中删除(获取当前行的id,利用filter进行过滤)PS:id和下标同时存在,则优先根据id来删除,因为id是唯一标识,它更加的稳定。// 通过 id 进行删除数组中的 对应项 → filter(不会改变原数组)// filter: 根据条件,保留满足条件的对应项,得到一个新数组。// console.log('删除', id)根据左侧数据渲染出右侧列表(v-for)原创 2024-05-29 14:39:15 · 380 阅读 · 0 评论 -
【Vue】v-for中的key
给列表项添加的。便于Vue进行列表项的。:Vue 的默认行为会尝试原地修改元素(以小黑的书架案例为例,如果点击了第一个元素的删除按钮,我们就会认为第一本书就会从页面中移除但是大家脑海中的效果是加了key的效果。如下图,点击第一个带有背景色的li,删除后第一个li还在。由此可见这个li压根没动,动的是里面的文字内容。原创 2024-05-30 07:23:43 · 548 阅读 · 2 评论 -
【Vue】v-model双向绑定指令
(input、radio、select)使用,双向绑定数据,可以快速。// 拿数据直接拿都行,不用const password = ...**语法:**v-model=“变量”**需求:**使用双向绑定实现以下需求。原创 2024-06-04 21:23:15 · 402 阅读 · 0 评论 -
【Vue】综合案例-小黑记事本
/ id一般是后台动态生成的,但如果前端需要临时使用id,可以使用时间戳,保证它是唯一的。// console.log(id) => filter 保留所有不等于该 id 的项。// 1. 通过 v-model 绑定 输入框 → 实时获取表单元素的内容。// 2. 点击按钮,进行新增,往数组最前面加 unshift。原创 2024-06-04 21:23:46 · 235 阅读 · 0 评论 -
【Vue】指令修饰符
指令修饰符:就是通过“.”指明一些指令,不同的封装了不同的处理操作 —> 简化代码。原创 2024-06-04 21:24:57 · 682 阅读 · 0 评论 -
【Vue】v-bind对样式控制的增强-操作class
为了方便开发者进行样式控制, Vue 扩展了 v-bind 的语法,可以针对和进行控制。原创 2024-06-04 21:25:48 · 779 阅读 · 0 评论 -
【Vue】v-model在其他表单元素的使用
然后使用$0.value,即可发现选择的这个option的value会实时同步给select的value。常见的表单元素都可以用 v-model 绑定关联 → 快速。并且还不仅可以获取,还可以修改,对应的选项框的内容也会跟着修改。select下拉框有些特殊,选中。表示你当前选中的元素。原创 2024-06-04 21:26:26 · 297 阅读 · 0 评论 -
【Vue】computed计算属性
/ 需求:对 this.list 数组里面的 num 进行求和 → reduce。// 计算属性函数内部,可以直接通过 this 访问到 app 实例。计算属性 → 可以将一段 求值的代码 进行封装。PS:计算属性本质上是一个属性,而不是函数。// 基于现有的数据,编写求值逻辑。原创 2024-06-04 21:26:57 · 265 阅读 · 0 评论 -
【Vue】computed 计算属性 VS methods 方法
作用:封装了一段对于数据的处理,求得一个结果,而且还可以拿这个结果去缓存。// 计算属性:有缓存的,一旦计算出来结果,就会立刻缓存。计算属性会对计算出来的结果缓存,再次使用直接读取缓存,// 下一次读取 → 直接读缓存就行 → 性能特别高。作用:给实例提供一个方法,调用以处理业务逻辑。依赖项变化了,会自动重新计算 → 并再次缓存。① 写在 methods 配置项中。// 引用了多少次就打印多少次。② 作为属性,直接使用 →。// 计算属性更偏向于求得值。// 方法更偏向于处理业务。优势:计算属性的优势。原创 2024-06-04 21:27:44 · 457 阅读 · 0 评论 -
【Vue】计算属性的完整写法
/ (1) 当fullName计算属性,被获取求值时,执行get(有缓存,优先读缓存)// (2) 当fullName计算属性,被修改赋值时,执行set。如果要 “修改” → 需要写计算属性的完整写法(即写成对象)。计算属性默认的简写,只能读取访问,不能 “修改”。// 修改的值,传递给set方法的形参。// 简写 → 获取,没有配置设置的逻辑。// 会将返回值作为,求值的结果。// 完整写法 → 获取 + 设置。原创 2024-06-04 21:28:21 · 188 阅读 · 0 评论 -
【Vue】成绩案例
v-model的修饰符 .trim、 .number、 判断数据是否为空后 再添加、添加后清空文本框的数据(这两个也可以不加,不加的话就需要通过js去判断,所以加上这两个就是简化代码的)渲染功能 v-for :key v-bind:动态绑定class的样式(来回切换)使用计算属性computed, reduce求和 和 平均分的值。删除功能 v-on绑定事件, 阻止a标签的默认行为。unshift 修改数组更新视图。4.统计总分,求平均分。// 防止除 0 情况。'请输入正确的成绩'原创 2024-06-04 21:29:07 · 614 阅读 · 0 评论 -
【Vue】watch侦听器(监视器)
/ 由于timer不需要具备任何的响应式特性,不需要跟页面渲染相关,它就没必要存到data里去,直接写this.timer就是直接挂到了当前实例上,也就是把app当成普通对象,往上面加属性,这样性能更高一些。// 接口地址:https://applet-base-api-t.itheima.net/api/translate。// (2)lang: 需要被翻译成的语言(可选)默认值-意大利。// (1)words:需要被翻译的文本(必传)// timer: null // 延时器id。原创 2024-06-04 21:29:43 · 588 阅读 · 0 评论 -
【Vue】watch - 完整写法
/ 接口地址:https://applet-base-api-t.itheima.net/api/translate。// 立刻执行,一进入页面handler就立刻执行一次,比如words有默认值,一进页面就需要立马翻译。// (2)lang: 需要被翻译成的语言(可选)默认值-意大利。// (1)words:需要被翻译的文本(必传)// 需求:输入内容,修改语言,都实时翻译。// 这里直接把这个新对象传进去即可。完整写法 → 添加额外配置项。// 请求方式:get。原创 2024-06-04 21:30:18 · 861 阅读 · 0 评论 -
【Vue】水果购物车-基本渲染
在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-sca原创 2024-06-04 21:30:52 · 932 阅读 · 0 评论 -
【Vue】Vue生命周期
通过data给当前的Vue实例提供的数据,默认的都是普通数据,Vue底层创建阶段的时候就会对data里的数据进行监听,把它转化成响应式的。发请求,得到这些渲染的数据,赋值给响应式数据。所以必须要等响应式数据准备好了,才能往里面更新赋值,所以发请求是在创建阶段的最后。最早也要等模板渲染完成,所以操作dom的阶段是在挂载阶段结束之后开始创建dom。创建阶段和挂载阶段它只会执行一次,但是更新阶段会执行多次。在使用的时候一般都是在更新阶段。更新阶段:修改数据,更新视图。创建阶段:创建响应式数据。原创 2024-06-04 21:31:26 · 226 阅读 · 1 评论 -
【Vue】Vue生命周期函数(钩子函数)
beforeDestroy:当我们实例要销毁的时候,我们可以在beforeDestroy释放Vue以外的资源(清除定时器,延时器…由于关闭浏览器我们看不见销毁阶段,Vue官方提供了一个卸载的语法,卸载完成之后并不会将页面中的元素清掉,已经渲染完的还是存在的,但当再次修改的时候,跟Vue相关的都没用了。'清除掉一些Vue以外的资源占用,定时器,延时器...'准备响应式数据之前有一个,准备好响应式数据之后有一个。'beforeUpdate 数据修改了,视图还没更新''updated 数据修改了,视图已经更新'原创 2024-06-04 21:31:57 · 1122 阅读 · 0 评论 -
生命周期钩子小案例
这里注意,获取到的输入框和我们在html里面写的输入框是不一样的。这是因为在模版阶段带有v-model,而打印出来的是已经被Vue解析了的。// 接口地址:http://hmajax.itheima.net/api/news。// 2. 更新到 list 中,用于页面渲染 v-for。// 2. 让input框获取焦点 inp.focus()// 1. 等input框渲染出来 mounted 钩子。// 1. 发送请求获取数据。// 请求方式:get。// 原生DOM的方法。原创 2024-06-04 21:32:31 · 403 阅读 · 0 评论 -
【Vue】案例-小黑记账清单
文章目录一、分析二、echars用法一、分析需求图示需求分析基本渲染添加功能删除功能饼图渲染思路分析1.基本渲染立刻发送请求获取数据 created拿到数据,存到data的响应式数据中结合数据,进行渲染 v-for消费统计 —> 计算属性2.添加功能收集表单数据 v-model,使用指令修饰符处理数据给添加按钮注册点击事件,对输入的内容做非空判断,发送请求请求成功后,对文本框内容进行清空重新渲染列表3.删除功能注册点击事件,获取原创 2024-06-05 09:50:02 · 386 阅读 · 0 评论 -
【Vue】工程化开发和脚手架
Vue CLI 是Vue官方提供的一个。原创 2024-06-05 09:51:57 · 568 阅读 · 0 评论 -
【Vue】项目目录介绍和运行流程
虽然脚手架中的文件有很多,目前咱们只需认识三个文件即可,这三个文件就决定了我们项目的运行main.js 入口文件App.vue App根组件index.html 模板文件我们以后在打开工程化项目的时候,养成一个习惯:直接把这个工程化的项目作为根目录直接在VSCode中打开,不要出现多个项目并行的情况,否则维护起来不是很好维护,光一个项目就有很多文件了有一些相关的配置项,比如语法的检测,也会不稳定es检测可能会有问题babel.config.js:跟babel有关的,进行语法降级的。原创 2024-06-05 09:53:01 · 432 阅读 · 0 评论 -
【Vue】组件化开发
组件化:一个页面可以拆分成一个个组件,每个组件有着自己独立的结构、样式、行为。好处:便于维护,利于复用 → 提升开发效率。组件分类:普通组件、根组件。根组件:整个应用最上层的组件,包裹所有普通小组件。比如:下面这个页面,可以把所有的代码都写在一个页面中,但是这样显得代码比较混乱,难易维护。咱们可以按模块进行组件划分。原创 2024-06-05 09:54:02 · 358 阅读 · 0 评论 -
【Vue】普通组件的注册使用-局部注册
以.vue结尾的组件,一般也叫做 单文件组件,即一个组件就是组件里的全部内容。在App组件中,完成以下练习。在App.vue中使用组件的方式完成下面布局。当成html标签使用即可 <组件名></组件名>创建是往components(注意是复数)目录里建。① 创建 .vue 文件 (三个组成部分)① 创建 .vue 文件 (三个组成部分)需要备份一份src直接在空白的地方粘贴即可。局部注册:只能在注册的组件内使用。② 在使用的组件内导入并注册。全局注册:所有组件内都能使用。② 在使用的组件内导入并注册。原创 2024-06-05 09:55:13 · 348 阅读 · 0 评论 -
【Vue】 配置Tab
此时这两个地方按tab都可以补全。原创 2024-06-05 09:56:15 · 394 阅读 · 0 评论 -
【Vue】普通组件的注册使用-全局注册
技巧:一般都用局部注册,如果发现确实是通用组件,再定义到全局。组件名规范 —> 大驼峰命名法, 如 HmHeader。Vue.component(‘组件名’, 组件对象)在以下3个局部组件中展示一个通用按钮。当成HTML标签直接使用。<组件名></组件名>原创 2024-06-05 09:57:31 · 306 阅读 · 0 评论 -
【Vue】小兔鲜首页 - 拆分模块组件 - 局部注册
拆分封装通用小组件 (局部或全局注册),一般这些小组件都会注册成全局的。根据设计图,编写组件 html 结构 css 样式 (已准备好)分析页面,按模块拆分组件,搭架子 (局部或全局注册)导入的时候也同理,先改后面,这是因为前面不会动。将来 → 通过 js 动态渲染,实现功能。然后shift摁住,去到行末。再利用滚轮,选择全部,粘贴。小兔仙组件拆分示意图。原创 2024-06-05 09:58:15 · 352 阅读 · 0 评论