事件

事件绑定

在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. maven 创建后报错

    <dependency> <groupId>javax</groupId> <artifactId>javaee-api</artifactId& ...

  2. [IR] BWT+MTF+AC

    BWT (Burrows–Wheeler_transform)数据转换算法 MTF(Move-to-front transform)数据转换 基于统计的压缩算法:游程编码 良心PPT: bwt_bas ...

  3. 解决Centos crontab没有按时运行的问题

    我装了centos,用一点一直无法搞定,就是定时关机.我只是想做这一件事: 每天凌晨1点自动关机 0 1 * * * shutdown now -h 然而,无论我如何设置,都是失败. 每当我睡了一觉, ...

  4. js事件循环

    之前有看过一些事件循环的博客,不过一阵子没看就发现自己忘光了,所以决定来自己写一个博客总结下! 首先,我们来解释下事件循环是个什么东西: 就我们所知,浏览器的js是单线程的,也就是说,在同一时刻,最多 ...

  5. DNS全局负载均衡(GSLB)基本原理

    原理 DNS全局负载均衡通过智能DNS解析来实现,通常在不同的地区设立多个数据中心,每个数据中心又使用多个运营商的线路.目前很多DNS服务商都提供了智能DNS服务,智能DNS通常是利用各运营商分省IP ...

  6. Chapter 7:Statistical-Model-Based Methods

    作者:桂. 时间:2017-05-25  10:14:21 主要是<Speech enhancement: theory and practice>的读书笔记,全部内容可以点击这里. 书中 ...

  7. Aop初步了解

    AOP(aspect-oriented programming) aspect是一种新型的模块化机制,用来描述分散在对象,类或函数中横切关注点.从关注点中分离出横切关注点是面向切面的程序设计的核心概念 ...

  8. 最全Oracle环境搭建之.NET程序员初遇Oracle

    前言:如果你习惯了傻瓜式的一步步安装,那么Oracle和.NET搭配,绝对会让你头痛不已. 目前我不敢保证自己理解的Oracle理论部分100%正确,但环境安装过程一定可以收藏以备不时之需. 路这么长 ...

  9. MHD simulation with python

    这里为MHD(磁流体力学)模拟做一些准备,可能现在学习物理的人从某种程度上也得变成程序猿吧.MHD模拟面临的问题是求解一个三维的偏微分方程组,其中涉及的流体元格点非常多.所以希望先从简单的一维模型出发 ...

  10. JAVA优雅停机的实现

    最近在项目中需要写一个数据转换引擎服务,每过5分钟同步一次数据.具体实现是启动engine server后会初始化一个ScheduledExecutorService和一个ThreadPoolExec ...