渲染相关

列表渲染 与 条件渲染

Vue 中的常见的渲染有 列表渲染 和 条件渲染

所谓条件渲染，则是通过添加一定的逻辑条件来进行 Dom 元素的操作

  • v-if
  • v-else
  • v-else-if
<body>

    <div id="app">

        <div v-if="ok">{{message}}</div>

        <div v-else>世界，你好</div>

        <button @click="handleClick" type="button">Click</button>

        <ul>

            <li v-for="(item, index) in items" :key="index">{{item}}</li>

        </ul>

        <ul>

            <li v-for="(item, index) in object" :key="index">{{item}}</li>

        </ul>

        <ul>

            <li v-for="(item,key, index) in object" :key="index">

                {{item}} - {{key}} - {{index}}

            </li>

        </ul>

    </div>

    <script>

        new Vue({

            el: "#app",

            data: {

                ok: true,

                message: "hello world",

                items: ['A', 'B', 'C', 'D'],

                object: {

                    firstName: "hippie",

                    lastName: "zhou",

                    age: 26

                }

            }, methods: {

                handleClick: function () {

                    this.ok = !this.ok

                }

            }

        })

    </script>

</body>

条件渲染支持对象、集合等数据类型。建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。因为它是 Vue 识别节点的一个通用机制，key 并不与 v-for 特别关联，key 还具有其他用途，我们将在后面的指南中看到其他用途。

当 v-for 和 v-if 处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。

数组更新检测

变异方法：

  • push()：往数组最后面添加一个元素，成功返回当前数组的长度
  • pop()：删除数组的最后一个元素，成功返回删除元素的值
  • shift()：删除数组的第一个元素，成功返回删除元素的值
  • unshift()： 往数组最前面添加一个元素，成功返回当前数组的长度
  • splice()：有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除后想要在原位置替换的值（可选）
  • sort()：使数组按照字符编码默认从小到大排序,成功返回排序后的数组
  • reverse()：将数组倒序，成功返回倒序后的数组

非变异方法：

  • filter()
  • concat()
  • slice()

这些不会改变原始数组，但总是返回一个新数组。

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

  • 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
  • 当你修改数组的长度时，例如：vm.items.length = newLength

对象更改检测注意事项

Vue 不能检测对象属性的添加或删除；对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。

事件处理

定义与使用

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<body>

    <div id="app">

        <button v-on:click="handleNoArgsEvent">无参数事件</button>

        <button @click="handleNoArgsEvent">简写方式</button>

        <button @click="handleWithArgsEvent(1)">有参数事件</button>

    </div>

    <script>

        new Vue({

            el: "#app",

            methods: {

                handleNoArgsEvent: function () {

                    alert("hello world")

                },

                handleWithArgsEvent: function (index) {

                    alert(index)

                }

            }

        })

    </script>

</body>

事件修饰符

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive
<!-- 阻止单击事件继续传播 -->

<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->

<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->

<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->

<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->

<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->

<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->

<!-- 即事件不是从内部元素触发的 -->

<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->

<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->

<!-- 而不会等待 `onScroll` 完成  -->

<!-- 这其中包含 `event.preventDefault()` 的情况 -->

<div v-on:scroll.passive="onScroll">...</div>

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->

<input v-on:keyup.13="submit">

<!-- 同上 -->

<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->

<input @keyup.enter="submit">

全部的按键别名：

  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

系统修饰键

  • .ctrl
  • .alt
  • .shift
  • .meta

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

.exact 修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->

<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->

<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->

<button @click.exact="onClick">A</button>

鼠标按钮修饰符

  • .left
  • .right
  • .middle

Vue 系列之 渲染与事件处理的更多相关文章

  1. 【vue系列之三】从一个vue-pdf-shower，说说vue组件和npm包

    前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...

  2. Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

  3. 手写 Vue 系列 之 Vue1.x

    前言 前面我们用 12 篇文章详细讲解了 Vue2 的框架源码.接下来我们就开始手写 Vue 系列,写一个自己的 Vue 框架,用最简单的代码实现 Vue 的核心功能,进一步理解 Vue 核心原理. ...

  4. 手写 Vue 系列 之 从 Vue1 升级到 Vue2

    前言 上一篇文章 手写 Vue 系列 之 Vue1.x 带大家从零开始实现了 Vue1 的核心原理,包括如下功能: 数据响应式拦截 普通对象 数组 数据响应式更新 依赖收集 Dep Watcher 编 ...

  5. Vue系列：在vux的popup组件中使用百度地图遇到显示不全的问题

    问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...

  6. Egg + Vue 服务端渲染工程化实现

    在实现 egg + vue 服务端渲染工程化实现之前,我们先来看看前面两篇关于Webpack构建和Egg的文章: 在 Webpack工程化解决方案easywebpack 文章中我们提到了基于 Vue ...

  7. [js高手之路] vue系列教程 - 事件专题(4)

    本文主要讲解事件冒泡,事件绑定的简写,事件默认行为,按键码等一系列与事件相关的知识. 一.事件绑定的简写,@事件类型.  之前我的[js高手之路] vue系列教程 - vue的事件绑定与方法(2) 用 ...

  8. vue + element 动态渲染、移除表单并添加验证

    博客地址:https://ainyi.com/66 又接到新需求了吧~~ 背景 在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加.移除表单,更加个性化的效果. 常见于填写个人信息.附加内 ...

  9. Vue(服务端渲染)

    一.前言 1.服务端渲染图解                                                 2.简介服务端渲染                             ...

随机推荐

  1. noip第17课资料

  2. EBS CAS　SSO测试

    https://wiki.jasig.org/display/CAS/CASifying+Oracle+Portal https://wenku.baidu.com/view/5f110a85b9d5 ...

  3. RunC容器逃逸漏洞席卷业界，网易云如何做到实力修复？

    近日,业界爆出的runC容器越权逃逸漏洞CVE-2019-5736,席卷了整个基于runC的容器云领域,大量云计算厂商和采用容器云的企业受到影响.网易云方面透露,经过技术团队的紧急应对,网易云上的容器 ...

  4. 获取post请求数据工具类

    package com.ccidit.features.otherFunctions.util; import java.io.BufferedReader; import java.io.IOExc ...

  5. mybatis环境配置与入门例子

    1.jar包的导入 mybatis需要jar包:mybatis-3.4.6.jar mysql驱动jar包:mysql-connector-java-5.1.34.-bin.jar 日志记录jar包: ...

  6. 纯CSS下拉菜单（希望对有需要的小伙伴有所帮助）

    效果截图(颜色有点丑,请无视): <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  7. Django创建和配置文件

    首先我们随便找一个文件 shift+鼠标右键 点击打开 Powershell 窗口 然后输入命令  django-admin startproject 项目名字 输入cd day   进入这个项目下 ...

  8. CUDA driver version is insufficient for CUDA runtime version 解决

    配置ubuntu17.1+CUDA9.2的caffe环境,CUDA sample编译完成,执行到./deviceQuery时报错:CUDA driver version is insufficient ...

  9. java中微信统一下单采坑（app微信支付）

    app支付前java后台统一下单文档:https://pay.weixin.qq.com/wiki/doc/api/app/app.php?chapter=9_1 微信支付接口签名校验工具:https ...

  10. vsftpd3.0.3配置

    2019.2.18更新 证实可用!!! 原文: 这两天测试在Ubuntu18.04上搭建一个ftp服务器,搜了一下大家都在用vsftpd,于是根据这个大佬的基础教程搭了一个,搭完一切正常,在windo ...