跳到主要内容位置

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 的基础语法教程,你学会了吗?如果有帮助请三连并关注,想学更多的开发知识,可以在评论区留言,感谢观看!

提示

《Vue 3.x 全家桶完全指南与实战》课程已上线,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

新书《JavaScript 基础语法详解》已上架,可在京东、当当、淘宝等各大电商购买