首页 > 代码库 > vue学习笔记01
vue学习笔记01
事件
事件绑定
在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) } }
阻止事件冒泡
- 设置ev.cancelBubble=true;如下实例:
<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) } } })
- .stop方法(跟在事件后面),如下实例:
<div @click="show1()"> <input type="button" value="按钮" @click.stop="show2()" /> </div>
methods:{ show2:function(){ alert(2); }, show1:function(){ alert(1) } }
阻止默认事件
- ev.preventDefault();
<a href="https://www.baidu.com/" @click="show2($event)">跳转到百度</a>
methods:{ show2:function(ev){ alert(2); ev.preventDefault(); } }
- prevent
<a href="https://www.baidu.com/" @click.prevent="show2()">跳转到百度</a>
methods:{ show2:function(){ alert(2); } }
键盘事件
- ev.keyCode
<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]">
模板
- {{msg}}数据更新,模板变化
- {{*msg}}数据只绑定一次
- {{{msg}}}HTML转义输出
过滤器
过滤器用作一些常见的文本格式化。系统提供一些过滤器,vue也允许自定义一些过滤器
过滤器语法:
{{msg|filterA}}
/*运用多个过滤器*/
{{msg|filterA|filterB}}
系统提供过滤器(部分):
- uppercase eg:{{‘welcome‘|uppercase}} 转大写
- lowercase 转小写
- capitalize 首字母大写
- currency 钱
vue学习笔记01
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。