注：本内容为个人拉勾教育大数据训练营课程笔记
五、Vue框架
Vue简介
基本概念
- Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
- Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
- 当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动
特点
- JavaScript框架
- 简化DOM操作
- 响应式数据驱动
MVVM模式
- MVVM是Model-View-ViewModel的简写；它本质上就是MVC 的改进版。
- MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开MVVM模式和MVC模式一样， 主要目的是分离视图（View）和模型（Model）
- Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层；它的核心是 MVVM 中的 VM，也就是 ViewModel； ViewModel负责连接 View 和 Model， 保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷
- MVVM拆分解释为
- Model: 负责数据存储
- View: 负责页面展示
- View Model: 负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示
vue 快速入门
入门案例
-
使用vue浏览器中输入 hello vue!!
-
一共三个步骤
- 引入vue.js库
- 创建Vue对象设置el属性和data属性
- 使用插值表达式将数据渲染到html页面
-
代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue入门</title> <!-- 1.引入vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!-- 3.使用插值表达式渲染html --> <div id="app"> {{message}} </div> </body> <!-- 2.创建vue对象,设置el属性和data属性 --> <script> var app = new Vue({ el : "#app", data:{ message : "welcome lagou Vue!!" } }) </script> </html>
插值表达式
-
数据绑定常见的形式就是使用**“Mustache”语法** (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。 Vue.js 都提供了完全的 JavaScript 表达式支持
{{ dataNum + 1 }} {{ true ? 'YES' : 'NO' }} -
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效
<!-- 这是语句，不是表达式 --> {{ var a = 1 }} <!-- 流控制也不会生效，请使用三元表达式 --> {{ if (ok) { return message } } -
代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue入门</title> <!-- 1.引入vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!-- 3.使用插值表达式渲染html 问题: 1.插值表达式的作用 : 使用vue中的数据来替代html中的内容. 2.插值表达式能写哪些内容 : 除了能够编写data中的数据,还可以编写一些数学运算. 3.插值表达式能否写语句 : 插值表达式中不能写语句, 能够写三元运算符 4.插值表达式的作用范围 : 一定是vue对象接管的范围内,超出范围不会生效,不会被解析. --> <div id="app"> {{message}} {{abc}} {{123 - 456}} <hr> {{false?'aaa':'bbb'}} </div> {{false?'aaa':'bbb'}} </body> <!-- 2.创建vue对象,设置el属性和data属性 --> <script> var app = new Vue({ el : "#app", data:{ message : "welcome lagou Vue!!", abc:"我的内容是abc" } }) </script> </html>
el挂载
-
以下，message中的内容会替代插值表达式{{message}}中的内容
<div id="app"> {{message}} </div> var app = new Vue({ el : "#app", data:{ message : "welcome lagou Vue!!" } }) -
注意事项:
- Vue管理的el选项命中元素及其子元素都有作用。 比如: id为app的div外使用{{message}} 不能解析,但在内部使 用{{message}}可以解析
- 除了id选择器其他的选择器也可以使用
- html和body标签上不能使用el挂载
-
代码演示
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue入门</title> <!-- 1.引入vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body id="app"> <!-- EL挂载点的注意事项: 1.是否能够选择其他的选择器 : 可以使用其他选择器. 一次选择多个元素的选择器,插值表达式只有第一个被解析 2.EL挂载点选中的元素,它的子元素是否也能够使用插值表达式 : 被选中元素的子元素也可以使用插值表达式 3.html元素和body元素,最好不要被vue对象接管. 如果是用使用el 命中body和html 插值表达式不会被解析. --> <!-- <div id="app" class="cls"> {{message}} <div> {{message}} </div> </div> --> {{message}} </body> <!-- 2.创建vue对象,设置el属性和data属性 --> <script> var app = new Vue({ el : "#app", data:{ message : "welcome lagou Vue...demo3...!!", } }) </script> </html>
data 数据对象
-
当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值
-
代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue入门</title> <!-- 1.引入vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!-- data中的数据可以是哪些? 1.字符串 2.数值型内容 3.对象类型 4.布尔类型 5.数组类型 --> <div id="app"> {{message}} <br> {{num}} <br> {{person}} {{person.username}} <br> {{date.getFullYear()}} <br> {{flag}} <br> {{arr}} {{arr[1]}} </div> </body> <!-- 2.创建vue对象,设置el属性和data属性 --> <script> var app = new Vue({ el : "#app", data:{ message : "welcome lagou Vue!!", num : 12, person:{ "username":"张三", "age":18 }, date: new Date(), flag:false, arr:["aa","bb",true,123] } }) </script> </html>
Vue常用指令
指令
- 指令是指v-开头，作用于html标签，提供一些特殊的特性，当指令被绑定到html元素的时候，指令会为被绑定的元素添加一些特殊的行为，可以将指令看成html的一种属性
- 解释：指令 (Directives) 是带有 v- 前缀的特殊属性
- 作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
- 特点
- Vue框架提供的语法
- 扩展了HTML的能力
- 减少DOM操作
v-text和v-html
-
很像innerText和innerHTML
-
v-text:更新标签中的内容
- v-text和插值表达式的区别
- v-text 更新整个标签中的内容
- 插值表达式: 更新标签中局部的内容
- v-text补充新的内容是 ''连接
- 插值表达式 “” + 连接内容
- v-text和插值表达式的区别
-
v-html:更新标签中的内容/标签
- 可以渲染内容中的HTML标签
- 注意:尽量避免使用，容易造成危险 (XSS跨站脚本攻击)
-
代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-text的使用</title> <!-- 1.引入vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!-- v-text和插值表达式的区别: 1. v-text替换标签体中所有内容; 插值表达式只替换部分内容 2. v-text补充新的内容是 ''连接 , 插值表达式 "" + 连接内容 --> <div id="app"> <p>{{message + ",我们很专业 "}} , 插值表达式原始内容</p> <!-- 采用 v-text展示数据 --> <p v-text="message+',我们很专业'"> p标签中原始内容</p> </div> </body> <script> var app = new Vue({ el:"#app", data : { message : "欢迎来到拉勾" } }) </script> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-text的使用</title> <!-- 1.引入vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!-- v-html: 可以设置标签体之间的html元素 v-text: 只可以设置标签体之间的文本内容 --> <div id="app"> <p v-html="url">原始内容1</p> <p v-text="url">原始内容2</p> </div> </body> <script> var app = new Vue({ el:"#app", data : { message : "欢迎来到拉勾", url : "<a href='http://kaiwu.lagou.com'>跳转到拉勾教育</a>" } }) </script> </html>
v-if和v-show
-
作用:根据表达式的bool值进行判断是否渲染该元素
-
取值：true/false，表达式，变量名
-
v-if 和 v-show的比较
- v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销
- 如果需要非常频繁地切换，则使用 v-show 较好
- 如果在运行时条件很少改变，则使用 v-if 较好
- v-if 是将元素从dom树中移除
- v-show 是将元素设置属性隐藏
-
代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 1.引入vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>v-if与v-show</title> </head> <body> <div id="app"> <!-- v-if 是将元素从dom树中移除 v-show 是将元素设置属性隐藏 --> <p v-if="isShow">我的第一个p元素</p> <p v-show="3>4">我的第二个p元素</p> <p v-if="true">我的第三个p元素</p> </div> </body> <script> var app = new Vue({ el : "#app", data:{ isShow : true } }) </script> </html>
v-on
-
作用:使用 v-on 指令绑定 DOM 事件，并在事件被触发时执行一些 JavaScript 代码。
-
语法
格式1: v-on:事件名称.修饰符 = "函数名称" 简写: @事件名.修饰符 = "methods中的方法名"<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 1.引入vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>v-on</title> </head> <body> <div id="app"> <button v-on:click="fun1">按钮1</button> <button @click="fun2()">按钮2</button> </div> </body> <script> var app = new Vue({ el:"#app", data : { count : 1 }, methods : { fun1:function(){ alert("按钮1被点击了..."); }, fun2:function(){ alert("按钮222被点击了..."); } } }) </script> </html> -
修饰符
- .once - 只触发一次回调
-
按键别名:
- .enter
- .tab
- .delete
- .esc
- .space
- .up
- .down
- .left
- .right
- .ctrl
- .alt
- .shift
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>按键修饰符</title> <!-- 1.引入vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!-- 格式1: v-on:事件名称.修饰符 = "函数名称" @事件名.修饰符 = "methods中的方法名" 需求: 1.点击一个按钮,触发函数,仅仅只触发一次 2.输入框,只有点击回车才会触发函数 --> <div id="app"> <button v-on:click.once="fun">我的按钮只触发一次</button> <br> <input type="text" name="name" id="id" @keydown.enter="fun2"> </div> </body> <script> var app = new Vue({ el:"#app", methods : { fun:function(){ alert("按钮被点击了.."); }, fun2:function(){ alert("你点击了回车键..."); } } }) </script> </html> -
注意: $event 可以传形参
-
代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 1.引入vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>v-on的使用02</title> </head> <body> <!-- 1.获取元素,操作元素 点击按钮一 count值增加 点击按钮二 count值减少 2.参数传递 传递count 传递$event : 如果有一个输入框,键盘按下,只能输入数字,不能输入其他内容. 需求:有一个文本输入框,只可以输入数字0-9 ,其他内容不能输入. --> <div id="app"> <button v-on:click="add">按钮一count增加</button> <button @click="sub">按钮二count减少</button> <hr> <button v-on:click="count += 1">按钮一count增加-方式2</button> <button @click="count -= 1">按钮二count减少-方式2</button> <hr> <button @click="fun(count)">获取元素count</button> <hr> <button @click="fun1($event)">传递事件对象</button> <hr> <input type="text" name="name" id="id" @keydown="fun2($event)"> <h2>{{count}}</h2> </div> </body> <script> var app = new Vue({ el : "#app", data : { count : 1 }, methods:{ add:function(){ this.count += 1 }, sub:function(){ this.count -= 1 }, fun:function(c){ alert(c) }, fun1:function(e){ alert(e); }, fun2:function(e){ //获取到键盘事件,可以获取到具体的案件 keyCode //alert(e.keyCode) //如果按钮大于57 或者按钮小于48 ,阻止事件发生 preventDefault() if(e.keyCode > 57 || e.keyCode < 48){ //阻止事件发生 e.preventDefault(); } } } }) </script> </html>
v-for
-
根据一组数组或对象的选项列表进行渲染。
-
v-for 指令需要使用 item in items 形式的特殊语法，
-
items 是源数据数组 /对象
-
当要渲染相似的标签结构时用v-for
-
注意: 在使用v-for时,要把一个唯一值赋值给:key属性(通常是数组的index或者数据的id)
-
代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>按键修饰符</title> <!-- 1.引入vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!-- 格式: v-for="(元素,索引) in 数组名/对象" 使用v-for完成以下三个需求: 1.循环数组arr,打印遍历元素 2.循环Person对象获取属性名和属性值 3.循环学生数组对象,将内容展示在table表格中 --> <div id="app"> <!-- 1.循环数组arr,打印遍历元素 --> <p v-for="(element,index) in arr">{{element}} === {{index}}</p> <!-- 2.循环Person对象获取属性名和属性值 --> <ul> <li v-for="(value , key ,index) in person"> {{key}} === {{value}} ==== {{index}}</li> </ul> <hr> <!-- 3.循环学生数组对象,将内容展示在table表格中 --> <table border="1px" width="50%" cellspacing="0" align="center"> <tr> <th>学生编号</th> <th>学生姓名</th> <th>学校</th> </tr> <tr v-for="stu in students" align="center"> <td>{{stu.sid}}</td> <td>{{stu.sname}}</td> <td>{{stu.school}}</td> </tr> </table> </div> </body> <script> var app = new Vue({ el:"#app", data:{ arr : ["aa","bb","cc"], person : { "pname":"老王", "age" : 38 }, students : [ {"sid":1, "sname":"马云","school":"湖畔大学"}, {"sid":2, "sname":"马华腾","school":"深圳大学"}, {"sid":3, "sname":"王健林","school":"军校"} ] } }) </script> </html>
v-bind
-
作用: 可以绑定标签上的任何属性
-
语法
-
格式1: v-bind:属性名="data中的值" 简化格式: :属性名="data中的值" 对象语法: v-bind:属性名="{属性名:data中的值}" 数组语法: v-bind:属性名="[data中值1,data中值2...]" -
绑定src和alt属性
<div id="app">
<img :src="imgUrl" v-bind:alt="alt" >
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
imgUrl:"img/3.jpg",
alt:"拉勾图片",
}
});
</script>
-
绑定class类名
对象语法和数组语法对象语法
如果isActive为true，则返回的结果为 <div class=“active”></div><script src="./vue.js"></script> <div id="app"> <div v-bind:class="{active: isActive}"> hei </div> <button @click="changeClassName">点击切换类名</button> </div> <script> var vm = new Vue({ el: '#app', data: { isActive: true }, methods: { changeClassName: function() { this.isActive = !this.isActive; } } }); </script> -
数组语法
渲染的结果 <div class=“active text-danger”></div><div v-bind:class="[activeClass, dangerClass]"> hei </div> <script src="./vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { activeClass: 'active', dangerClass: 'text-danger' } }); </script> -
简化语法
<div v-bind:class="{active: isActive}"> </div> <!-- 可以简化为 :，简化语法更常用 --> <div :class="{active: isActive}"> </div> -
代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue入门</title> <!-- 1.引入vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> .divStyle { border:1px solid red; background-color: coral; width: 100px; height: 100px; } .fColor { color: red; } .FSize{ font-size: 20px; } </style> </head> <body> <!-- 语法: 格式1: v-bind:属性名="data中的值" 简化格式: :属性名="data中的值" 对象语法: v-bind:属性名="{属性名:data中的值}" 数组语法: v-bind:属性名="[data中值1,data中值2...]" 需求: 1.使用v-bind设置图片的src属性 2.使用v-bind设置class样式 (对象语法) 3.使用v-bind设置class多个属性 (数组语法) 4.简化语法 --> <div id="app"> <!-- 1.使用v-bind设置图片的src属性 --> <img :src="imgUrl"/> <br> <!-- 2.使用v-bind设置class样式 (原始方式) --> <div :class="isDivStyle?'divStyle':''"></div> <hr> <!-- 2.使用v-bind设置class样式 (对象语法) --> <div :class="{divStyle:isDivStyle}"></div> <!-- 3.使用v-bind设置class多个属性 (数组语法) --> <p :class="[fontColor , fontSize]">我是p元素内容</p> </div> </body> <script> var app = new Vue({ el:"#app", data : { imgUrl:"img/3.jpg", isDivStyle:true, fontColor:"fColor", fontSize:"FSize" } }) </script> </html>
v-model
-
作用: 获取和设置表单元素的值(双向数据绑定)
-
特点: 双向数据绑定
- 数据发生变化可以更新到界面
- 通过界面可以更改数据
-
代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue入门</title> <!-- 1.引入vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!-- 需求: 1.使用v-model设置message和input文本框内容双向绑定 2.点击按钮修改message内容 --> <div id="app"> // 文本框内的内容发生改变，则message也会发生改变 <input type="text" name="name" id="id" v-model="message"> <br> <input type="button" value="点击按钮修改message" @click="update"> <br> <h2>{{message}}</h2> </div> </body> <script> var app = new Vue({ el : "#app", data : { message : "拉勾大数据欢迎你" }, methods : { update: function(){ this.message = "大数据前端课程!!!" } } }) </script> </html>
案例-表格展示
-
效果演示
-
功能分析
- 渲染表格
- 删除商品
- 添加商品
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue入门</title> <!-- 1.引入vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!-- 需求: 1.展示页面 2.删除功能 3.添加功能 --> <div id="app"> <table border="1px" width="50%" height="450px" align="center" cellspacing="0"> <tr> <th>编号</th> <th>商品名称</th> <th>日期</th> <th>操作</th> </tr> <tr v-for="(item , index) in items" align="center"> <td>{{index + 1}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <td><a href="#" @click.prevent="deleteItem(index)">删除</a></td> </tr> <tr align="center"> <td colspan="4"> <input type="text" name="name" v-model="name"> <input :disabled="name.length === 0" type="button" value="添加商品" @click="addItem"> </td> </tr> </table> </div> </body> <script> new Vue({ el:"#app", data : { items : [ { name:"华为p40", date:"2020/4/10" }, { name:"Lenovo", date:"2020/5/10" }, { name:"TCL", date:"2020/6/10" }], name:'' }, methods : { deleteItem:function(index){ //确认删除提示 if(confirm("您是否确认删除?")){ //删除一行元素 splice(index,个数) this.items.splice(index,1); } }, addItem:function(){ //1.创建一个item元素,设置内容 var item = { name : this.name, date : new Date().toLocaleDateString() } //2.将我们创建好的item对象添加到items this.items.unshift(item); //添加完毕后,文本框内容删除 this.name=''; } } }) </script> </html>
生命周期
基本概念
- vue的生命周期是指从Vue实例创建、运行到销毁期间伴随的这些事件，这些事件对应的函数记录着vue对象的整个 生命周期。
Vue实例的产生过程
- beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用,该函数执行时，data中的数据和methods中的方法尚未初始化
- created 在实例创建完成后被立即调用，该函数执行时，可以获取到data中的数据和methods中的方法
- beforeMount 在挂载开始之前被调用，该函数执行时，数据在内存中，未渲染到页面
- mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子，数据在内存和页面上同步
- beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前，当data中的数据更变时，该函数触发，内存中已经改变，页面扔然是旧值
- updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子，内存中数据更变，页面上数据也更变
- beforeDestroy 实例销毁之前调用
- destroyed 实例销毁后调用
vue生命周期的八个阶段
- vue生命周期可以分为八个阶段，分别是：
挂载（初始化相关属性）- ① beforeCreate （创建前）
- ② created （创建后）
- ③ beforeMount (载入前)
- ④ mounted （载入后）
- 更新（元素或组件的变更操作）
- ① beforeUpdate （更新前）
- ② updated （更新后）
- 销毁（销毁相关属性）
- ① beforeDestroy（销毁前）
- ② destroyed （销毁后）
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue入门</title>
<!-- 1.引入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span id="sp">{{message}}</span>
<hr>
<input type="button" value="更变message" @click="changeMessage">
</div>
</body>
<script>
new Vue({
el : "#app",
data: {
message : "拉勾"
},
methods:{
show(){
console.log("show方法调用了")
},
changeMessage(){
this.message = "拉勾教育!"
}
},
beforeCreate:function(){
//console.log("获取message = "+this.message)
//this.show();
},
created(){
// console.log("created获取message = "+this.message);
// this.show();
},
beforeMount(){
//该方法:可以获取到内存中的data,但是不能获取到页面渲染的数据
// console.log("获取内存中的message = "+this.message);
// console.log("页面上的内容="+document.getElementById("sp").innerText)
},
mounted(){
//console.log("获取内存中的message = "+this.message);
//console.log("页面上的内容="+document.getElementById("sp").innerText)
},
beforeUpdate(){
//当data中的内容该改变是该函数触发
//console.log("获取内存中的message = "+this.message);
//console.log("页面上的内容="+document.getElementById("sp").innerText)
},
updated(){
//内存中的数据和页面上的数据一致的.
console.log("获取内存中的message = "+this.message);
console.log("页面上的内容="+document.getElementById("sp").innerText)
}
})
</script>
</html>
axios异步访问
axios介绍
- VUE中结合网络数据进行应用的开发
- 目前十分流行网络请求库,专门用来发送请求,其内部还是ajax,进行封装之后使用更加方便
- axios作用: 在浏览器中可以帮助我们完成 ajax异步请求的发送
axios入门
-
使用步骤
-
导包
<!-- 官网提供的 axios 在线地址 --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> //或者去github中下载源码 https://github.com/axios/axios -
请求方式,以GET和POST举例
GET
格式1: axios.get(地址?key=value&key2=value2).then(function(response){},function(error){}); 格式2: axios.get(地址,{params:{key1:value1...}}).then(function(response){},function(error){})POST
axios.post(地址,{key:value,key2:value2}).then(function(response){},function(error){})
axios总结
- axios 必须导包才能使用
- 使用get或者post方法,就可以发送请求
- then方法中的回调函数,会在请求成功或者请求失败的时候触发
- 通过回调函数的形参可以获取响应的内容,或者错误信息
其他请求类型
- axios.request(config)
- axios.get(url[, config])
- axios.delete(url[, config])
- axios.head(url[, config])
- axios.post(url[, data[, config]])
- axios.put(url[, data[, config]])
- axios.patch(url[, data[, config]])
代码演示
-
axios生成笑话
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue入门</title> <!-- 1.引入vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <input type="button" value="生成笑话" @click="createJoke"> <br> <p v-for="(element , index) in joke"> {{index + 1}}.{{element}} </p> </div> </body> <script> /* get格式: 1. axios.get(地址?key1=value1&key2=value).then(function(response){},function(error){}) 2. axios.get(地址,{params:{key1:value1,key2:value2}}).then(function(response){},function(error){}) 请求地址:https://autumnfish.cn/api/joke/list 请求方法:get 请求参数:num(笑话条数,数字) 响应内容:随机笑话 */ new Vue({ el : "#app", data : { joke : "" }, methods:{ //函数的目的是获取生成的笑话在p标签中展示 createJoke(){ //发送ajax异步请求 var t = this; axios.get("https://autumnfish.cn/api/joke/list",{params:{"num":5}}).then(function(response){ console.log(response.data.jokes); //response.data.jokes 是笑话的数组 t.joke = response.data.jokes; },function(error){ }) } } }) </script> </html> -
axios检查用户名
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue入门</title> <!-- 1.引入vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <input type="text" name="username" v-model="username"> <input type="button" value="检查用户名是否可以注册" @click="checkUserName"> </div> </body> <script> /* 格式: axios.post(请求路径,{key1:value1,key2:value2}).then(function(response){},function(error){}) 请求地址:https://autumnfish.cn/api/user/reg 请求方法:post 请求参数:username(用户名,字符串) 响应内容:注册成功或失败 */ new Vue({ el : "#app", data: { username : "" }, methods : { checkUserName(){ //1.获取用户输入的用户名 var username = this.username; //2.发送post方式的ajax请求 axios.post("https://autumnfish.cn/api/user/reg",{"username":username}).then(function(response){ alert(response.data) },function(error){}) } } }) </script> </html>
天气查询案例
- 需求分析
- 输入指定城市点击回车或点击查询,展示从今天开始的四天的天气情况
- 接口文档
- 请求地址:http://wthrcdn.etouch.cn/weather_mini
- 请求方法:get
- 请求参数:city (要查询的城市名称)
- 响应内容:天气信息
代码
-
代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue入门</title> <link rel="stylesheet" href="css/index.css" /> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div class="wrap" id="app"> <div class="search_form"> <div class="logo">拉勾天气查询</div> <div class="form_group"> <!-- 3.绑定点击事件,回车触发,通过v-model绑定数据 --> <input type="text" v-model="city" class="input_txt" @keyup.enter="findCityWeather" placeholder="请输入要查询的城市"/> <button class="input_sub" @click="findCityWeather">回车查询</button> </div> </div> <ul class="weather_list"> <!-- 遍历天气信息 --> <li v-for="(element,index) in weatherArr"> <div class="info_type"><span class="iconfont">{{element.type}}</span></div> <div class="info_temp"> <b>{{element.low}}</b> ~ <b>{{element.high}}</b> </div> <div class="info_date"><span>{{element.date}}</span></div> </li> </ul> </div> </body> <!-- 2.创建vue对象,设置el属性和data属性 --> <script> /* 思路分析: 1.输入框和添加按钮,给定事件,输入框给定义keyup事件,按钮给单击事件,关联同一个函数. 2.获取city名称 3.发送get方式的ajax请求---> 查询到5天的天气情况. 4.遍历天气,把天气放到li中 */ new Vue({ el : "#app", data : { city : "", weatherArr:[] }, methods:{ findCityWeather(){ //获取城市的名称 var city = this.city; var t = this; //发送ajax请求 axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+city).then(function(response){ console.log(response.data.data.forecast); t.weatherArr = response.data.data.forecast; },function(error){ }) } } }) </script> </html>
案例总结
- 应用的逻辑代码,建议与页面进行分离,使用单独的JS编写
- axios回调函数中的 this的指向改变,无法正常使用, 需要另外保存一份
- 服务器返回的数据比较的复杂时,获取数据时要注意层级结
注：本内容为个人拉勾教育大数据训练营课程笔记
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
