zoukankan html css js c++ java

Vue watch监听器 computed计算属性 filter过滤器过渡动画

1-watch侦听器(监听器)

本质: 一个特殊的函数
作用: 监视data中任意一个数据的改变, 从而实现一些特殊的业务处理
注意:
- 监视器函数的名字必须和要被监视的数据名称保持一致
- 无需手动调用

语法

const vm = new Vue({
    el: '#app',
    data: {
        msg:'hello',
        user:{
            name:'zs',
            age:20,
            sex:'男'
        }
    },
    methods: {
        updateMsg(){
            this.msg='你好';
        },
        updateUser(){
            this.user.name='张三';
            // this.user={name:'张三'};
        }
    },
    // watch监听器
    watch:{
        // 监视器函数的名字必须和监视的数据名保持一致
        msg(newVal,oldVal){
            console.log(newVal,oldVal);
        },
        // 更新对象中某一个属性的时候, 普通的监视器监听不到属性更新, 必须使用深度监听
        // 深度监听
        user:{
            // 监听方法
            handler(newVal,oldVal){
                console.log(newVal,oldVal);
            },
            // true表示要开启深度监听
            deep:true
        }
    }
});

2-computed计算属性

本质: 一种特殊的函数(当做数据调用)
作用: 可以根据已经存在的数据, 计算出来一个不存在的数据
注意:
- computed计算属性函数必须有返回值
- 计算属性函数名不能和data中的数据同名
- 调用的时候, 当做变量直接调用, 无需带()
特点: 计算属性内部会有一些缓存机制

语法

<!--调用计算属性--> 
<h1>{{fullName}}</h1>

 const vm = new Vue({
     el: '#app',
     data: {
         firstName: '',
         lastName: '',
     },
     methods: {
         // 根据fistname和lastname计算一个fullname
         fname(){
             console.log('普通方法');
             return this.firstName+this.lastName;   
         }
     },
     // computed计算属性
     computed:{
         // 定义计算属性
         fullName:function(){
             console.log('计算属性方法');
             return this.firstName+this.lastName;
         }
     }
 });

3-filter过滤器

本质: 一种特殊的方法
作用: 对数据进行预处理
注意
- 过滤器处理函数必须至少有一个参数, 第一个参数永远是待处理的数据, 由系统自动注入
- 过滤器处理函数必须有返回值
- 过滤器只能在插值表达式和v-bind指令中使用(其他指令中使用会报错)
调用格式: 数据输出的位置
```
{{msg | fn}}
```

3.1-全局过滤器

特点: 在所有的vue实例中都可以调用

语法格式

Vue.filter('过滤器的名称',functoin(){  //进行数据预处理的函数  });

调用全局过滤器

<div id="app">
   <!-- 调用过滤器 -->
   <h1>{{msg | append}}</h1>
   <hr>
   <h1>{{msg | append1('***')}}</h1>
   <hr>
   <!-- 调用多个过滤器 -->
   <h1>{{msg | append | append1('####')}}</h1>
</div>

定义全局过滤器

// params:系统自动注入的, input代表即将被处理的数据; params额外参数
Vue.filter('append', function (input) {
// 必须有返回值
  return input+'~~~';
});
Vue.filter('append1', function (input,params) {
// 必须有返回值
  return input + params;
});

  ### 3.2-私有过滤器

- 特点: 只能在当前vue实例中调用

- 书写位置

  ```js
  new Vue({
      el:'#app',
      // 私有过滤器
      filters:{
          // input:系统自动注入, 代表待处理的数据
          fn(input){
          	// 必须有返回值 
          	return ''
      	}
      }
  });

调用私有过滤器

<div id="app">
      <!-- 调用私有过滤器 -->
      <h1>{{msg | append}}</h1>
      <hr>
      <h1>{{msg | append('***')}}</h1>
      <hr>
      <h1>{{createTime | dateFmt}}</h1>
      <h1>{{createTime | dateFmt('/')}}</h1>
      <h1>{{createTime | dateFmt('.')}}</h1>
      <h1>{{createTime | dateFmt('~')}}</h1>
</div>

定义私有过滤器

const vm = new Vue({
        el: '#app',
        data: {
            msg: 'hello',
            createTime:Date.now()
        },
        // 私有过滤器
        filters:{
            append(input,params='~~~'){
                return `${input}${params}`
            },
            // 13位毫秒值=>yyyy-mm-dd HH:mm:ss
            dateFmt(input,divider='-'){
                // input: 时间戳: 13毫秒值
                // 创建对应的日期对象
                const date=new Date(input);
                // 获取年份
                const y=date.getFullYear();
                const m=date.getMonth()+1;
                const d=date.getDate();
                const h=date.getHours();
                const mm=date.getMinutes();
                const s=date.getSeconds();
                return `${y}${divider}${m}${divider}${d} ${h}:${mm}:${s}`;

            }
        }
    });

4-单元素过渡动画

4.1-自定义过渡动画类名

4.1.1-实现步骤

使用<transition></transition>标签包裹目标元素

 <!-- 第一步: -->
<transition>
    <h1 v-show="isShow">{{msg}}</h1>
</transition>

自定义过渡动画类名的属性

/* 第二步: 定义过渡动画类名对应的属性 */
/* 进入阶段,离开阶段 */
/* 进入前,离开后 */
.v-enter,.v-leave-to{
    left:-400px;
}
/* 进入中,离开中 */
.v-enter-active,.v-leave-active{
    position: relative;
    transition: left 1s;
}
/* 进入后,离开前 */
.v-enter-to,.v-leave{
    left:0;
}

4.1.2-自定义过渡类名前缀

appear: 控制元素以过渡动画的效果入场

第一步

 /* 进入前,离开后 */
.slide-enter,.slide-leave-to{
    left:-400px;
}
/* 进入中,离开中 */
.slide-enter-active,.slide-leave-active{
    position: relative;
    transition: left 1s;
}
/* 进入后,离开前 */
.slide-enter-to,.slide-leave{
    left:0;
}

第二步

 <!-- appear: 以过渡动画的方式入场 -->
<transition appear name="slide">
    <h1 v-show="isShow">{{msg}}</h1>
</transition>

4.2-使用第三方动画类库

下载并引入animate.css

<!-- 第一步: 引入动画类库 -->
<link rel="stylesheet" href="./libs/animate.css@3.5.1.css">

通过属性引用动画类名

enter-active-class: 指定进入过程中的动画类名
leave-active-class: 指定离开过程中的动画类名

<div id="app">
    <!-- 第二步: 通过属性引用动画类名; animated是基础动画类名, tada是决定动画方式的类名 -->
    <transition appear enter-active-class="animated tada" leave-active-class="animated bounceOutRight">
        <h1 v-show="isShow">{{msg}}</h1>
    </transition>
    <hr>
    <transition appear enter-active-class="animated swing" leave-active-class="animated wobble">
        <h1 v-show="isShow">{{msg}}</h1>
    </transition>
    <hr>
    <button @click="toggle">切换显示状态</button>
</div>

5-列表过渡动画

5.1-自定义动画类名

使用transition-group标签包裹目标元素(列表元素)

tag: 指定最终渲染的标签名称

 <!-- tag: 指定transition-group解析时候的标签 -->
<transition-group tag="ul" name="slide" appear>
    <li v-for="item in list" :key="item.id">{{item.id}}-{{item.name}}</li>
</transition-group>

自定义过渡动画类名

 .slide-enter,.slide-leave-to{
     top:-400px;
}
.slide-enter-active,.slide-leave-active{
    position: relative;
    transition: all 1s;
}
.slide-enter-to,.slide-leave{
    top:0;
}

5.2-使用第三方动画类库

下载并引入animate动画类库

<!-- 1-引入animate.css -->
<link rel="stylesheet" href="./libs/animate.css@3.5.1.css">