Vue学习笔记day03总结

目录

1.使用Vue-resource实现品牌的增删查功能

2.动画

2.1使用过度类名实现动画

2.2自定义v-前缀

2.3使用第三方animate.css类实现动画

2.4钩子函数实现半场动画

2.5使用transition-group元素实现列表动画

3. 组件

3.1组件的创建方式（推荐使用第3种）

3.1.1创建方式1

3.1.2创建方式2

3.1.3创建方式3（推荐）

3.2组件中的data

3.3组件切换

3.3.1切换方式1（通过flag标记变量进行切换）

3.3.2切换方式2（通过component 标签进行切换）--推荐

3.3.3切换动画

3.4 组件传值

3.4.1 父组件向子组件传值

3.4.2 父组件向子组件传方法

 

---

1.使用Vue-resource实现品牌的增删查功能

•  

   

2.动画

2.1使用过度类名实现动画

• 使用 transition 元素，把 需要被动画控制的元素，包裹起来（transition 元素，是 Vue 官方提供的）

  •     
        
        
        
        
          
    这是一个H3
        

     

• 放在标签中
  •  

2.2自定义v-前缀

•  将style标签中的“ v- ”修改为所要控制标签对应的name属性值
  •  

     

• Html

•     
      
        
  这是一个H6
      

2.3使用第三方animate.css类实现动画

•  引用
•  在transition标签上加上动画样式
• 在作用标签上加上class="animated" ，否则不起作用。
• 使用 :duration="毫秒值" 来统一设置 入场 和 离场 时候的动画时长
• 使用  :duration="{ enter: 200, leave: 400 }"  来分别设置 入场的时长 和 离场的时长

•     
        
  这是一个H3
       

   

2.4钩子函数实现半场动画

• el.style.transform = "translate(0, 0)" ：设置小球开始动画之前的，起始位置
• el.offsetWidth ：这句话，没有实际的作用，但是，如果不写，出不来动画效果；可以认为 el.offsetWidth 会强制动画刷新
• done() ：这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用

2.5使用transition-group元素实现列表动画

•  .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果
•   如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性
•  通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签
•  

    
  
    
  
      
  
        
          Id:
          
        
        
          Name:
          
        
        
      
      
        
        
        
        
        
          
  
            {{item.id}} --- {{item.name}}
          
        
      
    
  
    

   

3. 组件

3.1组件的创建方式（推荐使用第3种）

3.1.1创建方式1

•  使用 Vue.component('组件的名称', 创建出来的组件模板对象)
• 如果使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件的时候，需要把 大写的驼峰改为小写的字母，同时，两个单词之前，使用 - 链接；
   如果不使用驼峰,则直接拿名称来使用即可;
•  

      // 1.1 使用 Vue.extend 来创建全局的Vue组件
      // var com1 = Vue.extend({
      //   template: '
  这是使用 Vue.extend 创建的组件
  ' // 通过 template 属性，指定了组件要展示的HTML结构
      // })
      // 1.2 使用 Vue.component('组件的名称', 创建出来的组件模板对象)
      // Vue.component('myCom1', com1)
      // 如果使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件的时候，需要把 大写的驼峰改为小写的字母，同时，两个单词之前，使用 - 链接；
      // 如果不使用驼峰,则直接拿名称来使用即可;
      // Vue.component('mycom1', com1)
  
  //也可以写成：
      // Vue.component 第一个参数:组件的名称,将来在引用组件的时候,就是一个 标签形式 来引入 它的
      // 第二个参数: Vue.extend 创建的组件  ,其中 template 就是组件将来要展示的HTML内容
      Vue.component('mycom1', Vue.extend({
        template: '
  这是使用 Vue.extend 创建的组件
  '
      }))

   

3.1.2创建方式2

•  注意:不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素
•  

      // 注意:不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素
      Vue.component('mycom2', {
        template: '
  这是直接使用 Vue.component 创建出来的组件
  123
  '
      })
  

   

3.1.3创建方式3（推荐）

•  在外部定义的组件结构,这个方式,有代码的智能提示和高亮

3.2组件中的data

• 组件可以有自己的 data 数据
• 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是 组件中的 data 必须是一个方法
• 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;
• 组件中 的data 数据,使用方式,和实例中的 data 使用方式完全一样!!!

•     Vue.component('mycom1', {
        template: '
  这是全局组件 --- {{msg}}
  ',
        data: function () {
          return {
            msg: '这是组件的中data定义的数据'
          }
        }
      })

   

3.3组件切换

3.3.1切换方式1（通过flag标记变量进行切换）

  

    登录
    注册

    
    

  

  

 

3.3.2切换方式2（通过component 标签进行切换）--推荐

  

    登录
    注册

    
    
    

    
    

  

  

 

3.3.3切换动画

•  通过 mode 属性,设置组件切换时候的模式

•   
  
    
  
      登录
      注册
  
      
      
        
      
  
    
  
    

   

3.4 组件传值

3.4.1 父组件向子组件传值

•  父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用
•  注意： 子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上；
• 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的
• data 上的数据，都是可读可写的；props 中的数据，都是只读的，无法重新赋值

•