美文网首页
Vue总结2-计算属性,函数,过滤器,过渡动画

Vue总结2-计算属性,函数,过滤器,过渡动画

作者: 煤球快到碗里来 | 来源:发表于2020-04-05 20:53 被阅读0次

    1.计算属性

    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>22-Vue-计算属性</title>
          <script src="js/vue.js"></script>
      </head>
      <body>
      <!--
      1.插值语法特点
      可以在{{}}中编写合法的JavaScript表达式
      
      2.在插值语法中编写JavaScript表达式缺点
      2.1没有代码提示
      2.2语句过于复杂不利于我们维护
      
      3.如何解决?
      对于任何复杂逻辑,你都应当使用计算属性
      -->
      
      <!--这里就是MVVM中的View-->
      <div id="app">
          <p>{{name}}</p>
          <p>{{age + 1}}</p>
          <p>{{msg.split("").reverse().join("")}}</p>
          <!--
          注意点:
          虽然在定义计算属性的时候是通过一个函数返回的数据
          但是在使用计算属性的时候不能在计算属性名称后面加上()
          因为它是一个属性不是一个函数(方法)
          -->
          <p>{{msg2}}</p>
      </div>
      <script>
          // 这里就是MVVM中的View Model
          let vue = new Vue({
              el: '#app',
              // 这里就是MVVM中的Model
              data: {
                  name: "lnj",
                  age: 18,
                  msg: "abcdef"
              },
              // 专门用于存储监听事件回调函数
              methods: {},
              // 专门用于定义计算属性的
              computed: {
                  msg2: function () {
                      let res = "abcdef".split("").reverse().join("");
                      return res;
                  }
              }
          });
      </script>
      </body>
      </html>
      

    2.计算属性与函数的异同

    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>23-Vue-计算属性和函数</title>
          <script src="js/vue.js"></script>
      </head>
      <body>
      <!--
      1.计算属性和函数
      通过计算属性我们能拿到处理后的数据, 但是通过函数我们也能拿到处理后的数据
      那么计算属性和函数有什么区别呢?
      2.1函数"不会"将计算的结果缓存起来, 每一次访问都会重新求值
      2.2计算属性"会"将计算的结果缓存起来, 只要数据没有发生变化, 就不会重新求值
      
      2.计算属性应用场景
      计算属性:比较适合用于计算不会频繁发生变化的的数据
      -->
      
      <!--这里就是MVVM中的View-->
      <div id="app">
          <!--会输出三次-->
          <p>{{msg1()}}</p>
          <p>{{msg1()}}</p>
          <p>{{msg1()}}</p>
          <!--下面调用三次只输出一次-->
          <p>{{msg2}}</p>
          <p>{{msg2}}</p>
          <p>{{msg2}}</p>
      </div>
      <script>
          // 这里就是MVVM中的View Model
          let vue = new Vue({
              el: '#app',
              // 这里就是MVVM中的Model
              data: {
              },
              // 专门用于存储监听事件回调函数
              methods: {
                  /*
                  函数的特点: 每次调用都会执行
                  * */
                  msg1(){
                      console.log("msg1函数被执行了");
                      let res = "abcdef".split("").reverse().join("");
                      return res;
                  }
              },
              // 专门用于定义计算属性的
              computed: {
                  /*
                  计算属性的特点: 只要返回的结果没有发生变化, 那么计算属性就只会被执行一次
                  计算属性的应用场景: 由于计算属性会将返回的结果缓存起来
                                      所以如果返回的数据不经常发生变化,
                                      那么使用计算属性的性能会比使用函数的性能高
                  * */
                  msg2() {
                      console.log("msg2计算属性被执行了");
                      let res = "abcdef".split("").reverse().join("");
                      return res;
                  }
              }
          });
      </script>
      </body>
      </html>
      

    3.过滤器

    • 3.1 全局过滤器

    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>24-Vue-自定义全局过滤器</title>
          <script src="js/vue.js"></script>
      </head>
      <body>
      <!--
      1.什么是过滤器?
      过滤器和函数和计算属性一样都是用来处理数据的
      但是过滤器一般用于格式化插入的文本数据
      
      2.如何自定义全局过滤器
      Vue.filter("过滤器名称", 过滤器处理函数):
      
      3.如何使用全局过滤器
      {{msg | 过滤器名称}}
      :value="msg | 过滤器名称"
      
      4.过滤器注意点
      4.1只能在插值语法和v-bind中使用
      4.2过滤器可以连续使用
      -->
      <!--这里就是MVVM中的View-->
      <div id="app">
          <!--Vue会把name交给指定的过滤器处理之后, 再把处理之后的结果插入到指定的元素中-->
          <p>{{name | formartStr1 | formartStr2}}</p>
      </div>
      <script>
          /*
          如何自定义一个全局过滤器
          通过Vue.filter();
          filter方法接收两个参数
          第一个参数: 过滤器名称
          第二个参数: 处理数据的函数
          注意点: 默认情况下处理数据的函数接收一个参数, 就是当前要被处理的数据
          * */
          Vue.filter("formartStr1", function (value) {
              // console.log(value);
              value = value.replace(/学院/g, "大学");
              console.log(value);
              return value;
          });
          Vue.filter("formartStr2", function (value) {
              // console.log(value);
              value = value.replace(/大学/g, "幼儿园");
              console.log(value);
              return value;
          });
          // 这里就是MVVM中的View Model
          let vue = new Vue({
              el: '#app',
              // 这里就是MVVM中的Model
              data: {
                  name: "知播渔学院, 指趣学院, 前端学院, 区块链学院"
              },
              // 专门用于存储监听事件回调函数
              methods: {
              },
              // 专门用于定义计算属性的
              computed: {
              }
          });
      </script>
      </body>
      </html>
      
    • 3.2 局部过滤器

    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>24-Vue-自定义全局过滤器</title>
          <script src="js/vue.js"></script>
      </head>
      <body>
      <!--
      1.自定义全局过滤器的特点
      在任何一个Vue实例控制的区域中都可以使用
      
      2.自定义局部过滤器的特点
      只能在自定义的那个Vue实例中使用
      
      3.如何自定义一个局部指令
      给创建Vue实例时传递的对象添加
      filters: {
          // key: 过滤器名称
          // value: 过滤器处理函数
          'formartStr': function (value) {}
      }
      -->
      <!--这里就是MVVM中的View-->
      
      <div id="app2">
          <p>{{name | formartStr}}</p>
      </div>
      <script>
          // 这里就是MVVM中的View Model
          let vue2 = new Vue({
              el: '#app2',
              // 这里就是MVVM中的Model
              data: {
                  name: " 前端学院"
              },
              // 专门用于存储监听事件回调函数
              methods: {
              },
              // 专门用于定义计算属性的
              computed: {
              },
              // 专门用于定义局部过滤器的
              filters: {
                  "formartStr": function (value) {
                      // console.log(value);
                      value = value.replace(/学院/g, "大学");
                      // console.log(value);
                      return value;
                  }
              }
          });
      </script>
      </body>
      </html>
      
    • 3.3 一个小小的练习

    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>24-Vue-自定义全局过滤器</title>
          <script src="js/vue.js"></script>
      </head>
      <body>
      <!--
      需求: 利用过滤器对时间进行格式化
      -->
      <!--这里就是MVVM中的View-->
      <div id="app">
          <p>{{time | dateFormart("yyyy-MM-dd")}}</p>
      </div>
      <script>
          /*
          注意点: 在使用过滤器的时候, 可以在过滤器名称后面加上()
                  如果给过滤器的名称后面加上了(), 那么就可以给过滤器的函数传递参数
          * */
          Vue.filter("dateFormart", function (value, fmStr) {
              // console.log(fmStr);
              let date = new Date(value);
              let year = date.getFullYear();
              let month = date.getMonth() + 1 + "";
              let day = date.getDate() + "";
              let hour = date.getHours() + "";
              let minute = date.getMinutes() + "";
              let second = date.getSeconds() + "";
              if(fmStr && fmStr === "yyyy-MM-dd"){
                  //padStart用于补足头部
                  return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
              }
              return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")} ${hour.padStart(2, "0")}:${minute.padStart(2, "0")}:${second.padStart(2, "0")}`;
          });
          // 这里就是MVVM中的View Model
          let vue = new Vue({
              el: '#app',
              // 这里就是MVVM中的Model
              data: {
                  time: Date.now()
              },
              // 专门用于存储监听事件回调函数
              methods: {
              },
              // 专门用于定义计算属性的
              computed: {
              }
          });
      </script>
      </body>
      </html>
      

    4.过渡动画

    • 4.1 通过类名的方式添加

    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>28-Vue-过渡动画</title>
          <script src="js/vue.js"></script>
          <style>
              *{
                  margin: 0;
                  padding: 0;
              }
              .box{
                  width: 200px;
                  height: 200px;
                  background: red;
              }
              .v-enter{
                  opacity: 0;
              }
              .v-enter-to{
                  opacity: 1;
              }
              .v-enter-active{
                  transition: all 3s;
              }
              .v-leave{
                  opacity: 1;
              }
              .v-leave-to{
                  opacity: 0;
              }
              .v-leave-active{
                  transition: all 3s;
              }
          </style>
      </head>
      <body>
      <!--
      1.如何给Vue控制的元素添加过渡动画
      1.1将需要执行动画的元素放到transition组件中
      1.2当transition组件中的元素显示时会自动查找.v-enter/.v-enter-active/.v-enter-to类名
         当transition组件中的元素隐藏时会自动查找.v-leave/ .v-leave-active/.v-leave-to类名
         v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。
      
          v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,
                  在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
      
          v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移          除),在过渡/动画完成之后移除。
      
          v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
      
          v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在         过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
      
          v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave           被删除),在过渡/动画完成之后移除。
      1.3我们只需要在.v-enter和.v-leave-to中指定动画动画开始的状态
                   在.v-enter-active和.v-leave-active中指定动画执行的状态
                   即可完成过渡动画
      -->
      
      <!--这里就是MVVM中的View-->
      <div id="app">
          <button @click="toggle">我是按钮</button>
          <transition>
              <div class="box" v-show="isShow"></div>
          </transition>
      </div>
      <script>
          // 这里就是MVVM中的View Model
          let vue = new Vue({
              el: '#app',
              // 这里就是MVVM中的Model
              data: {
                  isShow: false
              },
              // 专门用于存储监听事件回调函数
              methods: {
                  toggle(){
                      this.isShow = !this.isShow;
                  }
              },
              // 专门用于定义计算属性的
              computed: {
              }
          });
      </script>
      </body>
      </html>
      
    • 4.2 transition的注意点

    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>29-Vue-过渡动画</title>
          <script src="js/vue.js"></script>
          <style>
              *{
                  margin: 0;
                  padding: 0;
              }
              .box{
                  width: 200px;
                  height: 200px;
                  background: red;
              }
              .one-enter{
                  opacity: 0;
              }
              .one-enter-to{
                  opacity: 1;
                  margin-left: 500px;
              }
              .one-enter-active{
                  transition: all 3s;
              }
              .two-enter{
                  opacity: 0;
              }
              .two-enter-to{
                  opacity: 1;
                  margin-top: 500px;
              }
              .two-enter-active{
                  transition: all 3s;
              }
          </style>
      </head>
      <body>
      <!--
      1.transition注意点:
      transition中只能放一个元素, 多个元素无效
      如果想给多个元素添加过渡动画, 那么就必须创建多个transition组件
      
      2.初始动画设置
      默认情况下第一次进入的时候没没有动画的
      如果想一进来就有动画, 我们可以通过给transition添加appear属性的方式
      告诉Vue第一次进入就需要显示动画
      
      3.如何给多个不同的元素指定不同的动画
      如果有多个不同的元素需要执行不同的过渡动画,那么我们可以通过给transition指定name的方式
      来指定"进入之前/进入之后/进入过程中, 离开之前/离开之后/离开过程中"对应的类名
      来实现不同的元素执行不同的过渡动画
      -->
      
      <!--这里就是MVVM中的View-->
      <div id="app">
          <button @click="toggle">我是按钮</button>
          <transition appear name="one">
              <div class="box" v-show="isShow"></div>
      <!--        <div class="box" v-show="isShow"></div>-->
          </transition>
          <transition appear name="two">
              <div class="box" v-show="isShow"></div>
          </transition>
      </div>
      <script>
          // 这里就是MVVM中的View Model
          let vue = new Vue({
              el: '#app',
              // 这里就是MVVM中的Model
              data: {
                  isShow: true
              },
              // 专门用于存储监听事件回调函数
              methods: {
                  toggle(){
                      this.isShow = !this.isShow;
                  }
              },
              // 专门用于定义计算属性的
              computed: {
              }
          });
      </script>
      </body>
      </html>
      
    • 4.3 钩子函数来添加动画

    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>30-Vue-过渡动画</title>
          <script src="js/vue.js"></script>
          <style>
              *{
                  margin: 0;
                  padding: 0;
              }
              .box{
                  width: 200px;
                  height: 200px;
                  background: red;
              }
              /*.v-enter{
                  opacity: 0;
              }
              .v-enter-to{
                  opacity: 1;
                  margin-left: 500px;
              }
              .v-enter-active{
                  transition: all 3s;
              }*/
          </style>
      </head>
      <body>
      <!--
      1.当前过渡存在的问题
      通过transition+类名的方式确实能够实现过渡效果
      但是实现的过渡效果并不能保存动画之后的状态
      因为Vue内部的实现是在过程中动态绑定类名, 过程完成之后删除类名
      正式因为删除了类名, 所以不能保存最终的效果
      
      2.在Vue中如何保存过渡最终的效果
      通过Vue提供的JS钩子来实现过渡动画
      v-on:before-enter="beforeEnter"  进入动画之前
      v-on:enter="enter"  进入动画执行过程中
      v-on:after-enter="afterEnter"  进入动画完成之后
      v-on:enter-cancelled="enterCancelled"  进入动画被取消
      
      v-on:before-leave="beforeLeave" 离开动画之前
      v-on:leave="leave"  离开动画执行过程中
      v-on:after-leave="afterLeave" 离开动画完成之后
      v-on:leave-cancelled="leaveCancelled" 离开动画被取消
      
      3.JS钩子实现过渡注意点
      3.1在动画过程中必须写上el.offsetWidth或者el.offsetHeight
      3.2在enter和leave方法中必须调用done方法, 否则after-enter和after-leave不会执行
      3.3需要需要添加初始动画, 那么需要把done方法包裹到setTimeout方法中调用
      -->
      
      <!--这里就是MVVM中的View-->
      <div id="app">
          <button @click="toggle">我是按钮</button>
          <!--
          注意点: 虽然我们是通过JS钩子函数来实现过渡动画
                  但是默认Vue还是回去查找类名, 所以为了不让Vue去查找类名
                  可以给transition添加v-bind:css="false"
          -->
          <transition appear
                      v-bind:css="false"
                      v-on:before-enter="beforeEnter"
                      v-on:enter="enter"
                      v-on:after-enter="afterEnter">
              <div class="box" v-show="isShow"></div>
          </transition>
      </div>
      <script>
          // 这里就是MVVM中的View Model
          let vue = new Vue({
              el: '#app',
              // 这里就是MVVM中的Model
              data: {
                  isShow: true
              },
              // 专门用于存储监听事件回调函数
              methods: {
                  toggle(){
                      this.isShow = !this.isShow;
                  },
                  beforeEnter(el){
                      // 进入动画开始之前
                      console.log("beforeEnter");
                      el.style.opacity = "0";
                  },
                  enter(el, done){
                      // 进入动画执行过程中
                      console.log("enter");
                      /*
                      注意点: 如果是通过JS钩子来实现过渡动画
                              那么必须在动画执行过程中的回调函数中写上
                              el.offsetWidth / el.offsetHeight
                      * */
                      el.offsetWidth;
                      el.style.transition = "all 3s";
                      /*
                      注意点: 动画执行完毕之后一定要调用done回调函数
                              否则后续的afterEnter钩子函数不会被执行
                      */
                       //done();
                      /*
                      注意点: 如果想让元素一进来就有动画, 那么最好延迟一下再调用done方法
                      */
                      setTimeout(function () {
                          done();
                      }, 0);
                  },
                  afterEnter(el){
                      // 进入动画执行完毕之后
                      console.log("afterEnter");
                      el.style.opacity = "1";
                      el.style.marginLeft = "500px";
                  }
              },
              // 专门用于定义计算属性的
              computed: {
              }
          });
      </script>
      </body>
      </html>
      
    • 4.4 配合第三方库来实现动画

    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>31-Vue-过渡动画</title>
          <script src="js/vue.js"></script>
          <style>
              *{
                  margin: 0;
                  padding: 0;
              }
              .box{
                  width: 200px;
                  height: 200px;
                  background: red;
              }
          </style>
      </head>
      <body>
      <!--
      1.配合Velocity实现过渡动画
      在Vue中我们除了可以自己实现过渡动画以外, 还可以结合第三方框架实现过渡动画
      
      1.1导入Velocity库
      1.2在动画执行过程钩子函数中编写Velocity动画
      -->
      
      <!--这里就是MVVM中的View-->
      <div id="app">
          <button @click="toggle">我是按钮</button>
          <transition appear
                      v-bind:css="false"
                      v-on:before-enter="beforeEnter"
                      v-on:enter="enter"
                      v-on:after-enter="afterEnter">
              <div class="box" v-show="isShow"></div>
          </transition>
      </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
      <script>
          // 这里就是MVVM中的View Model
          let vue = new Vue({
              el: '#app',
              // 这里就是MVVM中的Model
              data: {
                  isShow: true
              },
              // 专门用于存储监听事件回调函数
              methods: {
                  toggle(){
                      this.isShow = !this.isShow;
                  },
                  beforeEnter(el){
                  },
                  enter(el, done){
                      Velocity(el, {opacity: 1, marginLeft: "500px"}, 3000);
                      done();
                  },
                  afterEnter(el){
      
                  }
              },
              // 专门用于定义计算属性的
              computed: {
              }
          });
      </script>
      </body>
      </html>
      
    • 4.5 自定义动画的类名

    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>32-Vue-过渡动画</title>
          <script src="js/vue.js"></script>
          <style>
              *{
                  margin: 0;
                  padding: 0;
              }
              .box{
                  width: 200px;
                  height: 200px;
                  background: red;
              }
              .a{
                  opacity: 0;
              }
              .b{
                  opacity: 1;
                  margin-left: 500px;
              }
              .c{
                  transition: all 3s;
              }
          </style>
      </head>
      <body>
      <!--
      1.自定义类名动画
      在Vue中除了可以使用 默认类名(v-xxx)来指定过渡动画
             除了可以使用 自定义类名前缀(yyy-xx)来指定过渡动画(transition name="yyy")
             除了可以使用 JS钩子函数来指定过渡动画以外
      还可以使用自定义类名的方式来指定过渡动画
      
      enter-class  // 进入动画开始之前
      enter-active-class // 进入动画执行过程中
      enter-to-class // 进入动画执行完毕之后
      leave-class  // 离开动画开始之前
      leave-active-class // 离开动画执行过程中
      leave-to-class // 离开动画执行完毕之后
      -->
      
      <!--这里就是MVVM中的View-->
      <div id="app">
          <button @click="toggle">我是按钮</button>
          <transition appear
                      enter-class="a"
                      enter-active-class="c"
                      enter-to-class="b">
              <div class="box" v-show="isShow"></div>
          </transition>
      </div>
      <script>
          // 这里就是MVVM中的View Model
          let vue = new Vue({
              el: '#app',
              // 这里就是MVVM中的Model
              data: {
                  isShow: true
              },
              // 专门用于存储监听事件回调函数
              methods: {
                  toggle(){
                      this.isShow = !this.isShow;
                  }
              },
              // 专门用于定义计算属性的
              computed: {
              }
          });
      </script>
      </body>
      </html>
      
    • 4.6 自定义动画类名结合Animate.css

    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>33-Vue-过渡动画</title>
          <script src="js/vue.js"></script>
          <style>
              *{
                  margin: 0;
                  padding: 0;
              }
              .box{
                  width: 200px;
                  height: 200px;
                  background: red;
              }
          </style>
          <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
      </head>
      <body>
      <!--
      1.配合Animate.css实现过渡动画
      1.1导入Animate.css库
      1.2在执行过程中的属性上绑定需要的类名
      -->
      
      <!--这里就是MVVM中的View-->
      <div id="app">
          <button @click="toggle">我是按钮</button>
          <transition appear
                      enter-class=""
                      enter-active-class="animated bounceInRight"
                      enter-to-class="">
              <div class="box" v-show="isShow"></div>
          </transition>
      </div>
      <script>
          // 这里就是MVVM中的View Model
          let vue = new Vue({
              el: '#app',
              // 这里就是MVVM中的Model
              data: {
                  isShow: true
              },
              // 专门用于存储监听事件回调函数
              methods: {
                  toggle(){
                      this.isShow = !this.isShow;
                  }
              },
              // 专门用于定义计算属性的
              computed: {
              }
          });
      </script>
      </body>
      </html>
      
    • 4.7 v-for中的key

    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>34-Vue-v-for-key</title>
          <script src="js/vue.js"></script>
      </head>
      <body>
      <!--
      1.v-for注意点
      1.1v-for为了提升性能, 在更新已渲染过的元素列表时,会采用“就地复用”策略。
      也正是因为这个策略, 在某些时刻会导致我们的数据混乱
      例如: 在列表前面新增了内容
      1.2为了解决这个问题, 我们可以在渲染列表的时候给每一个元素加上一个独一无二的key
      v-for在更新已经渲染过的元素列表时, 会先判断key是否相同, 如果相同则复用, 如果不同则重新创建
      
      2.key属性注意点
      不能使用index的作为key,因为当列表的内容新增或者删除时index都会发生变化
      -->
      <!--这里就是MVVM中的View-->
      <div id="app">
          <form>
              <input type="text" v-model="name">
              <input type="submit" value="添加" @click.prevent="add">
          </form>
          <ul>
             <li v-for="(person,index) in persons" :key="person.id">
                  <input type="checkbox">
                  <span>{{index}} --- {{person.name}}</span>
              </li>
          </ul>
      </div>
      <script>
          // 这里就是MVVM中的View Model
          let vue = new Vue({
              el: '#app',
              // 这里就是MVVM中的Model
              data: {
                  persons: [
                      {name: "zs", id: 1},
                      {name: "ls", id: 2},
                      {name: "ww", id: 3}
                      ],
                  name: ""
              },
              // 专门用于存储监听事件回调函数
              methods: {
                  add(){
                      let lastPerson = this.persons[this.persons.length - 1];
                      let newPerson = {name: this.name, id: lastPerson.id + 1};
                      // this.persons.push(newPerson);
                      this.persons.unshift(newPerson);
                      this.name = "";
                  }
              },
              // 专门用于定义计算属性的
              computed: {
              }
          });
      </script>
      </body>
      </html>
      
    • 4.8 同时给多个元素添加动画 transition-group

    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>35-Vue-过渡动画</title>
          <script src="js/vue.js"></script>
          <style>
              *{
                  margin: 0;
                  padding: 0;
              }
              .v-enter{
                  opacity: 0;
              }
              .v-enter-to{
                  opacity: 1;
              }
              .v-enter-active{
                  transition: all 3s;
              }
              .v-leave{
                  opacity: 1;
              }
              .v-leave-to{
                  opacity: 0;
              }
              .v-leave-active{
                  transition: all 3s;
              }
          </style>
      </head>
      <body>
      <!--
      1.如何同时给多个元素添加过渡动画
      通过transition可以给单个元素添加过渡动画
      如果想给多个元素添加过渡动画, 那么就必须通过transition-group来添加
      
      transition-group和transition的用法一致, 只是一个是给单个元素添加动画, 一个是给多个元素添加动画而已
      -->
      <!--
      1.transition-group注意点:
      默认情况下transition-group会将动画的元素放到span标签中
      我们可以通过tag属性来指定将动画元素放到什么标签中
      
      2.transition-group动画混乱问题
      一般情况下组动画出现动画混乱都是因为v-for就地复用导致的
      我们只需要保证所有数据key永远是唯一的即可
      -->
      <!--这里就是MVVM中的View-->
      <div id="app">
          <form>
              <input type="text" v-model="name">
              <input type="submit" value="添加" @click.prevent="add">
          </form>
          <ul>
              <transition-group appear>
              <li v-for="(person,index) in persons" :key="person.id" @click="del(index)">
                  <input type="checkbox">
                  <span>{{index}} --- {{person.name}}</span>
              </li>
              </transition-group>
          </ul>
      </div>
      <script>
          // 这里就是MVVM中的View Model
          let vue = new Vue({
              el: '#app',
              // 这里就是MVVM中的Model
              data: {
                  persons: [
                      {name: "zs", id: 1},
                      {name: "ls", id: 2},
                      {name: "ww", id: 3}
                      ],
                  name: ""
              },
              // 专门用于存储监听事件回调函数
              methods: {
                  add(){
                      let lastPerson = this.persons[this.persons.length - 1];
                      let newPerson = {name: this.name, id: lastPerson.id + 1};
                      // this.persons.push(newPerson);
                      this.persons.unshift(newPerson);
                      this.name = "";
                  },
                  del(index){
                      this.persons.splice(index, 1);
                  }
              },
              // 专门用于定义计算属性的
              computed: {
              }
          });
      </script>
      </body>
      </html>
      

    相关文章

      网友评论

          本文标题:Vue总结2-计算属性,函数,过滤器,过渡动画

          本文链接:https://www.haomeiwen.com/subject/vtvpphtx.html