vue 操作dom—ref指令
<div id="app">
<p ref="myp">this is a APPLE</p>
<button @click="say()">点我</button>
</div>
methods:{
say(){
var elem=this.$refs.myp//通过this.$refs.名称获取
alert(elem.innerHTML)
}
}
在vue中操作dom方法
- ref
- 自定义属性
class的绑定
- 普通形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.js"></script>
<style>
.red{color:red}
.bold{font-weight: 900;}
</style>
</head>
<body>
<div id="app">
<p :class="flag" @click="flag==='red'?flag='':flag='red'">明天会更好</p>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{flag:"red"},
})
</script>
</html>
- 对象形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.js"></script>
<style>
.red{color:red}
.bold{font-weight: 900;}
</style>
</head>
<body>
<div id="app">
<p class="bold" :class="{'red':flag}" @click="flag=!flag">明天会更好</p>
<!--原来的类还存在 -->
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
flag:true
},
})
</script>
</html>
- 数组形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.js"></script>
<style>
.red{color:red}
.bold{font-weight: 900;}
</style>
</head>
<body>
<div id="app">
<p :class="['temp','bold']">明天会更好</p>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
temp:""
},
})
</script>
</html>
style样式绑定
- 对象形式 :style="{color:‘red’,fontSize:‘24px’}"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p :style="{color:'red',fontSize:'24px'}">明天会更好</p>
</div>
<!-- -->
</body>
<script>
new Vue({
el:"#app",
data:{
},
})
</script>
</html>
运行结果：
- :style=“styles”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p :style="styles">明天会更好</p>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
styles:{color:'red',fontSize:'24px'}
},
})
</script>
</html>
运行结果：
css产生动画
过渡动画
transition:动画的属性 动画的缓动函数 持续时间；
transition:all ease 1s 所有属性动画产生动画 过渡缓入缓出 时间1s
缓动函数: ease 匀加匀减 ease-in缓入 ease-out 缓出 ease-in-out cubic-bezier(n,n,n,n)
时间: 1s 0.1s 100ms
属性: all width color…
关键帧动画
- 定义动画
@keyframes fadeIn {
from{}
to{}
}
@keyframes fadeOut {
0%{}
100%{}
} - 调用动画
animate:动画名称 缓动函数 次数 延迟
animate:fadein ease 1s infinite
vue 动画
- 需要在显示与隐藏过程中产生动画
- 放在内置组件中
- 通过动态的添加样式实现动画
v-enter 从什么状态开始进入
v-enter-to进入到什么状态
v-enter-active 进入过程
v-leave 离开起始位置
v-leave-to 离开的状态
v-leave-active 离开过程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.js"></script>
<style>
/* .fade是与transition内置组件中name属性值一致 */
.fade-enter{opacity: 0; transform:translate(-100px,0) rotate(-180deg);}
/* 从什么状态进入 */
.fade-enter-to{opacity: 1; transform:translate(0px,0) rotate(0deg);}
/* 进入到什么状态 */
.fade-enter-active{transition: all 3s;}
/* 进入的整个过程 */
.fade-leave{opacity: 1;transform:translate(0px,0) rotate(0deg);}
/* 从什么状态离开 */
.fade-leave-to{opacity: 0; transform:translate(100px,0) rotate(180deg);}
/* 离开到什么状态 */
.fade-leave-active{transition: all 3s;}
/* 离开的整个过程 */
img{width: 100px; }
</style>
</head>
<body>
<div id="app">
<button @click="flag=!flag">按钮</button>
<transition name="fade">
<img src="./timg.jpg" alt="" v-show="flag" >
</transition>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
flag:true
},
})
</script>
</html>
关键帧动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.js"></script>
<style>
/* fadeIn动画进入名称 */
@keyframes fadeIn {
from{opacity: 0;}
to{opacity: 1;}
}
/* fadeOut动画离开名称 */
@keyframes fadeOut {
0%{opacity: 1;}
100%{opacity: 0;}
}
.fade-enter-active{animation: fadeIn 3s;}
.fade-leave-active{animation: fadeOut 3s;}
img{width: 100px;}
</style>
</head>
<body>
<div id="app">
<button @click="flag=!flag">按钮</button>
<transition name="fade">
<img src="./timg.jpg" alt="" v-show="flag" >
</transition>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
flag:true
},
})
</script>
</html>
引入外部动画css–Animate.css
enter-active-class 定义进入过程的class
leave-active-class 定义离开过程的class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.js"></script>
<link rel="stylesheet" href="./css/animate.min.css">
<style>
img{width: 100px;}
</style>
</head>
<body>
<div id="app">
<button @click="flag=!flag">按钮</button>
<transition
enter-active-class="animated bounceInDown"
leave-active-class="animated hinge"
>
<img src="./timg.jpg" alt="" v-show="flag" >
</transition>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
flag:true
},
})
</script>
</html>
动画模式 mode 值in-out或out-in
需要有个:key="‘in’“或:key=”‘out’"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.js"></script>
<style>
@keyframes fadeOut {
from{transform: translate(0,0);opacity: 1;}
to{transform: translate(100,0);opacity: 0;}
}
.fade-leave-active{
animation: fadeOut 3s;
}
@keyframes fadeIn {
from{transform: translate(100,0);opacity: 0;}
to{transform: translate(0,0);opacity: 1;}
}
.fade-enter-active{
animation: fadeIn 3s;
}
</style>
</head>
<body>
<div id="app">
<button @click="flag=!flag">按钮</button>
<transition name="fade" mode="out-in">
<button v-if="flag" :key="'in'">in</button> <button v-if="!flag" :key=
"'out'">out</button>
</transition>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
flag:true
},
})
</script>
</html>