2024年Web前端最全Vue 学习笔记（1） Vue 基础语法 + Axios 基本使用，【原理+实战+视频+源码

总结

三套“算法宝典”

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法刷题LeetCode中文版（为例）

人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。

最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！

由于篇幅有限，下篇的面试技术攻克篇只能够展示出部分的面试题，详细完整版以及答案解析，有需要的可以关注

• Vue 简介

• • 下载 Vue

• {{}}：插值表达式

• v-text：显示文本

• v-html：显示解析html标签的文本

• v-on：事件绑定

• v-show：控制页面元素隐藏与显示(display控制)

• v-if：控制页面元素隐藏与显示(dom操作)

• v-bind：绑定标签的属性

• v-show、v-if、v-bind 综合

• v-for：遍历对象

• v-model：实现双向绑定

• 【项目】记事本案例

• 事件修饰符

• 按键修饰符

• Axios 基本使用

• • GET方式的请求

• POST方式的请求

• Axios 并发请求

Vue 笔记目录

Vue 简介

=========================================================================

渐进式 JavaScript 框架

• 易用 html css javascript

• 高效 开发前端页面 非常高效

• 灵活 开发灵活 多样性

Vue 是渐进式 javascript 框架: 让我们通过操作很少的 DOM，甚至不需要操作页面中任何 DOM 元素，就很容易的完成 数据和视图绑定、双向绑定 MVVM。

注意：日后在使用 Vue 过程中页面中不需要再引入 Jquery 框架。

下载 Vue

---

开发版本：

生产版本：

{{}}：插值表达式

=============================================================================

I am {{name}} !

{{ msg }}

总结：

• Vue 实例对象中 el 属性：代表 Vue 的作用范围，在 Vue 的作用范围内都可以使用 Vue 的语法。

• Vue 实例对象中 data 属性：用来给 Vue 实例绑定一些相关数据，绑定的数据可以通过 {{ xx }} 在 Vue 作用范围内取出。

• 在使用 {{ xx }} 进行获取 data 中数据时,可以在 {{ }}中书写表达式、运算符、调用相关方法以及逻辑运算等。

• el 属性中可以书写任意的 CSS选择器[jquery选择器]，但是在使用 Vue 开发推荐使用 id选择器。

v-text：显示文本

==============================================================================

v-text：用来获取 data 中数据将数据以文本的形式渲染到指定标签内部，类似于 javascript 中 innerText。

使用 v-text：

姓名：

年龄:

{{lists[0]}}---{{lists[1]}}---{{lists[2]}}

使用 {{}}：

{{ msg }}

名称: {{ user.name }}

年龄: {{ user.age }}

{{ lists[0] }} --- {{ lists[1] }} --- {{ lists[2] }}

{{ users[0].name }}

{{ xx }}（插值表达式）和 v-text 获取数据的区别在于：

• 使用 v-text 取值会将标签中原有的数据覆盖，

插值表达式的形式不会覆盖标签原有的数据。

• 使用 v-text 可以避免在网络环境较差的情况下出现插值闪烁。（已修复）

v-html：显示解析html标签的文本

=======================================================================================

v-html：用来获取 data 中数据将数据中含有的 html 标签先解析在渲染到指定标签的内部，类似于 javascript 中 innerHTML。

{{ message }} xxxxxxxxxx

xxxxxxxxxx

xxxxxxxxxx

v-on：事件绑定

============================================================================

v-on：事件绑定

• v-on:click 可以简化成 @click

• 事件函数可以简写，dowork: function() {} 可以简写成 dowork() {}

鼠标点击次数: {{count}}

年龄: {{age}}

<input type=“button” value=“通过@绑定事件修改年龄每次-1” @click=“editage”>

<input type=“button” value=“统计点击次数” @click=“clickcount”>

v-show：控制页面元素隐藏与显示(display控制)

================================================================================================

v-show：用来控制页面中某个标签元素是否展示，底层通过控制元素的 display 属性来进行标签的显示和不显示控制。

• 在 v-show 中可以直接书写 boolean 值控制元素展示

• 在 v-show 中可以通过 变量 控制标签展示和隐藏。

• 在 v-show 中可以通过 boolean表达式 控制标签的展示和隐藏。

hello Vue.j

年龄: {{ age }}

恭喜你发现了隐藏内容！

<input type=“button” value=“展示隐藏标签” @click=“showmsg”>

年龄达到了30，显示该内容！

<input type=“button” @click=“changeAge” value=“age>=30显示标签”>

点击 展示隐藏标签 后会显示内容。

点击 增加年龄 将年龄增大到 30 后会显示内容。

v-if：控制页面元素隐藏与显示(dom操作)

==========================================================================================

v-if：用来控制页面中的标签元素是否展示，底层通过对 dom 树节点进行添加和删除来控制展示和隐藏。

与 v-show 的用法一模一样，参考 v-show 即可。

hello Vue.js!

hello Vue.js!

v-bind：绑定标签的属性

=================================================================================

v-bind：用来绑定 标签的属性 从而通过 vue 动态修改标签的属性。

• v-bind : 属性 可以简写成 : 属性

<input type=“button” value=“动态控制加入样式” @click=“addCss”>

<input type=“button” value=“改变图片” @click=“changeSrc”>

点击 动态控制加入样式 和 改变图片：

v-show、v-if、v-bind 综合

========================================================================================

hello Vue.js!

hello Vue.js!

<input type=“button” value=“点我显示隐藏” @click=“showHide”>

---

这个是不会显示的, 除非前面是true

---

<input type=“button” value=“点我改变title属性” @click=“changeTitle(‘这是改变之后的title’)”>

<input type=“button” value=“点我改变src属性” @click=“changeSrc(‘https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1664551187,1969969469&fm=26&gp=0.jpg’)”>

v-for：遍历对象

=============================================================================

v-for：用来对 对象 进行遍历的（JavaScript 中数组也是对象的一种）

• 在使用 v-for 的时候一定要注意加入:key 用来给 Vue 内部提供重用和排序的唯一 key

• 遍历时可以获取 索引 index、…

{{ user.name }} {{ user.age }}

{{index}} : {{key}} : {{value}}

• {{index + 1}} : {{a}}

• {{index + 1}}
  

  name: {{user.name}}
  

  age: {{user.age}}
  

  hobby: {{user.hobby}}

  

  v-model：实现双向绑定

  =================================================================================

  v-model：用来绑定 标签元素的值 与 vue实例对象中data数据 保持一致，从而实现 双向的数据绑定机制。

  • 所谓双向绑定，就是表单中数据变化导致 vue 实例 data 数据变化，vue 实例中 data 数据的变化导致表单中数据变化。

  MVVM 架构 双向绑定机制

  Model：数据 Vue实例中绑定数据

  View：页面 页面展示的数据

  VM：ViewModel 监听器

  {{ message }}

  总结

  三套“算法宝典”

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  算法刷题LeetCode中文版（为例）

  人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。

  最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！

  由于篇幅有限，下篇的面试技术攻克篇只能够展示出部分的面试题，详细完整版以及答案解析，有需要的可以关注