Vue-指令 事件修饰符 插值表达式

Vue指令之v-text,v-html,v-bind，v-on

<body>
<div id="app">
    <p>{{ msg }}</p>
    <p v-cloak>====={{msg}}------</p>
    <h3 v-text="msg"></h3>
    <div>{{msg2}}</div>
    <div v-html="msg2"></div>
</div>
<script src="vue.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'123',
            msg2:'<h1>nihao</h1>'
        }
    })
</script>
</body>

插值表达式

1.el :绑定哪个dom。 el语法固定 用于指明 Vue 实例的挂载目标。

2.data: 显示数据。 data语法固定；data下面的msg可以随便定义

3.html 显示：{{msg}} 2个大括号

 

默认v-text是没有闪烁问题的

v-text会覆盖元素中原本的内容，但是，插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空。

v-bind:是Vue中，提供的用于绑定属性的指令

注意：v-bind指令可以被简写为 ":"要绑定的属性

v-bind中，可以写合法的JS表达式

<body>
<div>
    <input type="button" value="按钮" v-on:click="show">
</div>
<script src="vue.js"></script>
<script>
        methods:{  //这个methods属性中定义了当前Vue实例所有可用的方法
            show:function () {
                alert("hello")
            }
        }
    })
</script>
</body>

Vue中提供了v-on：事件绑定机制

简写为 @

事件修饰符

  • .stop阻止冒泡

 <style>
        .inner{
            height: 150px;
            
        }
    </style>
 <div id="app">
    <div class="inner" @click="div1Handler">
        使用.stop阻止冒泡
        <input type="button" value="戳他" @click.stop="btnHandler">
    </div>
</div>
<script>
    var vm=new Vue({
        el: '#app',
        data:{},
        methods:{
            div1Handler(){
                console.log('inner  div')
            },
            btnHandler(){
                console.log('btn')
            }
        }
    });
</script>

使用.stop之后 阻止冒泡 只输出btn

  • .prevent阻止默认事件

<div id="app">
<a href="http://www.baidu.com" @click.prevent="linkClick">百度一下</a>
</div>
<script>
    var vm=new Vue({
        el: '#app',
        data:{},
        methods:{
            linkClick(){
                console.log('链接 ')
            }
        }
    });
</script>

点击按钮后跳转到百度

使用.prevent阻止默认事件

  • .capture添加事件侦听器时使用事件捕获模式

<div id="app">
    <!--使用.prevent阻止默认行为-->
    <!--使用  .capture实现捕获触发事件的机制-->
    <div class="inner" @click.capture="div1Handler">
    <input type="button" value="戳他" @click="btnHandler">
    </div>
</div>
<script>
    var vm=new Vue({
        el: '#app',
        data:{},
        methods:{
            div1Handler(){
                console.log('inner  div')
            },
            btnHandler(){
                console.log('btn')
            }
        }
    });
</script>

从外到内执行 捕获

  • .self只当事件在该元素本身（比如不是子元素）触发时出发回调

<div id="app">
    <div class="inner" @click.self="div1Handler">
    <input type="button" value="戳他" @click="btnHandler">
    </div>
</div>
<script>
    var vm=new Vue({
        el: '#app',
        data:{},
        methods:{
            div1Handler(){
                console.log('inner  div')
            },
            btnHandler(){
                console.log('btn')
            }
        }
    });
</script>

使用.self实现只有点击当前元素的时候，才会触发事件处理函数

  • .once事件只触发一次

<a href="http://www.baidu.com" @click.prevent.once="linkClick">百度一下</a>

.once只触发一次prevent函数

posted @ 2019-05-29 13:20  蘑菇姐姐L  阅读(296)  评论(0)    收藏  举报