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的更多相关文章
- Vue基础及脚手架环境搭建
From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...
- Vue基础之Vue的模板语法
Vue基础之Vue的模板语法 数据绑定 01 数据绑定最常见的形式就是使用插值表达式(两个大括号!)[也就是小胡子语法!mustache] <body> <!-- Vue.js的应用 ...
- Vue基础之生命周期函数[残缺版]!
Vue基础之生命周期函数[残缺版]! 为什么说是残缺版呢?! 因为有一些周期函数我并没有学到!所以是残缺版! 01 beforeCreate //在实例初始化之后,数据观测 (data observe ...
- javascript基础01
javascript基础01 Javascript能做些什么? 给予页面灵魂,让页面可以动起来,包括动态的数据,动态的标签,动态的样式等等. 如实现到轮播图.拖拽.放大镜等,而动态的数据就好比不像没有 ...
- Androd核心基础01
Androd核心基础01包含的主要内容如下 Android版本简介 Android体系结构 JVM和DVM的区别 常见adb命令操作 Android工程目录结构 点击事件的四种形式 电话拨号器Demo ...
- java基础学习05(面向对象基础01)
面向对象基础01 1.理解面向对象的概念 2.掌握类与对象的概念3.掌握类的封装性4.掌握类构造方法的使用 实现的目标 1.类与对象的关系.定义.使用 2.对象的创建格式,可以创建多个对象3.对象的内 ...
- Linux基础01 学会使用命令帮助
Linux基础01 学会使用命令帮助 概述 在linux终端,面对命令不知道怎么用,或不记得命令的拼写及参数时,我们需要求助于系统的帮助文档:linux系统内置的帮助文档很详细,通常能解决我们的问题, ...
- 可满足性模块理论(SMT)基础 - 01 - 自动机和斯皮尔伯格算术
可满足性模块理论(SMT)基础 - 01 - 自动机和斯皮尔伯格算术 前言 如果,我们只给出一个数学问题的(比如一道数独题)约束条件,是否有程序可以自动求出一个解? 可满足性模理论(SMT - Sat ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
随机推荐
- 对于php内存释放问题
大家在使用PhpExcel类时,当打开一个比较大的excel数据文档,会出现Fatalerror: Allowed memorysize of 67108864 bytes exhausted (tr ...
- Scheme 中的 pair 和 list 简述
pair (cons 1 2) > (1 . 2) 系统返回(1 . 2).cons 操作给两个地址分配了内存空间,并把存放指向 1 的地址放在一个空间,把存放指向2的地址放在另一个空间.存放指 ...
- 每天一个Linux命令—— crontab
一.简介 1. Linux中有许多周期性执行的任务,这些任务由cron守护进程完成,因此cron这个系统服务是默认启动的. 2.Linux中调度任务分为两类:系统任务调度和用户任务调度,系统任务调度即 ...
- SSO框架介绍前篇
SSO全程是single sign on,即单点登录,是一种统一认证和授权机制. 单点登录,指访问同一服务器不同应用中的受保护资源的同一用户,只需要登录一次,即通过一个应用中的安全验证后,再访问其 ...
- iter迭代器的应用
迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束. 用户不用关心迭代器的内部结构,仅需通过next方法不断去读取下一个内容 不能随机访问任意一个内容,只 ...
- CentOS 7 for ARM 安装一键Lnmp失败
背景 前面把树莓派装上了CentOS 7,趁着国庆放假回来赶紧把服务端环境搭起来,为了方便就准备用一键lnmp快速部署一个,结果死活安装不成功... 报错 按照以往的经验进行安装,在我的小树莓派上安装 ...
- qt编译的基于xlib cairo的桌面程序
在*.pro中添加以下代码: INCLUDEPATH += /usr/include/cairo LIBS += -lX11 -lcairo 在ubuntu16下编译通过
- 网络接口配置--Bonding
Bonding 就是讲到快网卡绑定到同一IP地址对外服务,可以实现高可用或者负载均衡.当然,直接给两块网卡设置同一IP地址是不可能的.通过bonding,虚拟一块网卡对外提供连接,物理网卡被修改为同一 ...
- 基于android的语音识别
1.注册账户,添加应用 2.针对android平台的选择应用,下载SDK 3.将SDK的libs下文件拷贝到工程的libs目录下 4.添加用户权限 <uses-permission androi ...
- JMS 之 Active MQ 消息存储
一.消息的存储方式 ActiveMQ支持JMS规范中的持久化消息与非持久化消息 持久化消息通常用于不管是否消费者在线,它们都会保证消息会被消费者消费.当消息被确认消费后,会从存储中删除 非持久化消息通 ...