Vue.js的事件绑定 - 内置事件绑定、自定义事件绑定

php中世界最好的语言
Lepaskan: 2018-03-13 14:07:45
asal
2928 orang telah melayarinya

这次给大家带来Vue.js的事件绑定 - 内置事件绑定、自定义事件绑定,使用Vue.js的事件绑定 - 内置事件绑定、自定义事件绑定的注意事项有哪些,下面就是实战案例,一起来看一下。

<button v-on:click="toggle">切换</button>
Salin selepas log masuk

可以简写为

<button @click="toggle">切换</button>
Salin selepas log masuk

内置事件绑定

阻止冒泡的事件

<button @click.stop="toggle">切换</button>
Salin selepas log masuk

常用的事件修改器:keydown

@keydown输入框输入内容或者内容更改都会触发执行

<input type="text" @keydown="onkeydown">......<script>
  export default {    methods: {
      onkeydown () {        console.log(&#39;on key down&#39;)
      }
    }
  }</script>
Salin selepas log masuk

通过指定修改器 @keydown.enter当敲击键盘enter时触发执行
也可以采用keycode : 如,@keydown.13;获得相同的效果

<input @keydown.enter="onkeydown">//这两个效果一样<input @keydown.13="onkeydown">......<script>
  export default {    methods: {
      onkeydown () {        console.log(&#39;on key down&#39;)
      }
    }
  }</script>
Salin selepas log masuk

自定义事件绑定

自定义事件绑定一般用在自定义组件
在自定义组件a.vue上代码如下

<template>
  <div class="hello">
    {{ hello }}    <button @click="emitMyEvent">emit</button>
  </div></template><script>
  export default {
    data () {      return {        hello: &#39;I am componnet a&#39;
      }
    },    methods: {
      emitMyEvent () {//        触发自定义事件 my-event 并传递一个参数 this.hello
        this.$emit(&#39;my-event&#39;, this.hello)
      }
    }
  }</script>
Salin selepas log masuk

在调用的组件中

<template>
  <div id="myapp">
    <!--在父组件中监听了 comA 的 my-event 事件 当触发的时候 我们执行了 onComaMyEvent -->
    <comA @my-event="onComaMyEvent"></comA>
  </div></template><script>
  import comA from &#39;./components/a.vue&#39;
  export default {    components: {comA},    methods: {//      parmfromA为传递过来的参数
      onComaMyEvent (parmfromA) {        console.log(parmfromA)
      }
    }
  }</script>
Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Vue.js的列表数据的同步更新方法

Vue.js的列表渲染 v-for 数组 对象 子组件

Vue.js的文本渲染

使用Vue.js有哪些注意事项

Atas ialah kandungan terperinci Vue.js的事件绑定 - 内置事件绑定、自定义事件绑定. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan