Vue.js学习笔记（2）

事件修饰符

.stop

作用：阻止冒泡

<!--- html --->
<div id="app">
    <div class="inner" @click="show1">
        <input type="button" @click.stop="show2" value="点我">
    </div>
</div>

<!--- js--->
var app = new Vue({
    el:'#app',
    data:{},
    methods:{
        show1:function(){
            console.log("触发div")
        },
        show2:function(){
            console.log("触发btn")
        }
    }
})

此时如果没有.stop的话，点击按钮时会显示 触发btn 和 触发div，但是使用了.stop就只会显示如下图所示的内容

.capture

作用：实现捕获触发

<!--- html --->
<div id="app">
    <div class="inner" @click.capture="show1">
        <input type="button" @click="show2" value="点我">
    </div>
</div>

<!--- js--->
var app = new Vue({
    el:'#app',
    data:{},
    methods:{
        show1:function(){
            console.log("触发div")
        },
        show2:function(){
            console.log("触发btn")
        }
    }
})

此时当点击按钮时，进行了捕获触发

.self

作用：只有对当前元素操作才会触发事件处理函数

<!--- html --->
<div id="app">
    <div class="inner" @click.self="show1">
        <input type="button" @click="show2" value="点我">
    </div>
</div>

<!--- js--->
var app = new Vue({
    el:'#app',
    data:{},
    methods:{
        show1:function(){
            console.log("触发div")
        },
        show2:function(){
            console.log("触发btn")
        }
    }
})

此时当点击按钮时只会触发btn，只有当点击div时才会触发div

.prevent

作用：阻止默认行为

<!--- html --->
<div id="app">
    <a href="https://www.baidu.com/" @click.prevent="linkPrevent">点我跳转</a>
</div>

<!--- js--->
var app = new Vue({
    el:'#app',
    data:{ },
    methods:{
        linkPrevent(){
            console.log("没有跳转")
        }
    }
})

.once

作用：只能触发一次事件处理函数

v-model

作用：实现双向数据绑定！！！

<!--- html --->
<div id="app">
    <p>{{msg}}</p>
    <input type="text" v-model="msg">
</div>

<!--- js--->
var app = new Vue({
    el:'#app',
    data:{
        msg:'Hello Vue!'
    }
})

使用了v-model之后，可以在input输入框中更改文本，并且会动态的渲染到页面中
注意：v-model只能运用在表单元素中input select checkbox textarea