标签：nbsp tab tps inpu ace 设置 val -- 格式化
在vue中，事件绑定用v-on。v-on也可以用@click=""形式
实例1：
<div class="container" id="box"> <button class="btn btn-primary" v-on:click="counter+=1">增加1</button> <p>这个按钮被点击了{{counter}}次</p> </div>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
counter:0
}
})
</script>
实例2：
<button class="btn bg-info" @click="msg(‘小明‘)">按钮</button> new Vue({ el:"#box", data:{ counter:0 }, methods:{ msg:function(message){ alert(message) } } })
$event
<button class="btn bg-info" @click="msg($event)">按钮</button> methods:{ msg:function(event){ alert(event.clientX) } }
阻止事件冒泡
<div class="container" id="box"> <div @click="show1()"> <input type="button" value="按钮" @click="show2($event)" /> </div> </div>
new Vue({ el:"#box", data:{ counter:0 }, methods:{ show2:function(ev){ alert(2); ev.cancelBubble=true; //阻止事件冒泡 }, show1:function(){ alert(1) } } })
<div @click="show1()"> <input type="button" value="按钮" @click.stop="show2()" /> </div>
methods:{ show2:function(){ alert(2); }, show1:function(){ alert(1) } }
阻止默认事件
<a href="https://www.baidu.com/" @click="show2($event)">跳转到百度</a>
methods:{ show2:function(ev){ alert(2); ev.preventDefault(); } }
<a href="https://www.baidu.com/" @click.prevent="show2()">跳转到百度</a>
methods:{ show2:function(){ alert(2); } }
键盘事件
<input type="text" @keydown="show($event)" />
methods:{ show:function(ev){ alert(ev.keyCode); } }
在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加关键修饰符：
<input @keyup.13="submit">
记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
<input v-on:keyup.enter="submit"> <!-- 缩写语法 --> <input @keyup.enter="submit">
全部的按键别名：
.enter.tab.delete (捕获 “删除” 和 “退格” 键).esc.space.up.down.left.right在vue中，绑定属性用v-bind。简写:src
<img v-bind:src="url" alt=""/> <!--简写形式--> <img :src="url" alt=""/>
class/style
class的用法跟style的用法是一样的，所以下面只讲解class
我们可以传给 v-bind:class 一个对象，以动态地切换 class 。
<div v-bind:class="{ active: isActive }"></div>
上面的语法表示 classactive 的更新将取决于数据属性 isActive 是否为真值 。
我们可以把一个数组传给 v-bind:class ，以应用一个 class 列表：
<div v-bind:class="[activeClass, errorClass]">
data: { activeClass: ‘active‘, errorClass: ‘text-danger‘ }
当有多个条件 class 时可以在数组语法中使用对象语法
<div v-bind:class="[{ active: isActive }, errorClass]">
过滤器用作一些常见的文本格式化。系统提供一些过滤器，vue也允许自定义一些过滤器
过滤器语法：
{{msg|filterA}}
/*运用多个过滤器*/
{{msg|filterA|filterB}}
系统提供过滤器（部分）：
标签：nbsp tab tps inpu ace 设置 val -- 格式化
原文地址：http://www.cnblogs.com/xuxiaozhi/p/7194186.html
