首页 > 代码库 > vue学习笔记01

vue学习笔记01

2024-10-29 19:39:38   210人阅读

事件

事件绑定

在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


联系
我们