Vue 学习笔记 - 基础（中）
Vue 学习笔记 - 基础（中）
- 条件渲染
- `v-if`
- `v-show`
- `v-if` vs `v-show`
- v-if 与 v-for 一起使用 (在同一标签上)
- 列表渲染
- `v-for` 遍历数组
- `v-for` 遍历对象
- 维护状态
- 数组更新检测
- 变更方法
- 替换数组
- 注意事项
- 显示过滤/排序后的结果
- 在 v-for 里使用值范围
- 在 上使用 v-for
- `v-for` 与 `v-if` 一同使用
- 在组件上使用 `v-for`
- 事件处理
- 监听事件
- 事件修饰符
- 按键修饰符
- 按键码 keyCode
- 系统修饰键 `2.1.0 新增`
- `.exact` 修饰符 `2.5.0 新增`
- 鼠标按钮修饰符 `2.2.0 新增`
- 为什么在 HTML 中监听事件？
- 表单输入绑定
- 基础用法
- 值绑定
- 修饰符
- 在组件上使用 v-model
- 参考资料
条件渲染
v-if
<p v-if="布尔表达式"> if </p>
<p v-else-if="布尔表达式"> else if </p>
<p v-else> else </p>
- 用
key管理可复用的元素
Vue会尽可能重用相同的元素。如果不想它让重用，可以添加key="唯一身份标识"来区分。
v-show
<h1 v-show="布尔表达式"> 布尔表达式为【真】时显示h1>
v-if vs v-show
v-if 为假时不创建元素。
v-show 为假时只是 style="display: none;"
v-if 与 v-for 一起使用 (在同一标签上)
- 不推荐同时使用。详情看风格指南。
- 一起使用时
v-for优先级更高。详情看列表渲染指南。
列表渲染
v-for 遍历数组
v-for="item in arr" 或 v-for="(item, index ) of arr" :key="item"
| 关键字 | 解释 |
|---|---|
arr |
数组 |
item |
当前遍历到的对象 |
index |
可选的第二参数，当前元素索引 |
in 和 of |
两种写法，没区别 |
:key |
可选。支持字符串和数字。建议始终加上 |
v-for 遍历对象
v-for="(value, key, index) in obj"
只遍历 value 可以省略括号。遍历的结果来自Object.keys(obj)本质还是遍历数组。
维护状态
:key不是for专用的。支持字符串和数字。
数组更新检测
变更方法
Vue封装了这些 push() pop() shift() unshift() splice() sort() reverse()数组方法，所以它们也能触发视图更新。
替换数组
filter()、concat() 和 slice()一般用来替换原数组。Vue实现了一些智能方法，所以用含有相同元素的数组替换原来数组是非常高效的。
注意事项
由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。深入响应式原理中有相关的讨论。
显示过滤/排序后的结果
- 使用
计算属性保护原始数据，返回要用的结果。 - 在
嵌套 v-for循环中计算属性不合适，可以使用方法
在 v-for 里使用值范围
遍历 1 到 10
<div>
<span v-for="(item, index) of 10">{{index}} - {{ item }}span>
div>
在 上使用 v-for
利用template可以渲染一组元素（template自己是不会出现的）
<ul>
<template v-for="n in 3">
<li>{{ n }}</li>
<li>--------</li>
</template>
</ul>
<ul>
<li>1li>
<li>--------li>
<li>2li>
<li>--------li>
<li>3li>
<li>--------li>
ul>
v-for 与 v-if 一同使用
官方不推荐在同一元素上使用 v-if 和 v-for。更多细节可查阅风格指南。
在组件上使用 v-for
自定义组件和普通元素上v-for用法一样。 但：
2.2.0+的版本里key是必须的。- 组件有自己的作用域，所以外面的数据要
v-bind:手动传进去。
<div id="app">
<my_component v-for="item in arr" v-bind:npc="item">my_component>
div>
<script>
var vm = new Vue({
el: '#app',
data: {
arr: [{name:'张三'},{name:'李四'},{name:'王五'}],
},
components: {
'my_component': {
props: ['npc'],
template: ' {{npc.name}} '
}
}
});
script>
<div id="app">
<div> 张三 </div>
<div> 李四 </div>
<div> 王五 </div>
</div>
事件处理
监听事件
v-on 简写 @
v-on:事件名="代码 or 函数名"
| 参数描述 | 示例 (变量or函数都已Vue实例中定义) |
|---|---|
| 表达式 | v-on:click="i++" |
| 函数 | v-on:click="function foo(){i++}" |
| 事件处理方法 | v-on:click="foo" |
| 内联处理器中的方法 | v-on:click="foo(2)" |
| 原始的 DOM 事件 | v-on:click="foo(2, $event)" |
事件修饰符
v-on:事件.修饰符1.修饰符2="事件处理方法"。修饰生效与顺序有关，从左向右依次生效。
| 修饰符 | 说明 |
|---|---|
| v-on:click.stop | 阻止单击事件继续传播 |
| v-on:submit.prevent | 提交事件不再重载页面 |
| v-on:click.stop.prevent | 修饰符可以串联：阻止单击事件继续传播、提交事件不再重载页面 |
| v-on:submit.prevent | 只有修饰符 |
| v-on:click.capture | 添加事件监听器时使用事件捕获模式 即外部元素触发的事件先处理，然后才交由内部元素进行处理 |
| v-on:click.self | 只当在 event.target 是当前元素自身时触发处理函数 |
| v-on:click.once | 2.1.4 新增：点击事件将只会触发一次 |
| v-on:scroll.passive | 2.3.0 新增：滚动事件的默认行为 (即滚动行为) 将会立即触发 而不会等待 onScroll 完成这其中包含 event.preventDefault() 的情况这个 .passive 修饰符尤其能够提升移动端的性能。 .passive 和 .prevent 不要一起使用，.passive 会告诉浏览器你不想阻止事件的默认行为。 |
按键修饰符
在监听键盘事件时可以使用：v-on:keyup.enter="myClick"
如上仅当$event.key 为"Enter"时调用"myClick"方法。完整有效按键名见：MDN: Key Values
按键码 keyCode
keyCode即将废弃，为兼容旧浏览器Vue定义了常用别名：
.enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right
你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
系统修饰键 2.1.0 新增
.ctrl .alt .shift .meta
<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>
系统键要是按住的，如果想单击触发，请使用按键码 keyCode
.exact 修饰符 2.5.0 新增
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>
鼠标按钮修饰符 2.2.0 新增
.left .right .middle
为什么在 HTML 中监听事件？
Vue 只在标签上用v-on绑定事件，方便查找定位。视图销毁，Vue会自动清理事件。代码里也是可以的但尽量避免使用，详见：实例方法 / 事件
表单输入绑定
基础用法
v-model用来进行双向绑定，可用在、无效复选框（单个） 绑定到布尔值 isChecked复选框（多个） 绑定到数组 arr
比如全勾选则arr = [ "a", "b", "c" ]单选按钮 绑定到变量 gender勾选后值为男或女选择框(单选) 绑定到变量 book如：book = "三国"
建议始终添加一个禁用的空值选择框(多选) 1. 绑定到数组 bookList
如：bookList= ["三国","水浒","西游"]
2. 支持v-for动态生成值可用v-bind绑定如：:value="book.name"值绑定
单选按钮，复选框及选择框，v-model绑定的值通常是：字符常量（单个复选框默认布尔）。但也支持通过v-bind:value="xxx"将值绑定到实例的property上。选择输入类型元素 写法 备注 复选框 vm.t === ‘yes’ // 当选中时
vm.t === ‘no’ // 当没有选中时单选按钮 vm.pick === vm.a //选中时 选择框的选项 此处绑定的值是个 内联对象字面量
如果选中book={name:'三国'}修饰符
修饰符 写法 功能 .lazy将数据同步改为 change事件后。v-model默认每次input同步数据。.number输入的值可以被 parseFloat() 解析 ?转为数值:返回原始值.trim去掉首尾空白字符 在组件上使用 v-model
组件上支持使用
v-model，建议先按顺序学习，学完组件后再看：自定义输入组件参考资料
Vue 官方教程基数篇 - 本笔记的学习对象
Vue 官方CLI 官方文档
Vue 官方API 参考
Vue 官方API文档 - 生命周期钩子vue-devtools 编译安装
我的 Vue CLI 学习笔记
Vue 学习笔记 - 基础（上）
Vue 学习笔记 - 基础（中）
Vue 学习笔记 - 基础（下）组件基础
Vue 学习笔记 - 深入了解组件MDN 完整有效按键名 Key Values
千锋教育-李卫民 Vue 渐进式 JavaScript 框架