指令，常见请求方式

最新推荐文章于 2022-05-19 22:09:17 发布

ygangying

最新推荐文章于 2022-05-19 22:09:17 发布

阅读量369

点赞数

文章标签： Vue动画

本文链接：https://blog.csdn.net/ygangying/article/details/103084015

版权

10-Day05

指令
动画
常见的请求方式
- jsonp 的实现原理

指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。

例子（焦点）

全局

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

私有

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

Vue的生命周期

什么是生命周期?

Vue实例从创建到运行销毁，伴随着各种时间，这些事件统称为生命周期。
生命周期钩子，就是生命周期事件的别名
生命周期钩子=生命周期事件=生命周期函数

图示

在这里插入图片描述

大致分类

创建期间的函数
- beforeCreate
- created
- beforeMount
- mounted
运行期间的函数
- beforeUpdate
- updated
销毁期间的生命周期函数
- beforeDestroy
- destroyed

函数简写

有时候你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写:

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

动画

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

例子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="../libs/vue-2.4.0.js"></script>
	<style>
		.v-enter,
		.v-leave-to{
			opacity: 0;
			transform: translateX(100px);
		}
		.v-enter-active,
		.v-leave-active{
			transition: all 1s ease;
		}
		.y-enter,
		.y-leave-to{
			opacity: 0;
			transform: translateY(100px);
		}
		.y-enter-active,
		.y-leave-active{
			transition: all 1s ease;
		}
	</style>
</head>
<body>
	<div id="app">
		<input type="button" value="切换" @click="flag=!flag">
		<transition>
			<h3 v-if="flag">今天天气晴朗</h3>
		</transition>
		<transition name="y">
			<h3 v-if="flag">太阳公公好</h3>
		</transition>
	</div>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				flag:false
			}
		})
	</script>
</body>
</html>

常见的请求方式

get post jsonp

jsonp 的实现原理

浏览器的安全限制不允许ajax与跨域访问数据
通过动态创建script标签把标签的src改成数据接口的地址，因为script允许跨域请求数据这种数据获取方式就称为jsonp
- 1.在客户端(html,js) 定义回调函数，预处理数据的操作
- 2.把回调函数的名称(jsonp,jsonpCallback) 传给服务器端 cbName=fun1
- 3.后台程序把数据处理好用回调函数的名字去拼接成一个函数调用的形式返回给客户端去执行
- 4.客户端拿到后台传回的字符串解析成js代码去执行拿到封装的数据

ygangying

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
指令，常见请求方式

10-Day05指令例子（焦点）Vue的生命周期什么是生命周期?图示大致分类函数简写常见的请求方式jsonp 的实现原理指令除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。例子（焦点）全局// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时……...
复制链接

扫一扫