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"]
	 }
})