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

大大的周 02-07 877

笔记根据B站编程不良人视频整理，视频链接：【编程不良人】VUE全家桶入门到实战，学VUE看这个就够了，已完结！基于企业最流行Vue实战技术，需要md格式笔记的可以私信我。

目录 1、Vue 引言2、Vue入门2.1、下载Vuejs2.2、Vue第一个入门应用 3、v-text和v-html3.1、v-text3.2、v-html3.3、v-text和v-html对比 4、vue中事件绑定(v-on)4.1、绑定事件基本语法4.2、Vue中事件的简化语法4.3、Vue事件函数两种写法4.4、Vue事件参数传递 5、v-show v-if v-bind5.1、v-show、v-if使用5.2、v-show、v-if小案例5.3、v-bind5.4、v-bind 简化写法5.5、v-bind案例 6、v-for的使用7、v-model 双向绑定7.1、v-model7.2、两个案例 8、计算属性9、事件修饰符9.1 stop事件修饰符9.2 prevent 事件修饰符9.3 self 事件修饰符9.4 once 事件修饰符 10、按键修饰符10.1 enter 回车键10.2 tab 键 11、Axios 基本使用11.1、引言11.2、Axios 第一个程序11.2.1、GET方式的请求11.2.2 POST方式请求11.2.3 axios并发请求11.2.4 拦截器 12、Vue 生命周期

1、Vue 引言

渐进式 JavaScript 框架 --摘自官网

# 渐进式 1. 易用 html css javascript 2. 高效开发前端页面非常高效 3. 灵活开发灵活多样性 # 总结 Vue 是一个javascript 框架 js 简化页面js操作 bootstrap 是一个css框架封装css # 后端服务端开发人员: 页面标签 dom jquery js document.getElementById("xxx") Vue 渐进式javascript框架: 让我们通过操作很少的DOM,甚至不需要操作页面中任何DOM元素,就很容易的完成数据和视图绑定 ====> 双向绑定 MVVM 注意：日后在使用vue过程中页面不要再引入Jquery框架 html css--->javascript(document.getElementById()...) ---->jquery($("#xx")) ---> angularjs --->vue(前后端分离架构核心) vue 前端系统 <-----JSON-----> 后台系统springcloud # Vue 作者尤雨溪国内的

2、Vue入门 2.1、下载Vuejs //开发版本:  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> //生产版本:  <script src="https://cdn.jsdelivr.net/npm/vue"></script> 2.2、Vue第一个入门应用

1、vue第一个入门应用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue系列课程</title> </head> <body> <div id="app"> {{msg}} <h2>{{msg}}</h2> <span> <h2>{{msg}}</h2> <span> <span>{{msg}}</span> </span> </span> <h3>用户名：{{username}}</h3> </div> </body> </html> <script src="js/vue.js"></script> <script> var app= new Vue({ el:"#app", //element：元素作用：用来指定vue实例作用范围日后在el指定的作用范围内可以直接使用{{属性名}}获取data中的属性 data:{ //data：数据作用：用来给vue实例对象绑定一系列数据 msg: "Vue欢迎您！", username: "小陈!!", } }); </script>

2、vue实例中定义对象，数组等相关数据

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue系列课程</title> </head> <body> <div id="app"> <h2>{{msg}}</h2> <h2>{{age}}</h2> <h2>姓名：{{user.name}} 描述：{{user.des}}</h2> <h2>{{schools[0]}}-{{schools[1]}}-{{schools[2]}}-{{schools[3]}}</h2> <h2>姓名：{{users[0].name}} 年龄：{{users[0].age}} 生日：{{users[0].bir}}</h2> <h2>姓名：{{users[1].name}} 年龄：{{users[1].age}} 生日：{{users[1].bir}}</h2> <h2>姓名：{{users[2].name}} 年龄：{{users[2].age}} 生日：{{users[2].bir}}</h2> </div> </body> </html>  <script src="js/vue.js"></script> <script> var app = new Vue({ el:"#app", //指定vue作用范围 data:{ //用来给vue实例绑定一系列数据 msg:"百知欢迎您!!!", age:"23", user:{name:"小陈",des:"他在百知,百知等你！！"}, //定义对象 schools:["河南校区","北京校区","天津校区","山西校区"], //定义一个数组 users:[ {name:"小王",age:23,bir:"2012-12-01"}, {name:"小李",age:24,bir:"2013-12-01"}, {name:"小赵",age:25,bir:"2014-12-01"}, ] } }); </script>

3、使用{{属性名}}获取data数据时,使用表达式运算符等相关操作

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue系列课程</title> </head> <body> <div id="app"> <h2>{{msg}}</h2>  <h2>{{msg + '您好'}}</h2> <h2>{{msg == 'hello vue'}}</h2> <h2>{{msg.toUpperCase()}}</h2> <h2>{{age + 1}}</h2> <h2>{{age == 23}}</h2> </div> </body> </html>  <script src="js/vue.js"></script> <script> var app = new Vue({ el:"#app", //指定vue作用范围 data:{ //用来给vue实例绑定一系列数据 msg:"hello vue", age:23, } }); </script>

4、使用vue时el属性指定

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue系列课程</title> </head> <body > <div id="app" class="aa"> <h2>{{msg}}</h2> </div> </body> </html>  <script src="js/vue.js"></script> <script> var app = new Vue({ el:"#app", //指定vue作用范围 // 书写格式：使用css选择器 id选择器 html选择器类选择器推荐使用id选择器 id选择器具有唯一性 // 注意事项：不要将el指向body或html标签 Do not mount Vue to <html> or <body> - mount to normal elements instead. data:{ //用来给vue实例绑定一系列数据 msg:"hello vue", } }); </script>

5、总结

# 总结: 1.vue实例(对象)中el属性: 代表Vue的作用范围日后在Vue的作用范围内都可以使用Vue的语法 2.vue实例(对象)中data属性: 用来给Vue实例绑定一些相关数据, 绑定的数据可以通过{{变量名}}在Vue作用范围内取出 3.在使用{{}}进行获取data中数据时,可以在{{}}中书写表达式,运算符,调用相关方法,以及逻辑运算等 4.el属性中可以书写任意的CSS选择器[jquery选择器],但是在使用Vue开发是推荐使用 id选择器注意: el属性值不能指定body或html标签

3、v-text和v-html 3.1、v-text

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

<div id="app" class="aa"> <span >{{ message }}</span> <span v-text="message"></span> </div>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ message:"百知欢迎您" } }) </script> # 总结 1.{{}}(插值表达式)和v-text获取数据的区别在于 a.使用v-text取值会将标签中原有的数据覆盖使用插值表达式的形式不会覆盖标签原有的数据 b.使用v-text可以避免在网络环境较差的情况下出现插值闪烁 3.2、v-html

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

<div id="app" class="aa"> <span>{{message}}</span> <br> <span v-text="message"></span> <br> <span v-html="message">xxxxxx</span> </div>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ message:"<a href=''>百知欢迎您</a>" } }) </script> } }) </script> 3.3、v-text和v-html对比

代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue系列课程</title> </head> <body > <div id="app" class="aa"> <h2>{{msg}} 您好</h2>   <h2><span v-text="msg"></span> 您好</h2>  <h2 v-html="msg"></h2>  <h1 >{{content}}</h1> <h1 v-text="content"></h1> <h1 v-html="content"></h1> </div> </body> </html>  <script src="js/vue.js"></script> <script> var app = new Vue({ el:"#app", //指定vue作用范围 data:{ //用来给vue实例绑定一系列数据 msg:"hello vue", content : "欢迎来到<a href='http://·/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"; } }

前端代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue系列课程</title> </head> <body> <div id = "app"> <h1>axios的GET方式请求</h1> </div> </body> </html>  <script src="js/axios.min.js"></script>  <script> //发送axios 的GET方式请求 /*axios.get("http://localhost:8989/user?id=11").then(function (res){ console.log(res.data); console.log(res.data.id); console.log(res.data.name); console.log(res.data.age); console.log(res.data.bir); });*/ //es6中简化写法function(){}简化写法java中lambada表达式 ()=> axios.get("http://localhost:8989/user/11").then((res)=>{ console.log(res.data); console.log(res.data.id); console.log(res.data.name); console.log(res.data.age); console.log(res.data.bir); }); /*axios.get("http://localhost:8989/demo").then(function (resonse){ //then 正确请求返回处理结果 console.log(resonse.data); }).catch(function (error){ //请求地址值出错的处理结果 console.log(error) }); //发送异步请求方式*/ </script> 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; }

前端代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue系列课程</title> </head> <body> <div id = "app"> <h1>axios的POST方式请求</h1> </div> </body> </html>  <script src="js/axios.min.js"></script>  <script> //发送post方式请求 //参数1: url地址参数2: 请求数据 axios.post("http://localhost:8989/user",{ name:"小李", age:23, bir:"2012-02-05" }).then((res)=>{ console.log(res.data); }); </script> 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实例彻底销毁 }

代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue系列课程</title> </head> <body> <div id = "app"> <h1 id="sp">{{msg}}</h1> <input type="button" value="修改数据" @click="changeData">  </div> </body> </html> <script src="js/vue.js"></script> <script> var app = new Vue({ el: "#app", data:{ msg:"vue 生命周期", }, methods:{ changeData(){ this.msg="vue 生命周期讲解"; } }, computed:{}, 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); }, 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); }, beforeDestory(){//7.生命周期第七个函数,该函数执行时,Vue中所有数据 methods componet 都没销毁 }, destoryed(){ //8.生命周期的第八个函数,该函数执行时,Vue实例彻底销毁 } }); </script>