【万字长文】 Vue全家桶从入门到实战，超详细笔记整理 ( 一 ) （建议收藏）

最新推荐文章于 2025-05-30 09:14:23 发布

2401_84092542

最新推荐文章于 2025-05-30 09:14:23 发布

阅读量372

点赞数 4

分类专栏：程序员文章标签： vue.js 笔记 javascript

本文链接：https://blog.youkuaiyun.com/2401_84092542/article/details/138920894

版权

程序员专栏收录该内容

282 篇文章

订阅专栏

v-if : 底层在控制页面标签是否展示时底层是直接操作dom元素，通过对dom元素删除和添加来控制标签的展示和隐藏

–>

总结：

在使用v-show时可以直接书写boolean值控制元素展示,也可以通过变量控制标签展示和隐藏。
在v-show中可以通过boolean表达式控制标签的展示和隐藏。
v-if、v-show ：作用：都是用来控制页面中标签是否展示和隐藏使用：标签：v-if="true|false",v-show="true|false"
区别：

v-show: 底层在控制页面标签是否展示时底层使用的是css 中 display 属性来标签展示和隐藏。推荐使用：v-show 在数据量比较大和控制显示状态切换频繁时。
v-if : 底层在控制页面标签是否展示时底层是直接操作dom元素，通过对dom元素删除和添加来控制标签的展示和隐藏。

5.2、v-show、v-if小案例

1、v-show、v-if显示隐藏案例(一)

vue系列课程

2、v-show、v-if显示隐藏案例(二)

vue系列课程

5.3、v-bind

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

vue系列课程

5.4、v-bind 简化写法

vue为了方便我们日后绑定标签的属性提供了对属性绑定的简化写法如 v-bind:属性名 简化之后 :属性名

扩展v-bind使用

vue系列课程

5.5、v-bind案例

实现鼠标移入和移出对图片和边框的切换。

vue系列课程

6、v-for的使用

v-for: 作用就是用来对对象进行遍历的(数组也是对象的一种)

vue系列课程

遍历对象

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

遍历数组

index:{{index}} schools:{{school}}

遍历数组中含有对象

index: {{index}} name:{{user.name}} age:{{user.age}} bir:{{user.bir}}

总结

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

7、v-model 双向绑定

7.1、v-model

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

代码：

vue系列课程

总结：

总结

1.使用v-model指令可以实现数据的双向绑定

2.所谓双向绑定表单中数据变化导致vue实例data数据变化 vue实例中data数据的变化导致表单中数据变化称之为双向绑定

MVVM架构双向绑定机制

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

VM: ViewModel 监听器

View: 页面页面展示的数据

学完v-model以后，我们一起来做两个小案例。

7.2、两个案例

备忘录案例实现

需求：

代码：

vue系列课程

输入备忘录内容： <input type=“button” value=“添加到备忘录” @click=“saveItem”>

{{index+1}}. {{item}}
当前备忘录中还没有任何内容~~,请添加！

当前备忘录中共：{{items.length}}条

<input type=“button” value=“清空备忘录” @click=“delAllItems”>

效果：

购物车案例实现

需求：

代码：
vue系列课程

{{msg}}

id 名称价格数量小计 {{item.id}} {{item.name}} {{item.price}} {{(item.price * item.count).toFixed(2)}}
总价格：{{getTotalPrice()}}

效果：

8、计算属性

计算属性：computed: vue官方提供一个计算属性

代码：
vue系列课程

{{msg}}

id 名称价格数量小计 {{item.id}} {{item.name}} {{item.price}} {{(item.price * item.count).toFixed(2)}}
总价格：{{totalPrice}}

总结：
1. 作用：在完成某种业务时，往往页面结果需要经过多次计算才能获取，computed属性就是用来完成页面结果多次计算
2. 好处：在完成计算同时也会将本次计算结果进行缓存，如果数据没有发生变化，在页面中多次使用，计算方法仅执行一次
3. 使用：{{ 属性名}} 属性名即方法名称
9、事件修饰符

修饰符: 用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制

1.常用的事件修饰符

.stop 停止

.prevent 阻止

.self 独自

.once 一次

 9.1 stop事件修饰符

用来阻止事件冒泡

stop事件修饰符

 9.2 prevent 事件修饰符

用来阻止标签的默认行为

prevent事件修饰符

<a href=“http://www.baidu.com” @click.prevent=“search”>百度一下

<a href=“javascript:void(0);” @click.prevent=“search”>百度一下

<a href=“javascript:;” @click.prevent=“search”>百度一下

 9.3 self 事件修饰符

用来针对于当前标签的事件触发 ===========> 只触发自己标签的上特定动作的事件只关心自己标签上触发的事件不监听事件冒泡

slef事件修饰符

 9.4 once 事件修饰符

once 一次作用: 就是让指定事件只触发一次

vue系列课程

{{msg}}

stop事件修饰符

prevent事件修饰符

<a href=“http://www.baidu.com” @click.prevent=“search”>百度一下

<a href=“javascript:void(0);” @click.prevent=“search”>百度一下

<a href=“javascript:;” @click.prevent=“search”>百度一下

slef事件修饰符

once事件修饰符

<input type=“button” value=“点我” @click.once=“clickMe”>

10、按键修饰符

作用: 用来与键盘中按键事件绑定在一起,用来修饰特定的按键事件的修饰符

按键修饰符

.enter

.tab

.delete (捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

10.1 enter 回车键

用来在触发回车按键之后触发的事件

vue系列课程

{{msg}}

<input type=“text” v-model=“msg” @keyup.enter=“test”>

10.2 tab 键

用来捕获到tab键执行到当前标签是才会触发

<input type=“text” @keyup.tab=“test”>

11、Axios 基本使用

 11.1、引言

Axios 是一个异步请求技术,核心作用就是用来在页面中发送异步请求,并获取对应数据在页面中渲染页面局部更新技术 Ajax

11.2、Axios 第一个程序

中文网站:https://www.kancloud.cn/yunye/axios/234845

安装: https://unpkg.com/axios/dist/axios.min.js

11.2.1、GET方式的请求

后端代码：

package com.xiao.controller;

import com.xiao.entity.User;

import org.springframework.web.bind.annotation.*;

import javax.websocket.server.PathParam;

import java.util.Date;

@RestController //代表接口中返回的都是json格式数据

@CrossOrigin //运行所有的请求所有域访问解决：跨域问题

public class AdminController {

//user接口

//rest接口 url/11/

@GetMapping(“user/{id}”)

public User FindUserById(@PathVariable(“id”) Integer id){

System.out.println("id: "+id);

System.out.println(“user…”);

return new User(id,“小李”,23,new Date());

}

//queryString接口 url?id=11

@GetMapping(“user”)

public User user(@RequestParam(“id”) Integer id){

System.out.println("id: "+id);

System.out.println(“user…”);

return new User(id,“小陈”,23,new Date());

}

//测试接口

@GetMapping(“demo”)

public String demo(){

System.out.println(“demo…”);

return “demo ok”;

}

}

前端代码：
vue系列课程

axios的GET方式请求

 11.2.2 POST方式请求

后端代码：

//定义post接口

@PostMapping(“user”)

public Map<String,Object> save(@RequestBody User user){ //@RequestBody 将json格式数据转换成java对象

System.out.println(“user:” + user);

HashMap<String,Object> result = new HashMap<>();

result.put(“success”,true);

result.put(“msg”,“添加成功~~”);

return result;

}

前端代码：
vue系列课程

axios的POST方式请求

 11.2.3 axios并发请求

并发请求: 将多个请求在同一时刻发送到后端服务接口,最后在集中处理每个请求的响应结果

//axios并发请求

//定义demo请求

function demo(){

return axios.get(“http://localhost:8989/demo”);

}

//定义user请求

function user(){

return axios.get(“http://localhost:8989/user?id=11”);

}

axios.all([demo(), user()]).then(axios.spread((demoRes,useRes)=>{ //并发请求

console.log(demoRes);

console.log(useRes);

}));

11.2.4 拦截器

12、Vue 生命周期

Vue 实例生命周期 ===> java 对象生命周期(初始化阶段运行阶段销毁阶段) 生命周期钩子 ====> 生命周期函数

Vue实例从创建到销毁过程中自动触发一系列函数 ====> Vue生命周期函数(钩子)

Vue生命周期总结
- 1.初始化阶段
beforeCreate(){ //1.生命周期中第一个函数,该函数在执行时Vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作,Vue实例中还没有 Data el methods相关属性

console.log("beforeCreate: "+this.msg);

},

created(){ //2.生命周期中第二个函数,该函数在执行时Vue实例已经初始化了data属性和methods中相关方法

console.log("created: "+this.msg);

},

beforeMount(){//3.生命周期中第三个函数,该函数在执行时Vue将El中指定作用范围作为模板编译

console.log("beforeMount: "+document.getElementById(“sp”).innerText);

},

mounted(){//4.生命周期中第四个函数,该函数在执行过程中,已经将数据渲染到界面中并且已经更新页面

console.log("Mounted: "+document.getElementById(“sp”).innerText);

}
- 2.运行阶段
beforeUpdate(){//5.生命周期中第五个函数,该函数是data中数据发生变化时执行这个事件执行时仅仅是Vue实例中data数据变化页面显示的依然是原始数据

console.log(“beforeUpdate:”+this.msg);

console.log(“beforeUpdate:”+document.getElementById(“sp”).innerText);

},

updated(){ //6.生命周期中第六个函数,该函数执行时data中数据发生变化,页面中数据也发生了变化页面中数据已经和data中数据一致

console.log(“updated:”+this.msg);

console.log(“updated:”+document.getElementById(“sp”).innerText);

},
- 3.销毁阶段
beforeDestory(){//7.生命周期第七个函数,该函数执行时,Vue中所有数据 methods componet 都没销毁

},

destoryed(){ //8.生命周期的第八个函数,该函数执行时,Vue实例彻底销毁

}

代码：
vue系列课程

{{msg}}

<input type=“button” value=“修改数据” @click=“changeData”>