Vue学习之常用指令实例详解

<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

10、v-on:给标签绑定函数，可以缩写为@，例如绑定一个点击函数

<p>{{msg}}</p>
<button @click="changeContent()">change</button>

在Vue的methods中实现changeContent函数：

  let app=new Vue({
    el:'#app',
    data:{
      msg:'第一次输入信息',
    },
    methods:{
      changeContent(){
        this.msg="修改后的输入信息";
      }
    }
  });

原页面与点击后：

Vue.js 为 v-on 提供了事件修饰符。修饰符是由.开头的指令后缀来表示的，用于对事件进行约束。例如：

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联使用，并且使用的顺序很重要 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时才触发函数 -->
<!-- 即事件不从内部元素触发 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

除了点击事件外，还有按键事件，例如按下键盘码为13的按钮时触发：

<input v-on:keyup.13="submit">

为了方便使用vue将一些常用按键重命名，可以使用事件修饰符来使用，包括：.enter、.delete、.tab、.space、.esc、.up、.down、.right、.left等，也可以自定义：

Vue.config.keyCodes.f1 = 112;

希望本文所述对大家vue.js程序设计有所帮助。