vue.js基础（3）

最新推荐文章于 2024-06-12 08:41:10 发布
最新推荐文章于 2024-06-12 08:41:10 发布
阅读量117 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jy123_/article/details/108451368
版权

生命周期函数演示

  • 什么是生命周期：从vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这样事件，统称为生命周期！
  • 生命周期钩子=生命周期函数=生命周期事件
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>生命周期函数的演示</title>
		<script src="vue-2.4.0.js"></script>
	</head>

	<body>
		<div id="app">
			<input type="button" name="" id="" value="修改msg" @click="msg='yes'" />
			<h3 id="h3">{{msg}}</h3>
		</div>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					msg: 'ok'
				},
				methods: {
					show() {
						console.log('执行了show方法')
					}
				},
				beforeCreate() { //这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
					// console.log(this.msg)    //undefined
					// this.show()
					// 注意：在beforeCreate 生命周期函数执行的时候，data和methods 中的数据都还没有被初始化
				},
				created() { //这是遇到的第二 个周期函数
					console.log(this.msg) //ok
					this.show()
					//在created中，data和methods都已经被初始化好了
					// 如果要调用methods 中的方法，或者操作data中的数据，最早，只能在created中操作

				},
				beforeMount() { //这是遇到的第三个周期函数，表示 模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中
					console.log(document.getElementById('h3').innerText)
					// 在beforeMount 执行的时候，页面中的元素，还没有真正的替换过来，只是之前写的一些模板字符串
				},
				mounted() { //这是遇到的第四个生命周期函数，表示内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
					console.log(document.getElementById('h3').innerText)
					//  注意：mounted 是实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了，此时，如果没有其他操作的话，这个实例就创建好了

				},
				// 接下来的是运行中的两个事件
				beforeUpdate() { //这时候，表示 我们的界面还没有被更新【数据被更新了吗？ 数据肯定被更新了】
					console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
					console.log('data中msg的数据：' + this.msg)
					// 得出结论：当执行beforeUpdate的时候，页面中的显示的数据，还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步
				},
				updated() {
					console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
					console.log('data中msg的数据：' + this.msg)
					// updated 事件执行的时候，页面和data数据已经保持同步了，都是最新的
				}
			});
		</script>
	</body>

</html>

vue-resource 实现get,post,jsonp请求

除了学习vue-resource之外，还可以使用axios的第三方包实现数据的请求下

JSONP的实现原理：

  • 由于浏览器的安全性限制，不允许ajax访问协议不同、域名不同、端口号不同的数据接口，浏览器认为这种访问不安全
  • 可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，jsonp只支持Get请求）
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>vue-resource基本使用</title>
		<link rel="stylesheet" href="bootstrap-3.3.7.css">
		<script src="vue-2.4.0.js"></script>
		<!-- 注意：vue-resource 依赖于Vue,所以先后顺序要注意 -->
		<!-- this.$http.jsonp -->
		<script src="vue-resource-1.3.4.js"></script>
	</head>

	<body>
		<div id="app">
			<input type="button" value="get请求" @click="getInfo">
			<input type="button" value="post请求" @click="postInfo">
		 <input type="button" value="jsonp请求" @click="jsonpInfo">
		</div>
		<script>
			// 创建Vue实例，得到viewModel
			var vm = new Vue({
				el: "#app",
				data: {},
				methods: {
					// 发起get请求
					// 当发起get请求之后，通过.then 来设置成功的回调函数
					getInfo() {
						this.$http.get('http://vue.studyit.io/api/getlunbo').then(function(result) {
							// 通过result.body 拿到服务器返回的成功的数据
							// console.log(result.body)
						})
					},
					// 发起post请求 application/x-www-form-urlencoded
					
					postInfo() {
                // 手动发起的post请求，默认没有表单格式，所以有的服务器处理不了
				 // 通过post 方法的第三个参数，{emulateJSON:true} 设置 提交的内容类型为普通表单数据格式
				 this.$http.post('http://vue.studyit.io/api/post',{},{emulateJSON:true}).then(result=>{
					 console.log(result.body)
				 })
					},
                    // 发起jsonp 请求
					jsonpInfo() {
							
						this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result=>{
							console.log(result.body)
						})
					}
				},
			});
		</script>
	</body>

</html>

Vue中的动画

使用过渡名实现动画
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用过渡类名实现动画</title>
    <script src="vue-2.4.0.js"></script>
	<style>
		/* 自定义两组样式来控制transition内部的元素实现动画 */
		
		/* v-enter[这是一个时间点] 是进入之前，元素的起始状态，此时还没有开始进入 */
		/* v-leave-to【这是一个时间点】 是动画离开之后，离开的终止状态，此时元素动画已经结束了*/
		
		.v-enter,
		.v-leave-to{
			opacity: 0;
			transform: translateX(150px);
		}
		
		/* v-enter-active [入场动画的时间段] */
		/* v-leave-active 【离场动画的时间段】 */
		
		.v-enter-active,
		.v-leave-active{
			transition: all 0.8s ease;
		}
	</style>
</head>

<body>
    <div id="app">
		<input type="button" name="" id="" value="toggle" @click="flag=!flag" />
		<!-- 需求：点击按钮，让h3显示再点击让h3隐藏 -->
		<!-- 使用transition元素，把需要被动画控制的元素包裹起来 -->
		<!-- transition 元素是Vue官方提供的 -->
		<transition>
			<h3 v-show="flag">这是一个H3</h3>
		</transition>
		
	</div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
			   flag:false
		   },
           methods:{}
        });
    </script>
</body>

</html>
修改动画的前缀
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>修改动画前缀</title>
    <script src="vue-2.4.0.js"></script>
	<style>
		/* 自定义两组样式来控制transition内部的元素实现动画 */
		
		/* v-enter[这是一个时间点] 是进入之前，元素的起始状态，此时还没有开始进入 */
		/* v-leave-to【这是一个时间点】 是动画离开之后，离开的终止状态，此时元素动画已经结束了*/
		
		.v-enter,
		.v-leave-to{
			opacity: 0;
			transform: translateX(150px);
		}
		
		/* v-enter-active [入场动画的时间段] */
		/* v-leave-active 【离场动画的时间段】 */
		
		.v-enter-active,
		.v-leave-active{
			transition: all 0.8s ease;
		}
		
		.my-enter,
		.my-leave-to{
			opacity: 0;
			transform: translateY(350px);
		}
		
	
		
		.my-enter-active,
		.my-leave-active{
			transition: all 0.8s ease;
		}
		
	</style>
</head>

<body>
    <div id="app">
		<input type="button" name="" id="" value="toggle" @click="flag=!flag" />
		<!-- 需求：点击按钮，让h3显示再点击让h3隐藏 -->
		<!-- 使用transition元素，把需要被动画控制的元素包裹起来 -->
		<!-- transition 元素是Vue官方提供的 -->
		<transition>
			<h3 v-show="flag">这是一个H3</h3>
		</transition>
		
		<hr>
		<input type="button" name="" id="" value="toggle2" @click="flag2=!flag2" />
		<transition name="my">
			<!-- 需求：flag2从下往上出现动画，所以用name属性 -->
			<h6 v-show="flag2">这是一个H3</h6>
		</transition>
	</div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
			   flag:false,
			   flag2:false
		   },
           methods:{}
        });
    </script>
</body>

</html>
使用第三方类实现动画
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用第三方类实现动画</title>
	<link rel="stylesheet" type="text/css" href="animate.css"/>
	<!-- 入场 bounceIn     离场 bounceOut -->
    <script src="vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
		<input type="button" name="" id="" value="toggle" @click="flag=!flag" />
		<!-- 需求：点击按钮，让h3显示，在点击让h3隐藏 -->
		<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
			<h3 v-if="flag">这是一个H3</h3>
		</transition>
		
		<!-- 使用：duration="毫秒值" 来统一设置入场和离场时候的动画时长  分别设置进场的时长和离场的时长 -->
		<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="{enter:200,leave:400}">
			<h3 v-if="flag" class="animated">这是一个H3</h3>
		</transition>
	</div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
			   flag:false
		   },
           methods:{}
        });
    </script>
</body>

</html>
列表动画
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用第三方类实现动画</title>
	<link rel="stylesheet" type="text/css" href="animate.css"/>
	<!-- 入场 bounceIn     离场 bounceOut -->
    <script src="vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
		<input type="button" name="" id="" value="toggle" @click="flag=!flag" />
		<!-- 需求：点击按钮，让h3显示，在点击让h3隐藏 -->
		<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
			<h3 v-if="flag">这是一个H3</h3>
		</transition>
		
		<!-- 使用：duration="毫秒值" 来统一设置入场和离场时候的动画时长  分别设置进场的时长和离场的时长 -->
		<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="{enter:200,leave:400}">
			<h3 v-if="flag" class="animated">这是一个H3</h3>
		</transition>
	</div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
			   flag:false
		   },
           methods:{}
        });
    </script>
</body>

</html>

在这里插入图片描述

使用钩子函数模拟小球半场动画
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>使用钩子函数模拟小球半场动画</title>
		<style type="text/css">
			#ball {
				width: 15px;
				height: 15px;
				border-radius: 50%;
				background-color: red;
			}
		</style>
		<script src="vue-2.4.0.js"></script>
	</head>

	<body>
		<div id="app">
			<input type="button" name="" id="" value="快到碗里来儿" @click="flag=!flag" />
			<!-- 使用transition 元素把小球包裹起来 -->
			<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
				<div id="ball" v-if="flag">

				</div>
			</transition>
		</div>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					flag: false
				},
				methods: {
						// 注意：动画钩子函数的第一个参数：el,表示要执行动画的那个DOM元素，是个原生的JS DOM对象
						// 大家可以认为，el是通过document.getElementById('') 方式获取到的原生JS DOM对象
					beforeEnter(el){
						// beforeEnter 表示动画入场之前，此时动画尚未开始，可以在beforeEnter中，设置元素开始动画之前的起始样式
					// 设置小球开始动画之前的起始位置
						el.style.transform="translate(0,0)"
						
					},
					enter(el,done){
						// 这句话没有实际的作用,但是如果不写出不来动画效果
						// 可以认为el.offsetLeft 会强制动画刷新
						el.offsetLeft
						// enter 表示动画 开始之后的样式，这里可以设置小球完成动画之后的结束状态
						el.style.transform="translate(150px,450px)"
						el.style.transition="all 1s ease"
						// 这里的done，起始就是afterEnter这个函数，也就是说：done 是afterEnter 函数的引用
						done()
					},
					afterEnter(el){
						// 动画完成之后，会调用afterEnter
						this.flag=!this.flag
					}
				}
			});
		</script>
	</body>

</html>

在这里插入图片描述

触不可及的Allen
关注
专栏目录
Vue.js前端开发基础与项目实战
08-13
Vue.js 是一款轻量级的前端JavaScript框架，它以其易学易用、高效灵活的特点深受开发者喜爱。在“Vue.js前端开发基础与项目实战”这个主题中，我们将深入探讨Vue.js的核心概念、基本语法以及实际项目的构建过程。 1...
Vue.js devtools(Vue3开发者工具插件)
01-21
JavaScript和ECMAScript是Vue3的基础，Vue3的语法和特性都是建立在这两种语言之上的。JavaScript是一种广泛使用的脚本语言，常用于Web开发，而ECMAScript是JavaScript的标准，定义了语言的规范。随着每年的新版发布...
vue消息提示this.$message方法
热门推荐
云的博客
03-24 12万+
//弹出信息 alertMessage(action,a){ var msg,type; switch(a){ case '1': type='success'; msg = ...
Vue模板语法2
Mia的博客
04-22 145
属性绑定 this.msg = event.target.value; 使用输入域中最新的数据覆盖原来的数据 样式绑定 class样式处理： 对象绑定和数组绑定可以结合使用 class绑定的值可以简化操作 默认的class会保留 style样式处理： 分支结构 v-show的原理：控制元素样式是否显示 类似于display:none or block 循环结构 tab栏案例(声明式...
vue this[msg]
weixin_30732487的博客
10-26 222
vue this[msg] msg为data中的属性 必须是字符串 this['msg'] = this.msg 转载于:https://www.cnblogs.com/-maomao-/p/7736587.html
js 中的this
lulalahappy123的专栏
09-07 384
this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象。 1、纯粹函数调用。 function test() { this.x = 1; alert(x); } test(); 其实这里的this就是全局变量。看下面的例子就能很好的理解其实this就是全局对象Global。
Vue实例中this的指向问题
富尔牛的博客
08-14 2133
首先让我么看一些代码，先不要往下看，你自己先想一下这里的this分别指的是什么。 <script> var msg = '我是window下的msg' var vm = new Vue({ el: '#app', data: { msg: '我是vm实例中的msg' ...
Vue.js 快速入门实战
努力是为了站在万人之中，成为别人的光
06-12 2万+
通过这个简单的待办事项列表应用，我们学习了 Vue.js 的基本用法，包括数据绑定、事件处理和列表渲染。Vue.js 的设计使得它非常易于上手，并且能够与其他库或已有项目无缝整合。希望这篇文章能帮助你快速入门 Vue.js，并为你的前端开发之旅打下坚实的基础。接下来，你可以继续学习 Vue 的其他特性，例如组件、路由和状态管理等，以便在更复杂的项目中更好地使用 Vue.js。祝你学习愉快！
【优质书籍推荐】Vue.js 3.x+Element Plus从入门到精通
weixin_43178406的博客
04-30 4万+
本文深入讲解了全栈开发巨作：《Vue.js 3.x+Element Plus从入门到精通（视频教学版）》，希望能对学习Vue.js+Element Plus框架的同学们有所帮助。 文章目录 1. 前言 2. 书籍推荐 2.1 内容简介 2.2 本书作者 2.3 本书目录 2.4 适合读者 3. 购买链接
vue.js项目实战,vue.js项目实战pdf下载,JavaScript
09-10
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，因其简单易学、高效灵活的特性，在Web开发领域迅速崛起。本资源聚焦于"Vue.js项目实战"，旨在帮助开发者通过实际操作深入理解Vue.js的核心概念和技术，从而...
Vue.js前端开发 PDF
05-30
1. **基础概念**：Vue.js的基础包括Vue实例、组件系统、模板语法、数据绑定等。Vue实例是应用的核心，负责管理应用的状态和方法。组件是Vue的可复用部分，类似于HTML元素，可以包含自己的视图和数据逻辑。模板语法是...
聊一聊vue的双向数据绑定，为啥子this.message和this._data.message 都能访问到呢？都发生了什么呢
weixin_43962555的博客
03-15 1734
初入vue 的大门，对vue 在data 中定义一个值，在DOM 中通过双花括号{{}} 就可以访问的到，对此我是很好奇的，本着好奇的心思，打开了vue 的源码，探索这个奇妙的过程。 问题的根源就在于这个方法： Object.defineProperty（）定义对象的属性相关描述符， 其中的set和get函数对于完成数据双向绑定起到了至关重要的作用。 下面我们就通过一个简单的例子来解释一个这个方法...
Java 代码实现了一个简单的文本编辑器-可运行
10-17
Java 代码实现了一个简单的文本编辑器
MATLAB实现基于Attention-LSTM的多特征分类预测（含完整的程序和代码详解）
10-17
内容概要：本文详细介绍了如何使用MATLAB实现基于Attention机制的LSTM模型进行多特征分类预测。主要内容包括程序设计思路、代码实现、模型构建与训练、模型评估及可视化、以及简单的GUI界面设计。模型可以在多个领域应用，如金融数据分析、医疗诊断等。 适合人群：对深度学习和分类预测感兴趣的科研人员和开发人员，具备一定的MATLAB和深度学习基础。 使用场景及目标：适用于需要处理时间序列数据并进行分类预测的项目。目标是通过Attention-LSTM模型提高分类准确率，同时提供直观的可视化结果和友好的用户界面。 其他说明：文中提供了详细的代码实现和注释，读者可以通过实践加深对模型的理解。此外，还讨论了模型优化和未来的研究方向。
基于Flask和SQLAlchemy 的简易仓库管理系统源码(期末课程设计).zip
10-17
基于Flask和SQLAlchemy 的简易仓库管理系统源码(期末课程设计).zip 1.多数小白下载后，在使用过程，可能会遇到些小问题，若自己解决不了，请及时私信描述你的问题，我会第一时间提供帮助，也可以远程指导 2.项目代码完整可靠，谈不上高分、满分(多数为夸大其词），但难度适中，满足一些毕设、课设要求，且属于易上手的优质项目，项目内基本都有说明文档，按照操作即可，遇到困难也可私信交流 3.适用人群：各大计算机相关专业行业的在校学生、高校老师、公司程序员等下载使用 4.特别是那种爱钻研学习的学霸，强烈推荐此项目，可以二次开发提升自己。如果确定自己是学渣，拿来作毕设、课设直接用也无妨，但自己还是尽可能弄懂项目最好！
民航网上订票系统 JAVA毕业设计 源码+数据库+论文 Vue.js+SpringBoot+MySQL.zip
最新发布
10-17
民航网上订票系统 JAVA毕业设计 源码+数据库+论文 Vue.js+SpringBoot+MySQL 系统启动教程：https://www.bilibili.com/video/BV11ktveuE2d
JAVA项目报告-闹钟的设计与实现.pdf
10-17
JAVA项目报告-闹钟的设计与实现.pdf
毕业设计论文SpringBoot考试信息报名系统.docx
10-17
毕业设计论文
Vue.js基础语法与组件实例详解及示例代码
在现代前端开发中，Vue.js已经成为了一个非常流行的JavaScript框架，它以轻量级、响应式和组件化的特点受到开发者的广泛青睐。本资源旨在通过实例演示的形式，深入浅出地介绍Vue.js的核心基础语法，并通过具体的示例...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值