Vue3CompositionAPI

第一章最终效果演示

1. 下载依赖

npm install

2. 启动前端

npm run dev

3. 启动数据

json-server --watch data/db.json --port=3003

第二章创建项目

1. vite 创建项目

npm init vite@latest vite-blog -- --template vue

2.App.vue

<script setup></script>

<template>
  <div>App.vue</div>
</template>

<style></style>

3. Home.vue

1. 测试setup的执行周期

<template>
  <div class="home">Home</div>
</template>

<script>
export default {
  name: "Home",
  setup() {
    console.log("setup");
  },
  created() {
    console.log("setup");
  },
  mounted() {
    console.log("mounted");
  },
};
</script>

第三章组件嵌套

1. 创建 views/Home.vue

2. App.vue

import "Home" from './views/Home.vue'

Home.vue 定义属性

<template>
  <div class="home">
    <h1>Home</h1>
    <p>我的名字是: {{ name }} ,我的年龄是 {{ age }}</p>
    <button @click="handleClick">click me</button>
  </div>
</template>

<script setup>
console.log("setup");

let name = "米修在线";
let age = 30;

const handleClick = (e) => {
  console.log("you clicked me");
};
</script>

第三章 Refs

1. Refs

* 在 CompositionAPI 中,是不能使用 this 的, 所以也无法使用 this.$refs

<template>
  <div class="home">
    <h1>Home</h1>
    <p ref="p">我的名字是: {{ name }} 我的年龄是: {{ age }}</p>
    <button @click="handleClick">click me</button>
  </div>
</template>

<script setup>
import { ref } from "vue";

console.log(this);

const p = ref(null);
// const p = ref("hello")

let name = "mario";
let age = 30;

const handleClick = (e) => {
  console.log(p, p.value);
  p.value.classList.add("test");
  p.value.textContent = "hello, world";
};

console.log(p.value);
</script>

第四章 Refs 数据响应

1.Ref(数据驱动)

* 未使用ref定义的数据 不能与DOM进行响应
* 通过ref定义的数据 可以实现实时响应 跟(data)一样

<template>
  <div class="home">
    <h1>Home</h1>
    <p>My name is {{ name }} and my age is {{ age }}</p>
    <button @click="handleClick">click me</button>

    <input type="text" v-model="name" />
    <button @click="age++">add 1 to age</button>
  </div>
</template>

<script setup>
import { ref } from "vue";

// // 非ref属性(不响应)
// const name = "mario";
// const age = 30;

// // 通过事件修改值(不响应)
// const handleClick = (e) => {
//   name = "luigi";
//   age = 35;
// };

// ref(响应)
const name = ref("mario");
const age = ref(30);

// 修改值(响应)
const handleClick = (e) => {
  name.value = "luigi";
  age.value = 35;
};
</script>

第五章 Ref vs Reactive

1.引入 reactive

import { reactive, ref } from "vue";

2.Home.vue

<template>
  <div class="home">
    <h1>Home</h1>
    <h2>Refs</h2>
    <p>{{ promiseOne.name }} - {{ promiseOne.age }}</p>
    <button @click="updatePromiseOne">Update promise one</button>
    <h2>Reactive</h2>
    <p>{{ promiseTwo.name }} - {{ promiseTwo.age }}</p>
    <button @click="updatePromiseTwo">Update promise two</button>
  </div>
</template>

<script setup>
  import { reactive, ref } from "vue";

  const promiseOne = ref({ name: "mario", age: 30 });
  const promiseTwo = reactive({ name: "luigi", age: 35 });

  const updatePromiseOne = () => {
    promiseOne.value.age = 40;
  };
  const updatePromiseTwo = () => {
    promiseTwo.age = 45;
  };
</script>

3. Ref 和 Reactive 的区别

* 个人建议是尽量使用 ref

// ref和reactive的区别
const nameOne = ref("misterwu");
const nameTwo = reactive("promise");
// 对于基本数据类型来讲, reactive定义的,无法实现数据驱动的响应

// 实现值的更新(reactive)
const updatePromiseTwo = () => {
  nameTwo = "米修";
};

// 3. 获取测试
<p>{{ nameTwo }}</p>;

第六章计算属性

1. computed 的基本写法

<template>
  <div class="home">
    <h1>{{ name }}</h1>
  </div>
</template>

<script setup>
import { computed } from "vue";

// computed的基本语法
const name = computed(() => {
  return "米斯特吴";
});
</script>

2. 实现搜索功能

<template>
  <div class="home">
    <input type="text" v-model="search" />
    <p>search term - {{ search }}</p>

    <div v-for="name in matchingNames" :key="name">{{ name }}</div>
  </div>
</template>

<script setup>
import { computed, reactive, ref } from "vue";

const names = ref(["小猪", "小狗", "小猫", "小爱", "小狼", "小虎", "狮子王"]);
const search = ref("");

const matchingNames = computed(() => {
  return names.value.filter((name) => name.includes(search.value));
});
</script>

第七章 watch & watchEffect

1. 监听 & 停止监听

<template>
  <div class="home">
    <h1>Home</h1>
    <input type="text" v-model="search" />
    <p>search term - {{ search }}</p>
    <div v-for="name in matchingNames" :key="name">{{ name }}</div>

    <button @click="handleClick">stop watching</button>
  </div>
</template>

<script setup>
import { computed, reactive, ref, watch, watchEffect } from "vue";

const search = ref("");
const names = ref(["小猪", "小狗", "小猫", "小爱", "小狼", "小虎", "狮子王"]);

const matchingNames = computed(() => {
  return names.value.filter((name) => name.includes(search.value));
});

watch(search, () => {
  console.log("watch function ran");
});

// watchEffect
watchEffect(() => {
  console.log("watchEffect ran"); // 仅初始化一次
  console.log("watchEffect ran", search.value); // 每次search属性发生变化都触发
});

// 停止监听 watch
const stopWatch = watch(search, () => {
  console.log("watch function ran");
});

// 停止监听 watchEffect
const stopEffect = watchEffect(() => {
  console.log("watchEffect ran", search.value);
  console.log(names.value);
});

const handleClick = () => {
  stopWatch();
  stopEffect();
};
</script>

第八章属性 Props

1.Home.vue

配置 Home.vue 的基本形态

<template>
  <div class="home">
    <h1>Home</h1>
  </div>
</template>

<script setup>
  import { ref } from "vue";
  const posts = ref([
    { title: "跟老吴学前端", body: "Lorem ipsum .", id: 1 },
    { title: "不跟老吴学前端", body: "lorem ipsum", id: 2 },
  ]);
</script>

2. PostList.vue

*创建 components/PostList.vue

<template>
  <div class="post-list"></div>
</template>

<script setup></script>

<style></style>

3. Home.vue (属性 props)传值

<script setup>
import PostList from "../components/PostList.vue";
import { ref, reactive, computed, watch, watchEffect } from "vue";

const posts = ref([
  { title: "跟米斯特吴学习全新的Vue.js", body: "vue", id: 1 },
  {
    title: "跟米斯特吴学习全新的React.js",
    body: "react Lorem ipsum!",
    id: 2,
  },
]);
</script>

<template>
  <div class="home">
    <PostList :posts="posts" />
  </div>
</template>

<style></style>

6. PostList.vue 使用 SinglePost 组件

<script setup>
import SinglePost from "./SinglePost.vue";

defineProps({
  posts: Array,
});
</script>

<template>
  <div class="post-list">
    <div v-for="post in posts" :key="post.id">
      <SinglePost :post="post" />
    </div>
  </div>
</template>

<style></style>

7. SinglePost.vue 渲染数据

<script setup>
import { computed } from "vue";

const props = defineProps({
  post: Object,
});

const snippet = computed(() => {
  return props.post.body.substring(0, 100) + "...";
});
</script>

<template>
  <div class="post">
    <h3>{{ post.title }}</h3>
    <p>{{ snippet }}</p>
  </div>
</template>

<style></style>

第九章生命周期钩子函数

1. PostList.vue

<script setup>
import SinglePost from "./SinglePost.vue";
import { onMounted, onUnmounted, onUpdated } from "vue";

onMounted(() => {
  //   alert("页面渲染之前执行,执行完,页面就出来了");
  /** 数据请求 */
});

// watchEffect()

onUnmounted(() => {
  //   alert("组件注销之前执行,执行完组件就不在页面显示了");
  // better-scroll 销毁掉三方插件实例的一些对象
});

onUpdated(() => {
  alert("当组件内的内容发生变化, 就会执行这个更新钩子函数");
});

defineProps({
  posts: Array,
});
</script>

<template>
  <div class="post-list">
    <div v-for="post in posts" :key="post.id">
      <SinglePost :post="post" />
    </div>
  </div>
</template>

<style></style>

2. Home.vue

<script setup>
  import PostList from "../components/PostList.vue";
  import { ref, reactive, computed, watch, watchEffect } from "vue";

  const posts = ref([
    { title: "跟米斯特吴学习全新的Vue.js", body: "vue", id: 1 },
    {
      title: "跟米斯特吴学习全新的React.js",
      body: "react Lorem ipsum!",
      id: 2,
    },
  ]);

  const showPosts = ref(true);
</script>

<template>
  <div class="home">
    <PostList :posts="posts" v-if="showPosts" />
    <button @click="showPosts = !showPosts">显示/隐藏 PostList组件</button>

    <button @click="posts.pop()">删除一个博客信息</button>
  </div>
</template>

<style></style>

第十章模拟数据

1. data/db.json

{
  "posts": [
    {
      "title": "跟米斯特吴学全新版本的Vue.js",
      "body": "本课程指南主要是为有 Vue 2 经验的、希望学习 Vue 3 的新功能和更改旧项目的用户而提供的。",
      "id": 1,
      "tags": ["vue3", "compositionApi", "blog"]
    },
    {
      "title": "跟米斯特吴学全新版本的React.js",
      "body": "用于构建用户界面的 JavaScript 库",
      "id": 2,
      "tags": ["react", "redux", "hooks"]
    },
    {
      "id": 3,
      "title": "跟米斯特吴学全新版本的Angular",
      "body": "学会用 Angular 构建应用，然后把这些代码和能力复用在多种多种不同平台的应用上 —— Web、移动 Web、移动应用、原生应用和桌面原生应用。",
      "tags": ["angular", "rxjs", "typescript"]
    },
    {
      "id": 4,
      "title": "跟米斯特吴学全新版本微信小程序",
      "body": "微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。",
      "tags": ["微信", "小程序", "wechat"]
    },
    {
      "id": 5,
      "title": "跟米斯特吴学全新版本的uniapp",
      "body": "uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。",
      "tags": ["uniapp", "vue", "小程序", "iOS", "安卓"]
    }
  ]
}

2. 安装 json-server

npm install json-server

json-server --watch data/db.json

第十一章 axios 请求数据

1. Home.vue

安装 axios

npm install axios

请求数据

<script setup>
import PostList from "../components/PostList.vue";
import { ref, reactive, computed, watch, watchEffect } from "vue";
import axios from "axios";

const posts = ref([]);

const load = async () => {
  try {
    let { data } = await axios("http://localhost:3003/posts");
    posts.value = data;
  } catch (error) {
    console.log(error);
  }
};

load();

const showPosts = ref(true);
</script>

<template>
  <div class="home">
    <div v-if="posts.length">
      <PostList :posts="posts" v-if="showPosts" />
    </div>
    <div v-else>加载中....</div>
  </div>
</template>

<style></style>

第十二章复用组件 composables

1. 将 Home.vue 中的 load 抽离

* src/composables 文件夹
* composables/getPosts.js
* 将Home.vue中setup的内容抽离过去

2. getPost.js

import { ref } from "vue";

const getPosts = () => {
  const posts = ref([]);
  const error = ref(null);

  const load = async () => {
    try {
      let data = await fetch("http://localhost:3000/posts");
      if (!data.ok) {
        throw Error("no available data");
      }
      posts.value = await data.json();
    } catch (err) {
      error.value = err.message;
    }
  };

  return { posts, error, load };
};

export default getPosts;

3. Home.vue 实现复用

<script>
import PostList from "../components/PostList.vue";
import getPosts from "../composables/getPosts";

const { posts, load } = getPosts();

load();
</script>

第十三章渲染标签

1. SinglePost.vue

<template>
  <div class="post">
    <h3>{{ post.title }}</h3>
    <p>{{ snippet }}</p>
    <span v-for="tag in post.tags" :key="tag"> #{{ tag }} </span>
  </div>
</template>

2. App.vue 的样式

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

3. Home.vue 的样式

<div v-if="posts.length" class="layout"></div>

.home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
}

.layout {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 20px;
}

4. SinglePost.vue 的样式

.post {
  margin: 0 40px 30px;
  padding-bottom: 30px;
  border-bottom: 1px dashed #e7e7e7;
}
.post h3 {
  display: inline-block;
  position: relative;
  font-size: 26px;
  color: white;
  margin-bottom: 10px;
  max-width: 400px;
}
.post h3::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #ff8800;
  position: absolute;
  z-index: -1;
  padding-right: 40px;
  left: -30px;
}

十四章创建导航

1. 安装路由

npm install vue-router

2. 创建路由文件 src/router/index.js

import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";

const routes = [{ path: "/", name: "Home", component: Home }];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

3. main.js 挂载路由实例

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App).use(router).mount("#app");

4. 创建导航 components/Navbar.vue

<template>
  <header>
    <h1>个人博客</h1>
    <nav>
      <router-link :to="{ name: 'Home' }">首页</router-link>
      <router-link :to="{ name: 'Home' }">新建</router-link>
    </nav>
  </header>
</template>

<script></script>

<style>
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
}
header h1 {
  color: #dfdfdf;
  font-size: 48px;
}
header a {
  color: #bbb;
  text-decoration: none;
  margin-left: 20px;
}
header a.router-link-active {
  color: #444;
  font-weight: bold;
}
</style>

5. App.vue 渲染组件

<script setup>
import Navbar from "./components/Navbar.vue";
</script>

<template>
  <Navbar />
  <router-view></router-view>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>

十五章 Details

1. SinglePost.vue 添加 router-link

<template>
  <div class="post">
    <router-link :to="{ name: 'Details', params: { id: post.id } }">
      <h3>{{ post.title }}</h3>
    </router-link>
    <p>{{ snippet }}</p>
    <span v-for="tag in post.tags" :key="tag"> #{{ tag }} </span>
  </div>
</template>

2. router/index.js 配置路由

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/posts/:id",
    name: "Details",
    component: Details,
    props: true,
  },
];

3. views/Details.vue

<template>Details</template>

<script>
export default {
  props: ["id"],
  setup(props) {},
};
</script>

<style scoped></style>

4. getPost.js

* 详情页面获取单个数据信息

import { ref } from "vue";

const getPost = (id) => {
  const post = ref(null);
  const error = ref(null);

  const load = async () => {
    try {
      let data = await fetch("http://localhost:3000/posts/" + id);
      if (!data.ok) {
        throw Error("That post does not exist");
      }
      post.value = await data.json();
    } catch (err) {
      error.value = err.message;
    }
  };

  return { post, error, load };
};

export default getPost;

5. Details.vue 引入并使用

<template>
  <div v-if="error">{{ error }}</div>
  <div v-if="post" class="post">
    <h3>{{ post.title }}</h3>
    <p class="pre">{{ post.body }}</p>
  </div>
  <div v-else>Loading...</div>
</template>

<script>
import getPost from "@/composables/getPost";

export default {
  props: ["id"],
  setup(props) {
    const { error, post, load } = getPost(props.id);

    load();

    return { error, post };
  },
};
</script>

6. 加入样式

.tags a {
  margin-right: 10px;
}
.post {
  max-width: 1200px;
  margin: 0 auto;
}
.post p {
  color: #444;
  line-height: 1.5em;
  margin-top: 40px;
}
.pre {
  white-space: pre-wrap;
}

十六章实现加载动画

1. 创建 components/Spinner.vue

<template>
  <div class="spin"></div>
</template>

<style>
.spin {
  display: block;
  width: 40px;
  height: 40px;
  margin: 30px auto;
  border: 3px solid transparent;
  border-radius: 50%;
  border-top-color: #ff8800;
  animation: spin 1s ease infinite;
}

@keyframes spin {
  to {
    -webkit-transform: rotateZ(360deg);
  }
}
</style>

2. Home.vue 引入 Spinner 加载动画

<script>
import Spinner from "../components/Spinner.vue";

export default {
  name: "Home",
  components: { PostList, Spinner },
};
</script>

<div v-else>
  <Spinner />
</div>

3.Details.vue 引入 Spinner 加载动画

<template>
  <div v-else>
    <Spinner />
  </div>
</template>

<script>
import Spinner from "../components/Spinner.vue";

export default {
  props: ["id"],
  components: { Spinner },
};
</script>

4. 代码控制延迟,显示加载动画

在 getPosts & getPost 里加入延迟代码

const load = async () => {
    try {
      await new Promise(resolve => {
        setTimeout(resolve, 2000)
      })
    }
}

十七章创建表单

1. 创建 views/Create.vue

2. router/index.js 配置路由

{
  path: '/create',
  name: 'Create',
  component: Create
}

3. Create.vue 表单

<template>
  <div class="create">
    <form>
      <label>标题:</label>
      <input v-model="title" type="text" required />
      <label>内容:</label>
      <textarea v-model="body" required></textarea>
      <label>标签 (回车添加标签):</label>
      <input @keydown.enter.prevent="handleKeydown" v-model="tag" type="text" />

      <button>添加</button>
    </form>
  </div>
</template>

4. Create.vue 业务逻辑

<script>
import { ref } from "vue";

export default {
  setup() {
    const title = ref("");
    const body = ref("");
    const tags = ref([]);
    const tag = ref("");

    const handleKeydown = () => {
      if (!tags.value.includes(tag.value)) {
        tag.value = tag.value.replace(/\s/g, "");
        tags.value.push(tag.value);
      }
      tag.value = "";
    };

    return { body, title, tags, tag, handleKeydown };
  },
};
</script>

5.渲染 tag

<div v-for="tag in tags" :key="tag" class="pill">
  #{{ tag }}
</div>
<button>添加</button>

6.实现样式 Create.vue

form {
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
}
input,
textarea {
  display: block;
  margin: 10px 0;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #eee;
}
textarea {
  height: 160px;
}
label {
  display: inline-block;
  margin-top: 30px;
  position: relative;
  font-size: 20px;
  margin-bottom: 10px;
}

button {
  display: block;
  margin-top: 30px;
  background: #ff8800;
  color: white;
  border: none;
  padding: 8px 16px;
  font-size: 18px;
}
.pill {
  display: inline-block;
  margin: 10px 10px 0 0;
  color: #444;
  background: #ddd;
  padding: 8px;
  border-radius: 20px;
  font-size: 14px;
}

十九章添加数据 fetch

1. 给 form 添加 submit 事件

<form @submit.prevent="handleSubmit">

2. setup 中实现 handleSubmit 方法

const handleSubmit = async () => {
  const post = {
    id: Math.floor(Math.random() * 10000),
    title: title.value,
    body: body.value,
    tags: tags.value,
  };

  await fetch("http://localhost:3000/posts", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(post),
  });
};
return { handleSubmit };

3.useRouter 实现路由跳转

Create.vue 引入并使用 useRouter

<script>
import { useRouter } from "vue-router";

export default {
  setup() {
    const router = useRouter();

    const handleSubmit = async () => {
      await fetch("http://localhost:3000/posts", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(post),
      });

      router.push({ name: "Home" });
    };
  },
};
</script>

4. useRoute

Details.vue

<script>
import { useRoute } from "vue-router";

export default {
  props: ["id"],
  components: { Spinner },
  setup(props) {
    const route = useRoute();
    const { error, post, load } = getPost(route.params.id);

    load();

    return { error, post };
  },
};
</script>

二十章展示侧边标签

1. 创建 components/TagCloud.vue

<template>
  <div class="tag-cloud">
    <h3>标签</h3>
    <div v-for="tag in tags" :key="tag">
      <router-link :to="{ name: 'Tag', params: { tag } }">
        #{{ tag }}
      </router-link>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";

const tags = ref([]);
const tagSet = new Set();

props.posts.forEach((item) => {
  item.tags.forEach((tag) => tagSet.add(tag));
});

tags.value = [...tagSet];

const props = defineProps({
  posts: Array,
});
</script>

<style scoped>
.tag-cloud {
  padding: 10px;
}
.tag-cloud h3 {
  border-bottom: 1px solid #eee;
  padding: 16px 8px;
  color: #444;
}
.tag-cloud div {
  display: inline-block;
  padding: 10px;
}
.tag-cloud a {
  color: #ccc;
  text-decoration: none;
}
.tag-cloud a.router-link-active {
  color: #ff8800;
  font-weight: bold;
}
</style>

2. Home.vue

<script setup>
import PostList from "../components/PostList.vue";
import getPosts from "../composibles/getPosts";
import Spinner from "../components/Spinner.vue";
import TagCloud from "../components/TagCloud.vue";

const { posts, load } = getPosts();
load();
</script>

<template>
  <div class="home">
    <div v-if="posts.length" class="layout">
      <PostList :posts="posts" />
      <TagCloud :posts="posts" />
    </div>
    <div v-else>
      <Spinner />
    </div>
  </div>
</template>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
}

.layout {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 20px;
}
</style>

第二十一章创建 tag 标签路由跳转

TagCloud.vue

 <router-link :to="{ name: 'Tag', params: { tag } }">

1. router/index.js

{
  path: '/tags/:tag',
  name: 'Tag',
  component: Tag
}

2. 创建 views/Tag.vue

<script setup>
import Spinner from "../components/Spinner.vue";
import PostList from "../components/PostList.vue";

import getPosts from "../composibles/getPosts";
import { useRoute } from "vue-router";
import { computed } from "vue";

const route = useRoute();
const { posts, load } = getPosts();

load();

const postsWithTag = computed(() => {
  return posts.value.filter((p) => p.tags.includes(route.params.tag));
});
</script>

<template>
  <div class="tag">
    <div v-if="posts.length">
      <PostList :posts="postsWithTag" />
    </div>
    <div v-else>
      <Spinner />
    </div>
  </div>
</template>

<style>
.tag {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
}
</style>

第二十二章展示底部的标签

* 浏览器调试 点击标签 跳转到Tag页面 但Tag页面底部并没有 tag
* 所以需要在Tag.vue中也引入TagCloud.vue

9. Tag.vue 引入 TagCloud.vue

<template>
  <div class="tag">
    <div v-if="posts.length">
      <PostList :posts="postsWithTag" />
      <TagCloud :posts="posts" />
    </div>
  </div>
</template>

<script>
import TagCloud from "../components/TagCloud.vue";

export default {
  components: { TagCloud },
};
</script>

<style>
.tag {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
}
</style>

10. 将 tag 标签展示在右侧

* Home.vue 添加class

<div v-if="posts.length" class="layout">
  <PostList :posts="posts" />
  <TagCloud :posts="posts" />
</div>

Home.vue 添加样式

.layout {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 20px;
}

Name		Name	Last commit message	Last commit date
Latest commit History 28 Commits
.vscode		.vscode
data		data
public		public
src		src
.gitignore		.gitignore
README.md		README.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

lucky0513123/vue3-composition-api-blog

Folders and files

Latest commit

History

Repository files navigation

Vue3CompositionAPI

第一章 最终效果演示

1. 下载依赖

2. 启动前端

3. 启动数据

第二章 创建项目

1. vite 创建项目

2.App.vue

3. Home.vue

第三章 组件嵌套

1. 创建 views/Home.vue

2. App.vue

Home.vue 定义属性

第三章 Refs

1. Refs

第四章 Refs 数据响应

1.Ref(数据驱动)

第五章 Ref vs Reactive

1.引入 reactive

2.Home.vue

3. Ref 和 Reactive 的区别

第六章 计算属性

1. computed 的基本写法

2. 实现搜索功能

第七章 watch & watchEffect

1. 监听 & 停止监听

第八章 属性 Props

1.Home.vue

2. PostList.vue

3. Home.vue (属性 props)传值

6. PostList.vue 使用 SinglePost 组件

7. SinglePost.vue 渲染数据

第九章 生命周期钩子函数

1. PostList.vue

2. Home.vue

第十章 模拟数据

1. data/db.json

2. 安装 json-server

第十一章 axios 请求数据

1. Home.vue

第十二章 复用组件 composables

1. 将 Home.vue 中的 load 抽离

2. getPost.js

3. Home.vue 实现复用

第十三章 渲染标签

1. SinglePost.vue

2. App.vue 的样式

3. Home.vue 的样式

4. SinglePost.vue 的样式

十四章 创建导航

1. 安装路由

2. 创建路由文件 src/router/index.js

3. main.js 挂载路由实例

4. 创建导航 components/Navbar.vue

5. App.vue 渲染组件

十五章 Details

1. SinglePost.vue 添加 router-link

2. router/index.js 配置路由

3. views/Details.vue

4. getPost.js

5. Details.vue 引入并使用

6. 加入样式

十六章 实现加载动画

1. 创建 components/Spinner.vue

2. Home.vue 引入 Spinner 加载动画

3.Details.vue 引入 Spinner 加载动画

4. 代码控制延迟,显示加载动画

十七章 创建表单

1. 创建 views/Create.vue

2. router/index.js 配置路由

3. Create.vue 表单

4. Create.vue 业务逻辑

5.渲染 tag

6.实现样式 Create.vue

十九章 添加数据 fetch

第一章最终效果演示

第二章创建项目

第三章组件嵌套

第六章计算属性

第八章属性 Props

第九章生命周期钩子函数

第十章模拟数据

第十二章复用组件 composables

第十三章渲染标签

十四章创建导航

十六章实现加载动画

十七章创建表单

十九章添加数据 fetch

二十章展示侧边标签

第二十一章创建 tag 标签路由跳转

第二十二章展示底部的标签

Packages