vue指令之v-on-白红宇的个人博客

vue指令之v-on

发布日期：2021-05-07 01:02:12 浏览次数：28 分类：原创文章

本文共 2369 字，大约阅读时间需要 7 分钟。

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>'    }});

上一篇：vue指令之v-model

下一篇：[CF923D]Picking Strings

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章