Vue事件对象&&动效Transtion组件的理解

• 事件对象 在函数只有一个参数的，可以不写$evnet

<button @click="handleClick('阿元', $event)">按钮</button>

    <script>

        let app = new Vue({
            el: "#app",
            data: {
                name: "hello word",
                msg: "<em>jk<em>",
                active1: 'active1',
                flag: true,

            },
            methods: {
                handleClick(name, e){
                    console.log(name,e);
                }
            }
        })
    <script>

• 事件修饰符

• .stop

• .prevent

• .capture

• .self

• .once

• .passive

  <!-- 阻止事件冒泡 -->
  <a @click.stop="handleClick"></a>
  <!-- 阻止 a标签默认事件 -->
  <a href="http://www.baidu.com" @click.prevent="handleClick">百度</a>
  <!-- 修饰符可以串联 -->
  <a v-on:click.stop.prevent="doThat"></a>
  
  <!-- 只有修饰符 -->
  <form v-on:submit.prevent></form>
  
  <!-- 添加事件监听器时使用事件捕获模式 -->
  <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
  <div v-on:click.capture="doThis">...</div>
  
  <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
  <!-- 即事件不是从内部元素触发的 -->
  <div v-on:click.self="doThat">...</div>
  
  <!-- 点击事件将只会触发一次 -->
  <a v-on:click.once="doThis"></a>
  

• 键盘对象

  只有 ‘key’ 是 ‘enter’ 时调用 ‘vm.submit’
  @:keyup.enter="submit"
  

• 双向数据绑定 v-model

• input, select ,

动效

流程

1.利用transition组件包裹 HTML

2.自定义类名通过name="xxx"

3.写css 样式

• 通过transition组件，在自定义元素的进场(Enter)，退场(Leave)，以及过程过渡的样式，

  • v-enter-from 元素在进场之前的样式
  • v-enter-active 元素在进场过程中的样式
  • v-enter-to 元素在进场结束时的样式
  • 元素退场
  • v-leave-from 元素在退场之前的样式
  • v-leave-active 愿随在退场过程中的样式
  • v-leave-to 元素在退场结束时的样式

• 自定义类名

  因为在一个项目中，可能有多个需要过渡的元素，还互相不关联，这个时候，如果都用默认的类名，会发生样式的覆盖，因此要进行 类名自定义

  只要给transiton组件添加一个属性 name="自定义的前缀"

  条件与动态切换

  和基本使用是一样的，
  注意: 如果 多个元素进行动态切换，标签名还一样，就要给 每个标签添加一个属性 key 为了让Vue知道 这是两个元素，才能发生过渡效果

  如果不写key vue在对比的时候 看到标签名一样 以为是一个元素 不会发生元素的更新 因此只对

钩子函数

<transition
  @:before-enter="beforeEnter"
  @:enter="enter"
  @:after-enter="afterEnter"
  @:enter-cancelled="enterCancelled"
  
  @:before-leave="beforeLeave"
  @:leave="leave"
  @:after-leave="afterLeave"
  @:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

vue

// ...
methods: {
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

列表过渡

demo

<div id="list-demo" class="demo">
  <button v-on:click="add">Add</button>
  <button v-on:click="remove">Remove</button>
  <!--- tag标签 p-->
  <!--- 自定义类名 list-->
  <transition-group name="list" tag="p">
    <span v-for="item in items" :key="item" class="list-item">
      {{ item }}
    </span>
  </transition-group>
</div>


new Vue({
  el: '#list-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9],
    nextNum: 10
  },
  methods: {
    randomIndex: function () {
      return Math.floor(Math.random() * this.items.length)
    },
    add: function () {
      this.items.splice(this.randomIndex(), 0, this.nextNum++)
    },
    remove: function () {
      this.items.splice(this.randomIndex(), 1)
    },
  }
})

==========
css 
==========

.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}

还可以，改变定位 v-mode class， 像之类名一样，可以通过name attribute来自定义前缀，

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>

<div id="flip-list-demo" class="demo">
  <button v-on:click="shuffle">Shuffle</button>
  <transition-group name="flip-list" tag="ul">
    <li v-for="item in items" v-bind:key="item">
      {{ item }}
    </li>
  </transition-group>
</div>


new Vue({
  el: '#flip-list-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9]
  },
  methods: {
    shuffle: function () {
      this.items = _.shuffle(this.items)
    }
  }
})

==========
css 
==========
.flip-list-move {
  transition: transform 1s;
}

组件

props

• inheritAttrs

  // 禁用 继承
  inheritAttrs: false,