Vue入门——常用指令与结合axios网络请求

0.前言

本身是专注于后端的，稍微接触一下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

上边这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双向数据绑定。

Vue入门——常用指令与结合axios网络请求

Vue入门——常用指令与结合axios网络请求

0.前言

1.hello Vue

2. 常用的Vue指令

2.1 v-text 设置文本标签内容(textContent)

2.2 v-html 设置标签内部HTML

2.3 v-on 为元素绑定事件

2.4 v-show 选择显示（操作样式）

2.5 v-if 选择显示（操作dom元素）

2.6 v-bind 设置元素属性

2.7 v-for 根据数据(数组)生成列表结构

2.8 v-on 传递自定义参数，事件修饰符

2.9 v-model 获取和设置表单元素的值(双向数据绑定)

3.Vue结合网络请求库Axios

3.1 导入Axios的js文件

3.2 以 ul标签无序列表显示天气数据

3.3 操作网络请求逻辑的JS

3.4 运行效果

CORS error 但是 status code 是200 OK

压缩上传的GPU数据的方案

使用skopeo同步镜像

Docker——安裝MySQL

SpringBoot任務——JSoup+定時任務定時爬取微博熱搜至數據庫

Vue入門——開源項目vue-element-admin本地運行

Vue入門——常用指令與結合axios網絡請求

SpringBoot Kotlin@Autowired註解DAO層mapper出錯

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結