vue总结 有关的表单 组件 事件的处理 自定义指令 class绑定 computed属性和watch属性

表单绑定

文本 单多选 下拉选择
text radio checkbox select
checkbox 单一的条件：选中的值位true否则位false

表单修饰符

	.lazy  当change事件触发的时候更新
	默认是input事件就会触发试图的更新
	.number 把表单的值转化位数据的数值 

事件修饰

事件修饰符
	*@click.prevent="say()"

.stop 停止事件冒泡
.prevent 阻止默认事件
.once 只执行一次
按键修饰符
@keyup.enter tab等*

watch监听数据的变化

watch:{
"obj":{
	handler:function(val){
监听数据发生变化的时候，触发函数
		}，
deep：true
深层次监听，obj的属性发生变化触发handel
}}

computed从现有的数据计算出新的数据

computed:{
rmsg:function(){
	return this.msg.split('').reverse().join('')
}}

vue中的filters的使用 以及写法

• 组件内的写法
  filters:{
  filter:function(data:arg1,arg2){
  return 。。。
  }}

• html中的使用
  {{msg|filter（）}}

• 全局的写法

  在html中使用
  {{msg|filter(‘agr1’,‘arg2’)}}

• directivesvue自定义的指令

   作用：操作dom的时候 ；使用集成第三方插件的时候
   指令 插入  绑定
   定义 directives ：{img：{
   inserted（el,binding）元素的节点 以及指令的值}}
  

  class的绑定
  属性 对象 数组
  属性的绑定 :class=""
  动态绑定 ：class="{‘red’:flag}"
  :class="{‘active’:index==current}"
  数组的绑定 :class="[]"
  style 的绑定
  :style="{fontSize:‘45px’,color:‘red’}"
  styel 的对方式的绑定
  :style=“obj” data 数据中的obj:{fontSize:“50px”} “font-size”:“50px”=fontSize:“50px”

vue参数

el指令模板
data指定数据
methods指定的方法
watch监听
computed计算
filters过滤

vue动画

1.vue不能直接实现动画，它提供动画各阶段需要的class
2.组件提供class
3.在vue中，动画是在元素显示与隐藏的过程中，添加class v-if v-show v-else

组件 transition

	v-enter-active

1. 元素整个进入的过程

   	v-enter{opacity：0}
   	v-enter-to{opacity:1}
   	v-leave-active
   

2. 元素整个离开的过程

   	v-leave{opacity:1}
   	v-leace-to{opacity:0}
   

3. 动画关键帧

   @keyframes 动画名称{from{}to{}}
   

自定义动画名

	enter-active-class=""
	leave-active-class=""
	需要引入第三方的css
	out-in 动画模式
	in-out 先执行进入动画 ，在执行离开动画
	out-in先执行离开动画，在进入东动画

动画的组件 transition-group

	leave-active-class 离开元素添加类名
	enter-active-class 进入元素添加类名
	move-class 给正在移动中的元素添加class
	tag 指定包裹的标签