11-vue_day04

day04内容

8. 计算属性与监听器

 1) 计算属性
    一般指的是对data中的原有数据进行计算之后返回的结果，这个计算属性可以当做属性来使用。当原有数据发生改变的时候，计算属性会立即执行重新计算。当原值不发生改变，当调用多次计算属性，计算属性函数只会执行一次。但是如果使用方法或者过滤器则不同。

    查询到所有的文章，在显示的时候将发布时间（时间戳）格式化之后再输出？
    new Vue({
      data:{
        message:'hello world'
      },
      computed:{
        reverseMessage:function(){
          return this.message.split('').reverse().join('');
        }
      }
    })

    {{reverseMessage}}
    {{reverseMessage}}
    {{reverseMessage}}
  2) 监听器
    new Vue({
      watch:{
        message: function(now,old){
        },
        msg : {
          handler:function(now,old){},
          deep:true   // 一般情况下用于监听引用数据类型中值的变化
        }
      }
    })

    注意：监听属性如果包含特殊字符，请使用引号引起来，比如，我们要监听form中的username
    watch:{
      "form.username":function(){
      }
    }

9. 过滤器

  1) 局部定义 - 仅对于当前组件有效
  new Vue({
    filters:{
      dateFmt(val){
        // 对val处理之后进行返回
        return val;
      }
    }
  })
  2) 全局定义 - 针对于所有的组件都有效
  Vue.filter('dateFmt',function(val){
    // 对val处理之后进行返回
    return val;
  })

  引用
  {{ new Date().getTime() | dateFmt }}
  v-bind:time=" new Date().getTime() | dateFmt "

10.组件基础

  类似于bootstrap，但是和bs完全不再一个级别，vue组件是封装了js,html,css的独立单元，我们可以使用虚拟标签直接调用

  目前比较成熟的组件库：
    pc:
      elementui   饿了么
      antdesign   蚂蚁金服
    phone(小程序):
      mintui
      vantui
      ....
  
  语法：
    1. 组件定义（比较麻烦-了解）
      一个组件就是一个vue的最小单元，v m vm
      1）全局注册
        Vue.component('briup-alert',{
          与Vue构造函数参数类似
          template:`html`,
          data(){       // 保证每一个组件都有一份独立的data
            return {

            }
          },
          props:['title']    // 期望从父组件中接收到的变量
        })
      2）局部注册
    2. 组件调用（精通）
      <briup-alert title="one"></briup-alert>