后端开发教程 - Java、Spring Boot 实战 - msg200.com
Vue 速查表 3（高级）
目录
嘿 DEV.to 社区！
因此，由于 Vue 备忘单系列受到了很多关注，我决定继续发布这些系列，而且这一系列会更高级一些，因为几乎所有主要的初学者内容都在之前的系列中涵盖了。
部分说明和代码示例来自 Vue.js 官网。访问 Vue.js
本文的日语版本可在https://qiita.com/_masa_u/items/d53275218cd381e1a810查阅。感谢
享受！
目录
Mixins
简单来说，mixin 只是组件的一部分，存储在单独的文件中，以便可以在其他组件中再次使用。
混合宏看起来是这样的：
// define a mixin object
export const myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('Hello from mixin!')
}
}
}
如您所见，它有一个created钩子和一个名为的方法hello，因此现在可以在组件中使用此混合，如下所示：
<script>
import { myMixin } from './myMixin.js';
export default {
mixins: [myMixin]
}
</script>
因此，这将像您在该组件中编写了那些钩子和方法一样运行。
Mixin 选项合并
如果组件自赋值的属性或方法与 mixin 之间存在任何冲突，则组件本身将具有优先权，请参见：
let mixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
}
}
new Vue({
mixins: [mixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
}
},
created: function () {
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
}
})
Vue 处理覆盖的方式可以改变，但我们将在另一个备忘单中介绍这一点。
全局混合
全局 mixin 与普通 mixin 没有什么不同，不同之处在于它的影响范围将包括创建的所有 Vue 实例。
import Vue from 'vue';
Vue.mixin({
methods: {
sayHi() {
alert('Salam!');
}
}
});
const app = new Vue({
el: '#app'
});
该方法sayHi适用于上述代码中的每个组件和 Vue 实例。
自定义指令
众所周知，指令是 Vue 处理 DOM 的方式。例如v-model或v-show就是指令。
为了定义指令，您可以执行以下操作：
<script>
export default {
directives: {
focus: {
inserted: function (el) {
el.focus()
}
}
}
}
</script>
该focus指令将可用，v-focus并且可以像这样使用：
<input v-focus />
因此，组件渲染后输入就会得到聚焦。
自定义全局指令
为了使您的自定义指令在整个 Vue 实例和全局范围内可用，您可以像下面这样定义它：
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
过滤器
过滤器的作用是修改值并返回。
它们可以在 mustaches 和 v-bind 指令中使用。
要在组件中定义过滤器，您可以按如下方式操作：
<script>
export default {
filters: {
capitalize: function(value) {
if (!value) return '';
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
};
</script>
然后可以按如下方式使用大写过滤器：
<span>{{ msg | capitalize }}</span>
或者像下面这样使用 v-bind：
<a v-bind:href="url | capitalize">My capitalized link!</a>
全局过滤器
全局过滤器与普通过滤器没有什么不同，但它们将被定义一次并且可以在每个 Vue 实例或组件中使用。
import Vue from 'vue';
Vue.filter('focus', {
capitalize: function(value) {
if (!value) return '';
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
}
});
路由器
Vue router 用于使用 Vue 在客户端设计路由系统。
路由器入门
要开始使用路由器，您需要安装它。步骤如下：
路由器安装
建议使用 npm 安装：
npm i vue-router --save
也可以通过包含该文件来安装：
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
安装完成后，是时候告诉 Vue 使用路由器了。为此，您可以执行以下操作：
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
绑定到路由的组件应该在页面的某个位置渲染。声明如下：
<div id="app">
<div>
Hello World!
</div>
<router-view></router-view>
</div>
定义路线
每个路由都有其独特的组件绑定。您可以按如下方式定义您的路由：
const routes = [
{ path: '/foo', component: require('./path/to/foo/component') },
{ path: '/bar', component: require('./path/to/bar/component') }
];
const router = new VueRouter({
routes // short for `routes: routes`
});
如果您希望将路线推送到用户浏览器的历史记录中，您应该按如下方式激活历史记录模式：
const router = new VueRouter({
mode: 'history',
routes // short for `routes: routes`
});
然后将你的路线附加到你的视图实例：
const app = new Vue({
router
}).$mount('#app');
注意：如果您使用历史记录模式，为了将所有请求重定向到index.html文件，以便 Vue 可以处理其余部分，您应该配置 Web 服务器。除非通过刷新页面的浏览器，否则它会返回 404，因为该页面实际上并不存在于服务器上。
路由器链接
路由器链接很特殊，因为它们不会刷新页面，而只获取所需的组件（并在历史模式下将 URL 推送到历史记录），因此它看起来像一个新页面。
您应该使用如下方式，而不是超链接（a标签） ：router-link
<router-link to="/foo">Go to foo</router-link>
高级路由
Vue 路由器不仅仅是一些简单的路由，它还提供了一些处理路由的好方法。
动态路由
动态路由用于将一系列路由与需要获取的一些参数进行匹配。
动态路由的定义与普通路由相同，但在动态段的开头有一个冒号：
const routes = [
{ path: '/user/:username', component: require('./path/to/user/component') },
];
现在通过上述所有链接的路线如/user/adnanbabakan、/user/dev/或/user/vue均有效。
可以username在路由组件中访问，如下所示：
<div>This is {{ $route.params.username }}'s profile!</a>
响应动态路由的参数变化
考虑上面的例子。如果用户从 移动/user/adnanbabakan到/user/devVue，则不会销毁前一个实例，因为它已经是再次渲染的相同组件了，因此生命周期钩子不会被调用来响应任何参数更改，您可以$route像
这样监视对象：
<script>
export default {
watch: {
$route(to, from) {
}
}
};
</script>
404 路线
每个网站都需要一个完善的 404 路由。在 Vue Router 中，我们可以*在路由末尾定义一个星号路由，这样它就能捕获所有未定义的错误。
警告：星号路由应定义在任何其他路由的末尾，且位于其后。否则它会匹配其他所有路由，从而破坏你的路由系统。
为此，请查看下面的代码：
const routes = [
// ... Any other routes ...
{ path: '*', component: require('./path/to/404/component') },
];
星号路线
星号可用于匹配其他类型的动态路由。动态路由只能匹配两个斜杠之间的动态段/，而星号可以匹配更多内容。
看看下面的路线：
const routes = [
{ path: '/user-*', component: require('./path/to/user/component') },
];
因此通过上面的路由可以渲染诸如/user-adnan和之类的路由。/user-dev
通过使用下面的路由，$route.params将有一个名为 的属性，pathMatch该属性将包含与星号匹配的部分。
例如，$route.params.pathMatch在页面/user-adnan中将返回adnan。
命名路线
命名路线用于通过较短的名称访问长路线模式。
想象一下你有一个这样的模式：
const routes = [
{
path: '/user/profile/setting/',
component: require('./path/to/user/component')
}
];
您可以像这样为其定义一个名称：
const routes = [
{
path: '/user/profile/setting/',
component: require('./path/to/user/component'),
name: 'settings'
}
];
现在你的链接可以像这样：
<router-link :to='{name: "settings"}'>
Profile settings
</router-link>
而不是这样：
<router-link to="/user/profile/setting/">
Profile settings
</router-link>
注意：将对象传递给to属性时，您应该绑定它。
带参数的命名路由
有些路由可能包含参数，正如我们上面的例子所示。你也可以为它们定义一个名称。
例如以下路线：
const routes = [
{
path: '/posts/from/:username',
component: require('./path/to/posts/component'),
}
];
你可以拥有这个：
const routes = [
{
path: '/posts/from/:username',
component: require('./path/to/posts/component'),
name: 'posts'
}
];
为了创建此链接，您可以使用以下代码：
<router-link :to='{name: "posts", params: {username: "adnanbabakan"}}'>
Profile settings
</router-link>
程序化导航
正如你之前在本小抄中读到的，你可以使用创建路由器链接，<router-link></router-link>但是如果你需要以编程方式重定向用户，该怎么办？你可以使用以下代码来实现：
router.push('/foo');
此代码会将您的用户重定向至/foo。这尤其适用于某些情况，例如登录后重定向。
程序化命名导航
您还可以使用router.push()命名路线，如下所示：
router.push({name: 'myRoute'});
使用参数进行编程导航
也router.push()可以使用参数进行重定向，如下所示：
router.push({name: 'myRoute', params: {paramOne: 'Hello', paramTwo: 'Salam'}});
路由重定向
可以将路由定义为相互重定向。像这样：
const routes = [
{
path: '/foo',
redirect: '/bar'
}
];
路由命名重定向
路由也可以重定向到命名路由，如下所示：
const routes = [
{
path: '/foo',
redirect: { name: 'myRoute' }
}
];
动态路由重定向
可以使用函数评估目的地来重定向路线，如下所示：
const routes = [
{
path: '/foo',
redirect: to => {
// the function receives the target route as the argument
// return redirect path/location here.
}
}
];
带参数的路由重定向
如果目标路线有参数，它也可以传递到目的地：
const routes = [
{
path: '/profile/:username',
redirect: '/user/:username'
}
];
路由别名
路由别名意味着一条路由可以有多个可供访问的地址。
例如：
const routes = [
{
path: '/foo',
alias: '/bar'
}
];
/foo现在也可以访问该路线/bar/了。
一个路由也可以有多个别名：
const routes = [
{
path: '/foo',
alias: ['/bar', '/baz']
}
];
在这里查看我的免费 Node.js Essentials 电子书：
文章来源：https://dev.to/adnanbabakan/vue-cheat-sheet-3-advanced-4khj