后端开发教程 - Java、Spring Boot 实战 - msg200.com
Vue 速查表 2
目录
大家好，DEV.to 社区！
这是我之前的 Vue 备忘单的第二部分。
部分说明和代码示例来自 Vue.js 官网。访问 Vue.js
本文的日语版本可在https://qiita.com/_masa_u/items/44db6af7dc0bc48bcc14查阅。感谢
享受！
目录
生命周期钩子
生命周期钩子只是在 Vue 组件期间的特定事件/时间运行的一些函数。
创建钩子之前
在实例初始化之后、数据观察和事件/观察器设置之前立即同步调用。
样本：
let app = new Vue({
beforeCreate() {
console.log('I\'m not created yet');
}
});
创建钩子
实例创建后同步调用。在此阶段，实例已完成选项处理，这意味着以下内容已设置：数据观测、计算属性、方法、监视/事件回调。但是，挂载阶段尚未启动，$el 属性尚不可用。
样本：
let app = new Vue({
created() {
console.log('I\'m created');
}
});
在挂载钩之前
在挂载开始之前调用：渲染函数即将第一次被调用。
注意：服务器端渲染期间不会调用此钩子。
样本：
let app = new Vue({
beforeMount() {
console.log('Let\'s begin!');
}
});
挂勾
在实例挂载后调用，其中el被新创建的 替换vm.$el。如果根实例挂载到文档内元素，vm.$el则调用 mount 时也将位于文档内。
注意：服务器端渲染期间不会调用此钩子。
样本：
let app = new Vue({
mounted() {
console.log('I\'m ready!');
}
});
更新钩子之前
在数据更改时（DOM 更新前）调用。这是在更新前访问现有 DOM 的好时机，例如移除手动添加的事件监听器。
注意：服务器端渲染期间不会调用此钩子，因为服务器端仅执行初始渲染。
样本：
let app = new Vue({
beforeUpdate() {
console.log('Your DOM is about to change. Be careful!');
}
});
更新了钩子
在数据更改导致虚拟 DOM 被重新渲染和修补后调用。
调用此钩子时，组件的 DOM 已经更新，因此您可以在此处执行依赖于 DOM 的操作。但是，大多数情况下，您应该避免在钩子内部更改状态。为了响应状态变化，通常最好使用计算属性或观察器。
注意：服务器端渲染期间不会调用此钩子。
样本：
let app = new Vue({
updated() {
console.log('Hello new DOM!');
}
});
销毁钩子之前
在 Vue 实例销毁前调用。此时实例仍然具有完整的功能。
注意：服务器端渲染期间不会调用此钩子。
样本：
let app = new Vue({
beforeDestroy() {
console.log('Well it\'s the time I think...');
}
});
毁坏的钩子
在 Vue 实例被销毁后调用。调用此钩子时，Vue 实例的所有指令都已解除绑定，所有事件监听器都已移除，并且所有子 Vue 实例也已销毁。
注意：服务器端渲染期间不会调用此钩子。
样本：
let app = new Vue({
destroyed() {
console.log('BOOOOM!');
}
});
活动
当对元素执行特定操作时，会调用事件。
在之前的 Vue 速查表中，我对事件进行了非常基础的描述。这里我将更详细地介绍事件的各个方面。
请记住，这@是的简写v-on:。
可用事件
通过使用，v-on您可以访问所有 JavaScript 事件。以下是一些示例：
<button @click="() => alert('Hello')">Do it</button>
<button @mouseover="() => alert('Hello')">Do it</button>
<button @mouseout="() => alert('Hello')">Do it</button>
<button @contextmenu="() => alert('Hello')">Do it</button>
您还可以submit在表单上进行以下活动：
<form @submit="() => alert('This form is submitted')">
<input type="text" />
</form>
事件修饰符
事件修饰符用于改变事件的某些行为或对其进行更多的控制。
.修饰语是在事件之后添加的。
所以这就是结构v-on:event.modifier或@event.modifier。
修饰符也可以链接起来按照相应的顺序执行，例如：@event.modifier-one.modifier-two
停止修饰符
<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>
防止修改器
<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>
捕获修饰符
<!-- use capture mode when adding the event listener -->
<!-- i.e. an event targeting an inner element is handled here before being handled by that element -->
<div v-on:click.capture="doThis">...</div>
Once 修饰符
<!-- the click event will be triggered at most once -->
<a v-on:click.once="doThis"></a>
自我修改
<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>
被动修改器
<!-- the scroll event's default behavior (scrolling) will happen -->
<!-- immediately, instead of waiting for `onScroll` to complete -->
<!-- in case it contains `event.preventDefault()` -->
<div v-on:scroll.passive="onScroll">...</div>
按键修饰符
监听键盘事件很容易，但检测按下的是哪个键需要按键代码。Vue 提供了一些修饰符，以便在使用键盘事件时监听特定的按键。
这些修饰符可以与任何按键事件一起使用，keydown例如keyup
输入键修饰符
<input @keydown.enter="() => alert('Hey there!')"></input>
Tab 键修饰符
<input @keydown.tab="() => alert('Hey there!')"></input>
删除键修饰符
<input @keydown.delete="() => alert('Hey there!')"></input>
Esc 键修饰符
<input @keydown.esc="() => alert('Hey there!')"></input>
空格键修饰符
<input @keydown.space="() => alert('Hey there!')"></input>
向上键修饰符
<input @keydown.up="() => alert('Hey there!')"></input>
向下键修饰符
<input @keydown.down="() => alert('Hey there!')"></input>
右键修饰符
<input @keydown.right="() => alert('Hey there!')"></input>
左键修饰符
<input @keydown.left="() => alert('Hey there!')"></input>
Home 键修饰符
<input @keydown.home="() => alert('Hey there!')"></input>
结束向下键修饰符
<input @keydown.end="() => alert('Hey there!')"></input>
Ctrl 向下键修饰符
<input @keydown.ctrl="() => alert('Hey there!')"></input>
Alt 向下键修饰符
<input @keydown.alt="() => alert('Hey there!')"></input>
Shift 下键修饰符
<input @keydown.shift="() => alert('Hey there!')"></input>
Meta 向下键修饰符
<input @keydown.meta="() => alert('Hey there!')"></input>
自定义键代码
如果 Vue 没有提供您想要的键的别名，您可以使用其键代码，如下所示：
<input @keydown.49="() => alert('Hey there!')"></input>
键码 49 代表键盘顶部的数字 1。（不是数字键盘）
按键修饰符组合
您可以链接键修饰符以创建组合结构，如下所示：
<input @keydown.ctrl.shift="() => alert('Hey there!')"></input>
精确键修饰符
使用exact将允许您捕获所需的按钮，并且其他任何东西都不能组合。
通过使用下面的代码，如果您按住 shift 并按下 ctrl，它将正常响应：
<input @keydown.ctrl="() => alert('Hey there!')"></input>
但是通过使用下面的代码，唯一需要按下的键是 ctrl：
<input @keydown.exact.ctrl="() => alert('Hey there!')"></input>
成分
组件是可重复使用的 Vue 实例，用于简化代码并以更好的方式拆分代码。
这是一个 Vue 组件：
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
正如您所见，它嵌入了模板以及它使用的数据，并且可以在其他 Vue 组件中使用，如下所示：
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
这将渲染三个彼此无关的不同按钮。它们各自独立运作，并拥有各自的count数据。
重要提示：定义组件时，它data应该是一个返回对象的函数，如果不是，则每个实例将没有自己的数据并且它将被共享。
单文件组件
单文件组件（或 SFC）是位于一个文件中的组件（真的吗？）。
它的语法更简洁，如下所示：
<template>
<div>
</div>
</template>
<script>
export default {
};
</script>
<style scoped>
</style>
注册组件
通过注册组件，您可以在模板中使用它们。
全局组件注册
通过这种方法，您的组件将在每个 Vue 实例中可用（如果您有多个实例）：
import Vue from 'vue';
Vue.component('my-component', require('/path/to/your/component'));
实例范围注册
通过这样做，组件将仅在指定的 Vue 实例中可用：
import Vue from 'vue';
const myComponent = require('/path/to/your/component');
let app = new Vue({
components: {
myComponent
}
});
延迟加载组件注册
这种方法非常酷，因为它不会将您的组件与您的主入口文件捆绑在一起，因此您的网站将加载得更快，并且只需要所需的组件。
import Vue from 'vue';
const myComponent = () => import('./components/myComponent ');
let app = new Vue({
components: {
myComponent
}
});
额外提示：这将提取以数字命名的组件，从 0 开始依次类推。如果您使用 webpack，可以使用魔术注释来更改组件的文件名，如下所示：
import Vue from 'vue';
const myComponent = () => import(/* webpackChunkName: "myComponent" */ './components/myComponent ');
let app = new Vue({
components: {
myComponent
}
});
组件道具
组件可以具有 props，其作用实际上类似于 HTML 标签的属性。
通过这样的组件：
Vue.component('blog-post', {
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
你可以像这样使用它：
<blog-post post-title="hello!"></blog-post>
注意：定义 props 时，最好使用驼峰命名法 (camelCase)，但使用时，请使用短横线命名法 (kebab-case)。虽然在 Vue 中可以将短横线命名法 (kebab-case) 定义的 props 转换为驼峰命名法 (camelCase)，但 IDE 可能会对此感到困惑。
您的单文件组件也可以具有 props：
<template>
<div>
</div>
</template>
<script>
export default {
props: ['myProp'];
};
</script>
<style scoped>
</style>
组件插槽
插槽用于将其他元素或组件嵌入到组件中。
简单插槽
简单插槽是未命名的插槽，在模板中的使用方式如下：
<a :href="url" class="strange-class"><slot></slot></a>
定义上述模板后，假设组件名称为navigation-link并且url为 prop，您可以按如下方式使用它：
<navigation-link url="/my-profile">Your profile</navigation-link>
正如您所见，我们的组件内部有一个文本，它将被插入而不是<slot></slot>。
命名插槽
命名插槽与未命名插槽略有不同。
通过定义如下的组件base-layout：
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
你可以像这样使用它：
<base-layout>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</base-layout>
带有的模板v-slot:slot-name将被放置在组件中定义的各自插槽中，其他模板将被放置在<slot></slot>未命名的插槽中。
注意default：实际上可以使用如下名称访问未命名的插槽
<base-layout>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<template v-slot:default>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</template>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</base-layout>
作用域插槽
插槽可以访问其父级道具，为了避免这样的事情（如果需要），您可以定义如下所示的插槽道具：
<span>
<slot v-bind:user="user">
{{ user.lastName }}
</slot>
</span>
使用时：
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</current-user>
此插槽将使用user组件中可用的插槽，而不是父组件中可用的插槽。
在这里查看我的免费 Node.js Essentials 电子书：
文章来源：https://dev.to/adnanbabakan/vue-cheat-sheet-2-5aj8