Electron + Vue + Vscode构建跨平台应用（一）知识点补充
Electron + Vue + Vscode构建跨平台应用（二）Electron + Vue环境搭建
Electron + Vue + Vscode构建跨平台应用（三）利用webpack搭建vue项目
Electron + Vue + Vscode构建跨平台应用（四）利用Electron-Vue构建Vue应用详解
Electron + Vue + Vscode构建跨平台应用（五）Electron-Vue项目源码分析
Electron + Vue跨平台应用（六）效果还不错的登录页面
Electron + Vue跨平台应用（七）基础技法（一）
Electron + Vue跨平台应用（八）基础技法（二）
Electron + Vue跨平台应用（八）基础技法（三）
Electron + Vue跨平台应用（九）基础技法（四）
Electron + Vue跨平台应用（十）可视化（一）
Electron + Vue跨平台应用（十一）可视化（二）
Electron + Vue跨平台应用（十二）可视化（三）
Electron + Vue跨平台应用（十三）基础技法（五）
Electron + Vue跨平台应用（十四）基础技法（六）
首先我们想到css中的transition属性，通过该属性我们可以实现元素在有焦点的时候逐渐扩大的效果，代码如下
div {
width:100px;在这里插入代码片
height:100px;
background:pink;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover {
width:300px;
background: yellow;
}
通过给div元素设置一个transition属性，就可以完成这样一个简单的动画效果，那么transition属性知识点有哪些？
1. transition属性概述
transition为元素添加一种过渡效果，类似动画，其有四个属性可以设置
- transition-property: 过渡属性(默认值为all)，注意并不是所有的属性都有过渡属性，只有具有中间值的属性才具备过渡效果
- transition-duration: 过渡持续时间(默认值为0s)； 这个属性是必需值
- transition-timing-function: 过渡函数(默认值为ease函数),这个就类似android里面的自定义动画里面的函数一致，其包含的函数有
- ease: 开始和结束慢，中间快。相当于cubic-bezier(0.25,0.1,0.25,1)
- linear: 匀速。相当于cubic-bezier(0,0,1,1)
- ease-in: 开始慢。相当于cubic-bezier(0.42,0,1,1)
- ease-out: 结束慢。相当于cubic-bezier(0,0,0.58,1)
- ease-in-out: 和ease类似，但比ease幅度大。相当于cubic-bezier(0.42,0,0.58,1)
- step-start: 直接位于结束处。相当于steps(1,start)
- step-end: 位于开始处经过时间间隔后结束。相当于steps(1,end)
- transition-delay: 过渡延迟时间(默认值为0s)
所以代码块
transition:width 2s;
表示针对width属性使用ease函数做开始和结束慢，中间快的一个动画，动画持续时间为2秒，且过渡没有延迟
2. css中transition触发
过渡transition的触发有三种方式，分别是伪类触发、媒体查询触发和javascript触发（如点击事件）。其中常用伪类触发有如下几种:hover、:focus、:active等；3. 在VUE中如何使用transition
Vue中封装了transtion动画过渡封装组件，所以在vue中我们可以通过transition来包裹一个元素的方式来实现过渡效果
<transition name="xxx">
<div v-if="xxx"></div>
</transition>
transtion组件在进入/离开的过渡中，会有 6 个 class 切换：
1. v-enter：定义进入过渡的开始状态。
2. v-enter-active：定义进入过渡生效时的状态。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3. v-enter-to: 定义进入过渡的结束状态。
4. v-leave: 定义离开过渡的开始状态。
5. v-leave-active：定义离开过渡生效时的状态。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6. v-leave-to: 定义离开过渡的结束状态。
这里的v会被transition的name属性的值所替代，所以我们可以设置对应类名的样式来实现过渡效果
这里我们要特别注意下，在vue中要想使过渡生效，则必须满足如下要求
- 条件渲染 (使用 v-if)
- 条件展示 (使用 v-show)
- 动态组件
- 组件根节点
即如果你在vue中是无法通过伪类来触发过渡效果的
这里我们实现一个过渡效果如下
完整的代码如下
<template>
<div>
<button v-on:click="showFlag = !showFlag">
Toggle
</button>
<transition name="fades">
<div v-if="showFlag" id="transitionPEle">hello</div>
</transition>
</div>
</template>
<script type="text/ecmascript-6">
export default {
data () {
return {
showFlag: false
}
},
methods: {
}
}
</script>
<style>
#transitionPEle{
width: 200px;
height: 200px;
background: pink;
}
/* 代表过渡进入过程的初始状态；比如从外添加元素进入。（定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。） */
.fades-enter{
margin-left: 130px;
opacity: 0.5;
}
/* 代表过渡进入过程的末尾状态也就是要进入的最终状态（开始定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。） */
.fades-enter-to{
margin-left: 200px;
opacity: 1;
}
/* 进入过渡生效时的状态设定（应用前生效，应用后移除，过程中的变化时间等属性在此设置） */
.fades-enter-active{
/*transition属性all表示对所有生效，变换过程时间为3秒*/
transition: all 3s;
}
/* 代表过渡离开过程的初始状态；比如将存在元素移除离开。（定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除 ） */
.fades-leave{
/*距定位左边距离为0 透明度为不透明也就是显示*/
margin-left: 0;
opacity: 1;
}
/* 代表过渡离开过程的末尾状态也就是要离开的最终状态（定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。） */
.fades-leave-to{
/*距左边距30px透明度为完全透明，这就实现了从即将离开时
到离开到的淡出效果（向右移动30px并逐渐透明）*/
margin-left: 30px;
opacity: 0;
width: 200px;
}
/* 离开过渡生效时的状态设定（应用前生效，应用后移除，过程中的变化时间等属性在此设置） */
.fades-leave-active{
transition:all 3s;
}
</style>
4. 在VUE中如何监听过渡效果的各个阶段
我们可以为transition添加如下函数的监听来实现对过渡各个阶段的监听v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
v-bind:css="false"
在监听过渡效果的生命周期函数中，我们需要注意
1：enter函数和leave函数在实现的时候需要主动调用done方法
2：如果监听了过渡函数，则css样式将不再起作用
完整的方法如下
<template>
<div>
<button id="transitionBtn" @click="show()"></button>
<transition name="fades"
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled">
<img v-show="showFlag" src="http://static.jsbin.com/images/dave.min.svg">
</transition>
</div>
</template>
<script type="text/ecmascript-6">
export default {
data () {
return {
showFlag: false
}
},
methods: {
show () {
this.showFlag = !this.showFlag
},
beforeEnter (el) {
console.log('beforeEnter准备进入', el)
},
enter (el, done) {
console.log('enter进入', el)
done()
},
afterEnter (el) {
console.log('afterEnter进入之后', el)
},
enterCancelled (el) {
console.log('enterCancelled', el)
},
beforeLeave (el) {
console.log('beforeLeave准备离开', el)
},
leave (el, done) {
console.log('leave离开', el)
done()
},
afterLeave (el) {
console.log('afterLeave离开之后', el)
},
leaveCancelled (el) {
console.log('leaveCancelled', el)
}
}
}
</script>
<style>
</style>
其打印内容为：
这样我们就可以通过过渡的钩子函数来控制元素的过渡效果了
5. 在VUE中如何自定义过渡类名
之前过渡的类名是通过name属性来自动生成的，如果想自定义过渡类名，则需要通过enter-class、enter-active-class、leave-class、leave-active-class这四个特性来定义
enter-class="fade-in-enter"
enter-active-class="fade-in-active"
leave-class="fade-out-enter"
leave-active-class="fade-out-active"
- . stop：阻止事件冒泡
- . prevent：阻止默认事件的发生；默认事件指对DOM的操作会引起自动执行的动作，比如点击超链接的时候会进行页面的跳转，点击表单提交按钮时会重新加载页面等，使用".prevent"修饰符可以阻止这些事件的发生
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
- . capture：捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自然顺序执行触发的事件。
<div @click.capture="outer()">
<div @click="outerInner()">
<div @click="inner()">测试事件修饰符</div>
</div>
outer () {
console.log('outer')
},
outerInner () {
console.log('outerInner')
},
inner () {
console.log('inner')
},
其输出为：
- . self：将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响，此处如果将capture换为self，则输出为
- . once：设置事件只能触发一次
- 按键修饰符
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
- 系统修饰符，可以用.ctrl .alt .shift .meta修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器，
- exact修饰符，其作用就是精准控制系统修饰符
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>
- 在常见html中，通过
var vm2 = new Vue的方式来访问实例属性和方法 - 通过vue_cli构建的vue项目中，因为每一个vue文件默认是一个vue实例，所以我们可以通过this来访问vue实例属性和方法
常见Vue实例属性有
- $parent： 访问当前组件实例的父实例
- $root： 访问当前组件树的跟实例
- $children： 访问当前组件实例的直接子组件
- $refs： 访问v-ref指令的子组件
- $el：访问挂载当前组件实例的DOM元素，在vue项目中，这个表示该vue文件的跟元素以及其包含的子元素
- $els：访问使用了v-el指令的DOM元素
- $data: 访问实例观察的数据对象，如vue定义的data对象
- $options: 访问实例自定义的对象
常见的Vue实例方法有
- $nextTick: 用来在下次DOM更新循环后被调用
- $emit： 用来触发事件
- $dispatch: 派发事件，如果监听函数返回false则停止，其内部实现也是通过emit来实现的
- $broadcast: 广播事件，如果监听函数返回false则停止，，其内部实现也是通过emit来实现的
- $off： 用来删除事件监听器
补充说明dispatch和broadcast的使用：
组件A可以通过this.$dispatch函数或者this.$broadcast来分发事件/广播事件，组件B可以通过this.$on的方法来注册一个监听，通过此方法也可以完成组件之间的交互
这里我们举个例子说明下部分属性和方法
<div>
<p ref="vuecomponent" @click="showVueMemAndMethod()">用来演示Vue实例属性和方法</p>
</div>
</div>
showVueMemAndMethod () {
console.log('打印Vue正在观察的对象属性', this.$data)
console.log('打印Vue实例parent属性', this.$parent)
console.log('打印Vue实例refs属性', this.$refs.vuecomponent)
console.log('打印Vue实例el属性', this.$el)
}
打印如下
扫一扫
6126
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
