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

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

写法案例:

<div id="example-3"><button v-on:click="say('hi')">Say hi</button><button v-on:click="say('what')">Say what</button>
</div>new Vue({el: '#example-3',methods: {say: function (message) {alert(message)}}
})

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

写法案例:

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

案例

子组件事件

<template><div>name:{{name}}<input :value="name" @change="handChange"/><div @click="divClick"><button @click="handClick">重置成功</button><button @click.stop="handClick">重置成功</button></div></div></template>
<script>
export default {name:"Event",props:{name:String},methods:{divClick(){this.$emit("change","");},handChange(e){//触发父组件的change事件this.$emit("change",e.target.value);},handClick(){}}}
</script>
<style scoped></style>

在父组件中应用事件

<template>
<div id="app">{{msg}}<Event@change="onChangeVal":name="name"/></div>
</template><script>
import Event from './components/Event'
export default {name: 'App',data() {return {msg: "hello 入门小站",name:"name",type:"入门",list:['入门','小站'],view:true}},methods: {onChangeVal(val){this.name=val;}},components: {Event //必须先声明}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

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

Vue三大核心概念之二(事件)相关推荐

Vue三大核心概念之一(属性)
1.自定义属性props:即组件中声明的属性,子类接受父类的值 2.原声属性attrs:没有声明的属性,默认自动挂在到组件根元素上,设置inheritAttrs为false能够关闭自动挂载 3.特殊属 ...
Vue组件三大核心概念
Vue的核心三大基础概念为:属性.时间和插槽.本文就这三个方面进行深入解析,来了解vue. 一.属性 1.自定义属性props props 可以显示定义一个或一个以上的数据,对于接收的数据,可以是各种 ...
Maven学习（三）————Maven核心概念（二）
引言承接上一篇<Maven学习(二)----Maven核心概念(一)>,介绍 Maven 生命周期.插件.目标.继承.聚合等一些概念. 一.Maven 生命周期 1.1 理解 Mave ...
以太坊核心概念（二）
上一篇文章介绍了以太坊5个核心概念:以太坊虚拟机(EVM).账户(Accounts).交易(Transactions).Gas.存储,主存和栈(Storage, Memory and the Stac ...
vue快速修改数组的某个值_详解vue组件三大核心概念
前言本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛 ...
vue传递数组对象_详解vue组件三大核心概念
前言本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛 ...
vue warning如何去掉_详解 vue 组件三大核心概念
前言本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛戳 ...
前端学习（2555)：vue的核心概念事件
Vue三大核心之三(插槽)
1.具名组件我们一个组件里需要多个插槽,就需要用到slot的name属性  <div><header><slot name=&quo ...

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

案例

Vue三大核心概念之二(事件)相关推荐

最新文章

热门文章