【vue核心技术实战精讲】1.6 - 1.8 VUE 指令 (中)

文章目录

前言

上节,我们学习了


本节内容

  • Vue指令之v-on事件处理
  • Vue指令之事件修饰符
  • Vue指令之v-for列表渲染

1、v-on

  • 缩写@

  • 预期Function | Inline Statement | Object

  • 参数event

使用v-on好处
  • 轻松定位在 JavaScript 代码里对应的方法

  • 无须手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。

  • 当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何清理它们。

js 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-on事件绑定</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .active{
            background-color: green;
        }
    </style>
</head>

<body>
    <div id='app'>
        <h3>{{num}}</h3>
        <button v-on:click="handleClick">+1</button>
        <div class='box' :class='{active:isActive}'></div>
        <button @click='changeClick'>切换</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                num:0,
                isActive:false
            },
            methods: {
            //handleClick:function (){ 
            //简写如下
                handleClick(){
                    this.num+=1;
                },
                changeClick(){
                  this.isActive = !this.isActive;
                },
                submit(){
                    alert(1);
                }
            },
        })
    </script>
</body>

</html>
效果

2、事件修饰符

  • 修饰符

    • .stop - 调用 event.stopPropagation()
    • .prevent - 调用 event.preventDefault()
    • .capture - 添加事件侦听器时使用 capture 模式。
    • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
    • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
    • .native - 监听组件根元素的原生事件。
    • .once - 只触发一次回调。
    • .left - (2.2.0) 只当点击鼠标左键时触发。
    • .right - (2.2.0) 只当点击鼠标右键时触发。
    • .middle - (2.2.0) 只当点击鼠标中键时触发。
    • .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
  • 用法

    绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。

    用在普通元素上时,只能监听原生 DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件

    在监听原生 DOM 事件时,方法以事件为唯一的参数。如果使用内联语句,语句可以访问一个 $event property:v-on:click="handle('ok', $event)"

    2.4.0 开始,v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时,是不支持任何修饰器的。

2.1、按键码 (已废弃,不用研究)

keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。

使用 keyCode attribute 也是允许的:

js 复制代码
<input v-on:keyup.13="submit">

为了在必要的情况下支持旧浏览器,Vue 提供了绝大多数常用的按键码的别名:

  • .enter
  • .tab
  • .delete (捕获"删除"和"退格"键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
示例
js 复制代码
    <div id='app'>
        <h3>{{num}}</h3>
        <button v-on:click.once="handleClick">+1</button>
        <div class='box' :class='{active:isActive}'></div>
        <button @click='changeClick'>切换</button>
        <input v-on:keyup.up="submit">
    </div>
效果
  • webstorm 自带的浏览器keyCode 失效
  • 谷歌浏览器keyCode 正常
    `

3、v-for 列表渲染

  • 预期Array | Object | number | string | Iterable (2.6 新增)

  • 用法

基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法 alias in expression,为当前遍历的元素提供别名:

js 复制代码
<div v-for="item in items">
  {{ item.text }}
</div>
另外也可以为数组索引指定别名 (或者用于对象的键):
js 复制代码
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>

v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素,你需要用特殊 attribute key 来提供一个 排序提示

js 复制代码
<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

从 2.6 起,v-for 也可以在实现了可迭代协议的值上使用,包括原生的 MapSet。不过应该注意的是 Vue 2.x 目前并不支持可响应的 MapSet 值,所以无法自动探测变更。

当和 v-if 一起使用时,v-for 的优先级比 v-if 更高。详见列表渲染教程

`v-for` 的详细用法可以通过以下链接查看教程详细说明。
示例
js 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-on事件绑定</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .active {
            background-color: green;
        }
    </style>
</head>

<body>
    <div id='app'>
        <div>
            <ul>
                <li v-for = '(item,index) in menus' :key = 'item.id'>
                    <h3>{{index}} - id:{{item.id}} 菜名:{{item.name}}</h3>
                </li>
            </ul>
            <ol>
                <li v-for = "(val,key) in obj" :key='key'>
                    {{key}}---{{val}}
                </li>
            </ol>
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                menus:[
                    {id:1,name:'大腰子'},
                    {id:2,name:'烤鸡翅'},
                    {id:3,name:'烤韭菜'},
                    {id:4,name:'烤大蒜'},
                ],
                obj:{
                    title:'hello 循环',
                    author:'小马哥'
                }
            },
            methods: {
            },
        })
    </script>
</body>

</html>
效果

相关推荐
GIS程序媛—椰子16 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_00123 分钟前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端25 分钟前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x29 分钟前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
木舟100929 分钟前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤439140 分钟前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安1 小时前
前端第二次作业
前端·css·css3
啦啦右一1 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习