Vue入门——常用指令与结合axios网络请求
0.前言
个人博客同步更新:Vue入门——常用指令与结合axios网络请求
本身是专注于后端的,稍微接触一下Vue是为了后面自己能做一点前后端分离的小项目。前端JS框架选择接触Vue仅仅是因为它入门很简单,看了一下午就大致了解基本操作(晚上回顾一下,写篇笔记)。使用什么编译器…我个写后端的其实不在乎。专业的用vscode和webstorm居多,我业余,用的是hbuliderx…
最好的参考资料当然是官方文档…有中文版的。
我自己是看视频速成的:4个小时带你快速入门vue这标题就很速成…开倍速+跳过某些片段,零零散散最多2小时,视频内容很基础,只讲了vue入门的东西,适合小白(比如我)快速入门看。我是自己跟着敲了一遍,有点理解了,记录一下,下次就直接看自己笔记和代码就好了。
1.hello Vue
按照国际惯例,先来个hello world。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 1.导入 vue.js(开发版)-->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 2.html -->
<div id="app">
hello,{{ message }}!
</div>
<script>
// 3.创建Vue实例
var app = new Vue({
el: "#app",
data: {
message: "world",
}
})
</script>
</body>
</html>
运行效果:
- 导入开发版本的Vue.js
- 创建Vue实例对象,设置el属性和data属性
- 使用模板语法把数据渲染到页面上
第二步中的两个属性:
-
el:设置vue实例对象挂载点(设置作用域,内部均可)选择器建议id选择器 类class/div选择器
-
data:基础类型/复杂类型 对象/数组遵循js语法
还可设置methods属性:定义一些js方法
2. 常用的Vue指令
之列了9个常用指令,本身不止这点,这九个分三类:
- 内容绑定,事件绑定 v-text v-html v-on
- 显示切换,属性绑定 v-show v-if v-bind
- 列表循环,表单元素绑定 v-for v-on v-model
2.1 v-text 设置文本标签内容(textContent)
默认写法会替换全部内容,使用插值表达式 {{ }} 可以替换指定内容,支持写表达式
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
hello,{{ message }}!
<!-- 1.1 v-text 设置文本标签内容(textContent) -->
<h5 v-text="data2">被替换的内容</h5>
<h5 v-text="data3">被替换的内容</h5>
<h5>{{data4+' 字符串拼接 '}}张三</h5>
</div>
<script>
// 3.创建Vue实例
var app = new Vue({
el: "#app",
data: {
message: "world",
data2:"测试Vue指令 v-text",
data3:"测试Vue指令 v-text 2",
data4:"李四",
}
})
</script>
</body>
</html>
结果:
2.2 v-html 设置标签内部HTML
设置innnerHTML 渲染内部HTML结构的文本,若为普通的文本则和v-text使用方法一致
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
hello,{{ message }}!
<!-- 1.2 v-html 设置标签HTML -->
<p v-html="content"></p>
<p v-text="content"></p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "world",
content:"<a href='http://www.baidu.com'>Vue v-html指令</a>",
}
})
</script>
</body>
</html>
结果:点击上边那个有v-html的标签便跳转百度首页了。
2.3 v-on 为元素绑定事件
点击 <input type="button" value="事件绑定" v-on:click="方法" >
移入 <input type="button" value="事件绑定" v-on:monseenter="方法" >
双击 <input type="button" value="事件绑定" v-on:dblclick="方法" >
...其他事件
方法内部通过this获取data中的数据
简写:v-on:click等价于@click
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
hello,{{ message }}!
<!-- 1.3 v-on 为元素绑定事件:点击/移入/双击等 v-on:click等价于@click -->
<input type="button" value="v-on 事件绑定 点击" v-on:click="doMethod1">
<input type="button" value="v-on 事件绑定2简写 点击" @click="doMethod1">
<input type="button" value="v-on 事件绑定3 双击" @dblclick="doMethod1">
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "world",
},
methods: {
doMethod1: function() {
alert("执行方法1")
},
}
})
</script>
</body>
</html>
效果:弹窗如图所示
2.4 v-show 选择显示(操作样式)
常用于广告/遮罩层,选择显示标记的标签样式,支持表达式。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 2.1 v-show -->
<img src="https://gitee.com/lipiaoMKX/blogimage/raw/master/img/TIM截图20200308155222.jpg" v-show="isShow">
<img src="https://gitee.com/lipiaoMKX/blogimage/raw/master/img/TIM截图20200308155222.jpg" v-show="age>=20">
</div>
<script>
var app = new Vue({
el: "#app",
data: {
age: 20,
isShow: true,
},
methods: {
}
})
</script>
</body>
</html>
效果:根据isShow的值和age>=20的结果显示图片:例子中age为20,isShow为true,所以两张图都显示。若修改为age为18,isShow为flase则都不显示
2.5 v-if 选择显示(操作dom元素)
v-if 指令是根据表达式真假,切换元素的显示和隐藏(操作dom元素)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 2.2 v-if 根据isShow布尔变量的值选择显示-->
<p v-if="isShow">v-if指令测试 根据布尔变量 isShow为true才显示此信息</p>
<p v-if="age>18">v-if指令测试2 根据表达式 age>18才显示此信息 </p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
age: 17,
isShow: true,
},
methods: {
}
})
</script>
</body>
</html>
效果:由于age: 17,isShow: true,所以只会显示上面那条文本
2.6 v-bind 设置元素属性
v-bind指令用于设置元素属性,如src title class
完整写法 v-bind:属性名
简写: 只保留 :属性名
需要动态的增删class建议使用对象的方式 :
例子中有举例:class="{active:isActive}" active class是否生效看isActive变量的值
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.active {
border: 4px solid blueviolet;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="imgsrc" v-bind:title="imgtitle+'~~'" />
<!-- 第二种写法 简写 更常用 -->
<img :src="imgsrc" :title="imgtitle+'~~'" />
<!-- -->
<img :src="imgsrc" :title="imgtitle+'~~'" :class="{active:isActive}" />
</div>
<script>
var app = new Vue({
el: "#app",
data: {
isActive:true,
imgtitle:"图片名称",
imgsrc: "https://gitee.com/lipiaoMKX/blogimage/raw/master/img/TIM截图20200308155222.jpg",
},
methods: {
}
})
</script>
</body>
</html>
效果:三张图,第三张图加了class属性,鼠标放上面都有图片名称~~
2.7 v-for 根据数据(数组)生成列表结构
v-for指令根据数据(数组)生成列表结构,且数组长度会更新同步到页面上,为响应式布局,里面可结合其他指令如:title=“item.name”
例子有普通数组和对象数组:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 3.1 v-for -->
<ul>
<li v-for="item in arr">
arr数组中的值:{{ item }}
</li>
</ul>
<!-- 索引 ul无序 ol有序-->
<ol>
<li v-for="(it,index) in arr">
arr数组第{{index+1}}个的值:{{ it }}
</li>
</ol>
<!-- 对象数组 -->
<ul>
<li v-for="item in studentObjArr" :title="item.name">
studentObjArr对象数组中的值:姓名:{{ item.name }} 序号:{{item.id}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
arr:[1,2,3],
studentObjArr:[
{name:"张三",id:"123"},
{name:"李四",id:"233"},
{name:"王五",id:"345"},
],
},
methods: {
}
})
</script>
</body>
</html>
效果:
2.8 v-on 传递自定义参数,事件修饰符
事件绑定的方法写成函数调用的形式,可传入自定义参数
定义的方法需要定义形参来接受传入的实参
事件后面跟上 .修饰符 可对事件进行限制,例如.enter为限制为回车执行 事件修饰符有很多
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- v-on -->
<input value="点击 v-on:click" type="button" v-on:click="dosth('hello',233)" />
<!-- 简写 -->
<input value="点击2 @click " type="button" @click="dosth('hello',2)" />
<!-- 同理 回车 v-on:keyup.enter 简写@keyup.enter-->
<input type="text" @keyup.enter="sayHi" placeholder="测试@keyup.enter" />
</div>
<script>
var app = new Vue({
el: "#app",
data: {
},
methods: {
dosth: function(x1, x2) {
alert(x1 + x2)
},
sayHi: function() {
alert("你好!")
},
}
})
</script>
</body>
</html>
效果:点击第一个按钮弹出hello233,点击第二个按钮弹出hello2,在输入框那儿回车弹出你好,在下个v-model指令的例子中实现根据输入框的内容弹出指定的内容。
2.9 v-model 获取和设置表单元素的值(双向数据绑定)
v-model指令用于获取和设置表单元素的值,表单数据和vue中data中的数据两者的值是双向数据绑定,即修改任意一个的数据另一个都会同步修改。(数组/对象都一样)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- v-model -->
<input v-model="message" type="text" @keyup.enter="sayHi" placeholder="测试@keyup.enter" />
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message:"",
},
methods: {
sayHi: function() {
alert("你好!"+this.message)
},
}
})
</script>
</body>
</html>
效果:输入文本后回车,弹出你好+输入的内容。
3.Vue结合网络请求库Axios
上边这Axios的Github首页有使用方法,这里结合Vue实现天气查询
3.1 导入Axios的js文件
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
3.2 以 ul标签无序列表显示天气数据
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title></title>
</head>
<body>
<!-- 测试天气接口 -->
<div id="weatherapp">
<input type="text" v-model="city" placeholder="输入city" @keyup.enter="searchWeather" />
<h5>v-model属性的数据:{{city}}</h5>
<button @click="searchWeather">查天气</button>
<ul>
<li v-for="item in weatherList">
{{item.date}} {{item.type}} {{item.low}} {{item.high}}
</li>
</ul>
</div>
<!-- 自己的js -->
<script src="./js/main.js"></script>
</body>
</html>
3.3 操作网络请求逻辑的JS
var app=new Vue({
el:"#weatherapp",
data:{
city:"",
weatherList:[],
},
methods:{
searchWeather:function(response){
var that=this;
axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
.then(function(response){
console.log(response.data);//调试:控制台输出 全部
console.log(response.data.data.forecast);调试:控制台输出 数据的预报部分
that.weatherList=response.data.data.forecast;
}),function(err){
alert(err)
}
}
}
})
3.4 运行效果
在输入框输入城市名称,点击查天气按钮或者回车便可,下面那个v-model属性的数据:实时显示了city属性,印证了v-model双向数据绑定。