vue指令之v-on

最新推荐文章于 2024-01-23 11:29:39 发布

duansamve

最新推荐文章于 2024-01-23 11:29:39 发布

阅读量1.8k

点赞数

分类专栏： vue 文章标签： vue v-on

本文链接：https://blog.csdn.net/duansamve/article/details/79846482

版权

vue 专栏收录该内容

108 篇文章 5 订阅

订阅专栏

main.js：

var app = new Vue({
    el: '#app',
    methods: {
        onClick: function(){
            console.log("clicked!");
        },
        onEnter: function(){
            console.log("mouse entered!");
        },
        onLeave: function(){
            console.log("mouse leaved!");
        },
        onSubmit_: function(e){
            e.preventDefault();
            console.log("submited_!");
        },
        onSubmit: function(){
            console.log("submited!");
        },
        onKeyUp: function(){
            console.log("key pressed!");
        },
        onEnter: function(){
            console.log("entered!");
        }
    }
})

index.html：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p><button v-on:click="onClick" v-on="{mouseenter: onEnter, mouseleave: onLeave}">点我</button></p>
    <p><button @click="onClick">点我</button></p>

    <form v-on:submit="onSubmit_($event)">
        <input type="text"/>
        <button type="submit">提交</button>
    </form>

    <form v-on:submit.prevent="onSubmit">
        <input type="text"/>
        <button type="submit">提交</button>
    </form>

    <form v-on:keyup="onKeyUp">
        <input type="text"/>
        <button type="submit">提交</button>
    </form>

    <form v-on:keyup.enter="onEnter" v-on:submit.prevent="onSubmit">
        <input type="text"/>
        <button type="submit">提交</button>
    </form>
</div>

<script src="../lib/vue.js"></script>
<script src="./js/main.js"></script>
</body>
</html>

.stop：阻止事件冒泡；

.prevent：阻止默认事件；

.keyup.enter.esc.space：回车或点击esc或点击空格键

<p><input type="text" v-on:keyup = "changeName">输出：{{name}}</p>
<p><input type="text" v-on:keyup.enter.space = "name = $event.target.value"/>输出：{{name}}</p>
<form action="" v-on:submit.prevent>
    <input type="submit" value="提交"/>
</form>

data: {
    counter: 0,
    name: 'Vue.js'
},

changeName: function(event){
    this.name = event.target.value;//不使用v-model,将当前input值替换name
}

用v-on和v-bind实现双向数据绑定：

<divv id="app">
    <input type="text" v-bind:value="value" v-on:input="value = $event.target.value"/>
    <p>{{value}}</p>
</divv>

var app = new Vue({
    el: '#app',
    data: {
        value: 'hello'
    }
});

v-html：一定要防止跨域脚本攻击

<div v-html="html"></div>

var app = new Vue({
    el: '#app',
    data: {
        value: 'hello',
        html: '<h1>hello</h1>'
    }
});

duansamve

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue指令之v-on

main.js：var app = new Vue({ el: '#app', methods: { onClick: function(){ console.log("clicked!"); }, onEnter: function(){ console.log("mouse ente...
复制链接

扫一扫

专栏目录