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的代码 ...
随机推荐
- maven 创建后报错
<dependency> <groupId>javax</groupId> <artifactId>javaee-api</artifactId& ...
- [IR] BWT+MTF+AC
BWT (Burrows–Wheeler_transform)数据转换算法 MTF(Move-to-front transform)数据转换 基于统计的压缩算法:游程编码 良心PPT: bwt_bas ...
- 解决Centos crontab没有按时运行的问题
我装了centos,用一点一直无法搞定,就是定时关机.我只是想做这一件事: 每天凌晨1点自动关机 0 1 * * * shutdown now -h 然而,无论我如何设置,都是失败. 每当我睡了一觉, ...
- js事件循环
之前有看过一些事件循环的博客,不过一阵子没看就发现自己忘光了,所以决定来自己写一个博客总结下! 首先,我们来解释下事件循环是个什么东西: 就我们所知,浏览器的js是单线程的,也就是说,在同一时刻,最多 ...
- DNS全局负载均衡(GSLB)基本原理
原理 DNS全局负载均衡通过智能DNS解析来实现,通常在不同的地区设立多个数据中心,每个数据中心又使用多个运营商的线路.目前很多DNS服务商都提供了智能DNS服务,智能DNS通常是利用各运营商分省IP ...
- Chapter 7:Statistical-Model-Based Methods
作者:桂. 时间:2017-05-25 10:14:21 主要是<Speech enhancement: theory and practice>的读书笔记,全部内容可以点击这里. 书中 ...
- Aop初步了解
AOP(aspect-oriented programming) aspect是一种新型的模块化机制,用来描述分散在对象,类或函数中横切关注点.从关注点中分离出横切关注点是面向切面的程序设计的核心概念 ...
- 最全Oracle环境搭建之.NET程序员初遇Oracle
前言:如果你习惯了傻瓜式的一步步安装,那么Oracle和.NET搭配,绝对会让你头痛不已. 目前我不敢保证自己理解的Oracle理论部分100%正确,但环境安装过程一定可以收藏以备不时之需. 路这么长 ...
- MHD simulation with python
这里为MHD(磁流体力学)模拟做一些准备,可能现在学习物理的人从某种程度上也得变成程序猿吧.MHD模拟面临的问题是求解一个三维的偏微分方程组,其中涉及的流体元格点非常多.所以希望先从简单的一维模型出发 ...
- JAVA优雅停机的实现
最近在项目中需要写一个数据转换引擎服务,每过5分钟同步一次数据.具体实现是启动engine server后会初始化一个ScheduledExecutorService和一个ThreadPoolExec ...