vue.js基础(3)

vue.js基础(3)

生命周期函数演示

  • 什么是生命周期:从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>

在这里插入图片描述

这篇文章有 2 个评论

发表评论