vue事件绑定和属性

vue事件

v-on

用来绑定事件，用法：v-on：事件 = “函数”

标准写法 v-on:click="show()"

简写 @click="show()"

事件对象$event

包含事件相关信息，如事件源、事件类型、偏移量

target、type、offsetx

<div class='box'>
    <button @click="print($event)">事件对象</button>
</div>

<script src='__STATIC__/vendor/vue/vue.min.js'></script>
<script>
    var app = new Vue({
        el: '.box',
        data: {

        },
        methods: {
            print(e){
                //输出事件对象
                console.log(e);
                //获取DOM对象
                console.log(e.target);
                //获取事件类型
                console.log(e.type);
            }
        }
    })
</script>

事件冒泡

阻止事件冒泡

1、原生js方式，依赖于事件对象

<div class='box'>
    <div @click="showA()">
        <div @click="showB()">
            <button @click="showC($event)">点我</button>
        </div>
    </div>
</div>

<script src='__STATIC__/vendor/vue/vue.min.js'></script>
<script>
    var app = new Vue({
        el: '.box',
        data: {

        },
        methods: {
            showC(e){
                console.log("a");
                //原生js阻止事件冒泡
                e.stopPropagation();
            },
            showB(){
                console.log("b");
            },
            showA(){
                console.log("c");
            }
        }
    })
</script>

2、vue方式，不依赖于事件对象

事件后面传递修饰符，如阻止冒泡：@click.stop="fun()"

<div class='box'>
    <div @click="showA()">
        <div @click="showB()">
            <button @click.stop="showC()">点我</button>
        </div>
    </div>
</div>

<script src='__STATIC__/vendor/vue/vue.min.js'></script>
<script>
    var app = new Vue({
        el: '.box',
        data: {

        },
        methods: {
            showC(){
                console.log("a");;
            },
            showB(){
                console.log("b");
            },
            showA(){
                console.log("c");
            }
        }
    })
</script>

事件默认行为

阻止默认行为

默认行为，如a标签，会进行跳转，通过阻止默认行为，来阻止跳转

1、原生js方式，调用事件对象

<div class='box'>
    <a href="#" @click="fun($event)">链接</a>
</div>

<script src='__STATIC__/vendor/vue/vue.min.js'></script>
<script>
    var app = new Vue({
        el: '.box',
        data: {

        },
        methods: {
            fun(e){
                console.log("a");
                //阻止默认行为
                e.preventDefault(); 
            }
        }
    })
</script>

2、vue方式，通过修饰符来阻止

<div class='box'>
    <a href="#" @click.prevent="fun()">链接</a>
</div>

<script src='__STATIC__/vendor/vue/vue.min.js'></script>
<script>
    var app = new Vue({
        el: '.box',
        data: {

        },
        methods: {
            fun(){
                console.log("a");
            }
        }
    })
</script>

键盘事件

1、原生js写法

<div class='box'>
    用户名：<input type="text" @keydown="fun($event)">
</div>

<script src='__STATIC__/vendor/vue/vue.min.js'></script>
<script>
    var app = new Vue({
        el: '.box',
        data: {

        },
        methods: {
            fun(e){
                console.log(e.keyCode);
                if(e.keyCode==13){
                    console.log("你按了回车");
                }
            }
        }
    })
</script>

2、vue方式，类似于修饰符

<div class='box'>
    <!-- 通过键码绑定事件 -->
    <p>用户名：<input type="text" @keydown.38="up()"></p>

    <!-- 通过键码 别名 绑定事件，不是所有键码都有别名，如a,b,c...-->
     <!-- 也想要想要达到 别名 效果，需要自定义键码别名 -->
    <p>用户名：<input type="text" @keydown.enter="en()"></p>
</div>

<script src='__STATIC__/vendor/vue/vue.min.js'></script>
<script>
    var app = new Vue({
        el: '.box',
        data: {

        },
        methods: {
            up(){
                console.log("你按了向上箭头");
            },
            en(){
                console.log("你按了回车"); 
            }
        }
    })
</script>

自定义键码别名

<div class='box'>
    <p>用户名：<input type="text" @keydown.v="v()"></p>
    <p>用户名：<input type="text" @keydown.w="w()"></p>
</div>

<script src='__STATIC__/vendor/vue/vue.min.js'></script>
<script>
    // 自定义键码别名
    Vue.config.keyCodes = {
        // 别名：键码
        v: 86,
        w: 87,
    }

    var app = new Vue({
        el: '.box',
        data: {

        },
        methods: {
            v(){
                console.log("你按了v");
            },
            w(){
                console.log("你按了w"); 
            }
        }
    })
</script>

v-bind

用于属性的绑定 ，如 src属性  style属性  class属性等等

写法：v-bind：属性=“”

标准写法： v-bind:src="url"  

简写：：src=“url”

<style>
    .div-1{background: rgb(243, 215, 215);margin: 10px;width:100px;height:100px;float:left;}
    .div-2{color: #fff;background: rgb(36, 26, 26);}
</style>

<div class='box'>
    <!-- 可以直接访问data里面的数据，不需要{{}} -->

    <!-- 标准写法 -->
    <div v-bind:class="cssNameA">标准写法</div>

    <!-- 简写 写法 -->
    <div :class="cssNameA">简写 写法</div>

    <!-- 绑定对象 -->
    <div :class="cssNameA" :style="styleObj">绑定对象数据</div>

    <!-- 通过数组形式， 绑定多个class -->
    <div :class="[cssNameA,cssNameB]">通过数组形式，绑定多个class</div>

    <!-- JSON形式，绑定多个class,如果样式名称带“-”一定要用引号引起来 如'div-1':true-->
    <div :class="{'div-1':true,'div-2':true}">JSON形式，绑定多个class,true表示生效</div>


    <!-- 条件判断 bool值-->
    <div :class="{'div-1':isOk}">条件判断 bool值</div>

    <!-- 条件判断 三元运算符-->
    <div :class="isOk?cssNameA:cssNameB">条件判断 三元运算符</div>
</div>

<script src='/static/vendor/vue/vue.min.js'></script>
<script>
    new Vue({
        el:'.box',
        //存储数据
        data: {
            cssNameA:'div-1',
            cssNameB:'div-2',
            styleObj:{
                width:"200px",
                height:"200px"
            },
            isOk:true
            
        },
        //存储方法
        methods: {

        }
    })
</script>

上一篇：Vue.js常用指令

下一篇：vue.directive自定义指令