Vue 3 完全入门教程

Vue 是一个渐进式的 UI 框架。它改变了传统的网页开发中需要使用 JS 手动操作 DOM 的开发方式。

const ele = document.querySelector("...");
ele.value = "...";

而是以组件化的形式管理页面元素的代码。这样，每个组件就形成了特殊的、类似于自定义的 HTML 元素。我们可以给它们添加独特的功能和样式，并管理数据。

<template>
  <h1>
    <a :href="blog.link">{{ blog.title }}</a>
  </h1>
  <article>
    <div>{{ blog.content }}</div>
  </article>
</template>

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

const blog = ref({
  title: "Vue 3 基础教程",
  content: "Vue 3 在 Vue 2 的基础上发生了重大变化",
  link: "/vue-3-tutorial",
});
</script>

<style scoped></style>

每个组件的代码都是独立且隔离的，可以防止与其他元素的数据冲突。

<template></template>

<script setup>
blogs; // X 不能访问
</script>

<style scoped></style>

Vue 是由华人尤雨溪主导开发的，符合国人的开发习惯。现在无论是个人、中小企业还是大企业，都有 Vue 框架的影子，而它们招聘的前端工程师岗位中大部分都是 Vue 开发。这个视频我们来快速的学习一下如何使用 Vue JS 进行开发，并使用 Vite 脚手架创建项目，让你能在最短时间内上手。

创建 vue 项目(vite)

npm init vue@latest

预览项目

yarn install yarn dev

组件结构

template、script、style

为模板提供数据

展示一篇博客详情，使用 ref 定义对象，然后再 template 展示。

• 标签之间 {{}}
• HTML 属性 v-bind

<template>
  <h1>
    <a :href="blog.link">{{ blog.title }}</a>
  </h1>
  <article>
    <div>{{ blog.content }}</div>
  </article>
</template>

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

const blog = ref({
  title: "Vue 3 基础教程",
  content: "Vue 3 在 Vue 2 的基础上发生了重大变化",
  link: "/vue-3-tutorial",
});
</script>

<style scoped></style>

条件渲染

如果内容长度大于 100，用 v-if 展示阅读原文按钮

<article>
  <div>{{ blog.content.slice(0, 100) }}</div>
  <footer v-if="blog.content.length > 100">
    <button>阅读原文</button>
  </footer>
  </article>

切换 blog.content.length > 10 看效果：

<article>
    <div>{{ blog.content }}</div>
    <footer v-if="blog.content.length > 10">
      <button>阅读原文</button>
    </footer>
  </article>

渲染列表

把博客 ref 改成数组，渲染多个博客

<template>
  <div v-for="blog in blogs">
    <h1>
      <a :href="blog.link">{{ blog.title }}</a>
    </h1>
    <article>
      <div>{{ blog.content.slice(0, 100) }}</div>
      <footer v-if="blog.content.length > 100">
        <button>阅读原文</button>
      </footer>
    </article>
  </div>
</template>

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

const blogs = ref([
  {
    id: 1,
    title: "Vue 3 基础教程",
    content: "Vue 3 在 Vue 2 的基础上发生了重大变化",
    link: "/vue-3-tutorial",
  },
  {
    id: 2,
    title: "React 18 基础教程",
    content: "React 18 在 React 17 的基础上发生了重大变化",
    link: "/react-18-tutorial",
  },
  {
    id: 3,
    title: "JavaScript 基础教程",
    content: "ECMAScript 2015 在 ECMAScript 5 的基础上发生了重大变化",
    link: "/javascript-tutorial",
  },
]);
</script>

<style scoped></style>

计算属性

使用计算属性显示文章数量

<template>
  <!-- ... -->
  <h3>总共 {{ total }} 篇</h3>
</template>
<script setup>
// ...
const total = computed(() => blogs.value.length);
</script>

处理事件

可以隐藏总页数，使用事件和函数，处理按钮事件。

<template>
  <!-- .. -->
  <h3 v-if="showTotal">总共 {{ total }} 篇</h3>
  <button @click="toggleTotal">{{ showTotal ? "隐藏" : "显示" }}总数</button>
</template>

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

// ...

const showTotal = ref(true);

function toggleTotal() {
  showTotal.value = !showTotal.value;
}
</script>

<style scoped></style>

处理表单

v-model 绑定响应性数据，同步用户输入和 vue 状态

<template>
  <form @submit.prevent="addPost">
    <label for="blogTitle">博客标题</label>
    <input type="text" id="blogTitle" v-model="blogForm.title" />
    <label for="content">内容</label>
    <textarea
      id="content"
      cols="30"
      rows="10"
      v-model="blogForm.content"
    ></textarea>
    <label for="link">链接</label>
    <input type="text" id="link" v-model="blogForm.link" />
    <button type="submit">提交</button>
  </form>
</template>

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

const initialBlogForm = {
  title: "",
  content: "",
  link: "",
};
const blogForm = ref({
  ...initialBlogForm,
});

function addPost() {
  blogs.value.push({
    id: blogs.length + 1,
    ...blogForm.value,
  });
  blogForm.value = { ...initialBlogForm };
}
</script>

创建组件并定义属性

创建博客组件，把显示博客列表项放到单独的组件中。

<template>
  <div>
    <h1>
      <a :href="link">{{ title }}</a>
    </h1>
    <article>
      <div>{{ content.slice(0, 100) }}</div>
      <footer v-if="content.length > 100">
        <button>阅读原文</button>
      </footer>
    </article>
  </div>
</template>
<script setup>
defineProps(["title", "content", "link"]);
</script>

传递属性

给博客列表项组件传递数据。v-bind 传递所有

<template>
  <BlogPost v-for="blog in blogs" v-bind="blog" />
  <!-- ... -->
</template>

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

slot

显示分享到微信按钮

BlogPost.vue

<template>
  <div>
    <!-- ... -->
    <slot></slot>
  </div>
</template>

App.vue

<BlogPost v-for="blog in blogs" v-bind="blog">
    <button>分享到微信</button>
  </BlogPost>

生命周期

模拟远程加载阅读数

BlogPost.vue

<template>
  <div>
    <article>
      <p>阅读量：{{ viewCount }}</p>
      <footer v-if="content.length > 100">
        <button>阅读原文</button>
      </footer>
    </article>
  </div>
</template>
<script setup>
const viewCount = ref(0);
onMounted(() => {
  setTimeout(() => {
    viewCount.value = 1000000;
  }, 1000);
});
</script>

自定义事件

在博客列表项里触发标题点击事件，并在 app.vue 中处理

BlogPost.vue

<template>
  <div>
    <h1>
      <a :href="link" @click.prevent="$emit('titleClick', title)">{{
        title
      }}</a>
    </h1>
</template>
<script setup>
defineEmits(["titleClick"]);
</script>

App.vue

<template>
  <BlogPost v-for="blog in blogs" v-bind="blog" @titleClick="handleTitleClick">
    <button>分享到微信</button>
  </BlogPost>
</template>

<script setup>
function handleTitleClick(title) {
  console.log(title);
}
</script>

小结

好了，这个就是 Vue 的基础语法教程，你学会了吗？如果有帮助请三连并关注，想学更多的开发知识，可以在评论区留言，感谢观看！