學習Vue.js-Day3

時間 2019-11-07

標籤學習 vue.js vue day3 day 欄目 JavaScript 简体版

原文原文鏈接

今天學習內容

點擊按鈕，顯示文字（不使用動畫）
使用過渡類名實現動畫
修改V- 前綴
使用第三方類實現動畫
使用鉤子函數模擬小球半場動畫
列表動畫
建立組件的方式
組件中的data和methods
組件-why components data must be a function
組件切換方式

準備工做

在開發過程當中導入以上文件css

不使用動畫

經過 @click 的方式綁定事件 flag
實現點擊按鈕，顯示文字的功能vue

<body>
  <div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- 需求： 點擊按鈕，讓 h3 顯示，再點擊，讓 h3 隱藏 -->
    <h3 v-if="flag">這是一個H3</h3>
  </div>

  <script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {}
    });
  </script>
</body>

使用過渡類名實現動畫

<style>
    /* v-enter 【這是一個時間點】 是進入以前，元素的起始狀態，此時尚未開始進入 */
    /* v-leave-to 【這是一個時間點】 是動畫離開以後，離開的終止狀態，此時，元素 動畫已經結束了 */
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(150px);
    }

    /* v-enter-active 【入場動畫的時間段】 */
    /* v-leave-active 【離場動畫的時間段】 */
    .v-enter-active,
    .v-leave-active{
      transition: all 0.8s ease;
    }
  </style>
</head>

<body>
  <div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- 需求： 點擊按鈕，讓 h3 顯示，再點擊，讓 h3 隱藏 -->
    <!-- 1. 使用 transition 元素，把 須要被動畫控制的元素，包裹起來 -->
    <!-- transition 元素，是 Vue 官方提供的 -->
    <transition>
      <h3 v-if="flag">這是一個H3</h3>
    </transition>
  </div>

修改 `V-` 前綴

修改官方提供的 v-enter 等前綴，實現局部控制動畫的效果git

<style>
    .my-enter,
    .my-leave-to {
      opacity: 0;
      transform: translateY(70px);
    }

    .my-enter-active,
    .my-leave-active{
      transition: all 0.8s ease;
    }
  </style>

<transition name="my"> 中的`my`對應上面的 `.my-enter`

<input type="button" value="toggle2" @click="flag2=!flag2">
    <transition name="my">
      <h6 v-if="flag2">這是一個H6</h6>
    </transition>

使用animate.css等第三方類實現動畫

要注意的是經過在<transition> 標籤下引用 enter-active-class="bounceIn
並註明是animate 中的bounceIngithub

<body>
  <div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- 需求： 點擊按鈕，讓 h3 顯示，再點擊，讓 h3 隱藏 -->
    <!-- <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
      <h3 v-if="flag">這是一個H3</h3>
    </transition> -->

    <!-- 使用 :duration="毫秒值" 來統一設置 入場 和 離場 時候的動畫時長 -->
    <!-- <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200">
      <h3 v-if="flag" class="animated">這是一個H3</h3>
    </transition> -->

    <!-- 使用  :duration="{ enter: 200, leave: 400 }"  來分別設置 入場的時長 和 離場的時長  -->
    <transition 
    enter-active-class="bounceIn" 
    leave-active-class="bounceOut" 
    :duration="{ enter: 200, leave: 400 }">
      <h3 v-if="flag" class="animated">這是一個H3</h3>
    </transition> 
  </div>

  <script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {}
    });
  </script>

使用鉤子函數模擬小球半場動畫

應用場景：在手機購物中，點擊購物車按鈕時，有小球進入到購物車的過程app

先寫一個小球樣式

<style>
        .ball {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: red;
        }
    </style>

定義一個button 以及小球出現的位置

<input type="button" value="加入到購物車" @click='flag=!flag'>
        <transition @before-enter='beforeEnter' @enter='enter' @after-enter='afterEnter'>
            <div class="ball" v-show="flag">
        </transition>

小球的出現時間，位置；以及小球到到底部後消失的效果。

<script>

    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {
        // 注意： 動畫鉤子函數的第一個參數：el，表示 要執行動畫的那個DOM元素，是個原生的 JS DOM對象
        // 你們能夠認爲 ， el 是經過 document.getElementById('') 方式獲取到的原生JS DOM對象
        beforeEnter(el){
          // beforeEnter 表示動畫入場以前，此時，動畫還沒有開始，能夠 在 beforeEnter 中，設置元素開始動畫以前的起始樣式
          // 設置小球開始動畫以前的，起始位置
          el.style.transform = "translate(0, 0)"
        },
        enter(el, done){
          // 這句話，沒有實際的做用，可是，若是不寫，出不來動畫效果；
          // 能夠認爲 el.offsetWidth 會強制動畫刷新
          el.offsetWidth
          // enter 表示動畫 開始以後的樣式，這裏，能夠設置小球完成動畫以後的，結束狀態
          el.style.transform = "translate(150px, 450px)"
          el.style.transition = 'all 1s ease'

          // 這裏的 done， 起始就是 afterEnter 這個函數，也就是說：done 是 afterEnter 函數的引用
          done()
        },
        afterEnter(el){
          // 動畫完成以後，會調用 afterEnter
          // console.log('ok')
          this.flag = !this.flag
        }
      }
    });
  </script>
</body>

列表動畫

場景：添加id，name給一組列表，當點擊列表時，列表刪除
重點：添加/刪除時列表數據的更新，以及出進場動畫ide

<style>
        li {
            border: 1px dashed #999;
            margin: 5px;
            line-height: 35px;
            padding-left: 5px;
            font-size: 12px;
            width: 100%;
        }

        li:hover {
            background-color: hotpink;
            transition: all 0.8s ease;
        }
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateY(80px);
        }
        .v-enter-active,
        .v-leave-active {
            transition: all 0.6s ease;
        }

        /* 下面的 .v-move 和 .v-leave-active 配合使用，可以實現列表後續的元素，漸漸地漂上來的效果 */
        .v-move {
            transition: all 0.6s ease;
        }
        .v-leave-active {
            position: absolute;
        }
    </style>

由於要循環列表中的數據，在選用v-for時只能用transition-group標籤包含函數

<div id="app">

    <div>
      <label>
        Id:
        <input type="text" v-model="id">
      </label>

      <label>
        Name:
        <input type="text" v-model="name">
      </label>

      <input type="button" value="添加" @click="add">
    </div>

    <!-- <ul> -->
      <!-- 在實現列表過渡的時候，若是須要過渡的元素，是經過 v-for 循環渲染出來的，不能使用 transition 包裹，須要使用 transitionGroup -->
      <!-- 若是要爲 v-for 循環建立的元素設置動畫，必須爲每個 元素 設置 :key 屬性 -->
      <!-- 給 ransition-group 添加 appear 屬性，實現頁面剛展現出來時候，入場時候的效果 -->
      <!-- 經過 爲 transition-group 元素，設置 tag 屬性，指定 transition-group 渲染爲指定的元素，若是不指定 tag 屬性，默認，渲染爲 span 標籤 -->
      <transition-group appear tag="ul">
        <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
          {{item.id}} --- {{item.name}}
        </li>
      </transition-group>
    <!-- </ul> -->

  </div>

在實例VM中編寫添加事件add,以及刪除事件del學習

<script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        list: [
          { id: 1, name: '趙高' },
          { id: 2, name: '秦檜' },
          { id: 3, name: '嚴嵩' },
          { id: 4, name: '魏忠賢' }
        ]
      },
      methods: {
        add() {
          this.list.push({ id: this.id, name: this.name })
          this.id = this.name = ''
        },
        del(i) {
          this.list.splice(i, 1)
        }
      }
    });
  </script>