4--vue自定义指令 class.style绑定 动画

1. directives-自定义指令

a.简介

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：

当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

如果想注册局部指令，组件中也接受一个 directives 的选项：

directives: {
  focus: {
      // 指令的定义
      inserted: function (el) {
      el.focus()
    }
  }
}

然后你可以在模板中任何元素上使用新的 v-focus 属性，如下：

---

b. 案例

directives ---- vue自定义指令
 作用
   1. 要操作dom时候
   2. 使用集成第三方插件时候
 定义:

        directives:{
            img:{
            inserted(el,binding){
           // el 当前指令所在的html节点
           // binding.value 指令的值
       }
    }
}

使用
    

单词：

• directives 指令
• inserted 已插入
• binding 绑定

案例1-自定义指令 v-img

2. class绑定

a. 简介

1. 属性绑定
   :class="'red blue'"
2. 动态绑定
   :class="{'red':flag}"
   
   111
   
   :class="{'active':index==current}"
3. 数组绑定
   :class="['red','em','small']"
4. 对象绑定

:class="classobj"
data:{
    classobj:{
        a:true,
        b:true
    }
}

b.案例 1：

       
    
    

    

    
    
class是一个属性 可通过属性绑定
 
    
class 对象方式绑定
    
数组的方法绑定多个
    {{flag}}    


    

class.png

c. 案例2-选项卡切换

       
    
    

    

    
{{item.title}}
     
     
    
{{list[current].content}}
    
     


    

3. style绑定

动态绑定

• 三目写法
• 对象写法
• 数组写法

a.结构

style 绑定
对象

style的绑定
 

对象变量方式
 
data:{
   obj:{'font-size':"48px",fontStyle:'italic',color:red}
}

b. 案例

       
    
    

    

    
style的绑定
 
    
动态三目写法
 
    
对象变量方式
   


    

4. 综合案例--购物车

       
    
 

    

   

       

            
全选 
            
id
   
书名
 
日期
 
价格
数量
  
操作
       
       

        

        
{{item.id}}
        
{{item.name}}
        
{{item.date}}
        
{{item.price}}
        
 
            -
            
            +
        
        
 删除
    
   
 
   总价格:{{total}}


    

购物车.png

5. Vue 动画

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

    v-enter-active     元素整个进入的过程
    v-enter              元素进入的初始状态
    v-enter-to          元素进入的结束状态
    v-leave-active      元素整个离开的过程
    v-leave               元素的离开初始状态
    v-leave-to          元素的离开结束状态


    自定义动画名
        enter-active-class=“xxx”
        leave-active-class=“xxx”
        要引入第三方css  animate.css

   动画模式 mode
        in-out    先执行进入动画，再执行离开动画
        out-in    先执行离开动画，再执行进入动画

5. transition-group组件
        tag            指定标签
        move-class     给正在移动中的元素添加class
        name           动画名称

    指定进入离开class
        enter-active-class
        leave-active-class       

案例 1

    
    
    
    



    切换 

    
        
    

案例 2

    
    
    
    



    切换 

    
        
    
    

6. animate引入动画

    
    
    
    
    
    



    切换 

    
        
    
    
    

7. 动画模式

    
    
      
    
    



    
    
        

            {{item}} x