【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>
效果

相关推荐
码蜂窝编程官方10 分钟前
【含开题报告+文档+PPT+源码】基于SpringBoot+Vue的虎鲸旅游攻略网的设计与实现
java·vue.js·spring boot·后端·spring·旅游
gqkmiss10 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃16 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰20 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye26 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm28 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷1 小时前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子