vue事件函数

事件对象在函数只有一个参数的，可以不写$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>

键盘对象

1 2	只有 ‘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
1
2
// 禁用继承
inheritAttrs: false,

动效

流程

自定义类名

条件与动态切换

钩子函数

列表过渡

组件

props