关于vue.js中的事件

最新推荐文章于 2024-04-24 09:32:44 发布

qq_39142654

最新推荐文章于 2024-04-24 09:32:44 发布

阅读量369

点赞数

本文链接：https://blog.csdn.net/qq_39142654/article/details/89364214

版权

原生js中的事件基础内容：

属性绑定

<div onClick = "alert"></div>
function alert(){
alert('hello vue.js')
}

js操作
// 1. 获取数据
var data = ‘hello vue.js’
// 2. 获取DOM
var app = document.querySelector(’#app’)
// 3. 渲染数据
app.innerHTML = data
// 4. 添加事件
app.onclick = function(){
app.style.background = ‘red’
}
事件的组成部分：
DOM
on 添加事件的形式
事件类型 click
事件处理函数

vue.js事件

1.用 v-on添加事件
2.事件处理函数写在配置项中的methods中
3.书写步骤：先写方法，再去绑定
方法书写：



<script>
    new Vue({
        el: '#app',
        methods: { 
/* 一个key 就是一个方法 */
            changeMsg() {
                      //执行代码块
            },
    })
</script>

绑定事件：
例：

<button v-on:click="changeMsg">
</button>

可使用“ @ ”简写：

<button @click="changeMsg">
</button>

思考：假如我们有一个方法，这个方法里有两个参数，第一个为自定义参数，第二个参数为事件对象，为什么第二个事件对象会等于undefined。

原因：当我们自定义参数后，系统无法是别是不是对象事件。

解决方法：传入事件对象的事件参数，也就是实参：$event

1. 事件修饰符

vue这边可使用事件修饰符(modify)
格式：
v-on:eventType.modify = eventFnName
类型：
.stop : 阻止冒泡行为
.prevent ：阻止浏览器默认行为
.capture ：阻止捕获行为
.self ：自身触发
.once ：只执行一次
.passive ：行为结束后触发（scroll）

2. 按键修饰符（键盘事件 keyup keydown keypress）

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

3. 自定义按键修饰符

1. 全局修改

Vue.config.keyCodes.自定义修饰符 = 键盘码
使用：
@keyup.自定义修饰符 = eventFnName

2. 自定义事件(自定义事件类型)

如何定义？

使用new Vue() 的到的实例来定义
vm.$on(eventName,callback)
如何触发呢？
vm. $e m i t (e v e n t N a m e) t h i s .$ emit(eventName)

单项数据绑定

数据更改，视图就更改
使用api中的v-bind来实现

概念；
将数据和属性进行绑定，也就是原生身上的属性的值就是数据
格式
v-bind:attr = data
简写：
:attr = data
例：



<body>
    <div id="app">
        <input type="text" v-bind:value="msg">
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '你好哇，我的鹿鹿~'
        }
    })
</script>

双向数据绑定

数据改变，视图更新，
视图改变，数据更新

格式：
v-model:attr=data
简写：可以省略属性
v-model=data
特别强调：
v-model用于表单， v-model默认绑定了value属性
例：


<body>
    <div id="app">
        <input type="text" v-bind:value="msg" @input="inValue">
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '你好哇，我的鹿鹿~'
        },
        methods: {
            inValue(e) {
                this.msg = e.target.value
            }
        }
    })
</script>

qq_39142654

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于vue.js中的事件

原生js中的事件基础内容：属性绑定<div onClick = "alert"></div>function alert(){alert('hello vue.js')}js操作// 1. 获取数据var data = ‘hello vue.js’// 2. 获取DOMvar app = document.querySelector(’#app’...
复制链接

扫一扫