Vue三大核心概念之二(事件)

1.普通事件
@click,@input,@change,@xxx等事件,经过this.$emit(‘xxx’,…)触发

写法案例:

  1. <div id="example-3">
  2. <button v-on:click="say('hi')">Say hi</button>
  3. <button v-on:click="say('what')">Say what</button>
  4. </div>
  5. new Vue({
  6. el: '#example-3',
  7. methods: {
  8. say: function (message) {
  9. alert(message)
  10. }
  11. }
  12. })

2.修饰符事件
@input.trim,@click.stop,@submit.prevent等,通常用于原生HTML元素,自定义组件须要自行开发支持

写法案例:

  1. <!-- 阻止单击事件冒泡传播 -->
  2. <a v-on:click.stop="doThis"></a>
  3. <!-- 提交事件不再重载页面 -->
  4. <form v-on:submit.prevent="onSubmit"></form>
  5. <!-- 修饰符可以串联 -->
  6. <a v-on:click.stop.prevent="doThat"></a>
  7. <!-- 只有修饰符 -->
  8. <form v-on:submit.prevent></form>
  9. <!--表单修饰符-->
  10. 1).lazy
  11. 在默认情况下, v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符,从而转变为使用 change事件进行同步。适用于输入完所有内容后,光标离开才更新视图的场景。
  12. 2).trim
  13. 如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:
  14. <input v-model.trim="msg">
  15. 这个修饰符可以过滤掉输入完密码不小心多敲了一下空格的场景。需要注意的是,它只能过滤首尾的空格!首尾,中间的是不会过滤的。
  16. 3).number
  17. 如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符:
  18. <input v-model.number="value" type="text" />

案例

子组件事件

  1. <template>
  2. <div>
  3. name:{{name}}
  4. <input :value="name" @change="handChange"/>
  5. <div @click="divClick">
  6. <button @click="handClick">重置成功</button>
  7. <button @click.stop="handClick">重置成功</button>
  8. </div>
  9. </div>
  10. </template>
  11. <script>
  12. export default {
  13. name:"Event",
  14. props:{
  15. name:String
  16. },
  17. methods:{
  18. divClick(){
  19. this.$emit("change","");
  20. },
  21. handChange(e){
  22. //触发父组件的change事件
  23. this.$emit("change",e.target.value);
  24. },
  25. handClick(){
  26. }
  27. }
  28. }
  29. </script>
  30. <style scoped>
  31. </style>

在父组件中应用事件

  1. <template>
  2. <div id="app">
  3. {{msg}}
  4. <Event
  5. @change="onChangeVal"
  6. :name="name"
  7. />
  8. </div>
  9. </template>
  10. <script>
  11. import Event from './components/Event'
  12. export default {
  13. name: 'App',
  14. data() {
  15. return {
  16. msg: "hello 入门小站",
  17. name:"name",
  18. type:"入门",
  19. list:['入门','小站'],
  20. view:true
  21. }
  22. },
  23. methods: {
  24. onChangeVal(val){
  25. this.name=val;
  26. }
  27. },
  28. components: {
  29. Event //必须先声明
  30. }
  31. }
  32. </script>
  33. <style>
  34. #app {
  35. font-family: Avenir, Helvetica, Arial, sans-serif;
  36. -webkit-font-smoothing: antialiased;
  37. -moz-osx-font-smoothing: grayscale;
  38. text-align: center;
  39. color: #2c3e50;
  40. margin-top: 60px;
  41. }
  42. </style>

源码:https://github.com/mifunc/rumenz-vue/tree/master/rumenz-vue-three-core

返回笔记列表
入门小站