vue学习笔记01

Posted 2020-09-28

事件

事件绑定

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