Vue-style,class绑定,以及动画
vue的参数对象
el
vue的作用域(模板指定)template
data
vue的定义初始数据methods
vue的事件方法中心computed
vue的计算属性,从现有属性计算新的数据watch
vue监听,如果监听对象,必须有deep : true
- 声明周期钩子函数
- 创建阶段:
beforeCreate
创建之前created
当vue创建完毕 可以获取到this
- 挂载阶段:
beforeMount
挂载之前mounted
挂载之后
- 更新阶段:
beforeUpdate
更新之前Updated
更新之后
- 卸载阶段:
beforeDestroy
卸载之前destroyed
卸载之后
- e
- 创建阶段:
filters
过滤-管道(新版vue已经废弃)- 使用
{{num | 过滤方法(参数)}}
- 使用
directives
自定义指令props
属性mixin
混合- 路由守卫
components
组件
Vue指令加深
Vue 操作dom—$refs
- 在元素上定义:
ref="名字"
<div id="app">
<p ref="myp">this is a 段落</p>
<button @click="say()">按钮</button>
</div>
- 使用:
this.$refs.名字
可以获取对应的dom元素
new Vue({
el : "#app",
data : {},
methods : {
say() {
var elem = this.$refs.myp; //获取对应的dom元素
alert(elem.innerHTML);
}
}
})
class
的绑定
- 定义:使用 :class 来绑定
// 样式
<style type="text/css">
.red{
color : red;
}
.bold {
font-weight: 800;
}
</style>
// 标签
- 使用传统的方式来绑定
// 标签
<p :class="red">世界更美好了</p>
- 使用vue变量的方式绑定
// 标签
<p :class="flag" @click="flag=='red' ? flag='' : flag='red'">hello world!!!</p>
new Vue({
el : "#app",
data : {
flag : "red",
}
})
- 使用对象的方式绑定—且不影响原有的class
// 标签
<p class="bold" :class="{'red' : flag}" @click="flag = !flag">完美世界</p>
// 当 flag 是真的时候才显示,假的时候才是不显示
new Vue({
el : "#app",
data : {
flag : false,
}
})
- 使用数组的方式绑定—且可以是变量
// 标签
<p :class="[temp,'bold']">未来更美好</p>
new Vue({
el : "#app",
data : {
temp : 'red'
}
})
style
绑定
-
使用 :style="" 的形式
-
对象的形式进行绑定
// 标签
// 注意对象中不能有font-size这种
<p :style="{color : 'red',fontSize : '20px'}">明天会更好</p>
- 变量的形式进行绑定
// 标签
// 注意对象中不能有font-size这种
<p :style="style">明天会更好</p>
new Vue({
el : "#app",
data : {
style : {color : 'red',fontSize : '20px'}
}
})
Vue中的动画
transfrom动画
- 是在显示与隐藏过程中的动画
- 需要写在内置组件
<transition>
中<transition name="名字">
名字,自动添加的类的前缀名字<transition enter-actvie-class="">
定义进入过程的class 可以用于引入第三方的动画<transition leave-actvie-class="">
定义离开过程的class 可以用于引入第三方的动画<transition mode="">
定义离开过程的class 可以用于引入第三方的动画
- 通过添加样式实现动画
- 会在
<style>
中自动添加几个样式类.名字-enter{}
— 从什么状态进入.名字-enter-to{}
— 进入到什么状态.名字-enter-active{}
— 进入的整个过程.名字-leave{}
— 从什么状态离开.名字-leave-to{}
— 离开到什么状态.名字-leave-active{}
— 整个离开的过程名字
与<transition name="名字">
— 保持一致
<style type="text/css">
/* 从什么状态进入 */
.fade-enter{
opacity: 0;
}
/* 进入到什么状态 */
.fade-enter-to{
opacity: 1;
transform: rotate(180deg);
}
/* 进入的整个过程 */
.fade-enter-active{
transition: all linear 3s;
}
/* 从什么状态离开 */
.fade-leave{
opacity: 1;
}
/* 离开到什么状态 */
.fade-leave-to{
opacity: 0;
transform: rotate(-180deg);
}
/* 整个离开的过程 */
.fade-leave-active{
transition: all linear 3s;
}
</style>
<div id="app">
<button @click="flag = !flag">东</button><br>
<transition name="fade">
<img src="./timg.jpg" v-if="flag" width="360" alt="">
</transition>
</div>
new Vue({
el : "#app",
data : {
flag : true
}
})
关键帧动画
@keyframes 动画进入的名字{ from{} to{}}
进入动画的关键帧@keyfromes 动画离开的名字{ 0%{} 50%{} 100%{}}
离开时的关键帧.名字-enter-active{ animation : 动画进入的名字 速度模式 时间}
.名字-leave-active{ animation : 动画离开的名字 速度模式 时间}
名字
与<transition name="名字">
— 保持一致
<style type="text/css">
@keyframes fadeOut{
from{ opacity: 1;}
to{ opacity: 0;}
}
@keyframes fadeIn{
from{ opacity: 0;}
to{ opacity: 1;}
}
/* 进入的整个过程 */
.fade-enter-active{
animation: fadeIn linear 3s;
}
/* 整个离开的过程 */
.fade-leave-active{
animation: fadeOut linear 3s;
}
</style>
<div id="app">
<button @click="flag = !flag">东</button><br>
<transition name="fade">
<img src="./timg.jpg" v-if="flag" width="360" alt="">
</transition>
</div>
new Vue({
el : "#app",
data : {
flag : true
}
})
动画模式
<transition mode="">
定义动画的模式 in-out ,out-in- 需要一个唯一的标识:
:key="'in'"
或:key="'out'"
<style type="text/css">
@keyframes fadeOut{
from{transform: translate(0,0); opacity: 1;}
to{transform: translate(100,0); opacity: 0;}
}
.fade-leave-active {
animation: fadeOut ease 1s;
}
</style>
<div id="app">
<button @click="flag = !flag">切换</button>
<p>
<transition name="fade" mode="in-mode">
<button v-if="flag" :key="'in'">in</button>
<button v-if="!flag" :key="'out'">out</button>
</transition>
</p>
</div>
new Vue({
el : "#app",
data : {
flag : true
}
})
动画组动画
- 需要在
<transition-group name="名字" tag="标签类型" move-class="移动样式名">
tag="标签类型"
用什么标签包裹整个组move-class="移动样式名"
指定正在移动的元素name="名字"
设置动画的类的名字:key="唯一的标识符"
这个标识符不能随着删除增加而变化
案例—清单的加入与删除
<style>
.item{ line-height: 44px; border-bottom: 1px solid #f0f0f0;}
@keyframes fadeOut{
from{opacity: 1;}
to{ opacity:0;}
}
@keyframes fadeIn{
from{ transform: translate(0,-30px);}
to{ transform: translate(0,0);}
}
.fade-enter-active{
animation:fadeIn ease 1s ;
}
.fade-leave-active{
animation:fadeOut ease 1s ;
position: absolute;
/* 要离开的元素绝对定位--脱离文档流 */
}
.move{transition: all ease .6s;}
/* 移动产生过渡动画 动画属性为所有 ease 0.6秒 */
</style>
<div id="app">
<input type="text" @keyup.enter="list.unshift($event.target.value);$event.target.value=''">
<transition-group tag="div" name="fade" move-class="move">
<div class="item" v-for="(item,index) in list" :key="item">
{{item}}
<button @click="list.splice(index,1)">×</button>
</div>
</transition-group>
</div>
new Vue({
el:"#app",
data:{
list:["react","vue","angular"]
}
})