vue入门笔记

指令 Directives

v-if、v-else、v-else-if

其中v-else-if在v2.1.0+版本中支持

1
2
3
4
5
6
7
8
9
10
11
12

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-for

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。

遍历数组时第二个参数为当前项的索引。

1

v-for="(item, index) in items"

遍历对象时第二个的参数为键名，第三个参数为索引

1

v-for="(value, key, index) in object"

v-show

带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

v-show 不支持 template 元素，也不支持 v-else。

v-once

该节点的内容不再随着数据更新而更新

v-html

解析输出值中的html

v-bind

绑定数据到property，缩写 :

v-on
绑定事件 缩写 @

钩子 Hook

让用户在不同阶段添加自己的代码

生命周期图示

计算属性与侦听属性 Computed & watch

计算属性

当模板内使用表达式异常复杂时，可以使用computed通过匿名函数返回内容。
Vue会自动绑定对应的属性，当同一个数据名在data和computed中同时存在时以data中的值为准。

不要在选项属性或回调上使用箭头函数，因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

侦听属性

当侦听的数据变动时触发回调。
允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

CSS操作 Class & Style

对象语法

1
2
3

<div v-bind:class="{active: isActive}"></div>
<div v-bind:class="{active: isActive, 'text-danger': hasError}"></div>
<!-- {classname,property} -->

数组语法

1

<div v-bind:class="[activeClass, errorClass]"></div>

数组三元表达式语法

1

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

数组对象语法

1

<div v-bind:class="[{active: isActive}, errorClass]"></div>

Style则改为:style，class和style的语法类似。

从2.3.0开始，可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

1

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。
在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。

模板 Template

Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可：

1
2
3
4
5
6
7
8

<template v-if="loginType === 'username'">
    <label>Username</label>
    <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
    <label>Email</label>
    <input placeholder="Enter your email address" key="email-input">
</template>

v-if vs v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-if 与 v-for 一起使用

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
不推荐同时使用 v-if 和 v-for。请查阅风格指南以获取更多信息。

对象、数组更新

以下数组方法会触发vue的视图更新
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

当使用filter(), concat() 和 slice()等方法时，它们不会修改原数组而总是返回一个新数组。可以使用以下方法去修改

1
2
3

example1.items = example1.items.filter(function (item) {
    return item.message.match(/Foo/)
})

以下操作不会触发视图更新

1
2

vm.user[key]= value
vm.items.length = newLength

对象更新

1
2

Vue.set(vm.userProfile, 'age', 27)
vm.$set(vm.userProfile, 'age', 27)

对象合并

1
2
3
4

vm.userProfile = Object.assign({}, vm.userProfile, {
    age: 27,
    favoriteColor: 'Vue Green'
})

事件 Event

事件修饰符

.stop
阻止冒泡，相当于event.stopPropagation()

.prevent
阻止行为，相当于event.preventDefault()

.capture
元素自身触发的事件先在此处理，然后才交由内部元素进行处理

.self
只当在 event.target 是当前元素自身时触发处理函数

.once
v2.1.4+ 点击事件将只会触发一次

.passive
v2.3.0+ 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成，这其中包含 event.preventDefault() 的情况。

1
2
3
4

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

按键修饰符

1
2
3
4
5
6

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<!-- 只有在 `key` 是 `PageDown` 时调用 `vm.onPageDown()` -->
<input v-on:keyup.page-down="onPageDown">
<!-- 使用 keyCode 特性也是允许的 -->
<input v-on:keyup.13="submit">

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

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

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

.ctrl
.alt
.shift
.meta

1.有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。
2.在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

.exact

v2.5.0+

1
2
3
4
5
6

<!-- 即使 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

可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

1
2

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

组件 Component

组件的data属性必须是一个function,返回一个对象数据

子组件可以通过$emit(‘event’)来调用父级方法

踩坑 Question

如何在axios中使用Toast
最开始尝试了各种toast组件和大部分前端框架（vux、 ant-design-vue、element UI）中的toast组件，都没办法调用
遇到的情况差不多跟这位仁兄一致 传送门

后来尝试使用有赞的vant的toast，突然发现它的按需引用需要安装babel-plugin-import。
尝试安装之后再引用，一切正常

vue项目中使用v-if判断数组长度是，length报错？

在 xxx.length 之前加上一个 xxx !== underfined的判断即可
如 xxx !== underfined && xxx.length > 0

参考资料 Reference Document

介绍 — Vue.js