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的代码 ...
随机推荐
- zepto源码分析系列
如果你也开发移动端web,如果你也用zepto,应该值得你看看.有问题请留言. Zepto源码分析-架构 Zepto源码分析-zepto(DOM)模块 Zepto源码分析-callbacks模块 Ze ...
- canvas实现视频截图
截取视频当前播放画面,直接上源码. <body> <div class="container"> <video id="test" ...
- 用 Hexo + Github 搭建自己的博客
扯在前面 在很久很久以前,一直就想搭建属于自己的一个博客,但由于各种原因,最终都不了了之,恰好最近突然有了兴趣,于是就自己参照网上的教程,搭建了属于自己的博客. 至于为什么要搭建自己的博客了?哈哈,大 ...
- 扔掉log4j、log4j2,自己动手实现一个多功能日志记录框架,包含文件,数据库日志写入,实测5W+/秒日志文件写入,2W+/秒数据库日志写入,虽然它现在还没有logback那么强大
讲到log4j,现在国外基本是没有开发者用这个框架了,原因大致有几点,1.功能太少:2.效率低下:3.线程锁bug等等等各种莫名其妙的bug一直都没解决. 其实最重要的是log4j的作者自己也放弃了l ...
- Spring学习(15)--- 基于Java类的配置Bean 之 @Bean & @Scope 注解
默认@Bean是单例的,但可以使用@Scope注解来覆盖此如下: @Configuration public class MyConfiguration { @Bean @Scope("pr ...
- 谈一下我们是怎么做数据库单元测试(Database Unit Test)的
作者水平有限,如有错误或纰漏,请指出,谢谢. 背景介绍 最近在团队在做release之前的regression,把各个feature分支merge回master之后发现DB的单元测试出现了20多个失败 ...
- ThinkPHP 参数绑定原理
ThinkPHP里有一个参数绑定的功能 想自己试着写一个类似的 主要利用到PHP里的反射的API <?php class Index { public function edit($id=0) ...
- jQuery时间日期插件laydate,兼容bootstrap
解压后,将laydate整个文件放至您项目的任意目录,不要移动其文件结构,它们具有完整的依赖体系. 使用只需在页面引入laydate.js即可. 如果您的网站的js采用合并或模块加载,您需要打开lay ...
- javascript对象(1)
今天说面向对象,嗯,不是那个对象,是这个对象. 接下来就开始今天的内容: 什么是面向对象: 就是把数据及数据的操作方法放在一起,作为一个相互依存的整体----对象.对同类对象抽象出其共性,形成类. 类 ...
- Linux 中最常用的目录及文件管理命令
一.查看文件的命令 对于一个文本文件,在linux中有多种查看方式来获知文件内容,如直接显示整个文本内容.分页查看内容.或者只查看文件开头或末尾的部分内容.在linux可以用不同的命令来实现. 1. ...