事件

事件绑定

在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}}

系统提供过滤器(部分):

  1. uppercase   eg:{{'welcome'|uppercase}}  转大写
  2. lowercase    转小写
  3. capitalize     首字母大写
  4. currency  钱

  

vue基础01的更多相关文章

  1. Vue基础及脚手架环境搭建

    From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...

  2. Vue基础之Vue的模板语法

    Vue基础之Vue的模板语法 数据绑定 01 数据绑定最常见的形式就是使用插值表达式(两个大括号!)[也就是小胡子语法!mustache] <body> <!-- Vue.js的应用 ...

  3. Vue基础之生命周期函数[残缺版]!

    Vue基础之生命周期函数[残缺版]! 为什么说是残缺版呢?! 因为有一些周期函数我并没有学到!所以是残缺版! 01 beforeCreate //在实例初始化之后,数据观测 (data observe ...

  4. javascript基础01

    javascript基础01 Javascript能做些什么? 给予页面灵魂,让页面可以动起来,包括动态的数据,动态的标签,动态的样式等等. 如实现到轮播图.拖拽.放大镜等,而动态的数据就好比不像没有 ...

  5. Androd核心基础01

    Androd核心基础01包含的主要内容如下 Android版本简介 Android体系结构 JVM和DVM的区别 常见adb命令操作 Android工程目录结构 点击事件的四种形式 电话拨号器Demo ...

  6. java基础学习05(面向对象基础01)

    面向对象基础01 1.理解面向对象的概念 2.掌握类与对象的概念3.掌握类的封装性4.掌握类构造方法的使用 实现的目标 1.类与对象的关系.定义.使用 2.对象的创建格式,可以创建多个对象3.对象的内 ...

  7. Linux基础01 学会使用命令帮助

    Linux基础01 学会使用命令帮助 概述 在linux终端,面对命令不知道怎么用,或不记得命令的拼写及参数时,我们需要求助于系统的帮助文档:linux系统内置的帮助文档很详细,通常能解决我们的问题, ...

  8. 可满足性模块理论(SMT)基础 - 01 - 自动机和斯皮尔伯格算术

    可满足性模块理论(SMT)基础 - 01 - 自动机和斯皮尔伯格算术 前言 如果,我们只给出一个数学问题的(比如一道数独题)约束条件,是否有程序可以自动求出一个解? 可满足性模理论(SMT - Sat ...

  9. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

随机推荐

  1. zepto源码分析系列

    如果你也开发移动端web,如果你也用zepto,应该值得你看看.有问题请留言. Zepto源码分析-架构 Zepto源码分析-zepto(DOM)模块 Zepto源码分析-callbacks模块 Ze ...

  2. canvas实现视频截图

    截取视频当前播放画面,直接上源码. <body> <div class="container"> <video id="test" ...

  3. 用 Hexo + Github 搭建自己的博客

    扯在前面 在很久很久以前,一直就想搭建属于自己的一个博客,但由于各种原因,最终都不了了之,恰好最近突然有了兴趣,于是就自己参照网上的教程,搭建了属于自己的博客. 至于为什么要搭建自己的博客了?哈哈,大 ...

  4. 扔掉log4j、log4j2,自己动手实现一个多功能日志记录框架,包含文件,数据库日志写入,实测5W+/秒日志文件写入,2W+/秒数据库日志写入,虽然它现在还没有logback那么强大

    讲到log4j,现在国外基本是没有开发者用这个框架了,原因大致有几点,1.功能太少:2.效率低下:3.线程锁bug等等等各种莫名其妙的bug一直都没解决. 其实最重要的是log4j的作者自己也放弃了l ...

  5. Spring学习(15)--- 基于Java类的配置Bean 之 @Bean & @Scope 注解

    默认@Bean是单例的,但可以使用@Scope注解来覆盖此如下: @Configuration public class MyConfiguration { @Bean @Scope("pr ...

  6. 谈一下我们是怎么做数据库单元测试(Database Unit Test)的

    作者水平有限,如有错误或纰漏,请指出,谢谢. 背景介绍 最近在团队在做release之前的regression,把各个feature分支merge回master之后发现DB的单元测试出现了20多个失败 ...

  7. ThinkPHP 参数绑定原理

    ThinkPHP里有一个参数绑定的功能 想自己试着写一个类似的 主要利用到PHP里的反射的API <?php class Index { public function edit($id=0) ...

  8. jQuery时间日期插件laydate,兼容bootstrap

    解压后,将laydate整个文件放至您项目的任意目录,不要移动其文件结构,它们具有完整的依赖体系. 使用只需在页面引入laydate.js即可. 如果您的网站的js采用合并或模块加载,您需要打开lay ...

  9. javascript对象(1)

    今天说面向对象,嗯,不是那个对象,是这个对象. 接下来就开始今天的内容: 什么是面向对象: 就是把数据及数据的操作方法放在一起,作为一个相互依存的整体----对象.对同类对象抽象出其共性,形成类. 类 ...

  10. Linux 中最常用的目录及文件管理命令

    一.查看文件的命令 对于一个文本文件,在linux中有多种查看方式来获知文件内容,如直接显示整个文本内容.分页查看内容.或者只查看文件开头或末尾的部分内容.在linux可以用不同的命令来实现. 1. ...