目录
demo15-商品目录案例 ( 渲染表格, 删除商品, 添加商品 )
第一章 vue简介
1.vue基础简介
1.1 什么是vue.js
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。 Vue 的核心库只关注视图层,不仅易于上
手,还便于与第三方库或既有项目整合。另一 方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完
全能够为复杂的单页应用提供驱动。
VUE的特点:
- 1.JavaScript框架 2.简化DOM操作 3.响应式数据驱动
2.1 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中的 MVVM
demo1-vue入门
一共三个步骤
1. 引入vue.js库
2. 创建Vue对象设置el属性和data属性
3. 使用插值表达式将数据渲染到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 Vue!!"
}
})
</script>
</html>
demo2-插值表达式
这些表达式会在所属 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>
demo3-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>
demo4-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>
demo5-指令入门
- 指令是指v-开头,作用于html标签,提供一些特殊的特性,当指令被绑定到html元素的时候,指令会为被绑定的元素添加一些特殊的行为,可以将指令看成html的一种属性
- 解释:指令 (Directives) 是带有 v- 前缀的特殊属性
- 作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM
- Vue框架提供的语法
- 扩展了HTML的能力
- 减少DOM操作
<!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" v-if="flag">
{{message}}
</div>
</body>
<!-- 2.创建vue对象,设置el属性和data属性 -->
<script>
var app = new Vue({
el : "#app",
data:{
message : "welcome lagou Vue!!",
flag:true
}
})
</script>
</html>
demo6-v-text
<!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>
demo7-v-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-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>
demo8-v-if与v-show
作用:根据表达式的bool值进行判断是否渲染该元素
v-if 有更高的切换开销,而 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 是将元素设置属性隐藏 切换频繁用show
-->
<p v-if="isShow">我的第一个p元素</p>
<p v-show="3>4">我的第二个p元素</p>
</div>
</body>
<script>
var app = new Vue({
el : "#app",
data:{
isShow : true
}
})
</script>
</html>
demo9-v-on
作用:使用 v-on 指令绑定 DOM 事件,并在事件被触发时执行一些 JavaScript 代码。
<!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>
<!-- 下面的@click是简写 -->
<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>
demo10-v-on, $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 ,其他内容不能输入.
感觉Vue框架类似java的类
-->
<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>
demo11-按键修饰符
.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.输入框,只有点击回车才会触发函数
.once - 只触发一次回调。
-->
<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>
demo12-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>v-for遍历(都要掌握)</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对象获取属性名和属性值 -->
<!-- 下面的index是key的下标, key和value的位置不能互换 -->
<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>
demo13-v-bind
作用: 可以绑定标签上的任何属性。
<!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可以删除
对象语法: v-bind:属性名="{属性名:data中的值}"
数组语法: v-bind:属性名="[data中值1,data中值2...]"
需求:
1.使用v-bind设置图片的src属性
2.使用v-bind设置class样式 (对象语法)
3.使用v-bind设置class多个属性 (数组语法)
-->
<div id="app">
<!-- 1.使用v-bind设置图片的src属性 -->
<img v-bind:src="imgUrl"/> <br>
<!-- 2.1 使用v-bind设置class样式 (原始方式) -->
<!-- 如果isDivStyle为true,则返回的结果为 <div class="divStyle"></div> -->
<div :class="isDivStyle?'divStyle':''"></div>
<!-- 2.2 使用v-bind设置class样式 (对象语法) -->
<!-- 如果isDivStyle为true,则返回的结果为 <div class="divStyle"></div> -->
<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>
demo14-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">
<!-- v-model类似于value -->
<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>
demo15-商品目录案例 ( 渲染表格, 删除商品, 添加商品 )
<!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,个数)
// 这个功能在jQ中可以用
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>
demo16-vue生命周期
- 挂载
- beforeCreate 在实例初始化之后,数据观测和事件配置之前被调用。
- created 在实例创建完成后被立即调用。
- beforeMount 在挂载开始之前被调用。
- mounted el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。
- 更新
- beforeUpdate 数据更新时调用,发生在虚拟DOM打补丁之前。
- updated 由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。
- 销毁
- 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>
demo17-axios生成笑话
axios: Vue中结合网络数据进行应用的开发
- 目前十分流行网络请求库,专门用来发送请求,其内部还是ajax,进行封装之后使用更加方便
- axios作用: 在浏览器中可以帮助我们完成 ajax异步请求的发送.
<!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 是笑话的数组
//在这里面不能通过this.joke拿到data中的的对象,因此事先用t记录data中的this对象
//也就是axios.get函数中的this不是createJoke中的this
t.joke = response.data.jokes;
},function(error){
})
}
}
})
</script>
</html>
demo18-axios检查用户名
其他请求类型
- 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]])
<!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>
demo19-天气预报
<!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">
<!-- type表示返回数据中的天气类型 -->
<div class="info_type"><span class="iconfont">{{element.type}}</span></div>
<div class="info_temp">
<!-- low和high表示返回数据中的高低温 -->
<b>{{element.low}}</b>
~
<b>{{element.high}}</b>
</div>
<!-- date表示返回数据中的日期 -->
<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;
//console.log(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>