Vue常用指令v-on

最新推荐文章于 2024-09-11 15:33:18 发布

weixin_30338461

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量80

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/apollo1616/articles/10034544.html

版权

动态地绑定一个或多个特性，或一个组件 prop 到表达式；其作用和v-bind类似。
注意：如果用在普通元素上时，只能监听原生 DOM 事件；但是如果用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

常用的修饰符包括：
.stop - 调用 event.stopPropagation()；停止冒泡。
.prevent - 调用 event.preventDefault(); 停止监听原生事件。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.once - 触发一次。

使用手法：

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

<button v-on:click="doThat('hello', $event)"></button>

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

<button @click.stop="doThis"></button>

<button @click.prevent="doThis"></button>

<form @submit.prevent></form>

<button @click.stop.prevent="doThis"></button>

<input @keyup.enter="onEnter">

<input @keyup.13="onEnter">

<button v-on:click.once="doThis"></button>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="js/vue.js"></script>
</head>
<body>
<div class="app">
    <p v-bind:style="{color:fontColor}">{{ message }}</p>
    <button v-on:click="changeContent">改变内容</button>
    <button @click="alertMessage('请在此处修改弹窗内的文字内容!')">弹窗</button>
    <button @click.once="changeColor('red')">改变颜色</button>
</div>

<script>
    // 创建Vue的实例
    let app = new Vue({
        el: '.app',
        data: {
            message: '天气好热!',
            fontColor:'blue'
        },
        methods:{
            changeContent(){
                this.message = '天气好热啊!!!!!';
            },
            alertMessage(str){
                alert(str);
            },
            changeColor(color){
                this.fontColor = color
            }
        }

    })
</script>
</body>
</html>