Table of contents
1. Event mechanism
Vue uses the v-on command to listen to DOM events, and runs some JavaScript code when triggered, and can also receive a method name that needs to be called. We can pass the native event object through the event parameter in the method, and can also pass other parameters $. You can abbreviate v-on: event name to @event name
<body>
<div id="app">
<!-- 直接运行一些 JavaScript 代码 -->
<button v-on:click="console.log('我被点击了')">点击我</button>
<!-- 接收一个需要调用的方法名称，即函数名，函数实现写在methods中 -->
<button v-on:click="handler">点击我</button>
<!-- 传递参数 -->
<button v-on:click="handler1($event,'Hi')">点击我</button>
<!-- 简写 -->
<button @click="handler1($event,'Hi')">点击我</button>
</div>
<script>
new Vue({
el:"#app",
methods:{
handler(){
console.log('hello vue');
},
handler1(e,n){
console.log(e,n);
}
}
})
</script>
</body>
2. Event modifiers
It is a very common requirement to call event.preventDefault() or event.stopPropagation() in JavaScript event handlers. Vue provides a better way: the event handler only has pure data logic, instead of dealing with the details of DOM events, these details are completed through event modifiers.
Common modifiers are as follows:
.stop stop event bubbling
.prevent prevents event default behavior
.capture executes the event processing function during the event capture phase
.self triggers the handler only when event.target is the current element itself
The .once event handler is executed once and unbound
The default behavior of the .passive scrolling event (that is, the scrolling behavior) will be triggered immediately. It is generally used in conjunction with scroll to improve the performance of the mobile terminal (because every time an event occurs, the browser will check whether there is preventDefault to prevent the default action of the event. .We add .passive to tell the browser that there is no need to query, and we don’t use preventDefault to prevent the default action. Passive and prevent conflict and cannot be bound to a listener at the same time. )
Key modifiers (generally used in conjunction with the keyup event type):
.enter、.tab、.delete、.esc、.space、.up、.down、.left、.right 、.ctrl、.alt、.shift、.meta
Mouse modifiers (mouseup event):
.left、.right、.middle
<style>
.outer{
width: 400px;
height: 400px;
background-color: rgb(233, 47, 202);
display: flex;
justify-content: center;
align-items: center;
}
.outer1{
overflow: scroll;
height: 100px;
}
.inner{
width: 200px;
height: 200px;
background-color: rgb(237, 143, 20);
}
</style>
</head>
<body>
<div id="app">
<!-- 按下回车执行 enter 或者 13 (13表示回车键)-->
<!-- <input type="text" @keyup.enter="console.log('键盘按下了')"> -->
<input type="text" @keyup.13="console.log('键盘按下了')">
<!-- 按下鼠标执行 mouseup middle 中间滚轮 left right -->
<input type="text" @mouseup.middle="console.log('鼠标按下了')">
<br>-------------------------------------------------------
<!-- .stop 阻止事件冒泡 -->
<div class="outer" @click="outer">
<div class="inner" @click.stop="inner">stop 阻止事件冒泡</div>
</div>
<br>-------------------------------------------------------
<!-- .captrue 事件捕获阶段执行 -->
<div class="outer" @click.capture="outer">
<div class="inner" @click="inner">.captrue 事件捕获阶段执行</div>
</div>
<!-- 阻止事件的默认行为 prevent -->
<a @click.prevent="toJump" href="https://www.baidu.com">百度一下</a>
<!-- 事件修饰符 passive 一般与scroll连用 表示直接使用事件默认行为-->
<div class="outer outer1" @scroll="outer">
<div class="inner" @click="inner"></div>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
},
methods:{
outer(){
console.log('outer被点击了');
},
inner(event){
console.log('inner被点击了');
// 原生阻止事件冒泡
// event.stopPropagation()
},
toJump(event){
// 原生阻止事件默认行为
// event.preventDefault()
}
}
})
</script>
</body>Three, two-way data binding
Two-way data binding<input> can be created on forms , <textarea>and on <select>elements with the v-model directive . It automatically picks the correct method to update the element based on the control type. Despite its magic, v-model is essentially nothing more than syntactic sugar. It is responsible for listening to user input events to update data, and doing some special processing for some extreme scenarios. Use v-model to bind the value, then the name attribute does not need to be written.
<body>
<div id="app">
<!-- v-model 数据改变 v-model 视图也会更新-->
{
{stu}}
<!-- lazy修饰符 懒加载，按下回车后才更新数据 -->
<!-- 用户名: <input type="text" v-model.lazy="stu.username"> -->
<!-- trim修饰符 去除前后空格 -->
<br>
<br>
用户名: <input type="text" v-model.trim="stu.username">
<!-- number修饰符 将输入的值转成数字类型-->
密码: <input type="password" v-model.number="stu.password">
<!-- 单选按钮 -->
<br>
男:<input type="radio" value="male" v-model="stu.gender">
女:<input type="radio" value="female" v-model="stu.gender">
<br>
<!-- 复选框 -->
游泳<input type="checkbox" value="swimming" v-model="stu.hobbies">
篮球<input type="checkbox" value="basketball" v-model="stu.hobbies">
足球<input type="checkbox" value="football" v-model="stu.hobbies">
<br>
<!-- 多行文本框 -->
<textarea v-model="stu.introduce"></textarea>
<br>
<!-- 下拉框 -->
<select v-model="stu.city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="liuzhou">柳州</option>
</select>
</div>
<script>
new Vue({
el:"#app",
data:{
// 表单对象
stu:{
hobbies:[]
}
},
methods:{}
})
</script>
</body>