AJAX、Vue

渴鱼y

已于 2022-11-28 17:16:14 修改

阅读量1.7k

点赞数

分类专栏： # 3. 前端高级知识文章标签： ajax

于 2021-04-02 21:21:34 首次发布

本文链接：https://blog.csdn.net/jy_z11121/article/details/115407195

版权

3. 前端高级知识专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue

介绍

vue.js是一个前端框架，他与jquery不同，jquery是一个js库，而vue.js是js的前端框架。

vue和jQuery的区别
关于“使用vue,react等框架可以直接脱离jquery了吗？”的讨论
关于Vue的超详细问&答

Vue.js通过简单的API(应用程序编程接口)提供高效的数据绑定和灵活的组件系统。

Vue遵循MVVM模式：View — ViewModel — Model
在这里插入图片描述

左侧的View相当于我们的DOM内容（我们所看到的页面视图），右侧的Model相当于我们的数据对象，中间的监控者就负责监控两侧的数据，并相对应地通知另一侧进行修改。比如：你在Model层中修改了name的值为：“李四”，那么View视图层显示的“张三”也会自动变成了“李四”，而这个过程就是有ViewModel来操作的，不需要你手动地去写代码去实现(你不用再手动操作DOM了)。

数据驱动：数据改变驱动了视图的自动更新，传统的做法你得手动改变DOM来改变视图，vue.js只需要改变数据，就会自动改变视图，再也不用你去操心DOM的更新了，这就是MVVM思想的实现。

视图组件化：把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。

vue特点介绍：https://blog.csdn.net/huangjianfeng21/article/details/92043800
用vue的便利之处：https://www.cnblogs.com/liubingyjui/p/10797689.html

第一个Vue程序

Step1、导入开发版本的Vue.js
Step2、创建Vue实例对象，设置el属性和data属性
Step3、使用简洁的模板语法把数据渲染到页面上

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- 3 -->
	<div id="app">
		{{ message }} <!-- 插值表达式 -->
	</div>
	<!-- 1 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<!-- 2 -->
	<script>
		var app = new Vue({
			el: "#app",  // 也可以写成 el: ".app",那么就需要 class="app"; 还可以直接写标签名，如el: "div"。实际开发中，通常使用id选择器
			data: {
				message: "Hello!"
			}
		})
	</script>
</body>
</html>

el 挂载点

el是用来设置Vue实例挂载的元素
作用范围：el选项命中的元素及其内部的后代元素。
不能使用在html和boby标签上

data 数据对象

<body>
	<div id="app">
		{{ message }}
		<h2> {{ student }} </h2>
		<h2> {{ student.name }} </h2>
		<ul>
			<li>{{ campus[0] }}</li>
			<li>{{ campus[1] }}</li>
		</ul>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: "#app",  // 也可以写成 el: ".app",那么就需要 class="app"; 还可以直接写标签名，如el: "div"。实际开发中，通常使用id选择器
			data: {
				message: "Hello!",
				student: {
					name: "zjy",
					mobile: "110"
				},
				campus: ["hue", "CCNU"]
			}
		})
	</script>
</body>

Vue指令

Vue指令指的是以v- 开头的一组特殊语法。

v-text & v-html

v-html指令的作用是：设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么，只会被原样输出
解析文本使用v-text，需要解析html结构则使用v-html

<body>
	<div id="app">
		<h2 v-text="message"></h2> 
		<h2 v-html="message"></h2>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: "#app", 
			data: {
				message: "<font color=#EA766A>Hello!</font>",
			}
		})
	</script>
</body>

在这里插入图片描述

v-on

为元素绑定事件。

<div id="app">
	<input type="button" value="事件绑定" v-on: 事件名="方法"> <!--> 或 <input type="button" value="事件绑定" @事件名="方法名"> <-->
	<!-->
		点击事件：<input type="button" value="事件绑定" v-on: click="方法名">
		鼠标移入事件：<input type="button" value="事件绑定" v-on: monseenter="方法名">
		双击事件：<input type="button" value="事件绑定" v-on: dblclick="方法名">
	<-->
</div>

var app = new Vue({
	el:"#app",
	methods:{
		方法名: function(){
			//内容
		}
	}
})

案例1：计数器

<body>
	<div id="app">
		<!-- 计数器功能区域-->
		<div class="input-num">
			<button @click="sub"> - </button>
			<span>{{ num }}</span>
			<button @click="add"> + </button>
		</div>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: "#app", 
			data: {
				num: 1
			},
			methods: {
				add: function(){
					if(this.num < 5){
						this.num++;
					}
					else{
						alert('值已最大，无法继续增加！');
					}
				},
				sub: function(){
					if(this.num > 0){
						this.num--;
					}
					else{
						alert('值已最小，无法继续减少！');
					}
				}
			}	
		})
	</script>
</body>

v-show

根据表达值的真假，切换元素的显式和隐藏。原理是修改元素的display，实现显式或隐藏。指令后面的内容，最终都会解析为布尔值（true：显式 false：隐藏）。

<div id="app">
	<!-- 使用方式1：直接设置true或false -->
	<img src="图片地址" v-show="true">
	<!-- 使用方式2：根据数据对象中isShow的值进行判断 -->
	<img src="图片地址" v-show="isShow">
	<!-- 使用方式3：若数据对象中age>=18，则为true -->
	<img src="图片地址" v-show="age>=18">
</div>

var app = new Vue({
	el:"#app",
	data: {
		isShow:false,
		age: 16
	}
})

v-if

v-if和v-show的效果相同，但原理不同——v-if不是通过改变display来实现的，而是通过操纵dom元素来切换显示状态（true：元素存在于dom树中 false：元素从dom中移出）：

<body>
	<div id="app">
		<!-- 计数器功能区域-->
		<input type="button" value="切换显示状态" @click="changeIsShow">
		<p v-show="isShow">v-show 修饰</p>
		<p v-if="isShow">v-if 修饰</p>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: "#app", 
			data: {
				isShow: false
			},
			methods: {
				changeIsShow: function(){
					this.isShow = !this.isShow;
				}
			}	
		})
	</script>
</body>

在这里插入图片描述

原则：频繁切换的元素使用v-show修饰，反之，使用v-if修饰。

v-bind

设置元素的属性，如src、title、class等。完整写法是v-bind: 属性名=数据对象表达式，可简写为: 属性名=数据对象表达式。

<div id="app">
	<!-- 使用示例 -->
	<img v-bind:src="imgSrc">
	<img v-bind:title="imgtitle+'!!!'">
	<img v-bind:class="{active:isActive}"> <!-- "{active:isActive}"即三元表达式"isActive ? 'active' : '' " -->

	<!-- 以上v-bind可省略！直接写成： -->
	<img :src="imgSrc">
	<img :title="imgtitle+'!!!'">
	<img :class="{active:isActive}"> 
</div>

var app = new Vue({
	el:"#app",
	data: {
		imgSrc: "图片地址",
		imgTitle: "hello",
		isActive: false
	}
})

<style>
	.active{
		border: 1px solid red;
	}
</style>

<body>
	<div id="app">
		<img v-bind:src="imgSrc" alt="">
		<br>
		<img :src="imgSrc" alt="" :title="imgTitle+'!!!'">
		<br>
		<img :src="imgSrc" alt="" :title="imgTitle" :class="{active:isActive}" @click="toggleActive">  
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: "#app", 
			data: {
				imgSrc: "http://www.itheima.com/images/logo.png",
				imgTitle: "it_hei_ma",
				isActive: false
			},
			methods: {
				toggleActive: function(){
					this.isActive = !this.isActive;
				}
			}
		})
	</script>
</body>

案例2：图片切换

v-for

根据数据生成列表结构。

<body>
	<div id="app">
		<input type="button" value="添加数据" @click="add">
		<input type="button" value="移除数据" @click="remove">
		<ul>
			<li v-for="(item, index) in arr" :title="item">
				{{ index + 1 }} {{ item }}
			</li>
			<li v-for="(item, index) in objArr">
				{{ item }}
				{{ item.name }}
				
			</li>
		</ul> 
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: "#app", 
			data: {
				arr: ["北京", "上海", "广东", "深圳"],
				objArr:[
					{name: "Jack"},
					{name: "Rose"}
				]
			},
			methods: {
				add: function(){
					this.objArr.push({ name: "zjy" });
				},
				remove:function(){
					this.objArr.shift();
				}
			}
		})
	</script>
</body>

v-on补充

传递自定义参数、事件修饰符（事件的后面跟上.修饰符从而对事件进行限制）。

更详细的：https://cn.vuejs.org/v2/api/#v-on

<body>
	<div id="app">
		<!-- 使用参数 -->
		<input type="button" value="点击" @click="study('zjy', 'vue')"> 
		<br>
		<!-- 指定事件：这里指定只有回车事件才会触发执行指定函数 -->
		<input type="text" @keyup.enter="sayHi">
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: "#app", 
			methods: {
				study: function(name, course){
					alert(name+" is studying "+course);
				},
				sayHi: function(){
					alert("Hi");
				}
			}
		})
	</script>
</body>

v-model

获取和设置表单元素的值（双向数据局绑定）。

<body>
	<div id="app">
		<input type="button" value="修改message" @click="setM">
		<br>
		<input type="text" v-model="message" @keyup.enter="getM">
		<h2>{{ message }}</h2>
		<!-- 效果：输入内容到text中时，h2中的message内容也将同步更新 -->
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: "#app", 
			data: {
				message: "v-model学习"
			},
			methods: {
				getM: function(){
					alert(this.message);
				},
				setM: function(){
					this.message = "vvvvvvvv";
				}		
			}
		})
	</script>
</body>

案例3：记事本

新增

生成列表结构（v-for数组）
获取用户输入，双向数据绑定（v-model）
回车，新增数据（v-on、.enter）

<!-- 输入框 -->
<header class="header">
	<h1>记事本</h1>
	<!-- !!! -->
	<input v-model="inputValue" @keyup.enter="add" type="text" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo"> 
</header>
<!-- 列表区域 -->
<section class="main">
	<ul class="todo-list">
		<!-- !!! -->
		<li class="todo" v-for="(item, index) in list">
			<div class="view">
				<span class="index">{{ index+1 }}.</span>
				<label>{{ item }}</label>
				<button class="destroy"></button>
			</div>
		</li>
	</ul>
</section>

删除

数据改变，和数据绑定的元素同步改变
事件自定义参数

<!-- 列表区域 -->
<section class="main">
	<ul class="todo-list">
		<li class="todo" v-for="(item, index) in list">
			<div class="view">
				<span class="index">{{ index+1 }}.</span>
				<label>{{ item }}</label>
				<!-- !!! -->
				<button class="destroy" @click="remove(index)"><font color="red"> x </font></button>
			</div>
		</li>
	</ul>
</section>

统计

统计信息个数（v-text、length）

<!-- 统计和清空 -->
<footer class="footer">
	<span class="todo-count"><strong>{{ list.length }}</strong>items left</span>
	<button class="clear-completed">Clear</button>
</footer>

清空

点击清除所有数据（v-on 清空数组）

<!-- 统计和清空 -->
<footer class="footer">
	<span class="todo-count"><strong>{{ list.length }}</strong>items left</span>
	<button class="clear-completed" @click="clear">Clear</button>
</footer>

隐藏

没有数据时，隐藏元素（v-show v-if 数组非空）

<!-- 统计和清空 -->
<footer class="footer">
	<span class="todo-count" v-if="list.length!=0"><strong>{{ list.length }}</strong>items left</span>
	<button class="clear-completed" @click="clear" v-show="list.length!=0">Clear</button>
</footer>

总结

列表结构可以通过v-for指令结合数据生成
v-on结合事件修饰符可以对事件进行限制，比如.enter
v-on在绑定事件时可以传递自定义参数
通过v-model可以快速的设置和获取表单元素的值
基于数据的开发方式（若不使用Vue，则都是基于DOM的开发，先获取DOM元素）——要完成所有的逻辑，优先想到的是数据

<body>
	<!-- 主体区域 -->
	<section id="todoapp">
		<!-- 输入框 -->
		<header class="header">
			<h1>记事本</h1>
			<input v-model="inputValue" @keyup.enter="add" type="text" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo">
		</header>
		<!-- 列表区域 -->
		<section class="main">
			<ul class="todo-list">
				<li class="todo" v-for="(item, index) in list">
					<div class="view">
						<span class="index">{{ index+1 }}.</span>
						<label>{{ item }}</label>
						<button class="destroy" @click="remove(index)"><font color="red"> x </font></button>
					</div>
				</li>
			</ul>
		</section>
		<!-- 统计和清空 -->
		<footer class="footer">
			<span class="todo-count" v-if="list.length!=0"><strong>{{ list.length }}</strong>items left</span>
			<button class="clear-completed" @click="clear" v-show="list.length!=0">Clear</button>
		</footer>
	</section>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: "#todoapp", 
			data: {
				list: ["写代码", "吃饭", "睡觉", "运动"],
				inputValue: "学习"
			},
			methods: {
				add: function(){
					this.list.push(this.inputValue);
				},
				remove: function(index){
					this.list.splice(index, 1); //删除索引为index的元素，仅删除1次
				},
				clear: function(){
					this.list = [];
				}
			}
		})
	</script>
</body>

Vue网络应用

Vue结合网络数据开发应用。

axios

axios是功能强大的网络请求库。内部使用的是ajax，axios对ajax进行了封装，使用起来更加方便。功能单一，就是发送请求，所以容量小，很方便的能够与其他框架或者库结合，比如Vue。

如何使用axios发送请求以及获取相应的内容？使用时要先导入这个库，然后使用get或post方法即可发送对应的请求。then方法中的回调函数会在请求成功或失败时触发。通过回调函数的形参可以获取相应内容或错误信息。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios.get(地址?key=value&key2=value2).then(function(response){}, function(err){})
axios.post(地址,{key:value,key2:value2}).then(function(response){}, function(err){})

案例1 天气查询

案例2 音乐播放器

音乐查询

音乐播放

歌曲封面

歌曲评论

播放动画

播放MV

渴鱼y

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
AJAX、Vue

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。使用JSON格式的数据（以前用的是XML）。优点可以无需刷新页面就与服务器端进行通信。允许根据用户事件来更新部分页面内容。缺点没有浏览
复制链接

扫一扫

专栏目录