vue指令 v-on:监听事件事件监听

v-on:click / @click

绑定事件监听器。事件类型由参数指定。

可以简写为@  :语法糖

v-on:click="do()"  等价于 @click="do()"

<template>
  <div class="hello">
    <div @click="pushFunc()">v-on语法糖</div>
    <div @click="pushFunc()">v-on</div>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  methods: {
    pushFunc () {
      let arr = []
      arr.push('nnn')
      arr.push('mmm')
      arr.push('nnn')
      console.log(arr)
      return arr
    }
  },
  async created () {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

v-on:keyup / @keyup 按键抬起事件监听

@keyup : 当再输入框中输入内容时，当键盘抬起的时候会触发该事件

<template>
  <div class="hello">
    <!-- <div @keyup="keyUpPyp(1,2)">v-on:keyup测试</div> -->
    <label>v-on:keyup按键抬起测试<input @keyup="keyUpPyp(1,2)" /></label>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      num1: 23,
      num2: 90,
      result: ''
    }
  },
  methods: {
    keyUpPyp (a, b) {
      console.log(a + b)
    }
  },

  computed: {
  },

  async created () {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

v-on $event 对象的传参

当要传当前对象的时候，直接在方法中将 $(event)传入即可

<template>
  <div class="hello">
    <!-- <div @keyup="keyUpPyp(1,2)">v-on:keyup测试</div> -->
    <label>v-on:keyup按键抬起测试<input @keyup="keyUpPyp($event)" v-model="result" @input="getKeyUp($event)" /></label>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      num1: 23,
      num2: 90,
      result: ''
    }
  },
  methods: {
    keyUpPyp (e) {
      console.log(e.currentTarget.value)
      console.log(this.result)
    },
    getKeyUp (e) {
      this.result = e.currentTarget.value
      console.log(this.result)
    }
  },

  computed: {
    num: {
      get () {
        return this.num1 + this.num2
      },
      set () {
        this.num1 = 223
        this.num2 = 345
        console.log(232)
      }
    }
  },

  async created () {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

v-on 修饰符 @click.stop 阻止冒泡 子级事件触发并阻止父级事件触发

@click.stop

子级的事件触发不会  触发父级事件

<template>
  <div class="hello">

    <div @click="divClickTwo()">
      李克成
      <div @click.stop="divClickOne()">
        张三丰
      </div>
    </div>
  </div>
</template>

<script>


export default {
  name: 'HelloWorld',
  data () {
    return {

    }
  },
  methods: {

    divClickOne () {
      console.log(1)
    },

    divClickTwo () {
      console.log(2) // 当点击 张三丰 的时候不触发该方法
    }

  },

  computed: {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

v-on:click.prevent / @click.prevent 阻止默认事件

@click.prevent="willDo()"  
阻止标签中的默认事件的触发，并改为执行willDo()方法

<template>
  <div class="hello">
    <form @click.prevent="willDo">
      <input type="submit" value="提交" />
    </form>

    <a href="https://www.baidu.com" @click.prevent="willDo">跳转到百度</a>
  </div>
</template>

<script>


export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  methods: {
    willDo () {
      console.log(1) // 当点击提交/跳转到百度 的时候，不走原来的方法，改为当前方法
    }
  },

  computed: {

  },

  async created () {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

v-on:keydown / @keydown 键盘按下

<template>
  <div class="hello">
    <label>v-on:keydown<input type="text" @keydown="keyDown()" /></label>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  methods: {

    keyDown () {
      console.log(123)
    }
  },

  computed: {
  },

  async created () {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

v-on:keyup.enter / @keyup.enter 键盘回车修饰符

敲击回车时进行触发的事件

<template>
  <div class="hello">
    <label>v-on:keyup.enter回车修饰符<input type="text" @keyup.enter="keyupEnter()" /></label>
  </div>
</template>

<script>



export default {
  name: 'HelloWorld',
  data () {
    return {

    }
  },
  methods: {

    keyupEnter () {
      console.log(123)
    }


  },

  computed: {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

v-input @input 监听input框变化的使用

<!--  -->
<template>
<div>
  <input type="text" name="name" :value="name" @input="changeInput($event)"/>
</div>
</template>

<script>
export default {
  name: 'VueOne',
  data () {
    return {
      name: ''
    }
  },
  methods: {
    changeInput (e) {
      this.name = e.target.value
      console.log(this.name)
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */

</style>