mirror of
https://github.com/Sevichecc/Urara-Blog.git
synced 2025-04-30 18:59:31 +08:00
436 lines
372 KiB
HTML
436 lines
372 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head prefix="og: https://ogp.me/ns#">
|
||
<meta charset="utf-8" />
|
||
<meta name="generator" content="gh:importantimport/urara" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<link rel="manifest" crossorigin="use-credentials" href="/manifest.webmanifest" />
|
||
<link rel="alternate" type="application/feed+json" href="/feed.json" />
|
||
<link rel="alternate" type="application/atom+xml" href="/atom.xml" />
|
||
<link rel="sitemap" type="application/xml" href="/sitemap.xml" />
|
||
<meta http-equiv="content-security-policy" content=""><title>Vue.js 挑战练习 | Seviche.cc</title><link rel="me" href="https://kongwoo.icu/@seviche" data-svelte="svelte-1592q3p"><link rel="webmention" href="https://webmention.io/seviche.cc/webmention" data-svelte="svelte-1592q3p">
|
||
<link rel="pingback" href="https://webmention.io/seviche.cc/xmlrpc" data-svelte="svelte-1592q3p"><link rel="shortcut icon" href="https://seviche.cc/favicon.png" sizes="48x48" type="image/png" data-svelte="svelte-1kxdj3d"><link rel="apple-touch-icon" href="https://seviche.cc/assets/any@180.png" sizes="180x180" type="image/png" data-svelte="svelte-1kxdj3d"><link rel="icon" href="https://seviche.cc/assets/any@192.png" sizes="192x192" type="image/png" data-svelte="svelte-1kxdj3d"><meta name="theme-color" data-svelte="svelte-1g590ms"><meta name="author" content="酸橘汁腌鱼" data-svelte="svelte-abrfj"><link rel="canonical" href="https://seviche.cc/2022-08-12-vue-challenges" data-svelte="svelte-abrfj">
|
||
|
||
<meta name="keywords" content="Vue" data-svelte="svelte-abrfj">
|
||
<meta name="description" content="我的答案以及相关知识点" data-svelte="svelte-abrfj"><!-- HTML_TAG_START --><link rel="authorization_endpoint" href="https://indieauth.com/auth"><!-- HTML_TAG_END --><!-- HTML_TAG_START --><link rel="token_endpoint" href="https://tokens.indieauth.com/token"><!-- HTML_TAG_END --><!-- HTML_TAG_START --><link rel="me" href="https://github.com/sevichecc" /><!-- HTML_TAG_END --><!-- HTML_TAG_START --><script data-cfasync="false" defer data-do-not-track="true" data-website-id="2403ea30-74ff-4ffa-8264-556b9f3b2897" src="https://hexoverc.vercel.app/umami.js"></script><!-- HTML_TAG_END --><!-- HTML_TAG_START --><script async data-cfasync="false" src="https://cdn.splitbee.io/sb.js"></script><!-- HTML_TAG_END --><!-- HTML_TAG_START --><meta name="baiduspider" content="noindex"><!-- HTML_TAG_END --><!-- HTML_TAG_START --><link rel="microsub" href="https://aperture.p3k.io/microsub/761"><!-- HTML_TAG_END --><meta property="og:site_name" content="Seviche.cc" data-svelte="svelte-1y1uq0g"><meta property="og:locale" content="zh" data-svelte="svelte-1y1uq0g"><meta property="og:type" content="article" data-svelte="svelte-1y1uq0g">
|
||
<meta property="og:title" content="Vue.js 挑战练习" data-svelte="svelte-1y1uq0g">
|
||
<meta property="og:description" content="我的答案以及相关知识点" data-svelte="svelte-1y1uq0g">
|
||
<meta property="og:image" content="https://seviche.cc/assets/maskable@512.png" data-svelte="svelte-1y1uq0g">
|
||
<meta name="twitter:card" content="summary" data-svelte="svelte-1y1uq0g">
|
||
<meta property="article:tag" content="Vue" data-svelte="svelte-1y1uq0g">
|
||
<meta property="og:url" content="https://seviche.cc/2022-08-12-vue-challenges" data-svelte="svelte-1y1uq0g">
|
||
<meta property="article:author" content="酸橘汁腌鱼" data-svelte="svelte-1y1uq0g">
|
||
<meta property="article:published_time" content="2022-08-12T00:00:00.000Z" data-svelte="svelte-1y1uq0g">
|
||
<meta property="article:modified_time" content="2022-08-13T08:21:08.878Z" data-svelte="svelte-1y1uq0g">
|
||
<link href="/_app/immutable/assets/__layout-916a0572.css" rel="stylesheet">
|
||
<link rel="modulepreload" href="/_app/immutable/start-f4ec0a74.js">
|
||
<link rel="modulepreload" href="/_app/immutable/chunks/index-cd58b8d1.js">
|
||
<link rel="modulepreload" href="/_app/immutable/chunks/index-81c83cec.js">
|
||
<link rel="modulepreload" href="/_app/immutable/pages/__layout.svelte-251b91cc.js">
|
||
<link rel="modulepreload" href="/_app/immutable/chunks/title-765c989f.js">
|
||
<link rel="modulepreload" href="/_app/immutable/chunks/posts-c52cb603.js">
|
||
<link rel="modulepreload" href="/_app/immutable/chunks/posts-57ab4794.js">
|
||
<link rel="modulepreload" href="/_app/immutable/chunks/icon-3aa13b39.js">
|
||
<link rel="modulepreload" href="/_app/immutable/pages/2022-08-12-vue-challenges.md-9c2f8b5d.js">
|
||
<link rel="modulepreload" href="/_app/immutable/chunks/post_layout-9085e57e.js">
|
||
<link rel="modulepreload" href="/_app/immutable/chunks/post_card-e7f4525a.js">
|
||
<link rel="modulepreload" href="/_app/immutable/chunks/head-4a058b17.js">
|
||
<link rel="modulepreload" href="/_app/immutable/chunks/footer-1abd9501.js">
|
||
</head>
|
||
|
||
<body itemscope itemtype="https://schema.org/WebPage">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<header id="header" class="fixed z-50 w-screen transition-all duration-500 ease-in-out border-b-2 border-transparent max-h-[4.125rem] false"><div class="navbar"><div class="navbar-start"><div class="dropdown lg:hidden"><label for="navbar-dropdown" tabindex="0" class="btn btn-square btn-ghost"><span class="i-heroicons-outline-menu-alt-1"></span></label>
|
||
<ul id="navbar-dropdown" tabindex="0" class="menu menu-compact dropdown-content bg-base-100 text-base-content shadow-lg rounded-box max-w-52 p-2"><li><a sveltekit:prefetch href="/projects">Projects</a>
|
||
</li><li><a sveltekit:prefetch href="/friends">Friends</a>
|
||
</li><li><a sveltekit:prefetch href="/about">About</a>
|
||
</li></ul></div>
|
||
<div class="swap order-last hidden lg:inline-grid"><button class="swap-on btn btn-ghost text-base font-normal normal-case transition-all duration-200 hidden"></button>
|
||
<ul class="swap-off menu menu-horizontal p-0"><li><a sveltekit:prefetch href="/projects">Projects</a>
|
||
</li><li><a sveltekit:prefetch href="/friends">Friends</a>
|
||
</li><li><a sveltekit:prefetch href="/about">About</a>
|
||
</li></ul></div>
|
||
<a href="/" sveltekit:prefetch class="btn btn-ghost normal-case text-lg">Seviche.cc</a></div>
|
||
<div class="navbar-end">
|
||
|
||
|
||
|
||
|
||
<div id="change-theme" class="dropdown dropdown-end"><div tabindex="0" class="btn btn-square btn-ghost"><span class="i-heroicons-outline-color-swatch"></span></div>
|
||
<ul tabindex="0" class="flex shadow-2xl menu dropdown-content bg-base-100 text-base-content rounded-box w-52 p-2 gap-2 overflow-y-auto max-h-[21.5rem]"><button data-theme="lemonade" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Light</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="night" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Dark</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="cupcake" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Cupcake</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="bumblebee" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Bumblebee</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="emerald" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Emerald</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="corporate" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Corporate</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="valentine" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Valentine</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="synthwave" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Synthwave</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="retro" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Retro</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="cyberpunk" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Cyberpunk</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="halloween" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Halloween</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="garden" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Garden</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="forest" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Forest</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="aqua" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Aqua</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="lofi" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Lo-Fi</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="pastel" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Pastel</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="fantasy" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Fantasy</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="wirefream" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Wireframe</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="black" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Black</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="luxury" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Luxury</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="dracula" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Dracula</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="cmyk" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">CMYK</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="autumn" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Autumn</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="business" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Business</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="acid" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Acid</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="coffee" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Coffee</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button><button data-theme="winter" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Winter</p>
|
||
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
|
||
<div class="bg-secondary w-2 h-4 rounded"></div>
|
||
<div class="bg-accent w-2 h-4 rounded"></div>
|
||
<div class="bg-neutral w-2 h-4 rounded"></div></div>
|
||
</button></ul></div></div></div></header>
|
||
|
||
<button id="totop" aria-label="scroll to top" class="fixed grid group btn btn-circle btn-lg border-none backdrop-blur bottom-6 right-6 z-50 duration-500 ease-in-out btn-ghost bg-base-100/30 md:bg-base-200/30 translate-y-24"><div class="radial-progress text-accent transition-all duration-500 ease-in-out group-hover:text-accent-focus col-start-1 row-start-1" style="--size:4rem; --thickness: 0.25rem; --value:undefined;"></div>
|
||
<div class="border-4 border-base-content/10 group-hover:border-transparent col-start-1 row-start-1 rounded-full w-full h-full p-4 grid duration-500 ease-in-out"><span class="i-heroicons-solid-chevron-up !w-6 !h-6"></span></div></button>
|
||
|
||
<div class="bg-base-100 md:bg-base-200 min-h-screen pt-16 md:pb-8 lg:pb-16">
|
||
|
||
|
||
|
||
<div class="flex flex-col flex-nowrap justify-center xl:flex-row xl:flex-wrap"><div class="flex-1 w-full max-w-screen-md order-first ease-out transform mx-auto xl:mr-0"></div>
|
||
<div class="flex-1 w-full max-w-screen-md xl:order-last ease-out transform mx-auto xl:mr-0"></div>
|
||
<div class="flex-none w-full max-w-screen-md mx-auto xl:mx-0"><article itemscope itemtype="https://schema.org/BlogPosting" itemprop="blogPost" class="card bg-base-100 rounded-none md:rounded-box md:shadow-xl z-10 md:mb-8 lg:mb-16"><div id="bridgy" class="hidden"><a href="https://brid.gy/publish/mastodon">mastodon</a></div>
|
||
|
||
|
||
<div class="card-body gap-0 "><div class="flex flex-col gap-2">
|
||
<div class="flex font-semibold gap-1.5"><a rel="author" class="opacity-75 hover:opacity-100 hover:text-primary duration-500 ease-in-out p-author h-card" href="https://seviche.cc">酸橘汁腌鱼</a>
|
||
<span class="opacity-50">/</span>
|
||
<a href="/2022-08-12-vue-challenges" class="swap hover:swap-active u-url u-uid"><time class="swap-off font-semibold opacity-75 duration-500 ease-in-out mr-auto dt-published" datetime="2022-08-12T00:00:00.000Z" itemprop="datePublished">Fri, Aug 12, 2022</time>
|
||
<time class="swap-on font-semibold text-primary duration-500 ease-in-out mr-auto dt-updated" datetime="2022-08-13T08:21:08.878Z" itemprop="dateModified">Sat, Aug 13, 2022</time></a></div>
|
||
<h1 itemprop="name headline" class="card-title text-3xl mb-8 p-name">Vue.js 挑战练习</h1>
|
||
<p itemprop="description" class="p-summary mb-auto hidden">我的答案以及相关知识点</p></div>
|
||
<main itemprop="articleBody" class="urara-prose prose e-content"><p>最近做了一下这个<a href="https://cn-vuejs-challenges.netlify.app/questions/14-dynamic-css-values/README.zh-CN.html" rel="nofollow noopener noreferrer external" target="_blank">Vue.js 挑战</a>，其中的题目大多出自<a href="https://staging-cn.vuejs.org/" rel="nofollow noopener noreferrer external" target="_blank">Vue3 文档</a>，都不是很难，但涉及到的知识点
|
||
比较琐碎，用来复习挺好的。</p>
|
||
<p>然后这是我的答案和题目涉及到的知识点，除了<a href="###%E9%BC%A0%E6%A0%87%E6%8C%87%E9%92%88">鼠标指针</a>这个部分没通过单元测试之外，其他都都通过了，然后这个鼠标指针为什么没通过单元测试我也没弄明白，试了下其他人的也通过不了，好奇怪……</p>
|
||
<p>这里省去部分题目，主要写答案。</p>
|
||
<h2 id="built-ins"><a href="#built-ins">Built-ins</a></h2>
|
||
<h3 id="dom-传送门"><a href="#dom-传送门">DOM 传送门</a></h3>
|
||
<p>Vue.js 提供了一个内置组件，将其插槽内容渲染到另一个 DOM，成为该 DOM 的一部分。</p>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> msg </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">Hello World</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">teleport</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">to</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">body</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">span</span><span style="color: #89DDFF">>{{</span><span style="color: #EEFFFF"> msg </span><span style="color: #89DDFF">}}</</span><span style="color: #F07178">span</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">teleport</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p>相关知识点 ：<a href="https://v3.cn.vuejs.org/guide/teleport.html#teleport" rel="nofollow noopener noreferrer external" target="_blank">Teleport | Vue.js</a></p>
|
||
<blockquote><p>有时组件模板的一部分逻辑上属于该组件，而从技术角度来看，最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置<sup id="fnref-1"><a href="#fn-1" class="footnote-ref">1</a></sup>。</p></blockquote>
|
||
<ul><li>有点像传送门，将相应元素渲染到制定位置</li>
|
||
<li>to 后面写 css selector</li></ul>
|
||
<h3 id="优化性能的指令"><a href="#优化性能的指令">优化性能的指令</a></h3>
|
||
<p>Vue.js 提供了一个指令，以便只渲染一次元素和组件，并且跳过以后的更新。</p>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #82AAFF">setInterval</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">++</span></div><div class='line'><span style="color: #89DDFF">},</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1000</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">span</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">v-once</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">使它从不更新: </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">}}</</span><span style="color: #F07178">span</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p>相关知识点：<code>Vue-事件修饰符</code></p>
|
||
<h2 id="css-features"><a href="#css-features">CSS Features</a></h2>
|
||
<h3 id="动态-css"><a href="#动态-css">动态 CSS</a></h3>
|
||
<p>Vue 单文件组件 <code><style></code> 模块支持给 CSS 绑定动态值。</p>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> theme </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">red</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> colors </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> [</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">blue</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">yellow</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">red</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">green</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">]</span></div><div class='line'></div><div class='line'><span style="color: #82AAFF">setInterval</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">theme</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">colors</span><span style="color: #F07178">[</span><span style="color: #EEFFFF">Math</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">floor</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">Math</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">random</span><span style="color: #F07178">() </span><span style="color: #89DDFF">*</span><span style="color: #F07178"> </span><span style="color: #F78C6C">4</span><span style="color: #F07178">)]</span></div><div class='line'><span style="color: #89DDFF">},</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1000</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">hello</span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">style</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">scoped</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #546E7A">/* Modify the code to bind the dynamic color */</span></div><div class='line'><span style="color: #FFCB6B">p</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> v-bind(theme)</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">style</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p>相关知识点：<code>v-bind</code> <code>Dynamic Styling动态绑定样式</code></p>
|
||
<h3 id="全局-css"><a href="#全局-css">全局 CSS</a></h3>
|
||
<p>给具有 CSS 作用域的 Vue 单文件组件设置全局 CSS 样式</p>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">Hello Vue.js</span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">style</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">scoped</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #FFCB6B">p</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">font-size</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">20px</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> red</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">text-align</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> center</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">line-height</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">50px</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/* Make it work */</span></div><div class='line'><span style="color: #EEFFFF">:global(</span><span style="color: #FFCB6B">body</span><span style="color: #EEFFFF">) </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">width</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">100vw</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">height</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">100vh</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">background-color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> burlywood</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">style</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p>或者</p>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">Hello Vue.js</span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">style</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">scoped</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #FFCB6B">p</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">font-size</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">20px</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> red</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">text-align</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> center</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">line-height</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">50px</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">style</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">style</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #546E7A">/* Make it work */</span></div><div class='line'><span style="color: #FFCB6B">body</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">width</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">100vw</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">height</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">100vh</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">background-color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> burlywood</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">style</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p>相关知识点：<a href="https://staging-cn.vuejs.org/api/sfc-css-features.html" rel="nofollow noopener noreferrer external" target="_blank">单文件组件 CSS 功能 | Vue.js</a></p>
|
||
<h2 id="components"><a href="#components">Components</a></h2>
|
||
<h3 id="dom-传送门-1"><a href="#dom-传送门-1">DOM 传送门</a></h3>
|
||
<p>见上面</p>
|
||
<h3 id="props-验证"><a href="#props-验证">Props 验证</a></h3>
|
||
<p>验证 Button 组件的 Prop 类型 ，使它只接收: primary | ghost | dashed | link | text | default ，且默认值为 default</p>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> Button </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">./Button.vue</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #82AAFF">defineProps</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">type</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">type</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">String</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">default</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">default</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">validator</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> value </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">;</span><span style="color: #F07178">[</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">primary</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">ghost</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">dashed</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">link</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">text</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">default</span><span style="color: #89DDFF">'</span><span style="color: #F07178">]</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">includes</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">value</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #FFCB6B">Button</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">type</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">dashed</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p>相关知识点：<a href="https://staging-cn.vuejs.org/guide/components/props.html#prop-validation" rel="nofollow noopener noreferrer external" target="_blank">Props | Vue.js</a></p>
|
||
<h3 id="函数式组件"><a href="#函数式组件">函数式组件</a></h3>
|
||
<p>这题我不是很懂，翻了一下大家的解决方案，感觉这个比较能看懂：<a href="https://github.com/webfansplz/vuejs-challenges/issues/322" rel="nofollow noopener noreferrer external" target="_blank">21 - functional component · Issue #322 · webfansplz/vuejs-challenges · GitHub</a></p>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">h</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Implement a functional component :</span></div><div class='line'><span style="color: #546E7A"> * 1. Render the list elements (ul/li) with the list data</span></div><div class='line'><span style="color: #546E7A"> * 2. Change the list item text color to red when clicked.</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> ListComponent </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">props</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> emit </span><span style="color: #89DDFF">})</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">h</span><span style="color: #EEFFFF">(</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #546E7A">// 创建 ul</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">ul</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #546E7A">// 根据传入的props创建li</span></div><div class='line'><span style="color: #EEFFFF"> props</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">list</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">map</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">item</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">name</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">},</span><span style="color: #EEFFFF"> index</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">number</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">h</span><span style="color: #EEFFFF">(</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">li</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #546E7A">// 点击时处罚toggle。并将当前index作为参数传入toggle</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">onClick</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">emit</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">toggle</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> index)</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #546E7A">// 将当前点击的li颜色设置为红色</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">style</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> index </span><span style="color: #89DDFF">===</span><span style="color: #EEFFFF"> props</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">activeIndex </span><span style="color: #89DDFF">?</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">red</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">null</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">},</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #546E7A">// li 默认值</span></div><div class='line'><span style="color: #EEFFFF"> item</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">name</span></div><div class='line'><span style="color: #EEFFFF"> )</span></div><div class='line'><span style="color: #EEFFFF"> )</span></div><div class='line'><span style="color: #EEFFFF"> )</span></div><div class='line'><span style="color: #EEFFFF">ListComponent</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">props </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> [</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">list</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">activeIndex</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">]</span></div><div class='line'><span style="color: #EEFFFF">ListComponent</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">emits </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> [</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">toggle</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">]</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> list </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> [</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">name</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">John</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">},</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">name</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">Doe</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">},</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">name</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">Smith</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #EEFFFF">]</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> activeIndex </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">toggle</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">index</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">number</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">activeIndex</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">index</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">list-component</span><span style="color: #89DDFF"> :</span><span style="color: #C792EA">list</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">list</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> :</span><span style="color: #C792EA">active-index</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">activeIndex</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">toggle</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">toggle</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p>相关知识点：</p>
|
||
<ul><li><a href="https://staging-cn.vuejs.org/guide/extras/render-function.html#functional-components" rel="nofollow noopener noreferrer external" target="_blank">渲染函数 & JSX | Vue.js</a></li>
|
||
<li><a href="https://staging-cn.vuejs.org/guide/extras/rendering-mechanism.html" rel="nofollow noopener noreferrer external" target="_blank">渲染机制 | Vue.js</a></li></ul>
|
||
<h3 id="渲染函数h"><a href="#渲染函数h">渲染函数[h()]</a></h3>
|
||
<blockquote><p>使用 h 渲染函数来实现一个组件。</p></blockquote>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #EEFFFF">import { defineComponent, h } from 'vue'; export default defineComponent({ name: 'MyButton', props: { disabled: { type: Boolean,</span></div><div class='line'><span style="color: #EEFFFF">default: false, }, }, emits: ['custom-click'], setup(props, { emit, slots }) { return () => h( 'button', { disabled:</span></div><div class='line'><span style="color: #EEFFFF">props.disabled, onClick: () => emit('custom-click'), }, slots.default?.() ); }, });</span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<h3 id="树组件"><a href="#树组件">树组件</a></h3>
|
||
<p>实现一个树组件</p>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">defineComponent</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #C792EA">interface</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">TreeData</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">key</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">title</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">children</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">TreeData</span><span style="color: #EEFFFF">[]</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #82AAFF">defineProps</span><span style="color: #89DDFF"><{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">data</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">TreeData</span><span style="color: #EEFFFF">[] </span><span style="color: #89DDFF">}></span><span style="color: #EEFFFF">()</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">ul</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">v-for</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">node</span><span style="color: #89DDFF"> in </span><span style="color: #EEFFFF">data</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">li</span><span style="color: #89DDFF">>{{</span><span style="color: #EEFFFF"> node</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">title </span><span style="color: #89DDFF">}}</</span><span style="color: #F07178">li</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">v-if</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">node</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">children</span><span style="color: #89DDFF"> && </span><span style="color: #EEFFFF">node</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">children</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">length</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> // 用递归的方法来实现</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #FFCB6B">TreeComponent</span><span style="color: #89DDFF"> :</span><span style="color: #C792EA">data</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">node</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">children</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">ul</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p>参考：</p>
|
||
<ul><li><a href="https://github.com/webfansplz/vuejs-challenges/issues/659" rel="nofollow noopener noreferrer external" target="_blank">208 - Tree Component · Issue #659 · webfansplz/vuejs-challenges · GitHub</a></li>
|
||
<li><a href="https://www.digitalocean.com/community/tutorials/vuejs-recursive-components" rel="nofollow noopener noreferrer external" target="_blank">Creating a Recursive Tree Component in Vue.js | DigitalOcean</a>
|
||
相关知识点：<a href="https://staging-cn.vuejs.org/api/sfc-script-setup.html#recursive-components" rel="nofollow noopener noreferrer external" target="_blank">单文件组件 <code><script setup></code> | Vue.js</a></li></ul>
|
||
<h2 id="composable-function"><a href="#composable-function">Composable Function</a></h2>
|
||
<p>本节相关知识点：<a href="https://staging-cn.vuejs.org/guide/reusability/composables.html" rel="nofollow noopener noreferrer external" target="_blank">组合式函数 | Vue.js</a></p>
|
||
<h3 id="切换器"><a href="#切换器">切换器</a></h3>
|
||
<p>尝试编写可组合函数</p>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Implement a composable function that toggles the state</span></div><div class='line'><span style="color: #546E7A"> * Make the function work correctly</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">useToggle</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">init</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">boolean</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">state</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #82AAFF">ref</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">init</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">toggle</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> (</span><span style="color: #EEFFFF">state</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #89DDFF">!</span><span style="color: #EEFFFF">state</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> [</span><span style="color: #EEFFFF">state</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">toggle</span><span style="color: #F07178">]</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">[</span><span style="color: #EEFFFF">state</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> toggle</span><span style="color: #89DDFF">]</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">useToggle</span><span style="color: #EEFFFF">(</span><span style="color: #FF9CAC">false</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">State: </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> state </span><span style="color: #89DDFF">?</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">ON</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">OFF</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}}</</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">toggle</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">Toggle state</span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<h3 id="计数器"><a href="#计数器">计数器</a></h3>
|
||
<p>实现一个计数器</p>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">interface</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">UseCounterOptions</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">min</span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">number</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">max</span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">number</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Implement the composable function</span></div><div class='line'><span style="color: #546E7A"> * Make sure the function works correctly</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">useCounter</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">initialValue </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">0</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> options</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">UseCounterOptions</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{})</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">count</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #82AAFF">ref</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">initialValue</span><span style="color: #F07178">)</span></div><div class='line'></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">inc</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">if</span><span style="color: #F07178"> (</span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">options</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">max</span><span style="color: #F07178">) </span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">++</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">dec</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">if</span><span style="color: #F07178"> (</span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">></span><span style="color: #F07178"> </span><span style="color: #EEFFFF">options</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">min</span><span style="color: #F07178">) </span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">--</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">reset</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> (</span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">initialValue</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">inc</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">dec</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">reset</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> count</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> inc</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> dec</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> reset </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">useCounter</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">0</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">min</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">0</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">max</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">10</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<h3 id="实现本地存储函数"><a href="#实现本地存储函数">实现本地存储函数</a></h3>
|
||
<p>封装一个<code>localStorage</code>API</p>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">watchEffect</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Implement the composable function</span></div><div class='line'><span style="color: #546E7A"> * Make sure the function works correctly</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">useLocalStorage</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">key</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> initialValue</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">any</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #82AAFF">ref</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">localStorage</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">getItem</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">key</span><span style="color: #F07178">) </span><span style="color: #89DDFF">||</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">initialValue</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">watchEffect</span><span style="color: #F07178">(</span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">localStorage</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">setItem</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">key</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> counter </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">useLocalStorage</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">counter</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">// We can get localStorage by triggering the getter:</span></div><div class='line'><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #EEFFFF">(counter</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">// And we can also set localStorage by triggering the setter:</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> update </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> counter</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">++</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">Counter: </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> counter </span><span style="color: #89DDFF">}}</</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">button</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">update</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">Update</span><span style="color: #89DDFF"></</span><span style="color: #F07178">button</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p>相关知识点：</p>
|
||
<ul><li><a href="https://staging-cn.vuejs.org/api/reactivity-core.html#watcheffect" rel="nofollow noopener noreferrer external" target="_blank">watchEffect()</a></li>
|
||
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage" rel="nofollow noopener noreferrer external" target="_blank">Window.localStorage - Web API 接口参考 | MDN</a></li></ul>
|
||
<h3 id="鼠标坐标"><a href="#鼠标坐标">鼠标坐标</a></h3>
|
||
<p>这个没通过单元测试，不知道什么原因，试了下其他人的也没能通过……</p>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">onMounted</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">onUnmounted</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #546E7A">// Implement ...</span></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">useEventListener</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">target</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> event</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> callback</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">onMounted</span><span style="color: #F07178">(</span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #EEFFFF">target</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">addEventListener</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">event</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">callback</span><span style="color: #F07178">))</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">onUnmounted</span><span style="color: #F07178">(</span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #EEFFFF">target</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">removeEventListener</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">event</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">callback</span><span style="color: #F07178">))</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">// Implement ...</span></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">useMouse</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">x</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #82AAFF">ref</span><span style="color: #F07178">(</span><span style="color: #F78C6C">0</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">y</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #82AAFF">ref</span><span style="color: #F07178">(</span><span style="color: #F78C6C">0</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">useEventListener</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">window</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">mousemove</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">e</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">x</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">e</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">pageX</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">y</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">e</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">pageY</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">x</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">y</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> x</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> y </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">useMouse</span><span style="color: #EEFFFF">()</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">Mouse position is at: {{ x }}, {{ y }}</span><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<h2 id="composition-api"><a href="#composition-api">Composition API</a></h2>
|
||
<h3 id="生命周期钩子"><a href="#生命周期钩子">生命周期钩子</a></h3>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">onMounted</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">inject</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">onUnmounted</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> timer </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">inject</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">timer</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">inject</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">count</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #82AAFF">onMounted</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">timer</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">window</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">setInterval</span><span style="color: #F07178">(</span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">++</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">},</span><span style="color: #F07178"> </span><span style="color: #F78C6C">1000</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #546E7A">// 计时器要清除</span></div><div class='line'><span style="color: #82AAFF">onUnmounted</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">window</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">clearInterval</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">timer</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">Child Component: </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">}}</</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<ul><li>相关知识点：<ul><li><a href="https://staging-cn.vuejs.org/api/composition-api-dependency-injection.html" rel="nofollow noopener noreferrer external" target="_blank">组合式 API：依赖注入 | Vue.js</a></li>
|
||
<li><a href="https://staging-cn.vuejs.org/api/composition-api-lifecycle.html#onunmounted" rel="nofollow noopener noreferrer external" target="_blank">组合式 API：生命周期钩子 | Vue.js</a></li></ul></li></ul>
|
||
<h3 id="ref-全家桶"><a href="#ref-全家桶">ref 全家桶</a></h3>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">Ref</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">reactive</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">isRef</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">unref</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">toRef</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> initial </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">10</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">// Challenge 1: Update ref</span></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">update</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Challenge 2: Check if the `count` is a ref object.</span></div><div class='line'><span style="color: #546E7A"> * Make the output be 1</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #EEFFFF">(</span><span style="color: #82AAFF">isRef</span><span style="color: #EEFFFF">(count) </span><span style="color: #89DDFF">?</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Challenge 3: Unwrap ref</span></div><div class='line'><span style="color: #546E7A"> * Make the output be true</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">initialCount</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">number</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">|</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">Ref</span><span style="color: #89DDFF"><</span><span style="color: #FFCB6B">number</span><span style="color: #89DDFF">>)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #546E7A">// Make the output be true</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #82AAFF">unref</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">value</span><span style="color: #F07178">) </span><span style="color: #89DDFF">===</span><span style="color: #F07178"> </span><span style="color: #F78C6C">10</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #82AAFF">initialCount</span><span style="color: #EEFFFF">(initial)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Challenge 4:</span></div><div class='line'><span style="color: #546E7A"> * create a ref for a property on a source reactive object.</span></div><div class='line'><span style="color: #546E7A"> * The created ref is synced with its source property:</span></div><div class='line'><span style="color: #546E7A"> * mutating the source property will update the ref, and vice-versa.</span></div><div class='line'><span style="color: #546E7A"> * Make the output be true</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> state </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">reactive</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">foo</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">bar</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">2</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> fooRef </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">toRef</span><span style="color: #EEFFFF">(state</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">foo</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">) </span><span style="color: #546E7A">// change the impl...</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">// mutating the ref updates the original</span></div><div class='line'><span style="color: #EEFFFF">fooRef</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">++</span></div><div class='line'><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #EEFFFF">(state</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">foo </span><span style="color: #89DDFF">===</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">2</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">// mutating the original also updates the ref</span></div><div class='line'><span style="color: #EEFFFF">state</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">foo</span><span style="color: #89DDFF">++</span></div><div class='line'><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #EEFFFF">(fooRef</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value </span><span style="color: #89DDFF">===</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">3</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">span</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #82AAFF">update</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF"> - </span><span style="color: #F78C6C">1</span><span style="color: #89DDFF">)</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">-</span><span style="color: #89DDFF"></</span><span style="color: #F07178">span</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">}}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">span</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #82AAFF">update</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF"> + </span><span style="color: #F78C6C">1</span><span style="color: #89DDFF">)</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">+</span><span style="color: #89DDFF"></</span><span style="color: #F07178">span</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p>相关知识点：</p>
|
||
<ul><li><a href="https://staging-cn.vuejs.org/api/reactivity-utilities.html#isref" rel="nofollow noopener noreferrer external" target="_blank">isRef()</a></li>
|
||
<li><a href="https://staging-cn.vuejs.org/api/reactivity-utilities.html#unref" rel="nofollow noopener noreferrer external" target="_blank">unref()</a></li>
|
||
<li><a href="https://staging-cn.vuejs.org/api/reactivity-utilities.html#toref" rel="nofollow noopener noreferrer external" target="_blank">toRef</a></li></ul>
|
||
<h3 id="响应性丢失"><a href="#响应性丢失">响应性丢失</a></h3>
|
||
<p>保证解构/扩展不丢失响应性</p>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">reactive</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">toRefs</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">useCount</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">state</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #82AAFF">reactive</span><span style="color: #F07178">(</span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> count</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #F78C6C">0</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #F07178">)</span></div><div class='line'></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">function</span><span style="color: #F07178"> </span><span style="color: #82AAFF">update</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #FFCB6B">number</span><span style="color: #89DDFF">)</span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">state</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">count</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> state</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #82AAFF">toRefs</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">state</span><span style="color: #F07178">)</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">update</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">// Ensure the destructured properties don't lose their reactivity</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">state</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">},</span></div><div class='line'><span style="color: #EEFFFF"> update</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">useCount</span><span style="color: #EEFFFF">()</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">span</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #82AAFF">update</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF"> - </span><span style="color: #F78C6C">1</span><span style="color: #89DDFF">)</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">-</span><span style="color: #89DDFF"></</span><span style="color: #F07178">span</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">}}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">span</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #82AAFF">update</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF"> + </span><span style="color: #F78C6C">1</span><span style="color: #89DDFF">)</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">+</span><span style="color: #89DDFF"></</span><span style="color: #F07178">span</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p>相关知识点：<a href="https://staging-cn.vuejs.org/api/reactivity-utilities.html#torefs" rel="nofollow noopener noreferrer external" target="_blank">toRefs</a></p>
|
||
<h3 id="可写的计算属性"><a href="#可写的计算属性">可写的计算属性</a></h3>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">computed</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">1</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> plusOne </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">computed</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">get</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">+</span><span style="color: #F07178"> </span><span style="color: #F78C6C">1</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">},</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">set</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">newValue</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">newValue</span><span style="color: #F07178"> </span><span style="color: #89DDFF">-</span><span style="color: #F07178"> </span><span style="color: #F78C6C">1</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Make the `plusOne` writable.</span></div><div class='line'><span style="color: #546E7A"> * So that we can get the result `plusOne` to be 3, and `count` to be 2.</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">plusOne</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">++</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">>{{</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">}}</</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">>{{</span><span style="color: #EEFFFF"> plusOne </span><span style="color: #89DDFF">}}</</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p>相关知识点：<a href="https://staging-cn.vuejs.org/guide/essentials/computed.html#writable-computed" rel="nofollow noopener noreferrer external" target="_blank">可写的计算属性 </a></p>
|
||
<h3 id="watch-全家桶"><a href="#watch-全家桶">watch 全家桶</a></h3>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">watch</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Challenge 1: Watch once</span></div><div class='line'><span style="color: #546E7A"> * Make sure the watch callback only triggers once</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> watchOnce </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">watch</span><span style="color: #EEFFFF">(count</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">Only triggered once</span><span style="color: #89DDFF">'</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">watchOnce</span><span style="color: #F07178">()</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1</span></div><div class='line'><span style="color: #82AAFF">setTimeout</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> (count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">2</span><span style="color: #EEFFFF">))</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Challenge 2: Watch object</span></div><div class='line'><span style="color: #546E7A"> * Make sure the watch callback is triggered</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> state </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">count</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">0</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #82AAFF">watch</span><span style="color: #EEFFFF">(</span></div><div class='line'><span style="color: #EEFFFF"> state</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">The state.count updated</span><span style="color: #89DDFF">'</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">},</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">deep</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FF9CAC">true</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">state</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">count </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">2</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Challenge 3: Callback Flush Timing</span></div><div class='line'><span style="color: #546E7A"> * Make sure visited the updated eleRef</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> eleRef </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">()</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> age </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">2</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #82AAFF">watch</span><span style="color: #EEFFFF">(</span></div><div class='line'><span style="color: #EEFFFF"> age</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">eleRef</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">},</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">flush</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">post</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">age</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">18</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">}}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">ref</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">eleRef</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> age </span><span style="color: #89DDFF">}}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p>相关知识点：<a href="https://staging-cn.vuejs.org/guide/essentials/watchers.html" rel="nofollow noopener noreferrer external" target="_blank">侦听器 | Vue.js</a></p>
|
||
<h3 id="浅层-ref"><a href="#浅层-ref">浅层 ref</a></h3>
|
||
<p>响应式 API: shallowRef</p>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">shallowRef</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">watch</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> state </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">shallowRef</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">count</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">// Does NOT trigger</span></div><div class='line'><span style="color: #82AAFF">watch</span><span style="color: #EEFFFF">(</span></div><div class='line'><span style="color: #EEFFFF"> state</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">State.count Updated</span><span style="color: #89DDFF">'</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">},</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">deep</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FF9CAC">true</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Modify the code so that we can make the watch callback trigger.</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #EEFFFF">state</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">count</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">2</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> state</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">count </span><span style="color: #89DDFF">}}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p>相关知识点：<a href="https://staging-cn.vuejs.org/api/reactivity-advanced.html#shallowref" rel="nofollow noopener noreferrer external" target="_blank">shallowRef()</a></p>
|
||
<h3 id="依赖注入"><a href="#依赖注入">依赖注入</a></h3>
|
||
<p>child.vue</p>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">inject</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">inject</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">count</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">}}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p>相关知识点：<a href="https://staging-cn.vuejs.org/api/composition-api-dependency-injection.html" rel="nofollow noopener noreferrer external" target="_blank">组合式 API：依赖注入 | Vue.js</a></p>
|
||
<h3 id="effect-作用域-api"><a href="#effect-作用域-api">Effect 作用域 API</a></h3>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">computed</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">watch</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">watchEffect</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">effectScope</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> counter </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">1</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> doubled </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">computed</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> counter</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value </span><span style="color: #89DDFF">*</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">2</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">// use the `effectScope` API to make these effects stop together after being triggered once</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> scope </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">effectScope</span><span style="color: #EEFFFF">()</span></div><div class='line'><span style="color: #EEFFFF">scope</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">run</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">watch</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">doubled</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">doubled</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178">))</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">watchEffect</span><span style="color: #F07178">(</span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #89DDFF">`</span><span style="color: #C3E88D">Count: </span><span style="color: #89DDFF">${</span><span style="color: #EEFFFF">doubled</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">}`</span><span style="color: #F07178">))</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">counter</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #F78C6C">2</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #82AAFF">setTimeout</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">counter</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #F78C6C">4</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">scope</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">stop</span><span style="color: #F07178">()</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> doubled </span><span style="color: #89DDFF">}}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p>相关知识点：<a href="https://staging-cn.vuejs.org/api/reactivity-advanced.html#effectscope" rel="nofollow noopener noreferrer external" target="_blank">effectScope</a></p>
|
||
<h3 id="自定义-ref"><a href="#自定义-ref">自定义 ref</a></h3>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">watch</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">customRef</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Implement the function</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">useDebouncedRef</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> delay </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">200</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">let</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">timeout</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #82AAFF">customRef</span><span style="color: #F07178">(</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">track</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">trigger</span><span style="color: #89DDFF">)</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> get</span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">track</span><span style="color: #F07178">()</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">},</span></div><div class='line'><span style="color: #F07178"> set</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">newValue</span><span style="color: #89DDFF">)</span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">clearTimeout</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">timeout</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">timeout</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #82AAFF">setTimeout</span><span style="color: #F07178">(</span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">newValue</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">trigger</span><span style="color: #F07178">()</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">},</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">delay</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> text </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">useDebouncedRef</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">hello</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Make sure the callback only gets triggered once when entered multiple times in a certain timeout</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #82AAFF">watch</span><span style="color: #EEFFFF">(text</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> value </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">value</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">input</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">v-model</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">text</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p>相关知识点：<a href="https://staging-cn.vuejs.org/api/reactivity-advanced.html#customref" rel="nofollow noopener noreferrer external" target="_blank">customRef</a></p>
|
||
<h2 id="directives"><a href="#directives">Directives</a></h2>
|
||
<h3 id="大写"><a href="#大写">大写</a></h3>
|
||
<p>创建一个自定义的修饰符 <code>capitalize</code>，它会自动将 <code>v-model</code> 绑定输入的字符串值首字母转为大写：
|
||
App.vue</p>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> Input </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">./Input.vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> value </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">''</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #FFCB6B">Input</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">type</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">text</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">v-model</span><span style="color: #89DDFF">.</span><span style="color: #C792EA">capitalize</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p>Input.vue</p>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">defineProps</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">defineEmits</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> props </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">defineProps</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">modelValue</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">String</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">modelModifiers</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">default</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> (</span><span style="color: #89DDFF">{}</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> emit </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">defineEmits</span><span style="color: #EEFFFF">([</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">update:modelValue</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">])</span></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">emitValue</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">e</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">let</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">e</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">target</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">if</span><span style="color: #F07178"> (</span><span style="color: #EEFFFF">props</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">modelModifiers</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">capitalize</span><span style="color: #F07178">) </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">charAt</span><span style="color: #F07178">(</span><span style="color: #F78C6C">0</span><span style="color: #F07178">)</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">toUpperCase</span><span style="color: #F07178">() </span><span style="color: #89DDFF">+</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">slice</span><span style="color: #F07178">(</span><span style="color: #F78C6C">1</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">emit</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">update:modelValue</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">input</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">type</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">text</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> :</span><span style="color: #C792EA">value</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">modelValue</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">input</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">emitValue</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p>相关知识点：<a href="https://staging-cn.vuejs.org/guide/components/events.html#usage-with-v-model" rel="nofollow noopener noreferrer external" target="_blank">处理 v-model 修饰符</a></p>
|
||
<h3 id="优化性能的指令-1"><a href="#优化性能的指令-1">优化性能的指令</a></h3>
|
||
<p>见上面。v-once</p>
|
||
<h3 id="切换焦点指令"><a href="#切换焦点指令">切换焦点指令</a></h3>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> state </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #FF9CAC">false</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Implement the custom directive</span></div><div class='line'><span style="color: #546E7A"> * Make sure the input element focuses/blurs when the 'state' is toggled</span></div><div class='line'><span style="color: #546E7A"> *</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> VFocus </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">updated</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">el</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> state</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> (state</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value </span><span style="color: #89DDFF">?</span><span style="color: #EEFFFF"> el</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">focus</span><span style="color: #EEFFFF">() </span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> el</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">blur</span><span style="color: #EEFFFF">())</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #82AAFF">setInterval</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">state</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #89DDFF">!</span><span style="color: #EEFFFF">state</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span></div><div class='line'><span style="color: #89DDFF">},</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">2000</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">input</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">v-focus</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">state</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">type</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">text</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p>相关知识点：<a href="https://staging-cn.vuejs.org/guide/reusability/custom-directives.html" rel="nofollow noopener noreferrer external" target="_blank">自定义指令 | Vue.js</a></p>
|
||
<h3 id="防抖点击指令"><a href="#防抖点击指令">防抖点击指令</a></h3>
|
||
<p>尝试实现一个防抖点击指令</p>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Implement the custom directive</span></div><div class='line'><span style="color: #546E7A"> * Make sure the `onClick` method only gets triggered once when clicked many times quickly</span></div><div class='line'><span style="color: #546E7A"> * And you also need to support the debounce delay time option. e.g `v-debounce-click:ms`</span></div><div class='line'><span style="color: #546E7A"> *</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">debounce</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">fn</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> delay</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">let</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">timeout</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">let</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">count</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #F78C6C">0</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #89DDFF">(...</span><span style="color: #EEFFFF">args</span><span style="color: #89DDFF">)</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">if</span><span style="color: #F07178"> (</span><span style="color: #EEFFFF">count</span><span style="color: #F07178"> </span><span style="color: #89DDFF">===</span><span style="color: #F07178"> </span><span style="color: #F78C6C">0</span><span style="color: #F07178">) </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">++</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">fn</span><span style="color: #F07178">(</span><span style="color: #89DDFF">...</span><span style="color: #EEFFFF">args</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">clearTimeout</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">timeout</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">timeout</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #82AAFF">setTimeout</span><span style="color: #F07178">(</span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">fn</span><span style="color: #F07178">(</span><span style="color: #89DDFF">...</span><span style="color: #EEFFFF">args</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">},</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">delay</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> VDebounceClick </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">mounted</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">el</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> binding</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">arg</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">binding</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">el</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">addEventListener</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">click</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #82AAFF">debounce</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">arg</span><span style="color: #F07178">))</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">onClick</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">Only triggered once when clicked many times quickly</span><span style="color: #89DDFF">'</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">button</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">v-debounce-click:200</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">onClick</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">Click on it many times quickly</span><span style="color: #89DDFF"></</span><span style="color: #F07178">button</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p>相关知识点：<a href="https://staging-cn.vuejs.org/guide/reusability/custom-directives.html#introduce" rel="nofollow noopener noreferrer external" target="_blank">指令钩子</a></p>
|
||
<h3 id="激活的样式-指令"><a href="#激活的样式-指令">激活的样式-指令</a></h3>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">watchEffect</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Implement the custom directive</span></div><div class='line'><span style="color: #546E7A"> * Make sure the list item text color changes to red when the `toggleTab` is toggled</span></div><div class='line'><span style="color: #546E7A"> *</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> VActiveStyle </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">mounted</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">el</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> binding</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">const</span><span style="color: #F07178"> </span><span style="color: #89DDFF">[</span><span style="color: #EEFFFF">styles</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">fn</span><span style="color: #89DDFF">]</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">binding</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">watchEffect</span><span style="color: #F07178">(</span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #FFCB6B">Object</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">keys</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">styles</span><span style="color: #F07178">)</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">map</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">key</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> (</span><span style="color: #EEFFFF">el</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">style</span><span style="color: #F07178">[</span><span style="color: #EEFFFF">key</span><span style="color: #F07178">] </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #82AAFF">fn</span><span style="color: #F07178">() </span><span style="color: #89DDFF">?</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">styles</span><span style="color: #F07178">[</span><span style="color: #EEFFFF">key</span><span style="color: #F07178">] </span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #89DDFF">''</span><span style="color: #F07178">))</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> list </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> [</span><span style="color: #F78C6C">1</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">2</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">3</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">4</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">5</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">6</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">7</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">8</span><span style="color: #EEFFFF">]</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> activeTab </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">toggleTab</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">index</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">number</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">activeTab</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">index</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">ul</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">li</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #C792EA">v-for</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">item</span><span style="color: #89DDFF">, </span><span style="color: #EEFFFF">index</span><span style="color: #89DDFF">) in </span><span style="color: #EEFFFF">list</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF"> :</span><span style="color: #C792EA">key</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">index</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF"> </span><span style="color: #C792EA">v-active-style</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">[{ </span><span style="color: #F07178">color</span><span style="color: #89DDFF">: </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">red</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF"> }, () </span><span style="color: #C792EA">=></span><span style="color: #89DDFF"> </span><span style="color: #EEFFFF">activeTab</span><span style="color: #89DDFF"> === </span><span style="color: #EEFFFF">index</span><span style="color: #89DDFF">]</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #82AAFF">toggleTab</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">index</span><span style="color: #89DDFF">)</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> item </span><span style="color: #89DDFF">}}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">li</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">ul</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<h3 id="实现简易版v-model指令"><a href="#实现简易版v-model指令">实现简易版<code>v-model</code>指令</a></h3>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Implement a custom directive</span></div><div class='line'><span style="color: #546E7A"> * Create a two-way binding on a form input element</span></div><div class='line'><span style="color: #546E7A"> *</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> VOhModel </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">mounted</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">el</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> binding</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">el</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">binding</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">el</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">addEventListener</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">input</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">el</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> value </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">Hello Vue.js</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">input</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">v-oh-model</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">type</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">text</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">>{{</span><span style="color: #EEFFFF"> value </span><span style="color: #89DDFF">}}</</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<h2 id="event-handling"><a href="#event-handling">Event Handling</a></h2>
|
||
<h3 id="阻止事件冒泡"><a href="#阻止事件冒泡">阻止事件冒泡</a></h3>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> click1 </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">click1</span><span style="color: #89DDFF">'</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> click2 </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> e </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">click2</span><span style="color: #89DDFF">'</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #82AAFF">click1</span><span style="color: #89DDFF">()</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">.</span><span style="color: #C792EA">stop</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #82AAFF">click2</span><span style="color: #89DDFF">()</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">click me</span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p>相关知识点：<a href="https://staging-cn.vuejs.org/guide/essentials/event-handling.html#event-modifiers" rel="nofollow noopener noreferrer external" target="_blank">事件修饰符</a></p>
|
||
<h3 id="按键修饰符"><a href="#按键修饰符">按键修饰符</a></h3>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #546E7A"><!-- Add key modifiers made this will fire even if Alt or Shift is also pressed --></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">button</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">.</span><span style="color: #C792EA">alt</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">onClick1</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">.</span><span style="color: #C792EA">shift</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">onClick1</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">A</span><span style="color: #89DDFF"></</span><span style="color: #F07178">button</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #546E7A"><!-- Add key modifiers made this will only fire when Shift and no other keys are pressed --></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">button</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">.shift.</span><span style="color: #C792EA">exact</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">onCtrlClick</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">A</span><span style="color: #89DDFF"></</span><span style="color: #F07178">button</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #546E7A"><!-- Add key modifiers made this will only fire when no system modifiers are pressed --></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">button</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">.</span><span style="color: #C792EA">exact</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">onClick2</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">A</span><span style="color: #89DDFF"></</span><span style="color: #F07178">button</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">onClick1</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">onClick1</span><span style="color: #89DDFF">'</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">onCtrlClick</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">onCtrlClick</span><span style="color: #89DDFF">'</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">onClick2</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">onClick2</span><span style="color: #89DDFF">'</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p>相关知识点：<a href="https://staging-cn.vuejs.org/guide/essentials/event-handling.html#key-modifiers" rel="nofollow noopener noreferrer external" target="_blank">按键修饰符</a></p>
|
||
<h2 id="global-apigeneral"><a href="#global-apigeneral">Global API:General</a></h2>
|
||
<h3 id="下一次-dom-更新"><a href="#下一次-dom-更新">下一次 DOM 更新</a></h3>
|
||
<p>在<code>Vue.js</code>中改变响应式状态时，DOM 不会同步更新。 <code>Vue.js</code> 提供了一个用于等待下一次 DOM 更新的方法</p>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">nextTick</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> counter </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">null</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">async</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">increment</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">++</span></div><div class='line'></div><div class='line'><span style="color: #F07178"> </span><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * DOM is not yet updated, how can we make sure that the DOM gets updated</span></div><div class='line'><span style="color: #546E7A"> * Make the output be true</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">await</span><span style="color: #F07178"> </span><span style="color: #82AAFF">nextTick</span><span style="color: #F07178">()</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #89DDFF">+</span><span style="color: #EEFFFF">counter</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">textContent</span><span style="color: #F07178"> </span><span style="color: #89DDFF">===</span><span style="color: #F07178"> </span><span style="color: #F78C6C">1</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">button</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">ref</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">counter</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">increment</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">}}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">button</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p>相关知识点：<a href="https://staging-cn.vuejs.org/api/general.html#nexttick" rel="nofollow noopener noreferrer external" target="_blank">nextTick()</a></p>
|
||
<h2 id="lifecycle"><a href="#lifecycle">Lifecycle</a></h2>
|
||
<h3 id="生命周期钩子-1"><a href="#生命周期钩子-1">生命周期钩子</a></h3>
|
||
<p><a href="#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90">同上：生命周期钩子</a></p>
|
||
<h2 id="reactivityadvanced"><a href="#reactivityadvanced">Reactivity:Advanced</a></h2>
|
||
<h3 id="浅层-ref-1"><a href="#浅层-ref-1">浅层 ref</a></h3>
|
||
<p><a href="#%E6%B5%85%E5%B1%82-ref">同上：浅层 ref</a></p>
|
||
<h3 id="原始值-api"><a href="#原始值-api">原始值 API</a></h3>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">reactive</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">isReactive</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">toRaw</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">markRaw</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> state </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">count</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> reactiveState </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">toRaw</span><span style="color: #EEFFFF">(</span><span style="color: #82AAFF">reactive</span><span style="color: #EEFFFF">(state))</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Modify the code so that we can make the output be true.</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #EEFFFF">(reactiveState </span><span style="color: #89DDFF">===</span><span style="color: #EEFFFF"> state)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Modify the code so that we can make the output be false.</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> info </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">markRaw</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">count</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> reactiveInfo </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">reactive</span><span style="color: #EEFFFF">(info)</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #EEFFFF">(</span><span style="color: #82AAFF">isReactive</span><span style="color: #EEFFFF">(reactiveInfo))</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{{</span><span style="color: #EEFFFF"> reactiveState</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">count </span><span style="color: #89DDFF">}}</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p>相关知识点：</p>
|
||
<ul><li><a href="https://staging-cn.vuejs.org/api/reactivity-advanced.html#toraw" rel="nofollow noopener noreferrer external" target="_blank">toRaw</a></li>
|
||
<li><a href="https://staging-cn.vuejs.org/api/reactivity-advanced.html#markraw" rel="nofollow noopener noreferrer external" target="_blank">markRaw</a></li></ul>
|
||
<h3 id="effect-作用域-api-1"><a href="#effect-作用域-api-1">Effect 作用域 API</a></h3>
|
||
<p><a href="#effect-%E4%BD%9C%E7%94%A8%E5%9F%9F-api">同上：Effect 作用域 API</a></p>
|
||
<h3 id="自定义-ref-1"><a href="#自定义-ref-1">自定义 ref</a></h3>
|
||
<p><a href="#%E8%87%AA%E5%AE%9A%E4%B9%89-ref">同上：自定义 ref</a></p>
|
||
<h2 id="reactivitycore"><a href="#reactivitycore">Reactivity:Core</a></h2>
|
||
<h3 id="ref-全家桶-1"><a href="#ref-全家桶-1">ref 全家桶</a></h3>
|
||
<p><a href="#ref-%E5%85%A8%E5%AE%B6%E6%A1%B6">同上：ref 全家桶</a></p>
|
||
<h3 id="可写的计算属性-1"><a href="#可写的计算属性-1">可写的计算属性</a></h3>
|
||
<p><a href="#%E5%8F%AF%E5%86%99%E7%9A%84%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7">同上：可写的计算属性</a></p>
|
||
<h3 id="watch-全家桶-1"><a href="#watch-全家桶-1">watch 全家桶</a></h3>
|
||
<p><a href="#watch-%E5%85%A8%E5%AE%B6%E6%A1%B6">同上：watch 全家桶</a></p>
|
||
<h2 id="reactivityutilities"><a href="#reactivityutilities">Reactivity:Utilities</a></h2>
|
||
<h3 id="响应性丟失"><a href="#响应性丟失">响应性丟失</a></h3>
|
||
<p><a href="#%E5%93%8D%E5%BA%94%E6%80%A7%E4%B8%9F%E5%A4%B1">同上：响应性丟失</a></p>
|
||
<h2 id="utility-function"><a href="#utility-function">Utility Function</a></h2>
|
||
<h3 id="until"><a href="#until">until</a></h3>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">ref</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> count </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">ref</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Implement the until function</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">until</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">initial</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #C792EA">function</span><span style="color: #F07178"> </span><span style="color: #82AAFF">toBe</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">)</span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #89DDFF">new</span><span style="color: #F07178"> </span><span style="color: #FFCB6B">Promise</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">resolve</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">initial</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">value</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">resolve</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">initial</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">toBe</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">async</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">function</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">increase</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #F78C6C">0</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #82AAFF">setInterval</span><span style="color: #F07178">(</span><span style="color: #89DDFF">()</span><span style="color: #F07178"> </span><span style="color: #C792EA">=></span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #89DDFF">++</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">},</span><span style="color: #F07178"> </span><span style="color: #F78C6C">1000</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #89DDFF">await</span><span style="color: #F07178"> </span><span style="color: #82AAFF">until</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">count</span><span style="color: #F07178">)</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">toBe</span><span style="color: #F07178">(</span><span style="color: #F78C6C">3</span><span style="color: #F07178">)</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">console</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">log</span><span style="color: #F07178">(</span><span style="color: #EEFFFF">count</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">value</span><span style="color: #F07178"> </span><span style="color: #89DDFF">===</span><span style="color: #F07178"> </span><span style="color: #F78C6C">3</span><span style="color: #F07178">) </span><span style="color: #546E7A">// Make sure the output is true</span></div><div class='line'><span style="color: #89DDFF">}</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">p</span><span style="color: #89DDFF"> @</span><span style="color: #C792EA">click</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #EEFFFF">increase</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #EEFFFF">Increase</span><span style="color: #89DDFF"></</span><span style="color: #F07178">p</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<h2 id="web-components"><a href="#web-components">Web Components</a></h2>
|
||
<h3 id="自定义元素"><a href="#自定义元素">自定义元素</a></h3>
|
||
<!-- HTML_TAG_START --><pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">setup</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">lang</span><span style="color: #EEFFFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">onMounted</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">defineCustomElement</span><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/**</span></div><div class='line'><span style="color: #546E7A"> * Implement the code to create a custom element.</span></div><div class='line'><span style="color: #546E7A"> * Make the output of page show "Hello Vue.js".</span></div><div class='line'><span style="color: #546E7A"> */</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> VueJs </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">defineCustomElement</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">props</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">message</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">String</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">},</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #F07178">template</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D"><span>{{message}}</span></span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">customElements</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">define</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">vue-js</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> VueJs)</span></div><div class='line'><span style="color: #82AAFF">onMounted</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">()</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">{</span></div><div class='line'><span style="color: #F07178"> </span><span style="color: #EEFFFF">document</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">getElementById</span><span style="color: #F07178">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">app</span><span style="color: #89DDFF">'</span><span style="color: #F07178">)</span><span style="color: #89DDFF">!.</span><span style="color: #EEFFFF">innerHTML</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D"><vue-js message="Hello Vue.js"></vue-js></span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #89DDFF">}</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></div><div class='line'></div><div class='line'><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #F78C6C">id</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">app</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></div><div class='line'><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></div></code></div></pre><!-- HTML_TAG_END -->
|
||
<p>并且 vite.config.js 里要做相关设置
|
||
相关知识点：<a href="https://staging-cn.vuejs.org/guide/extras/web-components.html" rel="nofollow noopener noreferrer external" target="_blank">Vue 与 Web Components | Vue.js</a></p></main>
|
||
<div class="divider mt-4 mb-0"></div>
|
||
<div><a href="/?tags=Vue" class="btn btn-sm btn-ghost normal-case mt-2 mr-2 p-category">#Vue
|
||
</a></div></div>
|
||
|
||
</article>
|
||
<footer id="footer" class="footer footer-center bg-base-300 text-base-content shadow-inner p-8 md:rounded-box sticky bottom-0 z-0 md:static "><div class="prose"><p><a href="/atom.xml" rel="noopener external" target="_blank">Feed</a>
|
||
<span class="mr-1">·</span><a href="/sitemap.xml" rel="noopener external" target="_blank">Sitemap</a>
|
||
<span class="mr-1">·</span><a href="/privacy" rel="noopener external" target="_blank">Pravicy</a>
|
||
|
||
<br>
|
||
Copyright © 2022
|
||
酸橘汁腌鱼
|
||
<br>
|
||
Powered by
|
||
<a rel="noopener external" target="_blank" class="tooltip tooltip-secondary hover:text-secondary" data-tip="🌸 [δ] - Based on MDsveX & SvelteKit 🌸" href="https://github.com/importantimport/urara">Urara
|
||
</a>
|
||
<br>
|
||
<!-- HTML_TAG_START --><a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><!-- HTML_TAG_END --></p></div></footer></div></div></div>
|
||
|
||
|
||
<script type="module" data-sveltekit-hydrate="1h6i5s">
|
||
import { set_public_env, start } from "/_app/immutable/start-f4ec0a74.js";
|
||
|
||
set_public_env({});
|
||
|
||
start({
|
||
target: document.querySelector('[data-sveltekit-hydrate="1h6i5s"]').parentNode,
|
||
paths: {"base":"","assets":""},
|
||
session: {},
|
||
route: true,
|
||
spa: false,
|
||
trailing_slash: "never",
|
||
hydrate: {
|
||
status: 200,
|
||
error: null,
|
||
nodes: [0, 38],
|
||
params: {},
|
||
routeId: "2022-08-12-vue-challenges"
|
||
}
|
||
});
|
||
</script><script type="application/json" sveltekit:data-type="data" sveltekit:data-url="/posts.json">{"status":200,"statusText":"","headers":{"content-type":"application/json; charset=utf-8"},"body":"[\n {\n \"title\": \"Vue.js 挑战练习\",\n \"created\": \"2022-08-12T00:00:00.000Z\",\n \"summary\": \"我的答案以及相关知识点\",\n \"tags\": [\n \"Vue\"\n ],\n \"slug\": \"/2022-08-12-vue-challenges.md\",\n \"path\": \"/2022-08-12-vue-challenges\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"Built-ins\",\n \"slug\": \"built-ins\"\n },\n {\n \"depth\": 3,\n \"title\": \"DOM 传送门\",\n \"slug\": \"dom-传送门\"\n },\n {\n \"depth\": 3,\n \"title\": \"优化性能的指令\",\n \"slug\": \"优化性能的指令\"\n },\n {\n \"depth\": 2,\n \"title\": \"CSS Features\",\n \"slug\": \"css-features\"\n },\n {\n \"depth\": 3,\n \"title\": \"动态 CSS\",\n \"slug\": \"动态-css\"\n },\n {\n \"depth\": 3,\n \"title\": \"全局 CSS\",\n \"slug\": \"全局-css\"\n },\n {\n \"depth\": 2,\n \"title\": \"Components\",\n \"slug\": \"components\"\n },\n {\n \"depth\": 3,\n \"title\": \"DOM 传送门\",\n \"slug\": \"dom-传送门-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"Props 验证\",\n \"slug\": \"props-验证\"\n },\n {\n \"depth\": 3,\n \"title\": \"函数式组件\",\n \"slug\": \"函数式组件\"\n },\n {\n \"depth\": 3,\n \"title\": \"渲染函数h()\",\n \"slug\": \"渲染函数h\"\n },\n {\n \"depth\": 3,\n \"title\": \"树组件\",\n \"slug\": \"树组件\"\n },\n {\n \"depth\": 2,\n \"title\": \"Composable Function\",\n \"slug\": \"composable-function\"\n },\n {\n \"depth\": 3,\n \"title\": \"切换器\",\n \"slug\": \"切换器\"\n },\n {\n \"depth\": 3,\n \"title\": \"计数器\",\n \"slug\": \"计数器\"\n },\n {\n \"depth\": 3,\n \"title\": \"实现本地存储函数\",\n \"slug\": \"实现本地存储函数\"\n },\n {\n \"depth\": 3,\n \"title\": \"鼠标坐标\",\n \"slug\": \"鼠标坐标\"\n },\n {\n \"depth\": 2,\n \"title\": \"Composition API\",\n \"slug\": \"composition-api\"\n },\n {\n \"depth\": 3,\n \"title\": \"生命周期钩子\",\n \"slug\": \"生命周期钩子\"\n },\n {\n \"depth\": 3,\n \"title\": \"ref 全家桶\",\n \"slug\": \"ref-全家桶\"\n },\n {\n \"depth\": 3,\n \"title\": \"响应性丢失\",\n \"slug\": \"响应性丢失\"\n },\n {\n \"depth\": 3,\n \"title\": \"可写的计算属性\",\n \"slug\": \"可写的计算属性\"\n },\n {\n \"depth\": 3,\n \"title\": \"watch 全家桶\",\n \"slug\": \"watch-全家桶\"\n },\n {\n \"depth\": 3,\n \"title\": \"浅层 ref\",\n \"slug\": \"浅层-ref\"\n },\n {\n \"depth\": 3,\n \"title\": \"依赖注入\",\n \"slug\": \"依赖注入\"\n },\n {\n \"depth\": 3,\n \"title\": \"Effect 作用域 API\",\n \"slug\": \"effect-作用域-api\"\n },\n {\n \"depth\": 3,\n \"title\": \"自定义 ref\",\n \"slug\": \"自定义-ref\"\n },\n {\n \"depth\": 2,\n \"title\": \"Directives\",\n \"slug\": \"directives\"\n },\n {\n \"depth\": 3,\n \"title\": \"大写\",\n \"slug\": \"大写\"\n },\n {\n \"depth\": 3,\n \"title\": \"优化性能的指令\",\n \"slug\": \"优化性能的指令-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"切换焦点指令\",\n \"slug\": \"切换焦点指令\"\n },\n {\n \"depth\": 3,\n \"title\": \"防抖点击指令\",\n \"slug\": \"防抖点击指令\"\n },\n {\n \"depth\": 3,\n \"title\": \"激活的样式-指令\",\n \"slug\": \"激活的样式-指令\"\n },\n {\n \"depth\": 3,\n \"title\": \"实现简易版v-model指令\",\n \"slug\": \"实现简易版v-model指令\"\n },\n {\n \"depth\": 2,\n \"title\": \"Event Handling\",\n \"slug\": \"event-handling\"\n },\n {\n \"depth\": 3,\n \"title\": \"阻止事件冒泡\",\n \"slug\": \"阻止事件冒泡\"\n },\n {\n \"depth\": 3,\n \"title\": \"按键修饰符\",\n \"slug\": \"按键修饰符\"\n },\n {\n \"depth\": 2,\n \"title\": \"Global API:General\",\n \"slug\": \"global-apigeneral\"\n },\n {\n \"depth\": 3,\n \"title\": \"下一次 DOM 更新\",\n \"slug\": \"下一次-dom-更新\"\n },\n {\n \"depth\": 2,\n \"title\": \"Lifecycle\",\n \"slug\": \"lifecycle\"\n },\n {\n \"depth\": 3,\n \"title\": \"生命周期钩子\",\n \"slug\": \"生命周期钩子-1\"\n },\n {\n \"depth\": 2,\n \"title\": \"Reactivity:Advanced\",\n \"slug\": \"reactivityadvanced\"\n },\n {\n \"depth\": 3,\n \"title\": \"浅层 ref\",\n \"slug\": \"浅层-ref-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"原始值 API\",\n \"slug\": \"原始值-api\"\n },\n {\n \"depth\": 3,\n \"title\": \"Effect 作用域 API\",\n \"slug\": \"effect-作用域-api-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"自定义 ref\",\n \"slug\": \"自定义-ref-1\"\n },\n {\n \"depth\": 2,\n \"title\": \"Reactivity:Core\",\n \"slug\": \"reactivitycore\"\n },\n {\n \"depth\": 3,\n \"title\": \"ref 全家桶\",\n \"slug\": \"ref-全家桶-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"可写的计算属性\",\n \"slug\": \"可写的计算属性-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"watch 全家桶\",\n \"slug\": \"watch-全家桶-1\"\n },\n {\n \"depth\": 2,\n \"title\": \"Reactivity:Utilities\",\n \"slug\": \"reactivityutilities\"\n },\n {\n \"depth\": 3,\n \"title\": \"响应性丟失\",\n \"slug\": \"响应性丟失\"\n },\n {\n \"depth\": 2,\n \"title\": \"Utility Function\",\n \"slug\": \"utility-function\"\n },\n {\n \"depth\": 3,\n \"title\": \"until\",\n \"slug\": \"until\"\n },\n {\n \"depth\": 2,\n \"title\": \"Web Components\",\n \"slug\": \"web-components\"\n },\n {\n \"depth\": 3,\n \"title\": \"自定义元素\",\n \"slug\": \"自定义元素\"\n }\n ],\n \"updated\": \"2022-08-13T08:21:08.878Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Monkey Patch\",\n \"created\": \"2022-08-06T00:00:00.000Z\",\n \"summary\": \"猴子打补丁\",\n \"toc\": false,\n \"tag\": [\n \"Notes\"\n ],\n \"slug\": \"/2022-08-06-notes/index.md\",\n \"path\": \"/2022-08-06-notes\",\n \"updated\": \"2022-08-07T04:36:02.907Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"我在看什么 · 7 月\",\n \"created\": \"2022-07-31T00:00:00.000Z\",\n \"summary\": \"eval / CSP&XSS / Commonplace Book ……\",\n \"tags\": [\n \"我在看什么\"\n ],\n \"image\": \"/2022-07-31-reading-7/july.webp\",\n \"slug\": \"/2022-07-31-reading-7/index.md\",\n \"path\": \"/2022-07-31-reading-7\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"前端\",\n \"slug\": \"前端\"\n },\n {\n \"depth\": 2,\n \"title\": \"后端\",\n \"slug\": \"后端\"\n },\n {\n \"depth\": 2,\n \"title\": \"什锦\",\n \"slug\": \"什锦\"\n },\n {\n \"depth\": 2,\n \"title\": \"Commonplace Book\",\n \"slug\": \"commonplace-book\"\n }\n ],\n \"updated\": \"2022-08-06T11:32:41.119Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"JS中的二进制数字\",\n \"created\": \"2022-07-27T00:00:00.000Z\",\n \"summary\": \"0b/0B和paresInt\",\n \"tags\": [\n \"JavsScript\"\n ],\n \"slug\": \"/2022-07-27-bin.md\",\n \"path\": \"/2022-07-27-bin\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"ES6+\",\n \"slug\": \"es6\"\n },\n {\n \"depth\": 2,\n \"title\": \"Before ES6\",\n \"slug\": \"before-es6\"\n }\n ],\n \"updated\": \"2022-08-11T17:12:21.128Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"created\": \"2022-07-26T00:00:00.000Z\",\n \"tags\": [\n \"XSS\",\n \"Notes\"\n ],\n \"slug\": \"/2022-07-23-notes-xss.md\",\n \"path\": \"/2022-07-23-notes-xss\",\n \"toc\": [\n {\n \"depth\": 3,\n \"title\": \"XSS 学习\",\n \"slug\": \"xss-学习\"\n }\n ],\n \"updated\": \"2022-08-11T17:39:51.841Z\",\n \"type\": \"note\",\n \"html\": \"\u003Ch3 id=\\\"xss-学习\\\">\u003Ca href=\\\"#xss-学习\\\">XSS 学习\u003C/a>\u003C/h3>\u003Cp>介绍文章：\u003C/p>\u003Cul>\u003Cli>\u003Ca href=\\\"https://tech.meituan.com/2018/09/27/fe-security.html\\\" rel=\\\"nofollow noopener noreferrer external\\\" target=\\\"_blank\\\">前端安全系列（一）：如何防止 XSS 攻击？ - 美团技术团队\u003C/a>\u003C/li>\u003Cli>\u003Ca href=\\\"https://developer.mozilla.org/zh-CN/docs/Glossary/Cross-site_scripting\\\" rel=\\\"nofollow noopener noreferrer external\\\" target=\\\"_blank\\\">Cross-site scripting（跨站脚本攻击） - 术语表 | MDN\u003C/a>\u003C/li>\u003C/ul>\u003Cp>练习：\u003C/p>\u003Cul>\u003Cli>\u003Ca href=\\\"https://prompt.ml/\\\" rel=\\\"nofollow noopener noreferrer external\\\" target=\\\"_blank\\\">prompt(1) to win\u003C/a>\u003C/li>\u003Cli>解答：\u003Ca href=\\\"https://github.com/cure53/XSSChallengeWiki/wiki/prompt.ml#level-1\\\" rel=\\\"nofollow noopener noreferrer external\\\" target=\\\"_blank\\\">prompt.ml\u003C/a>\u003C/li>\u003C/ul>\u003Cp>相关文章：\u003C/p>\u003Cul>\u003Cli>\u003Ca href=\\\"https://www.leavesongs.com/PENETRATION/xss-from-my-blog.html\\\" rel=\\\"nofollow noopener noreferrer external\\\" target=\\\"_blank\\\">我自己博客的一个 XSS 的故事 | 离别歌\u003C/a>\u003C/li>\u003C/ul>\"\n },\n {\n \"title\": \"D3.js 基础笔记\",\n \"created\": \"2022-07-23T00:00:00.000Z\",\n \"summary\": \"即使是FreeCodeCamp也要做笔记\",\n \"tags\": [\n \"D3.js\",\n \"数据可视化\"\n ],\n \"slug\": \"/2022-07-23-d3.md\",\n \"path\": \"/2022-07-23-d3\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"学习资源\",\n \"slug\": \"学习资源\"\n },\n {\n \"depth\": 2,\n \"title\": \"基础操作\",\n \"slug\": \"基础操作\"\n },\n {\n \"depth\": 3,\n \"title\": \"修改元素\",\n \"slug\": \"修改元素\"\n },\n {\n \"depth\": 3,\n \"title\": \"使用数据\",\n \"slug\": \"使用数据\"\n },\n {\n \"depth\": 3,\n \"title\": \"使用动态数据\",\n \"slug\": \"使用动态数据\"\n },\n {\n \"depth\": 3,\n \"title\": \"给元素添加内联样式\",\n \"slug\": \"给元素添加内联样式\"\n },\n {\n \"depth\": 3,\n \"title\": \"添加 Class\",\n \"slug\": \"添加-class\"\n },\n {\n \"depth\": 3,\n \"title\": \"标签\",\n \"slug\": \"标签\"\n },\n {\n \"depth\": 3,\n \"title\": \"添加工具提示 tooltip\",\n \"slug\": \"添加工具提示-tooltip\"\n },\n {\n \"depth\": 2,\n \"title\": \"SVG\",\n \"slug\": \"svg\"\n },\n {\n \"depth\": 3,\n \"title\": \"创建 SVG\",\n \"slug\": \"创建-svg\"\n },\n {\n \"depth\": 3,\n \"title\": \"反转 SVG 元素\",\n \"slug\": \"反转-svg-元素\"\n },\n {\n \"depth\": 3,\n \"title\": \"更改 SVG 元素的颜色\",\n \"slug\": \"更改-svg-元素的颜色\"\n },\n {\n \"depth\": 3,\n \"title\": \"SVG 图形\",\n \"slug\": \"svg-图形\"\n },\n {\n \"depth\": 4,\n \"title\": \"矩形\",\n \"slug\": \"矩形\"\n },\n {\n \"depth\": 4,\n \"title\": \"圆形\",\n \"slug\": \"圆形\"\n },\n {\n \"depth\": 2,\n \"title\": \"比例尺\",\n \"slug\": \"比例尺\"\n },\n {\n \"depth\": 3,\n \"title\": \"创建线性比例\",\n \"slug\": \"创建线性比例\"\n },\n {\n \"depth\": 4,\n \"title\": \"线性缩放\",\n \"slug\": \"线性缩放\"\n },\n {\n \"depth\": 4,\n \"title\": \"按比例设置域和范围\",\n \"slug\": \"按比例设置域和范围\"\n },\n {\n \"depth\": 4,\n \"title\": \"最小值最大值\",\n \"slug\": \"最小值最大值\"\n },\n {\n \"depth\": 3,\n \"title\": \"使用动态比例\",\n \"slug\": \"使用动态比例\"\n },\n {\n \"depth\": 3,\n \"title\": \"使用预定义的比例放置元素\",\n \"slug\": \"使用预定义的比例放置元素\"\n },\n {\n \"depth\": 3,\n \"title\": \"添加坐标轴\",\n \"slug\": \"添加坐标轴\"\n },\n {\n \"depth\": 2,\n \"title\": \"常见图表\",\n \"slug\": \"常见图表\"\n },\n {\n \"depth\": 3,\n \"title\": \"散点图\",\n \"slug\": \"散点图\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.463Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"css和js两种方式实现div右移1000px动画\",\n \"created\": \"2022-07-20T00:00:00.000Z\",\n \"summary\": \"用keyframes和timer\",\n \"tags\": [\n \"CSS\",\n \"JavaScript\",\n \"animation\"\n ],\n \"slug\": \"/2022-07-20-animation/index.svelte.md\",\n \"path\": \"/2022-07-20-animation\",\n \"toc\": [],\n \"updated\": \"2022-08-01T03:03:33.463Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"我在看什么 · 5月\",\n \"created\": \"2022-07-16T00:00:00.000Z\",\n \"summary\": \"Anki / JSDoc / 蘑菇 / Music-Map ……\",\n \"tags\": [\n \"我在看什么\"\n ],\n \"image\": \"/2022-07-16-reading-5/May1.jpg\",\n \"slug\": \"/2022-07-16-reading-5/index.md\",\n \"path\": \"/2022-07-16-reading-5\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"Productivity\",\n \"slug\": \"productivity\"\n },\n {\n \"depth\": 2,\n \"title\": \"有趣的\",\n \"slug\": \"有趣的\"\n }\n ],\n \"updated\": \"2022-08-11T16:29:56.272Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"我在看什么 · 6月\",\n \"created\": \"2022-07-15T00:00:00.000Z\",\n \"summary\": \"Vue / 网页性能优化 / npm ……\",\n \"tags\": [\n \"我在看什么\"\n ],\n \"image\": \"/2022-07-15-reading-6/june.png\",\n \"slug\": \"/2022-07-15-reading-6/index.md\",\n \"path\": \"/2022-07-15-reading-6\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"编程相关\",\n \"slug\": \"编程相关\"\n },\n {\n \"depth\": 3,\n \"title\": \"前端\",\n \"slug\": \"前端\"\n },\n {\n \"depth\": 3,\n \"title\": \"后端\",\n \"slug\": \"后端\"\n },\n {\n \"depth\": 2,\n \"title\": \"其他\",\n \"slug\": \"其他\"\n },\n {\n \"depth\": 2,\n \"title\": \"互联网哲学\",\n \"slug\": \"互联网哲学\"\n }\n ],\n \"updated\": \"2022-08-06T11:32:41.091Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"SQL 基础笔记\",\n \"created\": \"2022-07-13T00:00:00.000Z\",\n \"summary\": \"关于增改删查的方式\",\n \"tags\": [\n \"SQL\"\n ],\n \"slug\": \"/2022-07-13-sql.md\",\n \"path\": \"/2022-07-13-sql\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"SQL vs. NOSQL\",\n \"slug\": \"sql-vs-nosql\"\n },\n {\n \"depth\": 2,\n \"title\": \"CRUD\",\n \"slug\": \"crud\"\n },\n {\n \"depth\": 3,\n \"title\": \"Create\",\n \"slug\": \"create\"\n },\n {\n \"depth\": 3,\n \"title\": \"Read\",\n \"slug\": \"read\"\n },\n {\n \"depth\": 3,\n \"title\": \"Update\",\n \"slug\": \"update\"\n },\n {\n \"depth\": 3,\n \"title\": \"Destory\",\n \"slug\": \"destory\"\n },\n {\n \"depth\": 2,\n \"title\": \"Understanding SQL Relationships, Foreign Keys and Inner Joins\",\n \"slug\": \"understanding-sql-relationships-foreign-keys-and-inner-joins\"\n },\n {\n \"depth\": 3,\n \"title\": \"FOREIGN KEY\",\n \"slug\": \"foreign-key\"\n },\n {\n \"depth\": 3,\n \"title\": \"INNER JOIN\",\n \"slug\": \"inner-join\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.359Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"一些设计作品\",\n \"created\": \"2022-07-13T00:00:00.000Z\",\n \"summary\": \"logo / UI / 包装 / 儿童玩具 ……\",\n \"slug\": \"/2022-07-13-work/index.md\",\n \"path\": \"/2022-07-13-work\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"二十四节气茶包\",\n \"slug\": \"二十四节气茶包\"\n },\n {\n \"depth\": 2,\n \"title\": \"UI 设计\",\n \"slug\": \"ui-设计\"\n },\n {\n \"depth\": 2,\n \"title\": \"饼干包装\",\n \"slug\": \"饼干包装\"\n },\n {\n \"depth\": 2,\n \"title\": \"Logo\",\n \"slug\": \"logo\"\n },\n {\n \"depth\": 2,\n \"title\": \"排版装帧\",\n \"slug\": \"排版装帧\"\n },\n {\n \"depth\": 2,\n \"title\": \"儿童玩具\",\n \"slug\": \"儿童玩具\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.433Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Privacy Policy 隐私声明\",\n \"created\": \"2022-06-19T00:00:00.000Z\",\n \"flags\": [\n \"unlisted\"\n ],\n \"slug\": \"/privacy/index.svelte.md\",\n \"path\": \"/privacy\",\n \"toc\": [],\n \"updated\": \"2022-08-01T03:03:33.476Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"VPS · Jellyfin结合Cloudreve开启线上影院\",\n \"created\": \"2022-06-15T00:00:00.000Z\",\n \"summary\": \"基于 Docker 和 Nginx 的信心搭建过程\",\n \"image\": \"/2022-06-15-jellyfin/1.jpg\",\n \"tags\": [\n \"Nginx\",\n \"VPS\",\n \"Docker\"\n ],\n \"slug\": \"/2022-06-15-jellyfin/index.md\",\n \"path\": \"/2022-06-15-jellyfin\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"关于 Jellyfin\",\n \"slug\": \"关于-jellyfin\"\n },\n {\n \"depth\": 2,\n \"title\": \"Cloudrever\",\n \"slug\": \"cloudrever\"\n },\n {\n \"depth\": 3,\n \"title\": \"反代\",\n \"slug\": \"反代\"\n },\n {\n \"depth\": 3,\n \"title\": \"一些配置\",\n \"slug\": \"一些配置\"\n },\n {\n \"depth\": 2,\n \"title\": \"Jellyfin\",\n \"slug\": \"jellyfin\"\n },\n {\n \"depth\": 3,\n \"title\": \"搭建\",\n \"slug\": \"搭建\"\n },\n {\n \"depth\": 3,\n \"title\": \"反代\",\n \"slug\": \"反代-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"媒体库路径\",\n \"slug\": \"媒体库路径\"\n },\n {\n \"depth\": 3,\n \"title\": \"插件安装\",\n \"slug\": \"插件安装\"\n },\n {\n \"depth\": 3,\n \"title\": \"主题和语言\",\n \"slug\": \"主题和语言\"\n }\n ],\n \"updated\": \"2022-08-06T11:32:41.091Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"VPS · 配置 Cloudflare 的免费 SSL 证书\",\n \"created\": \"2022-06-12T00:00:00.000Z\",\n \"summary\": \"关于如何为多个域名配置SSL证书的操作笔记\",\n \"tags\": [\n \"Nginx\",\n \"VPS\"\n ],\n \"slug\": \"/2022-06-12-cloudflare.md\",\n \"path\": \"/2022-06-12-cloudflare\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1. 创建证书\",\n \"slug\": \"1-创建证书\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 密钥上传到 VPS\",\n \"slug\": \"2-密钥上传到-vps\"\n },\n {\n \"depth\": 2,\n \"title\": \"3. 修改 Nginx 配置\",\n \"slug\": \"3-修改-nginx-配置\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.353Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"实现一个返回页面顶部的 Vue3 组件\",\n \"created\": \"2022-06-10T00:00:00.000Z\",\n \"summary\": \"结合流畅的动画平滑滚动到页面顶部\",\n \"tags\": [\n \"Vue3\",\n \"BootStrap\"\n ],\n \"slug\": \"/2022-06-10-backtotop.md\",\n \"path\": \"/2022-06-10-backtotop\",\n \"toc\": [],\n \"updated\": \"2022-08-01T11:38:16.754Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Contabo OSS + PicGo 图床配置\",\n \"created\": \"2022-05-30T00:00:00.000Z\",\n \"summary\": \"OSS自建图床笔记\",\n \"tags\": [\n \"OSS\"\n ],\n \"slug\": \"/2022-05-30-contabo-oss.md\",\n \"path\": \"/2022-05-30-contabo-oss\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1. 购买套餐\",\n \"slug\": \"1-购买套餐\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 创建 Bucket\",\n \"slug\": \"2-创建-bucket\"\n },\n {\n \"depth\": 2,\n \"title\": \"3. 安装 PicGo 插件\",\n \"slug\": \"3-安装-picgo-插件\"\n },\n {\n \"depth\": 2,\n \"title\": \"4. 配置插件\",\n \"slug\": \"4-配置插件\"\n },\n {\n \"depth\": 3,\n \"title\": \"应用密钥 ID 和 应用密钥\",\n \"slug\": \"应用密钥-id-和-应用密钥\"\n },\n {\n \"depth\": 3,\n \"title\": \"桶 / 自定义节点 /自定义域名\",\n \"slug\": \"桶--自定义节点-自定义域名\"\n },\n {\n \"depth\": 3,\n \"title\": \"其他设置\",\n \"slug\": \"其他设置\"\n },\n {\n \"depth\": 2,\n \"title\": \"5. 其他\",\n \"slug\": \"5-其他\"\n },\n {\n \"depth\": 3,\n \"title\": \"Obsidian 中的图床设置\",\n \"slug\": \"obsidian-中的图床设置\"\n },\n {\n \"depth\": 3,\n \"title\": \"更多 PicGO 插件：\",\n \"slug\": \"更多-picgo-插件\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.353Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"为博客写一个Project showcase 页面\",\n \"created\": \"2022-05-26T00:00:00.000Z\",\n \"summary\": \"第一次Pull Request的经历\",\n \"tags\": [\n \"Svelte\",\n \"Open Source\"\n ],\n \"slug\": \"/2022-05-26-write-a-page-template.md\",\n \"path\": \"/2022-05-26-write-a-page-template\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1. 分析需求\",\n \"slug\": \"1-分析需求\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 画原型图\",\n \"slug\": \"2-画原型图\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 创建组件样式 CSS\",\n \"slug\": \"2-创建组件样式-css\"\n },\n {\n \"depth\": 2,\n \"title\": \"4. 编写组件代码\",\n \"slug\": \"4-编写组件代码\"\n },\n {\n \"depth\": 3,\n \"title\": \"数据\",\n \"slug\": \"数据\"\n },\n {\n \"depth\": 3,\n \"title\": \"组件\",\n \"slug\": \"组件\"\n },\n {\n \"depth\": 3,\n \"title\": \"页面\",\n \"slug\": \"页面\"\n },\n {\n \"depth\": 3,\n \"title\": \"响应式布局\",\n \"slug\": \"响应式布局\"\n },\n {\n \"depth\": 2,\n \"title\": \"5. 测试\",\n \"slug\": \"5-测试\"\n },\n {\n \"depth\": 2,\n \"title\": \"6. Pull request 到 Github\",\n \"slug\": \"6-pull-request-到-github\"\n },\n {\n \"depth\": 2,\n \"title\": \"7. Last but not least\",\n \"slug\": \"7-last-but-not-least\"\n }\n ],\n \"updated\": \"2022-08-01T11:36:42.589Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Git · 常用操作笔记\",\n \"created\": \"2022-05-25T00:00:00.000Z\",\n \"summary\": \"每次更新博客进行的操作以及常见错误处理\",\n \"tags\": [\n \"Git\"\n ],\n \"slug\": \"/2022-05-25-git.md\",\n \"path\": \"/2022-05-25-git\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"每次更新博客进行的操作\",\n \"slug\": \"每次更新博客进行的操作\"\n },\n {\n \"depth\": 3,\n \"title\": \"1. 追踪所有文件\",\n \"slug\": \"1-追踪所有文件\"\n },\n {\n \"depth\": 3,\n \"title\": \"2. 提交上传信息\",\n \"slug\": \"2-提交上传信息\"\n },\n {\n \"depth\": 3,\n \"title\": \"3. push 到 Github\",\n \"slug\": \"3-push-到-github\"\n },\n {\n \"depth\": 2,\n \"title\": \"常用 Git 操作\",\n \"slug\": \"常用-git-操作\"\n },\n {\n \"depth\": 2,\n \"title\": \"常见问题\",\n \"slug\": \"常见问题\"\n },\n {\n \"depth\": 3,\n \"title\": \"版本回滚\",\n \"slug\": \"版本回滚\"\n },\n {\n \"depth\": 3,\n \"title\": \"报错处理\",\n \"slug\": \"报错处理\"\n },\n {\n \"depth\": 3,\n \"title\": \"博客相关\",\n \"slug\": \"博客相关\"\n },\n {\n \"depth\": 3,\n \"title\": \"其他\",\n \"slug\": \"其他\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.322Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Hypothesis 使用小记\",\n \"created\": \"2022-05-25T00:00:00.000Z\",\n \"summary\": \"Hypothesis同步到Obsidian / Logseq的方法\",\n \"tags\": [\n \"Logseq\",\n \"Obsidian\"\n ],\n \"slug\": \"/2022-05-25-hypothesis/index.md\",\n \"path\": \"/2022-05-25-hypothesis\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"同步到 Logseq\",\n \"slug\": \"同步到-logseq\"\n },\n {\n \"depth\": 3,\n \"title\": \"1. 打开插件系统开关\",\n \"slug\": \"1-打开插件系统开关\"\n },\n {\n \"depth\": 3,\n \"title\": \"2. 安装 Hypothesis 插件\",\n \"slug\": \"2-安装-hypothesis-插件\"\n },\n {\n \"depth\": 3,\n \"title\": \"3. 获取 API Token\",\n \"slug\": \"3-获取-api-token\"\n },\n {\n \"depth\": 3,\n \"title\": \"4. 同步笔记\",\n \"slug\": \"4-同步笔记\"\n },\n {\n \"depth\": 3,\n \"title\": \"5. 修改笔记模板\",\n \"slug\": \"5-修改笔记模板\"\n },\n {\n \"depth\": 2,\n \"title\": \"同步到 Obsidian\",\n \"slug\": \"同步到-obsidian\"\n },\n {\n \"depth\": 3,\n \"title\": \"1. 安装 Hypothesis 插件\",\n \"slug\": \"1-安装-hypothesis-插件\"\n },\n {\n \"depth\": 3,\n \"title\": \"2. API 配置\",\n \"slug\": \"2-api-配置\"\n },\n {\n \"depth\": 3,\n \"title\": \"3. 笔记模板配置\",\n \"slug\": \"3-笔记模板配置\"\n },\n {\n \"depth\": 3,\n \"title\": \"4. 更新笔记\",\n \"slug\": \"4-更新笔记\"\n },\n {\n \"depth\": 2,\n \"title\": \"订阅 Hypothesis 的 RSS\",\n \"slug\": \"订阅-hypothesis-的-rss\"\n },\n {\n \"depth\": 2,\n \"title\": \"其他参考\",\n \"slug\": \"其他参考\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.353Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"SQL · 在 Windows 10 上安装 sqlite\",\n \"created\": \"2022-05-23T00:00:00.000Z\",\n \"summary\": \"写给计算机小白的 sqlite 安装笔记\",\n \"tags\": [\n \"SQL\"\n ],\n \"slug\": \"/2022-05-23-win-sql/index.md\",\n \"path\": \"/2022-05-23-win-sql\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1. 下载二进制文件\",\n \"slug\": \"1-下载二进制文件\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 创建安装文件夹\",\n \"slug\": \"2-创建安装文件夹\"\n },\n {\n \"depth\": 2,\n \"title\": \"3. 添加环境变量\",\n \"slug\": \"3-添加环境变量\"\n },\n {\n \"depth\": 2,\n \"title\": \"4. 命令提示符中查看 sqlite3 版本\",\n \"slug\": \"4-命令提示符中查看-sqlite3-版本\"\n },\n {\n \"depth\": 2,\n \"title\": \"常用命令行\",\n \"slug\": \"常用命令行\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.303Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"JavaScript · 数组中的copyWithin方法\",\n \"created\": \"2022-05-08T17:13:47.671Z\",\n \"summary\": \"一种数组内元素复制的方法\",\n \"tags\": [\n \"JavaScript\"\n ],\n \"lastmod\": \"2022-05-09T02:27:47.533Z\",\n \"slug\": \"/2022-05-09-copywithin/index.md\",\n \"path\": \"/2022-05-09-copywithin\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"简介\",\n \"slug\": \"简介\"\n },\n {\n \"depth\": 3,\n \"title\": \"语法：\",\n \"slug\": \"语法\"\n },\n {\n \"depth\": 2,\n \"title\": \"参数\",\n \"slug\": \"参数\"\n },\n {\n \"depth\": 3,\n \"title\": \"target\",\n \"slug\": \"target\"\n },\n {\n \"depth\": 3,\n \"title\": \"start\",\n \"slug\": \"start\"\n },\n {\n \"depth\": 3,\n \"title\": \"end\",\n \"slug\": \"end\"\n },\n {\n \"depth\": 2,\n \"title\": \"例子\",\n \"slug\": \"例子\"\n },\n {\n \"depth\": 3,\n \"title\": \"源码\",\n \"slug\": \"源码\"\n },\n {\n \"depth\": 3,\n \"title\": \"可视化\",\n \"slug\": \"可视化\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.294Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"VPS 安全初始化\",\n \"created\": \"2022-05-06T00:00:00.000Z\",\n \"summary\": \"上次 VPS 被别人暴力破解了，一哭二闹三重装之后，有了本文\",\n \"tags\": [\n \"VPS\",\n \"Self hosted\"\n ],\n \"slug\": \"/2022-05-07-vps-init.md\",\n \"path\": \"/2022-05-07-vps-init\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"思路\",\n \"slug\": \"思路\"\n },\n {\n \"depth\": 3,\n \"title\": \"日常防护\",\n \"slug\": \"日常防护\"\n },\n {\n \"depth\": 3,\n \"title\": \"安全检查\",\n \"slug\": \"安全检查\"\n },\n {\n \"depth\": 2,\n \"title\": \"1. 创建新用户\",\n \"slug\": \"1-创建新用户\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 配置 SSH-keys\",\n \"slug\": \"2-配置-ssh-keys\"\n },\n {\n \"depth\": 3,\n \"title\": \"本地生成 SSH 密钥对\",\n \"slug\": \"本地生成-ssh-密钥对\"\n },\n {\n \"depth\": 3,\n \"title\": \"安装公钥\",\n \"slug\": \"安装公钥\"\n },\n {\n \"depth\": 3,\n \"title\": \"修改权限\",\n \"slug\": \"修改权限\"\n },\n {\n \"depth\": 3,\n \"title\": \"修改 sshd 配置文件\",\n \"slug\": \"修改-sshd-配置文件\"\n },\n {\n \"depth\": 3,\n \"title\": \"禁用密码登陆和改端口\",\n \"slug\": \"禁用密码登陆和改端口\"\n },\n {\n \"depth\": 3,\n \"title\": \"修改默认登陆端口\",\n \"slug\": \"修改默认登陆端口\"\n },\n {\n \"depth\": 2,\n \"title\": \"3. 安装 ClamAV\",\n \"slug\": \"3-安装-clamav\"\n },\n {\n \"depth\": 3,\n \"title\": \"安装\",\n \"slug\": \"安装\"\n },\n {\n \"depth\": 3,\n \"title\": \"更新病毒数据库\",\n \"slug\": \"更新病毒数据库\"\n },\n {\n \"depth\": 3,\n \"title\": \"开机启动\",\n \"slug\": \"开机启动\"\n },\n {\n \"depth\": 3,\n \"title\": \"下载 ClamAV 数据库\",\n \"slug\": \"下载-clamav-数据库\"\n },\n {\n \"depth\": 3,\n \"title\": \"限制 Clamscan CPU 使用率\",\n \"slug\": \"限制-clamscan-cpu-使用率\"\n },\n {\n \"depth\": 3,\n \"title\": \"常见 CLI\",\n \"slug\": \"常见-cli\"\n },\n {\n \"depth\": 3,\n \"title\": \"ClamAV 返回码\",\n \"slug\": \"clamav-返回码\"\n },\n {\n \"depth\": 2,\n \"title\": \"4. 安装 Fail2ban\",\n \"slug\": \"4-安装-fail2ban\"\n },\n {\n \"depth\": 3,\n \"title\": \"准备\",\n \"slug\": \"准备\"\n },\n {\n \"depth\": 3,\n \"title\": \"安装\",\n \"slug\": \"安装-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"修改配置：\",\n \"slug\": \"修改配置\"\n },\n {\n \"depth\": 2,\n \"title\": \"5. SSL 证书相关\",\n \"slug\": \"5-ssl-证书相关\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.291Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"About\",\n \"created\": \"2022-05-06T00:00:00.000Z\",\n \"updated\": \"2022-05-06T00:00:00.000Z\",\n \"flags\": [\n \"unlisted\"\n ],\n \"lastmod\": \"2022-05-20T04:07:08.760Z\",\n \"slug\": \"/about/index.svelte.md\",\n \"path\": \"/about\",\n \"toc\": [\n {\n \"depth\": 3,\n \"title\": \"写码进度\",\n \"slug\": \"写码进度\"\n },\n {\n \"depth\": 3,\n \"title\": \"其他站点\",\n \"slug\": \"其他站点\"\n },\n {\n \"depth\": 3,\n \"title\": \"博客日志\",\n \"slug\": \"博客日志\"\n }\n ],\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"CSS · 解决 Chrome 中小于12px的字体不显示的问题\",\n \"lastmod\": \"2022-04-07T07:36:23.629Z\",\n \"summary\": \"先用scale总体缩小再补上减少的宽度\",\n \"created\": \"2022-03-29T13:46:29.228Z\",\n \"tags\": [\n \"CSS\",\n \"CSS Trick\"\n ],\n \"categories\": [\n \"CSS\"\n ],\n \"toc\": false,\n \"slug\": \"/2022-03-29-12px.md\",\n \"path\": \"/2022-03-29-12px\",\n \"updated\": \"2022-08-06T10:50:25.374Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Miniflux · 保存文章到 Pocket 以及 RSS\",\n \"summary\": \"将 Miniflux 上的文章到保存到 Pocket/Instapaper,以及 RSS 相关文章和资源\",\n \"created\": \"2022-03-10T16:24:38.663Z\",\n \"preview\": \"\",\n \"draft\": \"\",\n \"tags\": [\n \"RSS\",\n \"Miniflux\"\n ],\n \"changelogs\": [\n {\n \"tag\": \"202203011\",\n \"summary\": [\n \"添加了`instapaper`的连接方式\",\n \"添加了Pocket按钮嵌入方式\"\n ]\n }\n ],\n \"lastmod\": \"2022-04-07T07:38:52.406Z\",\n \"slug\": \"/2022-03-11-miniflux-to-pocket.md\",\n \"path\": \"/2022-03-11-miniflux-to-pocket\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1. 创建 Pocket Application\",\n \"slug\": \"1-创建-pocket-application\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 获取 Consumer Key 用户密钥\",\n \"slug\": \"2-获取-consumer-key-用户密钥\"\n },\n {\n \"depth\": 2,\n \"title\": \"3. 获取 Access Token 访问密钥\",\n \"slug\": \"3-获取-access-token-访问密钥\"\n },\n {\n \"depth\": 2,\n \"title\": \"其他\",\n \"slug\": \"其他\"\n },\n {\n \"depth\": 3,\n \"title\": \"1.为博客添加 Pocket 收藏按钮\",\n \"slug\": \"1为博客添加-pocket-收藏按钮\"\n },\n {\n \"depth\": 3,\n \"title\": \"2.用 Fever 同步到 Reeder\",\n \"slug\": \"2用-fever-同步到-reeder\"\n },\n {\n \"depth\": 3,\n \"title\": \"3.连接到 Instapaper\",\n \"slug\": \"3连接到-instapaper\"\n },\n {\n \"depth\": 2,\n \"title\": \"RSS 相关内容\",\n \"slug\": \"rss-相关内容\"\n },\n {\n \"depth\": 3,\n \"title\": \"1. Miniflux 搭建\",\n \"slug\": \"1-miniflux-搭建\"\n },\n {\n \"depth\": 3,\n \"title\": \"2. 其他选择\",\n \"slug\": \"2-其他选择\"\n },\n {\n \"depth\": 3,\n \"title\": \"3. RSS 生成\",\n \"slug\": \"3-rss-生成\"\n },\n {\n \"depth\": 3,\n \"title\": \"4. 看什么\",\n \"slug\": \"4-看什么\"\n },\n {\n \"depth\": 4,\n \"title\": \"5. 关于 RSS\",\n \"slug\": \"5-关于-rss\"\n }\n ],\n \"updated\": \"2022-08-06T10:51:23.859Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Forty页面仿写\",\n \"summary\": \"完成 HTML、CSS 代码编写，暂无 JavaScript\",\n \"created\": \"2022-03-10T08:38:17.227Z\",\n \"preview\": \"\",\n \"draft\": \"\",\n \"tags\": [\n \"CSS\",\n \"HTML\"\n ],\n \"lastmod\": \"2022-04-07T07:39:48.473Z\",\n \"slug\": \"/2022-03-10-forty.md\",\n \"path\": \"/2022-03-10-forty\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"题目\",\n \"slug\": \"题目\"\n },\n {\n \"depth\": 2,\n \"title\": \"示例图\",\n \"slug\": \"示例图\"\n },\n {\n \"depth\": 2,\n \"title\": \"Demo\",\n \"slug\": \"demo\"\n }\n ],\n \"updated\": \"2022-08-06T10:51:23.374Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"CSS · Tab选项卡\",\n \"summary\": \"一个纯 CSS 实现的 Tab 选项卡\",\n \"created\": \"2022-03-09T07:42:25.299Z\",\n \"tags\": [\n \"CSS\"\n ],\n \"categories\": [\n \"CSS\"\n ],\n \"lastmod\": \"2022-04-07T07:40:02.371Z\",\n \"slug\": \"/2022-03-09-css-tab.md\",\n \"path\": \"/2022-03-09-css-tab\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"原理\",\n \"slug\": \"原理\"\n },\n {\n \"depth\": 2,\n \"title\": \"代码\",\n \"slug\": \"代码\"\n },\n {\n \"depth\": 3,\n \"title\": \"HTML\",\n \"slug\": \"html\"\n },\n {\n \"depth\": 3,\n \"title\": \"CSS\",\n \"slug\": \"css\"\n },\n {\n \"depth\": 2,\n \"title\": \"参考\",\n \"slug\": \"参考\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:54.161Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"JavaScript · 打字机效果生成器\",\n \"summary\": \"用 JavaScript 实现网页打字机效果\",\n \"created\": \"2022-03-08T16:19:05.137Z\",\n \"tags\": [\n \"JavaScript\"\n ],\n \"categories\": [\n \"JavaScript\"\n ],\n \"lastmod\": \"2022-04-07T07:40:27.758Z\",\n \"slug\": \"/2022-03-09-typewriter.md\",\n \"path\": \"/2022-03-09-typewriter\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"题目\",\n \"slug\": \"题目\"\n },\n {\n \"depth\": 2,\n \"title\": \"解法\",\n \"slug\": \"解法\"\n },\n {\n \"depth\": 2,\n \"title\": \"参考\",\n \"slug\": \"参考\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:29.470Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"JavaScript · Caesar Cipher 凯撒加密\",\n \"summary\": \"用JavaScrpit编码实现凯撒加密算法\",\n \"created\": \"2022-03-08T16:01:08.850Z\",\n \"tags\": [\n \"JavaScript\"\n ],\n \"categories\": [\n \"JavaScript\"\n ],\n \"lastmod\": \"2022-04-07T07:20:47.694Z\",\n \"slug\": \"/2022-03-09-caesar-cipher.md\",\n \"path\": \"/2022-03-09-caesar-cipher\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"题目\",\n \"slug\": \"题目\"\n },\n {\n \"depth\": 2,\n \"title\": \"解法\",\n \"slug\": \"解法\"\n },\n {\n \"depth\": 3,\n \"title\": \"HTML\",\n \"slug\": \"html\"\n },\n {\n \"depth\": 3,\n \"title\": \"JS\",\n \"slug\": \"js\"\n },\n {\n \"depth\": 2,\n \"title\": \"参考\",\n \"slug\": \"参考\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:48.659Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"JavaScript · 字符串去重\",\n \"summary\": \"编码实现字符串去重\",\n \"created\": \"2022-03-07T13:55:21.090Z\",\n \"tags\": [\n \"JavaScript\"\n ],\n \"categories\": [\n \"JavaScript\"\n ],\n \"lastmod\": \"2022-04-07T07:20:30.550Z\",\n \"slug\": \"/2022-03-07-filter.md\",\n \"path\": \"/2022-03-07-filter\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"题目\",\n \"slug\": \"题目\"\n },\n {\n \"depth\": 2,\n \"title\": \"解法\",\n \"slug\": \"解法\"\n },\n {\n \"depth\": 2,\n \"title\": \"其他解法\",\n \"slug\": \"其他解法\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:50.151Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Obsidian · 网课学习笔记整理\",\n \"summary\": \"拆分整合的过程\",\n \"created\": \"2022-03-06T16:23:33.118Z\",\n \"tags\": [\n \"Obsidian\"\n ],\n \"categories\": [\n \"Obsidian\"\n ],\n \"lastmod\": \"2022-04-07T07:20:39.933Z\",\n \"slug\": \"/2022-03-07-obsidian-notes1.md\",\n \"path\": \"/2022-03-07-obsidian-notes1\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"具体的方法\",\n \"slug\": \"具体的方法\"\n },\n {\n \"depth\": 3,\n \"title\": \"Step1-构建地图\",\n \"slug\": \"step1-构建地图\"\n },\n {\n \"depth\": 3,\n \"title\": \"Step2-写课堂笔记\",\n \"slug\": \"step2-写课堂笔记\"\n },\n {\n \"depth\": 3,\n \"title\": \"Step3-重组笔记\",\n \"slug\": \"step3-重组笔记\"\n },\n {\n \"depth\": 4,\n \"title\": \"布局\",\n \"slug\": \"布局\"\n },\n {\n \"depth\": 4,\n \"title\": \"结构编辑\",\n \"slug\": \"结构编辑\"\n },\n {\n \"depth\": 4,\n \"title\": \"拆分笔记\",\n \"slug\": \"拆分笔记\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:46.655Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Airtable · 网页剪藏\",\n \"summary\": \"Airtable Web Cilpper设置\",\n \"created\": \"2022-03-06T05:58:29.026Z\",\n \"categories\": [\n \"实用技巧\"\n ],\n \"tags\": [\n \"实用技巧\"\n ],\n \"lastmod\": \"2022-04-16T12:54:20.049Z\",\n \"slug\": \"/2022-03-06-airtable.md\",\n \"path\": \"/2022-03-06-airtable\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"书签这回事\",\n \"slug\": \"书签这回事\"\n },\n {\n \"depth\": 2,\n \"title\": \"关于 Airtable\",\n \"slug\": \"关于-airtable\"\n },\n {\n \"depth\": 2,\n \"title\": \"怎么用 Airtable 剪切网页\",\n \"slug\": \"怎么用-airtable-剪切网页\"\n },\n {\n \"depth\": 3,\n \"title\": \"1. 创建表格\",\n \"slug\": \"1-创建表格\"\n },\n {\n \"depth\": 3,\n \"title\": \"2. 创建 app\",\n \"slug\": \"2-创建-app\"\n },\n {\n \"depth\": 3,\n \"title\": \"3. 配置剪切设置\",\n \"slug\": \"3-配置剪切设置\"\n },\n {\n \"depth\": 3,\n \"title\": \"4. Web Clipper 剪切\",\n \"slug\": \"4-web-clipper-剪切\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:42.370Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"JavaScript · 十进制数转二进制\",\n \"summary\": \"用JavaScript将十进制数转二进制数\",\n \"created\": \"2022-03-04T14:57:48.683Z\",\n \"draft\": \"\",\n \"tags\": [\n \"JavaScript\"\n ],\n \"categories\": [\n \"JavaScript\"\n ],\n \"lastmod\": \"2022-04-16T12:54:16.167Z\",\n \"type\": \"article\",\n \"slug\": \"/2022-03-04-decbin.md\",\n \"path\": \"/2022-03-04-decbin\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"题目\",\n \"slug\": \"题目\"\n },\n {\n \"depth\": 3,\n \"title\": \"Task1\",\n \"slug\": \"task1\"\n },\n {\n \"depth\": 3,\n \"title\": \"Task2\",\n \"slug\": \"task2\"\n },\n {\n \"depth\": 2,\n \"title\": \"解法\",\n \"slug\": \"解法\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:40.572Z\",\n \"html\": \"\"\n },\n {\n \"title\": \"JavaScript · 判断水仙花数\",\n \"summary\": \"用JavaScript判断水仙花数\",\n \"created\": \"2022-03-03T15:07:14.533Z\",\n \"categories\": [\n \"JavaScript\"\n ],\n \"tags\": [\n \"JavaScript\"\n ],\n \"slug\": \"/2022-03-03.md\",\n \"lastmod\": \"2022-04-07T07:20:02.340Z\",\n \"path\": \"/2022-03-03\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"题目\",\n \"slug\": \"题目\"\n },\n {\n \"depth\": 2,\n \"title\": \"解法\",\n \"slug\": \"解法\"\n },\n {\n \"depth\": 2,\n \"title\": \"参考\",\n \"slug\": \"参考\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:38.994Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"自建网页书签Flare\",\n \"created\": \"2022-02-20T14:04:17.000Z\",\n \"tags\": [\n \"Docker\",\n \"Self-hosted\"\n ],\n \"slug\": \"/flare.md\",\n \"summary\": \"通过Docker自建网页书签Flare\",\n \"lastmod\": \"2022-03-30T02:19:33.711Z\",\n \"path\": \"/flare\",\n \"toc\": [\n {\n \"depth\": 3,\n \"title\": \"1.创建 Flare 文件夹\",\n \"slug\": \"1创建-flare-文件夹\"\n },\n {\n \"depth\": 3,\n \"title\": \"2.下载包含示例的代码\",\n \"slug\": \"2下载包含示例的代码\"\n },\n {\n \"depth\": 3,\n \"title\": \"3.运行容器\",\n \"slug\": \"3运行容器\"\n },\n {\n \"depth\": 4,\n \"title\": \"方法 1：直接启动\",\n \"slug\": \"方法-1直接启动\"\n },\n {\n \"depth\": 4,\n \"title\": \"方法 2：通过 docker composer\",\n \"slug\": \"方法-2通过-docker-composer\"\n },\n {\n \"depth\": 3,\n \"title\": \"4.修改书签内容\",\n \"slug\": \"4修改书签内容\"\n },\n {\n \"depth\": 3,\n \"title\": \"5.用 nginx 反代和设置域名\",\n \"slug\": \"5用-nginx-反代和设置域名\"\n },\n {\n \"depth\": 3,\n \"title\": \"6.SSL 证书和其他书签\",\n \"slug\": \"6ssl-证书和其他书签\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:53.655Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"用 docker 安装 Halo 博客\",\n \"created\": \"2022-02-16T14:04:17.000Z\",\n \"tags\": [\n \"Docker\",\n \"Self-hosted\"\n ],\n \"slug\": \"/halo.md\",\n \"summary\": \"\",\n \"lastmod\": \"2022-05-07T05:39:19.169Z\",\n \"path\": \"/halo\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"准备\",\n \"slug\": \"准备\"\n },\n {\n \"depth\": 3,\n \"title\": \"解析域名\",\n \"slug\": \"解析域名\"\n },\n {\n \"depth\": 3,\n \"title\": \"安装 docker\",\n \"slug\": \"安装-docker\"\n },\n {\n \"depth\": 3,\n \"title\": \"检查端口开放情况\",\n \"slug\": \"检查端口开放情况\"\n },\n {\n \"depth\": 2,\n \"title\": \"安装 Halo\",\n \"slug\": \"安装-halo\"\n },\n {\n \"depth\": 3,\n \"title\": \"1.创建工作目录\",\n \"slug\": \"1创建工作目录\"\n },\n {\n \"depth\": 3,\n \"title\": \"2.下载示例配置文件到工作目录\",\n \"slug\": \"2下载示例配置文件到工作目录\"\n },\n {\n \"depth\": 3,\n \"title\": \"3. 编辑配置文件，配置数据库或者端口\",\n \"slug\": \"3-编辑配置文件配置数据库或者端口\"\n },\n {\n \"depth\": 4,\n \"title\": \"打开配置文件 application.yaml\",\n \"slug\": \"打开配置文件-applicationyaml\"\n },\n {\n \"depth\": 4,\n \"title\": \"修改配置\",\n \"slug\": \"修改配置\"\n },\n {\n \"depth\": 3,\n \"title\": \"4. 拉取最新的 Halo 镜像\",\n \"slug\": \"4-拉取最新的-halo-镜像\"\n },\n {\n \"depth\": 3,\n \"title\": \"5. 创建容器\",\n \"slug\": \"5-创建容器\"\n },\n {\n \"depth\": 3,\n \"title\": \"6. 打开安装引导界面。\",\n \"slug\": \"6-打开安装引导界面\"\n },\n {\n \"depth\": 2,\n \"title\": \"用 Nginx 反代\",\n \"slug\": \"用-nginx-反代\"\n },\n {\n \"depth\": 3,\n \"title\": \"1.安装 Nginx\",\n \"slug\": \"1安装-nginx\"\n },\n {\n \"depth\": 3,\n \"title\": \"2.配置 halo.conf\",\n \"slug\": \"2配置-haloconf\"\n },\n {\n \"depth\": 3,\n \"title\": \"3.重启 nginx\",\n \"slug\": \"3重启-nginx\"\n },\n {\n \"depth\": 2,\n \"title\": \"安装 certbot，为域名获取免费 SSL 证书\",\n \"slug\": \"安装-certbot为域名获取免费-ssl-证书\"\n },\n {\n \"depth\": 3,\n \"title\": \"1.安装 certbot\",\n \"slug\": \"1安装-certbot\"\n },\n {\n \"depth\": 3,\n \"title\": \"2.配置证书\",\n \"slug\": \"2配置证书\"\n },\n {\n \"depth\": 2,\n \"title\": \"其他\",\n \"slug\": \"其他\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:49.221Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"VS Code 技巧合集\",\n \"tags\": [\n \"实用技巧\"\n ],\n \"categories\": [\n \"实用技巧\"\n ],\n \"slug\": \"/vscode.md\",\n \"summary\": \"字体/插件/设置……\",\n \"created\": \"2022-01-27T13:40:28.920Z\",\n \"lastmod\": \"2022-03-30T02:20:34.584Z\",\n \"path\": \"/vscode\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"关闭 VS Code 中的 popup 面板\",\n \"slug\": \"关闭-vs-code-中的-popup-面板\"\n },\n {\n \"depth\": 2,\n \"title\": \"修改字体\",\n \"slug\": \"修改字体\"\n },\n {\n \"depth\": 2,\n \"title\": \"快捷键\",\n \"slug\": \"快捷键\"\n },\n {\n \"depth\": 2,\n \"title\": \"插件\",\n \"slug\": \"插件\"\n },\n {\n \"depth\": 2,\n \"title\": \"设置\",\n \"slug\": \"设置\"\n },\n {\n \"depth\": 2,\n \"title\": \"其他\",\n \"slug\": \"其他\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:29.477Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"两种免费发布Axure原型的方式\",\n \"created\": \"2022-01-21T00:11:17.000Z\",\n \"tags\": [\n \"实用技巧\"\n ],\n \"slug\": \"/axure.md\",\n \"summary\": \"通过Netlify和Vercel发布\",\n \"lastmod\": \"2022-04-07T07:24:20.692Z\",\n \"path\": \"/axure\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"Netlify\",\n \"slug\": \"netlify\"\n },\n {\n \"depth\": 2,\n \"title\": \"Vercel +Github\",\n \"slug\": \"vercel-github\"\n }\n ],\n \"updated\": \"2022-08-06T10:51:25.527Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"CSS · Argon主题的CSS修改\",\n \"created\": \"2022-01-16T14:04:17.000Z\",\n \"tags\": [\n \"CSS\"\n ],\n \"slug\": \"/argon.md\",\n \"summary\": \"基于最近所学，对当前Argon主题做了一些微小的调整\",\n \"lastmod\": \"2022-05-07T05:30:35.639Z\",\n \"path\": \"/argon\",\n \"toc\": [],\n \"updated\": \"2022-08-06T10:50:02.849Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"CSS · hover时图片放大的动效\",\n \"created\": \"2022-01-13T16:03:47.000Z\",\n \"slug\": \"/hover.md\",\n \"tags\": [\n \"CSS Trick\",\n \"CSS\"\n ],\n \"summary\": \"通过transform设置\",\n \"lastmod\": \"2022-05-07T05:30:52.029Z\",\n \"path\": \"/hover\",\n \"toc\": [],\n \"updated\": \"2022-08-06T10:49:47.292Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"CSS · 三种布局方式\",\n \"slug\": \"/css-layout.md\",\n \"tags\": [\n \"CSS\"\n ],\n \"created\": \"2022-01-13T10:07:00.000Z\",\n \"summary\": \"Float / Flexbox / Grid /\",\n \"lastmod\": \"2022-05-07T05:30:20.613Z\",\n \"path\": \"/css-layout\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"Overview\",\n \"slug\": \"overview\"\n },\n {\n \"depth\": 2,\n \"title\": \"Box-sizing\",\n \"slug\": \"box-sizing\"\n },\n {\n \"depth\": 3,\n \"title\": \"reset\",\n \"slug\": \"reset\"\n },\n {\n \"depth\": 2,\n \"title\": \"Float Layout\",\n \"slug\": \"float-layout\"\n },\n {\n \"depth\": 3,\n \"title\": \"left\",\n \"slug\": \"left\"\n },\n {\n \"depth\": 3,\n \"title\": \"right\",\n \"slug\": \"right\"\n },\n {\n \"depth\": 3,\n \"title\": \"ABSOLUTE POSITIONING VS. FLOATS\",\n \"slug\": \"absolute-positioning-vs-floats\"\n },\n {\n \"depth\": 3,\n \"title\": \"Clear Float\",\n \"slug\": \"clear-float\"\n },\n {\n \"depth\": 4,\n \"title\": \"方法 1: empty div\",\n \"slug\": \"方法-1-empty-div\"\n },\n {\n \"depth\": 4,\n \"title\": \"方法 2:clearfix hack\",\n \"slug\": \"方法-2clearfix-hack\"\n },\n {\n \"depth\": 2,\n \"title\": \"Flexbox\",\n \"slug\": \"flexbox\"\n },\n {\n \"depth\": 3,\n \"title\": \"Flex container\",\n \"slug\": \"flex-container\"\n },\n {\n \"depth\": 3,\n \"title\": \"Flex items\",\n \"slug\": \"flex-items\"\n },\n {\n \"depth\": 3,\n \"title\": \"Propetities\",\n \"slug\": \"propetities\"\n },\n {\n \"depth\": 4,\n \"title\": \"order\",\n \"slug\": \"order\"\n },\n {\n \"depth\": 4,\n \"title\": \"flex-grow\",\n \"slug\": \"flex-grow\"\n },\n {\n \"depth\": 4,\n \"title\": \"flex-basis\",\n \"slug\": \"flex-basis\"\n },\n {\n \"depth\": 4,\n \"title\": \"shorthand\",\n \"slug\": \"shorthand\"\n },\n {\n \"depth\": 2,\n \"title\": \"CSS Grid\",\n \"slug\": \"css-grid\"\n },\n {\n \"depth\": 3,\n \"title\": \"grid container\",\n \"slug\": \"grid-container\"\n },\n {\n \"depth\": 4,\n \"title\": \"Gap\",\n \"slug\": \"gap\"\n },\n {\n \"depth\": 4,\n \"title\": \"align tracks inside containers\",\n \"slug\": \"align-tracks-inside-containers\"\n },\n {\n \"depth\": 3,\n \"title\": \"grid items\",\n \"slug\": \"grid-items\"\n },\n {\n \"depth\": 4,\n \"title\": \"align items inside cells\",\n \"slug\": \"align-items-inside-cells\"\n },\n {\n \"depth\": 3,\n \"title\": \"fr\",\n \"slug\": \"fr\"\n },\n {\n \"depth\": 3,\n \"title\": \"implicit row\",\n \"slug\": \"implicit-row\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:54.807Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"CSS · Add margin to buttons\",\n \"slug\": \"/margin.md\",\n \"tags\": [\n \"CSS Trick\",\n \"CSS\"\n ],\n \"created\": \"2022-01-13T10:04:21.000Z\",\n \"summary\": \"用helper class为单个按钮加margin，防止元素复用时产生不必要的margin\",\n \"lastmod\": \"2022-05-07T05:32:49.156Z\",\n \"path\": \"/margin\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"HTML\",\n \"slug\": \"html\"\n },\n {\n \"depth\": 2,\n \"title\": \"CSS\",\n \"slug\": \"css\"\n },\n {\n \"depth\": 2,\n \"title\": \"为按钮增加内边距\",\n \"slug\": \"为按钮增加内边距\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:40.186Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"CSS · Reusable Grid\",\n \"slug\": \"/grid.md\",\n \"tags\": [\n \"CSS\"\n ],\n \"created\": \"2022-01-13T10:01:44.000Z\",\n \"summary\": \"可复用的CSS Grid设置\",\n \"lastmod\": \"2022-05-07T05:32:52.372Z\",\n \"path\": \"/grid\",\n \"toc\": [\n {\n \"depth\": 4,\n \"title\": \"CSS:\",\n \"slug\": \"css\"\n },\n {\n \"depth\": 4,\n \"title\": \"HTML:\",\n \"slug\": \"html\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:51.803Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"CSS · Rem in CSS\",\n \"slug\": \"/rem-css.md\",\n \"tags\": [\n \"CSS\"\n ],\n \"created\": \"2022-01-12T09:50:27.000Z\",\n \"summary\": \"CSS中的Rem是什么\",\n \"lastmod\": \"2022-05-07T05:32:42.708Z\",\n \"path\": \"/rem-css\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1. set px\",\n \"slug\": \"1-set-px\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. percentage\",\n \"slug\": \"2-percentage\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:34.711Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"翻译 · Material Design3\",\n \"created\": \"2022-01-03T13:02:17.000Z\",\n \"tags\": [\n \"翻译\"\n ],\n \"categories\": [\n \"翻译\"\n ],\n \"slug\": \"/material.md\",\n \"summary\": \"部分翻译内容\",\n \"lastmod\": \"2022-05-07T05:30:39.510Z\",\n \"path\": \"/material\",\n \"toc\": [],\n \"updated\": \"2022-08-06T10:49:37.342Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"《用户体验要素》- 战略层（产品目标和用户需求）\",\n \"created\": \"2022-01-02T13:08:29.000Z\",\n \"categories\": [\n \"UX学习笔记\"\n ],\n \"tags\": [\n \"《用户体验要素》\",\n \"读书笔记\"\n ],\n \"summary\": \"第三章笔记\",\n \"lastmod\": \"2022-05-07T05:33:16.860Z\",\n \"slug\": \"/用户体验要素3.md\",\n \"path\": \"/用户体验要素3\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"产品目标\",\n \"slug\": \"产品目标\"\n },\n {\n \"depth\": 2,\n \"title\": \"用户需求\",\n \"slug\": \"用户需求\"\n },\n {\n \"depth\": 3,\n \"title\": \"用户细分( user segmentation）\",\n \"slug\": \"用户细分-user-segmentation\"\n },\n {\n \"depth\": 3,\n \"title\": \"用户研究(User Research）\",\n \"slug\": \"用户研究user-research\"\n },\n {\n \"depth\": 2,\n \"title\": \"团队角色和流程\",\n \"slug\": \"团队角色和流程\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:03.925Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"CSS · 基础笔记\",\n \"created\": \"2021-12-06T03:59:47.000Z\",\n \"slug\": \"/css-fundamental.md\",\n \"tags\": [\n \"CSS\"\n ],\n \"lastmod\": \"2022-05-07T05:30:27.910Z\",\n \"path\": \"/css-fundamental\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"css 是什么\",\n \"slug\": \"css-是什么\"\n },\n {\n \"depth\": 2,\n \"title\": \"分类\",\n \"slug\": \"分类\"\n },\n {\n \"depth\": 3,\n \"title\": \"inline CSS\",\n \"slug\": \"inline-css\"\n },\n {\n \"depth\": 3,\n \"title\": \"internal CSS\",\n \"slug\": \"internal-css\"\n },\n {\n \"depth\": 3,\n \"title\": \"external CSS\",\n \"slug\": \"external-css\"\n },\n {\n \"depth\": 2,\n \"title\": \"组成\",\n \"slug\": \"组成\"\n },\n {\n \"depth\": 2,\n \"title\": \"Selectors\",\n \"slug\": \"selectors\"\n },\n {\n \"depth\": 3,\n \"title\": \"descendent selector\",\n \"slug\": \"descendent-selector\"\n },\n {\n \"depth\": 3,\n \"title\": \"line selector\",\n \"slug\": \"line-selector\"\n },\n {\n \"depth\": 2,\n \"title\": \"id\",\n \"slug\": \"id\"\n },\n {\n \"depth\": 3,\n \"title\": \"class attributes\",\n \"slug\": \"class-attributes\"\n },\n {\n \"depth\": 3,\n \"title\": \"universal selector\",\n \"slug\": \"universal-selector\"\n },\n {\n \"depth\": 3,\n \"title\": \"body\",\n \"slug\": \"body\"\n },\n {\n \"depth\": 3,\n \"title\": \"优先级\",\n \"slug\": \"优先级\"\n },\n {\n \"depth\": 4,\n \"title\": \"conflicting between selectors\",\n \"slug\": \"conflicting-between-selectors\"\n },\n {\n \"depth\": 4,\n \"title\": \"inheritance\",\n \"slug\": \"inheritance\"\n },\n {\n \"depth\": 2,\n \"title\": \"颜色\",\n \"slug\": \"颜色\"\n },\n {\n \"depth\": 3,\n \"title\": \"RGB/RGBA\",\n \"slug\": \"rgbrgba\"\n },\n {\n \"depth\": 2,\n \"title\": \"Hexadecimal Colors\",\n \"slug\": \"hexadecimal-colors\"\n },\n {\n \"depth\": 2,\n \"title\": \"Pseudo Class\",\n \"slug\": \"pseudo-class\"\n },\n {\n \"depth\": 3,\n \"title\": \"第一个元素/最后一个元素\",\n \"slug\": \"第一个元素最后一个元素\"\n },\n {\n \"depth\": 3,\n \"title\": \"奇数/偶数 /特定次序\",\n \"slug\": \"奇数偶数-特定次序\"\n },\n {\n \"depth\": 3,\n \"title\": \"多种元素时\",\n \"slug\": \"多种元素时\"\n },\n {\n \"depth\": 3,\n \"title\": \"Style hyperlinks\",\n \"slug\": \"style-hyperlinks\"\n },\n {\n \"depth\": 4,\n \"title\": \"link\",\n \"slug\": \"link\"\n },\n {\n \"depth\": 4,\n \"title\": \"visited\",\n \"slug\": \"visited\"\n },\n {\n \"depth\": 4,\n \"title\": \"hover\",\n \"slug\": \"hover\"\n },\n {\n \"depth\": 4,\n \"title\": \"active\",\n \"slug\": \"active\"\n },\n {\n \"depth\": 2,\n \"title\": \"Pseudo Elements\",\n \"slug\": \"pseudo-elements\"\n },\n {\n \"depth\": 3,\n \"title\": \"adjacent sibiling selector\",\n \"slug\": \"adjacent-sibiling-selector\"\n },\n {\n \"depth\": 3,\n \"title\": \"after\",\n \"slug\": \"after\"\n },\n {\n \"depth\": 3,\n \"title\": \"before\",\n \"slug\": \"before\"\n },\n {\n \"depth\": 2,\n \"title\": \"Box Model\",\n \"slug\": \"box-model\"\n },\n {\n \"depth\": 3,\n \"title\": \"Type of boxes:\",\n \"slug\": \"type-of-boxes\"\n },\n {\n \"depth\": 4,\n \"title\": \"inline boxes\",\n \"slug\": \"inline-boxes\"\n },\n {\n \"depth\": 4,\n \"title\": \"block-level boxes\",\n \"slug\": \"block-level-boxes\"\n },\n {\n \"depth\": 4,\n \"title\": \"inline-block boxes\",\n \"slug\": \"inline-block-boxes\"\n },\n {\n \"depth\": 3,\n \"title\": \"padding\",\n \"slug\": \"padding\"\n },\n {\n \"depth\": 4,\n \"title\": \"reset margin ane padding\",\n \"slug\": \"reset-margin-ane-padding\"\n },\n {\n \"depth\": 3,\n \"title\": \"margin\",\n \"slug\": \"margin\"\n },\n {\n \"depth\": 4,\n \"title\": \"collapsing margins\",\n \"slug\": \"collapsing-margins\"\n },\n {\n \"depth\": 3,\n \"title\": \"Dimensions\",\n \"slug\": \"dimensions\"\n },\n {\n \"depth\": 4,\n \"title\": \"width\",\n \"slug\": \"width\"\n },\n {\n \"depth\": 2,\n \"title\": \"position\",\n \"slug\": \"position\"\n },\n {\n \"depth\": 3,\n \"title\": \"Normal Flow\",\n \"slug\": \"normal-flow\"\n },\n {\n \"depth\": 3,\n \"title\": \"Absolute Position\",\n \"slug\": \"absolute-position\"\n },\n {\n \"depth\": 3,\n \"title\": \"centering page\",\n \"slug\": \"centering-page\"\n },\n {\n \"depth\": 2,\n \"title\": \"基本操作\",\n \"slug\": \"基本操作\"\n },\n {\n \"depth\": 3,\n \"title\": \"CSS 注释\",\n \"slug\": \"css-注释\"\n },\n {\n \"depth\": 3,\n \"title\": \"Fix bugs\",\n \"slug\": \"fix-bugs\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:56.359Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"HTML · 基础笔记\",\n \"created\": \"2021-12-06T03:59:47.000Z\",\n \"slug\": \"/html-basis.md\",\n \"tags\": [\n \"HTML\"\n ],\n \"lastmod\": \"2022-05-07T05:30:47.655Z\",\n \"path\": \"/html-basis\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"HTML 是什么\",\n \"slug\": \"html-是什么\"\n },\n {\n \"depth\": 2,\n \"title\": \"基本组成\",\n \"slug\": \"基本组成\"\n },\n {\n \"depth\": 2,\n \"title\": \"框架\",\n \"slug\": \"框架\"\n },\n {\n \"depth\": 2,\n \"title\": \"attributes\",\n \"slug\": \"attributes\"\n },\n {\n \"depth\": 2,\n \"title\": \"tags\",\n \"slug\": \"tags\"\n },\n {\n \"depth\": 2,\n \"title\": \"HTML entity\",\n \"slug\": \"html-entity\"\n },\n {\n \"depth\": 2,\n \"title\": \"semantic HTML\",\n \"slug\": \"semantic-html\"\n },\n {\n \"depth\": 2,\n \"title\": \"空格\",\n \"slug\": \"空格\"\n },\n {\n \"depth\": 2,\n \"title\": \"当 div 中用 css 设置了图片时\",\n \"slug\": \"当-div-中用-css-设置了图片时\"\n },\n {\n \"depth\": 2,\n \"title\": \"随堂练习\",\n \"slug\": \"随堂练习\"\n },\n {\n \"depth\": 3,\n \"title\": \"商品卡片\",\n \"slug\": \"商品卡片\"\n },\n {\n \"depth\": 3,\n \"title\": \"分页器 pagination\",\n \"slug\": \"分页器-pagination\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:44.906Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"《用户体验要素》- 认识这些要素\",\n \"summary\": \"第二章笔记\",\n \"created\": \"2021-12-06T03:59:47.000Z\",\n \"categories\": [\n \"UX学习笔记\",\n \"《用户体验要素》\"\n ],\n \"tags\": [\n \"读书笔记\",\n \"《用户体验要素》\"\n ],\n \"hidden\": false,\n \"draft\": false,\n \"slug\": \"/用户体验要素2.md\",\n \"lastmod\": \"2022-04-16T12:55:45.413Z\",\n \"path\": \"/用户体验要素2\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"五个层面\",\n \"slug\": \"五个层面\"\n },\n {\n \"depth\": 2,\n \"title\": \"表现层 (surface)\",\n \"slug\": \"表现层-surface\"\n },\n {\n \"depth\": 2,\n \"title\": \"框架层 (skeleton)\",\n \"slug\": \"框架层-skeleton\"\n },\n {\n \"depth\": 2,\n \"title\": \"结构层（structure）\",\n \"slug\": \"结构层structure\"\n },\n {\n \"depth\": 2,\n \"title\": \"范围层 （scope）\",\n \"slug\": \"范围层-scope\"\n },\n {\n \"depth\": 2,\n \"title\": \"战略层 （strategy）\",\n \"slug\": \"战略层-strategy\"\n },\n {\n \"depth\": 2,\n \"title\": \"如何建设这五个层面？\",\n \"slug\": \"如何建设这五个层面\"\n },\n {\n \"depth\": 3,\n \"title\": \"自下而上地建设\",\n \"slug\": \"自下而上地建设\"\n },\n {\n \"depth\": 3,\n \"title\": \"在上一层完成之前开始下一层\",\n \"slug\": \"在上一层完成之前开始下一层\"\n },\n {\n \"depth\": 2,\n \"title\": \"基本的双重性\",\n \"slug\": \"基本的双重性\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是网页基本的双重性质？\",\n \"slug\": \"什么是网页基本的双重性质\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是信息型的媒介类产品？\",\n \"slug\": \"什么是信息型的媒介类产品\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是功能型的平台类产品\",\n \"slug\": \"什么是功能型的平台类产品\"\n },\n {\n \"depth\": 3,\n \"title\": \"用户体验的基本要素是什么？（五个层次、两种类别的产品）\",\n \"slug\": \"用户体验的基本要素是什么五个层次两种类别的产品\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:05.032Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"《用户体验要素》- 用户体验为何如此重要\",\n \"summary\": \"第一章笔记\",\n \"created\": \"2021-11-29T03:06:10.000Z\",\n \"categories\": [\n \"UX学习笔记\",\n \"《用户体验要素》\"\n ],\n \"tags\": [\n \"读书笔记\",\n \"《用户体验要素》\"\n ],\n \"hidden\": false,\n \"draft\": false,\n \"slug\": \"/用户体验要素1.md\",\n \"lastmod\": \"2022-04-16T12:55:42.468Z\",\n \"path\": \"/用户体验要素1\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"什么是用户体验\",\n \"slug\": \"什么是用户体验\"\n },\n {\n \"depth\": 2,\n \"title\": \"为体验而设计：使用第一\",\n \"slug\": \"为体验而设计使用第一\"\n },\n {\n \"depth\": 3,\n \"title\": \"为什么小而美的产品,更容易成功？\",\n \"slug\": \"为什么小而美的产品更容易成功\"\n },\n {\n \"depth\": 2,\n \"title\": \"用户体验和商机\",\n \"slug\": \"用户体验和商机\"\n },\n {\n \"depth\": 3,\n \"title\": \"为什么在网站上，用户体验比别的产品更重要？\",\n \"slug\": \"为什么在网站上用户体验比别的产品更重要\"\n },\n {\n \"depth\": 3,\n \"title\": \"为什么用户体验很重要？有什么作用吗\",\n \"slug\": \"为什么用户体验很重要有什么作用吗\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是转化率？有什么用？\",\n \"slug\": \"什么是转化率有什么用\"\n },\n {\n \"depth\": 3,\n \"title\": \"改善用户体验，是为了什么？通过什么方式达到？\",\n \"slug\": \"改善用户体验是为了什么通过什么方式达到\"\n },\n {\n \"depth\": 2,\n \"title\": \"以用户为中心的设计\",\n \"slug\": \"以用户为中心的设计\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是“以用户为中心”的设计？\",\n \"slug\": \"什么是以用户为中心的设计\"\n },\n {\n \"depth\": 3,\n \"title\": \"怎么做？\",\n \"slug\": \"怎么做\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:06.494Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Evaluation\",\n \"summary\": \"Introduction to User Experience Design｜Week5\",\n \"created\": \"2021-11-18T14:09:49.000Z\",\n \"categories\": [\n \"UX学习笔记\",\n \"Introduction to User Experience Design\"\n ],\n \"tags\": [\n \"UX\"\n ],\n \"slug\": \"/2021-11-18-ux5/index.md\",\n \"path\": \"/2021-11-18-ux5\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"评估\",\n \"slug\": \"评估\"\n },\n {\n \"depth\": 2,\n \"title\": \"分类\",\n \"slug\": \"分类\"\n },\n {\n \"depth\": 3,\n \"title\": \"形成性评估\",\n \"slug\": \"形成性评估\"\n },\n {\n \"depth\": 3,\n \"title\": \"总结性评估\",\n \"slug\": \"总结性评估\"\n },\n {\n \"depth\": 2,\n \"title\": \"如何评估\",\n \"slug\": \"如何评估\"\n },\n {\n \"depth\": 3,\n \"title\": \"数据收集\",\n \"slug\": \"数据收集\"\n },\n {\n \"depth\": 3,\n \"title\": \"衡量\",\n \"slug\": \"衡量\"\n },\n {\n \"depth\": 3,\n \"title\": \"可学习性\",\n \"slug\": \"可学习性\"\n },\n {\n \"depth\": 3,\n \"title\": \"可记忆性\",\n \"slug\": \"可记忆性\"\n },\n {\n \"depth\": 3,\n \"title\": \"主观情感评估\",\n \"slug\": \"主观情感评估\"\n },\n {\n \"depth\": 2,\n \"title\": \"相关资源\",\n \"slug\": \"相关资源\"\n },\n {\n \"depth\": 2,\n \"title\": \"推荐教材\",\n \"slug\": \"推荐教材\"\n },\n {\n \"depth\": 3,\n \"title\": \"Trade Book\",\n \"slug\": \"trade-book\"\n },\n {\n \"depth\": 3,\n \"title\": \"Text Books\",\n \"slug\": \"text-books\"\n },\n {\n \"depth\": 2,\n \"title\": \"参考网站\",\n \"slug\": \"参考网站\"\n }\n ],\n \"updated\": \"2022-08-06T10:47:38.841Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Prototyping\",\n \"summary\": \"Introduction to User Experience Design｜Week4\",\n \"created\": \"2021-11-18T13:26:41.000Z\",\n \"categories\": [\n \"UX学习笔记\",\n \"Introduction to User Experience Design\"\n ],\n \"tags\": [\n \"UX\"\n ],\n \"slug\": \"/2021-11-18-ux4/index.md\",\n \"path\": \"/2021-11-18-ux4\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"关于 Prototyping\",\n \"slug\": \"关于-prototyping\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是原型开发\",\n \"slug\": \"什么是原型开发\"\n },\n {\n \"depth\": 3,\n \"title\": \"原型开发的作用\",\n \"slug\": \"原型开发的作用\"\n },\n {\n \"depth\": 3,\n \"title\": \"水平原型\",\n \"slug\": \"水平原型\"\n },\n {\n \"depth\": 3,\n \"title\": \"垂直原型\",\n \"slug\": \"垂直原型\"\n },\n {\n \"depth\": 2,\n \"title\": \"低保真 Lofi Prototype\",\n \"slug\": \"低保真-lofi-prototype\"\n },\n {\n \"depth\": 3,\n \"title\": \"低保真和高保真的区别\",\n \"slug\": \"低保真和高保真的区别\"\n },\n {\n \"depth\": 3,\n \"title\": \"注意事项\",\n \"slug\": \"注意事项\"\n },\n {\n \"depth\": 3,\n \"title\": \"三种形式\",\n \"slug\": \"三种形式\"\n },\n {\n \"depth\": 4,\n \"title\": \"1. 草图\",\n \"slug\": \"1-草图\"\n },\n {\n \"depth\": 4,\n \"title\": \"2. 故事版\",\n \"slug\": \"2-故事版\"\n },\n {\n \"depth\": 4,\n \"title\": \"3.卡片原型\",\n \"slug\": \"3卡片原型\"\n },\n {\n \"depth\": 2,\n \"title\": \"其他原型方式\",\n \"slug\": \"其他原型方式\"\n },\n {\n \"depth\": 3,\n \"title\": \"绿野仙踪/奥茨法师\",\n \"slug\": \"绿野仙踪奥茨法师\"\n },\n {\n \"depth\": 3,\n \"title\": \"概念验证视频\",\n \"slug\": \"概念验证视频\"\n },\n {\n \"depth\": 3,\n \"title\": \"隐喻技术\",\n \"slug\": \"隐喻技术\"\n },\n {\n \"depth\": 2,\n \"title\": \"相关资源\",\n \"slug\": \"相关资源\"\n },\n {\n \"depth\": 3,\n \"title\": \"Resources and Tools for Protoyping 1\",\n \"slug\": \"resources-and-tools-for-protoyping-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"Tools\",\n \"slug\": \"tools\"\n },\n {\n \"depth\": 3,\n \"title\": \"Resources for Prototyping 2\",\n \"slug\": \"resources-for-prototyping-2\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:10.016Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Design Alternatives\",\n \"summary\": \"Introduction to User Experience Design｜Week3\",\n \"created\": \"2021-11-14T03:18:45.000Z\",\n \"categories\": [\n \"UX学习笔记\",\n \"Introduction to User Experience Design\"\n ],\n \"tags\": [\n \"UX\"\n ],\n \"lastmod\": \"2022-04-16T12:56:27.924Z\",\n \"slug\": \"/2021-11-14-ux3/index.md\",\n \"path\": \"/2021-11-14-ux3\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"Review of Design Goals 审查设计目标\",\n \"slug\": \"review-of-design-goals-审查设计目标\"\n },\n {\n \"depth\": 3,\n \"title\": \"用户体验的核心目标\",\n \"slug\": \"用户体验的核心目标\"\n },\n {\n \"depth\": 3,\n \"title\": \"设计的定义\",\n \"slug\": \"设计的定义\"\n },\n {\n \"depth\": 3,\n \"title\": \"设计的目标\",\n \"slug\": \"设计的目标\"\n },\n {\n \"depth\": 3,\n \"title\": \"设计时，需考虑的三个方面\",\n \"slug\": \"设计时需考虑的三个方面\"\n },\n {\n \"depth\": 2,\n \"title\": \"Design Alternatives 设计替代方案\",\n \"slug\": \"design-alternatives-设计替代方案\"\n },\n {\n \"depth\": 3,\n \"title\": \"目标\",\n \"slug\": \"目标\"\n },\n {\n \"depth\": 3,\n \"title\": \"关键\",\n \"slug\": \"关键\"\n },\n {\n \"depth\": 3,\n \"title\": \"Road map 路线\",\n \"slug\": \"road-map-路线\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:15.281Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Requirement Gathering\",\n \"summary\": \"Introduction to User Experience Design｜Week2\",\n \"created\": \"2021-11-09T14:26:49.000Z\",\n \"categories\": [\n \"UX学习笔记\",\n \"Introduction to User Experience Design\"\n ],\n \"tags\": [\n \"UX\"\n ],\n \"slug\": \"/2021-11-09-ux2/index.md\",\n \"path\": \"/2021-11-09-ux2\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"Overview\",\n \"slug\": \"overview\"\n },\n {\n \"depth\": 2,\n \"title\": \"Types of Users and Types of Data\",\n \"slug\": \"types-of-users-and-types-of-data\"\n },\n {\n \"depth\": 3,\n \"title\": \"数据类型\",\n \"slug\": \"数据类型\"\n },\n {\n \"depth\": 4,\n \"title\": \"定量\",\n \"slug\": \"定量\"\n },\n {\n \"depth\": 4,\n \"title\": \"定性\",\n \"slug\": \"定性\"\n },\n {\n \"depth\": 3,\n \"title\": \"将用户视为利益相关者的三个类型\",\n \"slug\": \"将用户视为利益相关者的三个类型\"\n },\n {\n \"depth\": 3,\n \"title\": \"了解利益相关者的意义\",\n \"slug\": \"了解利益相关者的意义\"\n },\n {\n \"depth\": 2,\n \"title\": \"Discovery Technique Overview\",\n \"slug\": \"discovery-technique-overview\"\n },\n {\n \"depth\": 3,\n \"title\": \"四种调研方法\",\n \"slug\": \"四种调研方法\"\n },\n {\n \"depth\": 3,\n \"title\": \"交互程度\",\n \"slug\": \"交互程度\"\n },\n {\n \"depth\": 3,\n \"title\": \"进行的场景\",\n \"slug\": \"进行的场景\"\n },\n {\n \"depth\": 3,\n \"title\": \"在设计周期中迭代\",\n \"slug\": \"在设计周期中迭代\"\n },\n {\n \"depth\": 2,\n \"title\": \"Naturalistic Observation 自然观察\",\n \"slug\": \"naturalistic-observation-自然观察\"\n },\n {\n \"depth\": 3,\n \"title\": \"是什么\",\n \"slug\": \"是什么\"\n },\n {\n \"depth\": 3,\n \"title\": \"如何做\",\n \"slug\": \"如何做\"\n },\n {\n \"depth\": 3,\n \"title\": \"数据\",\n \"slug\": \"数据\"\n },\n {\n \"depth\": 3,\n \"title\": \"优点\",\n \"slug\": \"优点\"\n },\n {\n \"depth\": 3,\n \"title\": \"缺点\",\n \"slug\": \"缺点\"\n },\n {\n \"depth\": 3,\n \"title\": \"道德局限\",\n \"slug\": \"道德局限\"\n },\n {\n \"depth\": 3,\n \"title\": \"在设计流程中\",\n \"slug\": \"在设计流程中\"\n },\n {\n \"depth\": 2,\n \"title\": \"Survey 问卷\",\n \"slug\": \"survey-问卷\"\n },\n {\n \"depth\": 3,\n \"title\": \"是什么\",\n \"slug\": \"是什么-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"如何做\",\n \"slug\": \"如何做-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"数据\",\n \"slug\": \"数据-1\"\n },\n {\n \"depth\": 4,\n \"title\": \"1.定性-封闭性问题\",\n \"slug\": \"1定性-封闭性问题\"\n },\n {\n \"depth\": 4,\n \"title\": \"2.定量-开放性问题\",\n \"slug\": \"2定量-开放性问题\"\n },\n {\n \"depth\": 3,\n \"title\": \"优点\",\n \"slug\": \"优点-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"缺点\",\n \"slug\": \"缺点-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"在设计流程中\",\n \"slug\": \"在设计流程中-1\"\n },\n {\n \"depth\": 2,\n \"title\": \"Focus group 焦点小组\",\n \"slug\": \"focus-group-焦点小组\"\n },\n {\n \"depth\": 3,\n \"title\": \"是什么\",\n \"slug\": \"是什么-2\"\n },\n {\n \"depth\": 3,\n \"title\": \"如何做\",\n \"slug\": \"如何做-2\"\n },\n {\n \"depth\": 4,\n \"title\": \"组成\",\n \"slug\": \"组成\"\n },\n {\n \"depth\": 3,\n \"title\": \"数据\",\n \"slug\": \"数据-2\"\n },\n {\n \"depth\": 3,\n \"title\": \"优点\",\n \"slug\": \"优点-2\"\n },\n {\n \"depth\": 3,\n \"title\": \"缺点\",\n \"slug\": \"缺点-2\"\n },\n {\n \"depth\": 3,\n \"title\": \"在设计流程中\",\n \"slug\": \"在设计流程中-2\"\n },\n {\n \"depth\": 2,\n \"title\": \"Interviews\",\n \"slug\": \"interviews\"\n },\n {\n \"depth\": 3,\n \"title\": \"是什么\",\n \"slug\": \"是什么-3\"\n },\n {\n \"depth\": 3,\n \"title\": \"如何做\",\n \"slug\": \"如何做-3\"\n },\n {\n \"depth\": 3,\n \"title\": \"数据\",\n \"slug\": \"数据-3\"\n },\n {\n \"depth\": 3,\n \"title\": \"优点\",\n \"slug\": \"优点-3\"\n },\n {\n \"depth\": 3,\n \"title\": \"缺点\",\n \"slug\": \"缺点-3\"\n },\n {\n \"depth\": 3,\n \"title\": \"在设计流程中\",\n \"slug\": \"在设计流程中-3\"\n },\n {\n \"depth\": 2,\n \"title\": \"User Results 用户数据处理\",\n \"slug\": \"user-results-用户数据处理\"\n },\n {\n \"depth\": 3,\n \"title\": \"描述性统计信息\",\n \"slug\": \"描述性统计信息\"\n },\n {\n \"depth\": 3,\n \"title\": \"用户特征表\",\n \"slug\": \"用户特征表\"\n },\n {\n \"depth\": 3,\n \"title\": \"人物画像 Persona\",\n \"slug\": \"人物画像-persona\"\n },\n {\n \"depth\": 2,\n \"title\": \"Presenting Task Findings\",\n \"slug\": \"presenting-task-findings\"\n },\n {\n \"depth\": 3,\n \"title\": \"Scenario\",\n \"slug\": \"scenario\"\n },\n {\n \"depth\": 4,\n \"title\": \"是什么\",\n \"slug\": \"是什么-4\"\n },\n {\n \"depth\": 4,\n \"title\": \"作用\",\n \"slug\": \"作用\"\n },\n {\n \"depth\": 3,\n \"title\": \"Essential Case Study\",\n \"slug\": \"essential-case-study\"\n },\n {\n \"depth\": 4,\n \"title\": \"三个要素\",\n \"slug\": \"三个要素\"\n },\n {\n \"depth\": 3,\n \"title\": \"Hierarchical Task Analysis\",\n \"slug\": \"hierarchical-task-analysis\"\n },\n {\n \"depth\": 3,\n \"title\": \"Current UI Critique\",\n \"slug\": \"current-ui-critique\"\n },\n {\n \"depth\": 4,\n \"title\": \"步骤\",\n \"slug\": \"步骤\"\n },\n {\n \"depth\": 2,\n \"title\": \"相关资源\",\n \"slug\": \"相关资源\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:17.439Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Overview of User Experience Design\",\n \"summary\": \"Introduction to User Experience Design｜Week1\",\n \"created\": \"2021-11-08T02:54:40.000Z\",\n \"tags\": [\n \"UX\"\n ],\n \"slug\": \"/2021-11-08-ux1/index.md\",\n \"path\": \"/2021-11-08-ux1\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"课程简介\",\n \"slug\": \"课程简介\"\n },\n {\n \"depth\": 2,\n \"title\": \"Week 1 笔记\",\n \"slug\": \"week-1-笔记\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是 ux？\",\n \"slug\": \"什么是-ux\"\n },\n {\n \"depth\": 3,\n \"title\": \"用户体验设计的核心概念\",\n \"slug\": \"用户体验设计的核心概念\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是用户\",\n \"slug\": \"什么是用户\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是界面\",\n \"slug\": \"什么是界面\"\n },\n {\n \"depth\": 3,\n \"title\": \"用户体验设计的目标\",\n \"slug\": \"用户体验设计的目标\"\n },\n {\n \"depth\": 3,\n \"title\": \"界面设计环 (四个步骤)\",\n \"slug\": \"界面设计环-四个步骤\"\n },\n {\n \"depth\": 4,\n \"title\": \"Step1：Requirements Gathering 收集需求\",\n \"slug\": \"step1requirements-gathering-收集需求\"\n },\n {\n \"depth\": 4,\n \"title\": \"Step 2：Design Alternatives 设计方案\",\n \"slug\": \"step-2design-alternatives-设计方案\"\n },\n {\n \"depth\": 4,\n \"title\": \"Step 3：Prototyping 原型\",\n \"slug\": \"step-3prototyping-原型\"\n },\n {\n \"depth\": 4,\n \"title\": \"Step 4：Evaluation 评估测试\",\n \"slug\": \"step-4evaluation-评估测试\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么样的界面是“实用”的？\",\n \"slug\": \"什么样的界面是实用的\"\n },\n {\n \"depth\": 3,\n \"title\": \"好设计的三个特征\",\n \"slug\": \"好设计的三个特征\"\n },\n {\n \"depth\": 4,\n \"title\": \"1 - Affordance (示能)\",\n \"slug\": \"1---affordance-示能\"\n },\n {\n \"depth\": 4,\n \"title\": \"2 - Signifiers (意符)\",\n \"slug\": \"2---signifiers-意符\"\n },\n {\n \"depth\": 4,\n \"title\": \"3 - Feedback (反馈)\",\n \"slug\": \"3---feedback-反馈\"\n },\n {\n \"depth\": 3,\n \"title\": \"如何与“用户”接洽\",\n \"slug\": \"如何与用户接洽\"\n },\n {\n \"depth\": 4,\n \"title\": \"三个步骤\",\n \"slug\": \"三个步骤\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:20.887Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"全球商业化中的设计\",\n \"summary\": \"《设计心理学 1》第七章——本书的总结\",\n \"created\": \"2021-11-03T03:59:18.000Z\",\n \"categories\": [\n \"设计心理学\"\n ],\n \"tags\": [\n \"设计心理学1\",\n \"读书笔记\"\n ],\n \"slug\": \"/设计心理学1-7.md\",\n \"lastmod\": \"2022-04-16T12:55:38.967Z\",\n \"path\": \"/设计心理学1-7\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1.竞争压力\",\n \"slug\": \"1竞争压力\"\n },\n {\n \"depth\": 2,\n \"title\": \"2.新技术推动变革\",\n \"slug\": \"2新技术推动变革\"\n },\n {\n \"depth\": 2,\n \"title\": \"3.新产品上市需要多长时间\",\n \"slug\": \"3新产品上市需要多长时间\"\n },\n {\n \"depth\": 2,\n \"title\": \"4.创新的两种形式：渐进式和颠覆式\",\n \"slug\": \"4创新的两种形式渐进式和颠覆式\"\n },\n {\n \"depth\": 2,\n \"title\": \"5. 设计心理学：1988 ～ 2038\",\n \"slug\": \"5-设计心理学1988--2038\"\n },\n {\n \"depth\": 2,\n \"title\": \"6.书籍的未来\",\n \"slug\": \"6书籍的未来\"\n },\n {\n \"depth\": 2,\n \"title\": \"7. 设计的道义和责任\",\n \"slug\": \"7-设计的道义和责任\"\n },\n {\n \"depth\": 2,\n \"title\": \"8. 设计思维和思考设计\",\n \"slug\": \"8-设计思维和思考设计\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:07.505Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"设计思维\",\n \"created\": \"2021-11-03T03:49:10.353Z\",\n \"categories\": [\n \"设计心理学\"\n ],\n \"tags\": [\n \"设计心理学1\",\n \"读书笔记\"\n ],\n \"draft\": false,\n \"summary\": \"《设计心理学 1》第六章——设计需要探究问题的来源，而不只是停留在表面\",\n \"lastmod\": \"2022-05-07T05:31:58.650Z\",\n \"slug\": \"/设计心理学1-6.md\",\n \"path\": \"/设计心理学1-6\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1. 解决正确的问题\",\n \"slug\": \"1-解决正确的问题\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 双钻设计模式\",\n \"slug\": \"2-双钻设计模式\"\n },\n {\n \"depth\": 3,\n \"title\": \"四个步骤（发散->聚焦）\",\n \"slug\": \"四个步骤发散-聚焦\"\n },\n {\n \"depth\": 2,\n \"title\": \"3. 以人为本的设计流程\",\n \"slug\": \"3-以人为本的设计流程\"\n },\n {\n \"depth\": 3,\n \"title\": \"1.观察\",\n \"slug\": \"1观察\"\n },\n {\n \"depth\": 3,\n \"title\": \"2. 激发创意（构思）\",\n \"slug\": \"2-激发创意构思\"\n },\n {\n \"depth\": 3,\n \"title\": \"3.打样（原型）\",\n \"slug\": \"3打样原型\"\n },\n {\n \"depth\": 4,\n \"title\": \"4.测试\",\n \"slug\": \"4测试\"\n },\n {\n \"depth\": 2,\n \"title\": \"4.我刚告诉你什么？那根本行不通\",\n \"slug\": \"4我刚告诉你什么那根本行不通\"\n },\n {\n \"depth\": 2,\n \"title\": \"5.设计的挑战\",\n \"slug\": \"5设计的挑战\"\n },\n {\n \"depth\": 2,\n \"title\": \"6. 复杂是好事，混乱惹麻烦\",\n \"slug\": \"6-复杂是好事混乱惹麻烦\"\n },\n {\n \"depth\": 2,\n \"title\": \"7.标准化和技术\",\n \"slug\": \"7标准化和技术\"\n },\n {\n \"depth\": 2,\n \"title\": \"8.故意制作困难\",\n \"slug\": \"8故意制作困难\"\n },\n {\n \"depth\": 2,\n \"title\": \"9. 设计：为了人类发展科技\",\n \"slug\": \"9-设计为了人类发展科技\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:08.975Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"人为差错？不，拙劣的设计\",\n \"summary\": \"《设计心理学 1》第五章——设计师经常严重误解人心理的局限性，要求人像机器一样工作\",\n \"created\": \"2021-10-27T12:22:17.000Z\",\n \"math\": \"falase\",\n \"categories\": [\n \"设计心理学\"\n ],\n \"tags\": [\n \"设计心理学1\",\n \"读书笔记\"\n ],\n \"draft\": false,\n \"lastmod\": \"2022-04-16T12:55:20.101Z\",\n \"slug\": \"/设计心理学1-5.md\",\n \"path\": \"/设计心理学1-5\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1.何以出错\",\n \"slug\": \"1何以出错\"\n },\n {\n \"depth\": 3,\n \"title\": \"出错的原因\",\n \"slug\": \"出错的原因\"\n },\n {\n \"depth\": 3,\n \"title\": \"解决错误的方法\",\n \"slug\": \"解决错误的方法\"\n },\n {\n \"depth\": 3,\n \"title\": \"差错之外：故意犯错\",\n \"slug\": \"差错之外故意犯错\"\n },\n {\n \"depth\": 2,\n \"title\": \"2.差错的两种类型：失误和错误\",\n \"slug\": \"2差错的两种类型失误和错误\"\n },\n {\n \"depth\": 3,\n \"title\": \"差错\",\n \"slug\": \"差错\"\n },\n {\n \"depth\": 3,\n \"title\": \"差错和行动的七个阶段\",\n \"slug\": \"差错和行动的七个阶段\"\n },\n {\n \"depth\": 3,\n \"title\": \"失误\",\n \"slug\": \"失误\"\n },\n {\n \"depth\": 4,\n \"title\": \"行动失误\",\n \"slug\": \"行动失误\"\n },\n {\n \"depth\": 5,\n \"title\": \"1. 撷取性失误\",\n \"slug\": \"1-撷取性失误\"\n },\n {\n \"depth\": 5,\n \"title\": \"2. 描述相似性失误\",\n \"slug\": \"2-描述相似性失误\"\n },\n {\n \"depth\": 5,\n \"title\": \"3. 功能状态失误\",\n \"slug\": \"3-功能状态失误\"\n },\n {\n \"depth\": 4,\n \"title\": \"记忆失误\",\n \"slug\": \"记忆失误\"\n },\n {\n \"depth\": 2,\n \"title\": \"3.错误的分类\",\n \"slug\": \"3错误的分类\"\n },\n {\n \"depth\": 3,\n \"title\": \"错误\",\n \"slug\": \"错误\"\n },\n {\n \"depth\": 4,\n \"title\": \"1. 基于规则的错误（违反规则）\",\n \"slug\": \"1-基于规则的错误违反规则\"\n },\n {\n \"depth\": 4,\n \"title\": \"2. 基于知识的错误（缺乏知识）\",\n \"slug\": \"2-基于知识的错误缺乏知识\"\n },\n {\n \"depth\": 4,\n \"title\": \"3. 记忆失效的错误\",\n \"slug\": \"3-记忆失效的错误\"\n },\n {\n \"depth\": 2,\n \"title\": \"4.社会和习俗压力\",\n \"slug\": \"4社会和习俗压力\"\n },\n {\n \"depth\": 3,\n \"title\": \"压力\",\n \"slug\": \"压力\"\n },\n {\n \"depth\": 3,\n \"title\": \"检查清单\",\n \"slug\": \"检查清单\"\n },\n {\n \"depth\": 2,\n \"title\": \"5、差错报告\",\n \"slug\": \"5差错报告\"\n },\n {\n \"depth\": 3,\n \"title\": \"自动化（JIDOKA）\",\n \"slug\": \"自动化jidoka\"\n },\n {\n \"depth\": 3,\n \"title\": \"防呆（POKA-YOKE）\",\n \"slug\": \"防呆poka-yoke\"\n },\n {\n \"depth\": 3,\n \"title\": \"航空安全报告体系\",\n \"slug\": \"航空安全报告体系\"\n },\n {\n \"depth\": 2,\n \"title\": \"6.甄别差错\",\n \"slug\": \"6甄别差错\"\n },\n {\n \"depth\": 3,\n \"title\": \"为什么甄别差错是困难的\",\n \"slug\": \"为什么甄别差错是困难的\"\n },\n {\n \"depth\": 4,\n \"title\": \"甄别失误\",\n \"slug\": \"甄别失误\"\n },\n {\n \"depth\": 4,\n \"title\": \"甄别错误\",\n \"slug\": \"甄别错误\"\n },\n {\n \"depth\": 4,\n \"title\": \"记忆失效性（失误/错误）\",\n \"slug\": \"记忆失效性失误错误\"\n },\n {\n \"depth\": 3,\n \"title\": \"为错误辩解\",\n \"slug\": \"为错误辩解\"\n },\n {\n \"depth\": 3,\n \"title\": \"事故分析要置身于真实情境\",\n \"slug\": \"事故分析要置身于真实情境\"\n },\n {\n \"depth\": 4,\n \"title\": \"事故发生时\",\n \"slug\": \"事故发生时\"\n },\n {\n \"depth\": 4,\n \"title\": \"事故发生后\",\n \"slug\": \"事故发生后\"\n },\n {\n \"depth\": 4,\n \"title\": \"事故分析应\",\n \"slug\": \"事故分析应\"\n },\n {\n \"depth\": 2,\n \"title\": \"7.为差错设计\",\n \"slug\": \"7为差错设计\"\n },\n {\n \"depth\": 3,\n \"title\": \"基本原则\",\n \"slug\": \"基本原则\"\n },\n {\n \"depth\": 3,\n \"title\": \"记忆中断\",\n \"slug\": \"记忆中断\"\n },\n {\n \"depth\": 3,\n \"title\": \"警示信号存在的问题\",\n \"slug\": \"警示信号存在的问题\"\n },\n {\n \"depth\": 3,\n \"title\": \"为差错设计的方法\",\n \"slug\": \"为差错设计的方法\"\n },\n {\n \"depth\": 4,\n \"title\": \"研究差错\",\n \"slug\": \"研究差错\"\n },\n {\n \"depth\": 4,\n \"title\": \"增加约束\",\n \"slug\": \"增加约束\"\n },\n {\n \"depth\": 4,\n \"title\": \"撤销\",\n \"slug\": \"撤销\"\n },\n {\n \"depth\": 4,\n \"title\": \"差错信息确认\",\n \"slug\": \"差错信息确认\"\n },\n {\n \"depth\": 4,\n \"title\": \"合理性检查\",\n \"slug\": \"合理性检查\"\n },\n {\n \"depth\": 4,\n \"title\": \"减小失误\",\n \"slug\": \"减小失误\"\n },\n {\n \"depth\": 3,\n \"title\": \"从差错到事故——瑞士奶酪模型\",\n \"slug\": \"从差错到事故瑞士奶酪模型\"\n },\n {\n \"depth\": 2,\n \"title\": \"8.良好的设计还不够\",\n \"slug\": \"8良好的设计还不够\"\n },\n {\n \"depth\": 2,\n \"title\": \"9.修补回复工程\",\n \"slug\": \"9修补回复工程\"\n },\n {\n \"depth\": 3,\n \"title\": \"是什么\",\n \"slug\": \"是什么\"\n },\n {\n \"depth\": 3,\n \"title\": \"如何做\",\n \"slug\": \"如何做\"\n },\n {\n \"depth\": 2,\n \"title\": \"10.自动化的悖论\",\n \"slug\": \"10自动化的悖论\"\n },\n {\n \"depth\": 3,\n \"title\": \"故障时结果难以估计\",\n \"slug\": \"故障时结果难以估计\"\n },\n {\n \"depth\": 3,\n \"title\": \"悖论\",\n \"slug\": \"悖论\"\n },\n {\n \"depth\": 2,\n \"title\": \"11.应对差错的设计原则\",\n \"slug\": \"11应对差错的设计原则\"\n },\n {\n \"depth\": 3,\n \"title\": \"人和机器协同应工作\",\n \"slug\": \"人和机器协同应工作\"\n },\n {\n \"depth\": 3,\n \"title\": \"关键设计原则\",\n \"slug\": \"关键设计原则\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:11.112Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"知晓：约束、可视性和反馈\",\n \"tags\": [\n \"设计心理学1\",\n \"读书笔记\"\n ],\n \"categories\": [\n \"设计心理学\"\n ],\n \"keywords\": [\n \"设计心理学\"\n ],\n \"created\": \"2021-10-22T20:21:44.000Z\",\n \"summary\": \"《设计心理学 1》第四章——遇到一个新的设备或状况，设计师应如何提供重要信息，以便人们知道如何操作\",\n \"lastmod\": \"2022-04-16T12:55:16.673Z\",\n \"slug\": \"/设计心理学1-4.md\",\n \"path\": \"/设计心理学1-4\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"章前\",\n \"slug\": \"章前\"\n },\n {\n \"depth\": 3,\n \"title\": \"外界的知识：\",\n \"slug\": \"外界的知识\"\n },\n {\n \"depth\": 3,\n \"title\": \"头脑中的知识\",\n \"slug\": \"头脑中的知识\"\n },\n {\n \"depth\": 2,\n \"title\": \"1. 四种约束因素：物理、文化、语义和逻辑\",\n \"slug\": \"1-四种约束因素物理文化语义和逻辑\"\n },\n {\n \"depth\": 3,\n \"title\": \"物理约束\",\n \"slug\": \"物理约束\"\n },\n {\n \"depth\": 3,\n \"title\": \"文化约束\",\n \"slug\": \"文化约束\"\n },\n {\n \"depth\": 3,\n \"title\": \"语义约束\",\n \"slug\": \"语义约束\"\n },\n {\n \"depth\": 3,\n \"title\": \"逻辑约束\",\n \"slug\": \"逻辑约束\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 示能、意符和约束在日常用品设计中的应用\",\n \"slug\": \"2-示能意符和约束在日常用品设计中的应用\"\n },\n {\n \"depth\": 3,\n \"title\": \"门的问题\",\n \"slug\": \"门的问题\"\n },\n {\n \"depth\": 3,\n \"title\": \"开关的问题\",\n \"slug\": \"开关的问题\"\n },\n {\n \"depth\": 3,\n \"title\": \"任务分析\",\n \"slug\": \"任务分析\"\n },\n {\n \"depth\": 3,\n \"title\": \"以用户为中心的设计\",\n \"slug\": \"以用户为中心的设计\"\n },\n {\n \"depth\": 3,\n \"title\": \"以活动为中心的控制\",\n \"slug\": \"以活动为中心的控制\"\n },\n {\n \"depth\": 2,\n \"title\": \"3. 引导行为的约束力\",\n \"slug\": \"3-引导行为的约束力\"\n },\n {\n \"depth\": 3,\n \"title\": \"是什么\",\n \"slug\": \"是什么\"\n },\n {\n \"depth\": 3,\n \"title\": \"作用\",\n \"slug\": \"作用\"\n },\n {\n \"depth\": 3,\n \"title\": \"例子\",\n \"slug\": \"例子\"\n },\n {\n \"depth\": 3,\n \"title\": \"三种强制方式\",\n \"slug\": \"三种强制方式\"\n },\n {\n \"depth\": 4,\n \"title\": \"互锁\",\n \"slug\": \"互锁\"\n },\n {\n \"depth\": 4,\n \"title\": \"自锁\",\n \"slug\": \"自锁\"\n },\n {\n \"depth\": 4,\n \"title\": \"反锁\",\n \"slug\": \"反锁\"\n },\n {\n \"depth\": 2,\n \"title\": \"4. 惯例、约束和示能\",\n \"slug\": \"4-惯例约束和示能\"\n },\n {\n \"depth\": 2,\n \"title\": \"5. 水龙头：关于设计的历史案例\",\n \"slug\": \"5-水龙头关于设计的历史案例\"\n },\n {\n \"depth\": 2,\n \"title\": \"6. 利用声音作为意符\",\n \"slug\": \"6-利用声音作为意符\"\n },\n {\n \"depth\": 3,\n \"title\": \"为什么\",\n \"slug\": \"为什么\"\n },\n {\n \"depth\": 3,\n \"title\": \"应提供什么信息：\",\n \"slug\": \"应提供什么信息\"\n },\n {\n \"depth\": 3,\n \"title\": \"如何提供\",\n \"slug\": \"如何提供\"\n },\n {\n \"depth\": 3,\n \"title\": \"例子\",\n \"slug\": \"例子-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"“拟真”(skeuomorphic)\",\n \"slug\": \"拟真skeuomorphic\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:12.946Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"draft\": false,\n \"title\": \"头脑中的知识和外界知识\",\n \"tags\": [\n \"设计心理学1\",\n \"读书笔记\"\n ],\n \"categories\": [\n \"设计心理学\"\n ],\n \"keywords\": [\n \"设计心理学\"\n ],\n \"created\": \"2021-10-20T17:08:47.371Z\",\n \"summary\": \"《设计心理学 1》第三章——并非精确行为需要的所有知识都得储存在头脑里\",\n \"lastmod\": \"2022-04-16T12:55:13.235Z\",\n \"slug\": \"/设计心理学1-3.md\",\n \"path\": \"/设计心理学1-3\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1. 含糊的知识引导精确的行为\",\n \"slug\": \"1-含糊的知识引导精确的行为\"\n },\n {\n \"depth\": 3,\n \"title\": \"人们不需要完全精确的知识来支撑引导他们的行为。\",\n \"slug\": \"人们不需要完全精确的知识来支撑引导他们的行为\"\n },\n {\n \"depth\": 3,\n \"title\": \"两种类型的知识：\",\n \"slug\": \"两种类型的知识\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 记忆是储存在头脑中的知识\",\n \"slug\": \"2-记忆是储存在头脑中的知识\"\n },\n {\n \"depth\": 2,\n \"title\": \"3. 记忆的结构\",\n \"slug\": \"3-记忆的结构\"\n },\n {\n \"depth\": 3,\n \"title\": \"两种记忆类型\",\n \"slug\": \"两种记忆类型\"\n },\n {\n \"depth\": 4,\n \"title\": \"1. 短时记忆（工作记忆）\",\n \"slug\": \"1-短时记忆工作记忆\"\n },\n {\n \"depth\": 4,\n \"title\": \"2. 长时记忆（LTM /long-term memory)\",\n \"slug\": \"2-长时记忆ltm-long-term-memory\"\n },\n {\n \"depth\": 2,\n \"title\": \"4.近似模型：现实世界里的记忆\",\n \"slug\": \"4近似模型现实世界里的记忆\"\n },\n {\n \"depth\": 2,\n \"title\": \"5.头脑中的知识\",\n \"slug\": \"5头脑中的知识\"\n },\n {\n \"depth\": 3,\n \"title\": \"前瞻记忆\",\n \"slug\": \"前瞻记忆\"\n },\n {\n \"depth\": 3,\n \"title\": \"未来记忆\",\n \"slug\": \"未来记忆\"\n },\n {\n \"depth\": 3,\n \"title\": \"提醒的两个层面：\",\n \"slug\": \"提醒的两个层面\"\n },\n {\n \"depth\": 2,\n \"title\": \"6.外界知识和头脑中知识的此消彼长\",\n \"slug\": \"6外界知识和头脑中知识的此消彼长\"\n },\n {\n \"depth\": 3,\n \"title\": \"外界的知识\",\n \"slug\": \"外界的知识\"\n },\n {\n \"depth\": 3,\n \"title\": \"头脑中的知识\",\n \"slug\": \"头脑中的知识\"\n },\n {\n \"depth\": 2,\n \"title\": \"7.多个大脑里和多个设备中的记忆\",\n \"slug\": \"7多个大脑里和多个设备中的记忆\"\n },\n {\n \"depth\": 2,\n \"title\": \"8.自然映射\",\n \"slug\": \"8自然映射\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是自然映射\",\n \"slug\": \"什么是自然映射\"\n },\n {\n \"depth\": 3,\n \"title\": \"三个层次的映射\",\n \"slug\": \"三个层次的映射\"\n },\n {\n \"depth\": 3,\n \"title\": \"糟糕的映射 VS 好的映射\",\n \"slug\": \"糟糕的映射-vs-好的映射\"\n },\n {\n \"depth\": 2,\n \"title\": \"9.文化与设计：自然映射随文化而异\",\n \"slug\": \"9文化与设计自然映射随文化而异\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:14.322Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"日常行为心理学\",\n \"tags\": [\n \"设计心理学1\",\n \"读书笔记\"\n ],\n \"categories\": [\n \"设计心理学\"\n ],\n \"keywords\": [\n \"设计心理学\"\n ],\n \"draft\": false,\n \"created\": \"2021-10-20T16:14:47.371Z\",\n \"summary\": \"《设计心理学 1》第二章——人们如何做事？当事情出错了怎么办？怎么知道要做什么？\",\n \"lastmod\": \"2022-04-16T12:55:05.400Z\",\n \"slug\": \"/设计心理学1-2.md\",\n \"path\": \"/设计心理学1-2\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1.人们如何做事：执行与评估的鸿沟\",\n \"slug\": \"1人们如何做事执行与评估的鸿沟\"\n },\n {\n \"depth\": 3,\n \"title\": \"执行的鸿沟：\",\n \"slug\": \"执行的鸿沟\"\n },\n {\n \"depth\": 3,\n \"title\": \"评估的鸿沟：\",\n \"slug\": \"评估的鸿沟\"\n },\n {\n \"depth\": 3,\n \"title\": \"如何消除这两个心理鸿沟：\",\n \"slug\": \"如何消除这两个心理鸿沟\"\n },\n {\n \"depth\": 2,\n \"title\": \"2.行动的七个阶段\",\n \"slug\": \"2行动的七个阶段\"\n },\n {\n \"depth\": 3,\n \"title\": \"行动的两个步骤\",\n \"slug\": \"行动的两个步骤\"\n },\n {\n \"depth\": 3,\n \"title\": \"七个阶段：\",\n \"slug\": \"七个阶段\"\n },\n {\n \"depth\": 4,\n \"title\": \"执行桥 （目标->外部世界）\",\n \"slug\": \"执行桥-目标-外部世界\"\n },\n {\n \"depth\": 4,\n \"title\": \"评估桥（外部世界->目标）\",\n \"slug\": \"评估桥外部世界-目标\"\n },\n {\n \"depth\": 3,\n \"title\": \"行动的分类：\",\n \"slug\": \"行动的分类\"\n },\n {\n \"depth\": 3,\n \"title\": \"“根本原因分析”\",\n \"slug\": \"根本原因分析\"\n },\n {\n \"depth\": 2,\n \"title\": \"3.人的思想：潜意识主导\",\n \"slug\": \"3人的思想潜意识主导\"\n },\n {\n \"depth\": 3,\n \"title\": \"潜意识\",\n \"slug\": \"潜意识\"\n },\n {\n \"depth\": 3,\n \"title\": \"有意识的思维\",\n \"slug\": \"有意识的思维\"\n },\n {\n \"depth\": 3,\n \"title\": \"认知和情感\",\n \"slug\": \"认知和情感\"\n },\n {\n \"depth\": 2,\n \"title\": \"4.人的认知和情感\",\n \"slug\": \"4人的认知和情感\"\n },\n {\n \"depth\": 3,\n \"title\": \"本能层\",\n \"slug\": \"本能层\"\n },\n {\n \"depth\": 3,\n \"title\": \"行为层\",\n \"slug\": \"行为层\"\n },\n {\n \"depth\": 3,\n \"title\": \"反思层\",\n \"slug\": \"反思层\"\n },\n {\n \"depth\": 2,\n \"title\": \"5.行动的七个阶段和大脑的三个层次\",\n \"slug\": \"5行动的七个阶段和大脑的三个层次\"\n },\n {\n \"depth\": 3,\n \"title\": \"心流\",\n \"slug\": \"心流\"\n },\n {\n \"depth\": 2,\n \"title\": \"6.自说自话\",\n \"slug\": \"6自说自话\"\n },\n {\n \"depth\": 3,\n \"title\": \"概念模式\",\n \"slug\": \"概念模式\"\n },\n {\n \"depth\": 2,\n \"title\": \"7.责备错误之事\",\n \"slug\": \"7责备错误之事\"\n },\n {\n \"depth\": 3,\n \"title\": \"给用户有保留的预测：\",\n \"slug\": \"给用户有保留的预测\"\n },\n {\n \"depth\": 3,\n \"title\": \"习得性无助（自责循环）\",\n \"slug\": \"习得性无助自责循环\"\n },\n {\n \"depth\": 3,\n \"title\": \"积极心理学\",\n \"slug\": \"积极心理学\"\n },\n {\n \"depth\": 3,\n \"title\": \"tips：\",\n \"slug\": \"tips\"\n },\n {\n \"depth\": 2,\n \"title\": \"8.不当的自责\",\n \"slug\": \"8不当的自责\"\n },\n {\n \"depth\": 3,\n \"title\": \"自责的原因\",\n \"slug\": \"自责的原因\"\n },\n {\n \"depth\": 3,\n \"title\": \"设计师应如何\",\n \"slug\": \"设计师应如何\"\n },\n {\n \"depth\": 2,\n \"title\": \"9.行动的七个阶段：七个基本设计原则\",\n \"slug\": \"9行动的七个阶段七个基本设计原则\"\n },\n {\n \"depth\": 3,\n \"title\": \"前馈\",\n \"slug\": \"前馈\"\n },\n {\n \"depth\": 3,\n \"title\": \"反馈\",\n \"slug\": \"反馈\"\n },\n {\n \"depth\": 3,\n \"title\": \"设计的七个基本原则\",\n \"slug\": \"设计的七个基本原则\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:15.315Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"日用品心理学\",\n \"tags\": [\n \"设计心理学1\",\n \"读书笔记\"\n ],\n \"categories\": [\n \"设计心理学\"\n ],\n \"keywords\": [\n \"设计心理学\"\n ],\n \"created\": \"2021-10-20T12:28:00.000Z\",\n \"summary\": \"《设计心理学 1》第一章——好设计有两个特征可视性和易通性\",\n \"lastmod\": \"2022-04-16T12:55:08.323Z\",\n \"slug\": \"/设计心理学1-1.md\",\n \"path\": \"/设计心理学1-1\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1.复杂的现代设备\",\n \"slug\": \"1复杂的现代设备\"\n },\n {\n \"depth\": 2,\n \"title\": \"2.以人为本的设计\",\n \"slug\": \"2以人为本的设计\"\n },\n {\n \"depth\": 2,\n \"title\": \"3.交互设计的基本原则\",\n \"slug\": \"3交互设计的基本原则\"\n },\n {\n \"depth\": 3,\n \"title\": \"示能\",\n \"slug\": \"示能\"\n },\n {\n \"depth\": 3,\n \"title\": \"意符\",\n \"slug\": \"意符\"\n },\n {\n \"depth\": 3,\n \"title\": \"约束\",\n \"slug\": \"约束\"\n },\n {\n \"depth\": 3,\n \"title\": \"映射\",\n \"slug\": \"映射\"\n },\n {\n \"depth\": 3,\n \"title\": \"反馈\",\n \"slug\": \"反馈\"\n },\n {\n \"depth\": 2,\n \"title\": \"4.系统映像\",\n \"slug\": \"4系统映像\"\n },\n {\n \"depth\": 2,\n \"title\": \"5.科技的悖论\",\n \"slug\": \"5科技的悖论\"\n },\n {\n \"depth\": 2,\n \"title\": \"6.设计的挑战\",\n \"slug\": \"6设计的挑战\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:16.843Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"什么是设计洞察 · What is Insight\",\n \"created\": \"2021-10-15T15:07:14.533Z\",\n \"tags\": [\n \"Design Thinking\",\n \"翻译\"\n ],\n \"keywords\": [\n \"insight\"\n ],\n \"slug\": \"/insight.md\",\n \"path\": \"/insight\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"insight 不是什么\",\n \"slug\": \"insight-不是什么\"\n },\n {\n \"depth\": 2,\n \"title\": \"是什么\",\n \"slug\": \"是什么\"\n },\n {\n \"depth\": 2,\n \"title\": \"五大要素\",\n \"slug\": \"五大要素\"\n },\n {\n \"depth\": 2,\n \"title\": \"定义 Insight 的步骤\",\n \"slug\": \"定义-insight-的步骤\"\n },\n {\n \"depth\": 3,\n \"title\": \"1.设定语境/场景\",\n \"slug\": \"1设定语境场景\"\n },\n {\n \"depth\": 3,\n \"title\": \"2.沟通困境\",\n \"slug\": \"2沟通困境\"\n },\n {\n \"depth\": 3,\n \"title\": \"3. 阐明原因\",\n \"slug\": \"3-阐明原因\"\n },\n {\n \"depth\": 3,\n \"title\": \"4. 捕捉动机\",\n \"slug\": \"4-捕捉动机\"\n },\n {\n \"depth\": 3,\n \"title\": \"5.构想理想\",\n \"slug\": \"5构想理想\"\n },\n {\n \"depth\": 2,\n \"title\": \"如何表达\",\n \"slug\": \"如何表达\"\n },\n {\n \"depth\": 3,\n \"title\": \"第一句话——描述现状和用户行为。\",\n \"slug\": \"第一句话描述现状和用户行为\"\n },\n {\n \"depth\": 3,\n \"title\": \"第二句话——描述用户的困境，并说明造成困境的原因。\",\n \"slug\": \"第二句话描述用户的困境并说明造成困境的原因\"\n },\n {\n \"depth\": 3,\n \"title\": \"第三句话——描述用户期望的最终理想状况。\",\n \"slug\": \"第三句话描述用户期望的最终理想状况\"\n },\n {\n \"depth\": 3,\n \"title\": \"Tips\",\n \"slug\": \"tips\"\n },\n {\n \"depth\": 2,\n \"title\": \"什么是一个好的’Insight’\",\n \"slug\": \"什么是一个好的insight\"\n },\n {\n \"depth\": 2,\n \"title\": \"Insight->How Might We?\",\n \"slug\": \"insight-how-might-we\"\n },\n {\n \"depth\": 2,\n \"title\": \"后记\",\n \"slug\": \"后记\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:42.689Z\",\n \"type\": \"article\",\n \"html\": \"\"\n }\n]"}</script>
|
||
</body>
|
||
</html>
|