Vue 系列之 渲染与事件处理
渲染相关
列表渲染 与 条件渲染
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 系列之 渲染与事件处理的更多相关文章
- 【vue系列之三】从一个vue-pdf-shower，说说vue组件和npm包
前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...
- Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...
- 手写 Vue 系列 之 Vue1.x
前言 前面我们用 12 篇文章详细讲解了 Vue2 的框架源码.接下来我们就开始手写 Vue 系列,写一个自己的 Vue 框架,用最简单的代码实现 Vue 的核心功能,进一步理解 Vue 核心原理. ...
- 手写 Vue 系列 之 从 Vue1 升级到 Vue2
前言 上一篇文章 手写 Vue 系列 之 Vue1.x 带大家从零开始实现了 Vue1 的核心原理,包括如下功能: 数据响应式拦截 普通对象 数组 数据响应式更新 依赖收集 Dep Watcher 编 ...
- Vue系列：在vux的popup组件中使用百度地图遇到显示不全的问题
问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...
- Egg + Vue 服务端渲染工程化实现
在实现 egg + vue 服务端渲染工程化实现之前,我们先来看看前面两篇关于Webpack构建和Egg的文章: 在 Webpack工程化解决方案easywebpack 文章中我们提到了基于 Vue ...
- [js高手之路] vue系列教程 - 事件专题(4)
本文主要讲解事件冒泡,事件绑定的简写,事件默认行为,按键码等一系列与事件相关的知识. 一.事件绑定的简写,@事件类型. 之前我的[js高手之路] vue系列教程 - vue的事件绑定与方法(2) 用 ...
- vue + element 动态渲染、移除表单并添加验证
博客地址:https://ainyi.com/66 又接到新需求了吧~~ 背景 在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加.移除表单,更加个性化的效果. 常见于填写个人信息.附加内 ...
- Vue(服务端渲染)
一.前言 1.服务端渲染图解 2.简介服务端渲染 ...
随机推荐
- veri HDL modeisim仿真：test bench文件编写
预编译指令: verilog HDL预编译指令是以" ' "字符开头,而且不需要以";"结尾. 作用:指示在编译verilog hdl源代码前,需要执行哪些操作 ...
- MFC控件的颜色设置
在绘制控件颜色时,控件会发送WM_CTLCOLOR消息给父窗口,父窗口收到消息后,映射到OnCtlColor()函数中处理. 该函数返回一个画刷用于设置子控件的背景颜色,子控件再执行自己的CtlCol ...
- 2018.09.22 上海大学技术分享 - An Introduction To Go Programming Language
老实说笔者学习 Go 的时间并不长,积淀也不深厚,这次因缘巧合,同组的同事以前是上海大学的开源社区推动者之一,同时我们也抱着部分宣传公司和技术分享的意图,更进一步的,也是对所学做一个总结,所以拟定了这 ...
- [UWP]不那么好用的ContentDialog
ContentDialog是UWP开发中最常用的组件之一,一个体验良好的UWP应用很难避免不去使用它.博客园里也有许多的文章介绍如何来利用ContentDialog实现各种自定义样式的弹窗界面.不过实 ...
- 论如何优雅地拿下PHPCMS
作者:J0o1ey 原文来自:论如何优雅地拿下PHPCMS 一.PHPCM PHP是国内领先的网站内容管理系统,同时也是一个开源的PHP开发框架,采用PHP5+MYSQL进行开发,拥有非常 ...
- 写一个shell 快速启动停止你的微服务吧
在这个微服务盛行的时代,docker获得了巨大的成功,因为我们需要在一台服务器装上N个服务. 本文不是想讨论如何使用docker,而是,在一台服务器安装了多个服务后,怎样启动方便的启动服务呢? 一.在 ...
- Typescript 学习笔记七：泛型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- JS特效实现微博评论逻辑
实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 关于 Spring Security 5 默认使用 Password Hash 算法
账户密码存储的安全性是一个很老的话题,但还是会频频发生,一般的做法是 SHA256(userInputpwd+globalsalt+usersalt) 并设置密码时时要求长度与大小写组合,一般这样设计 ...
- mysql 开发进阶篇系列 33 工具篇(mysqlbinlog日志管理工具)
一.概述 由于服务器生成的二进制日志文件以二进制格式保存,所以如果要想检查这些文件的文本格式,就会用到mysqlbinlog日志管理工具. mysqlbinlog的语法如下: mysqlbinlog ...