【Vue3教程】创建你的第一个Vue 3项目

2.asset 路径

与其他Vue项目设置一样，Vite 提供了两种引用`asset``的方法。

1. 绝对路径 - 使用公用文件夹。 这些资源使用/file.extension引用，并且在构建项目时将复制到dist文件夹的根目录中。

2. 相对路径 - 例如，根据文件夹的文件结构来相对访问src/assets文件夹中的文件。 构建项目时，整个文件夹都将作为_assets放置在dist文件夹中。

3.内置 Typescript 支持

Vue3 最大的变化之一是使用Typescript重写了核心库，允许根据IDE进行类型检查和更好的错误消息。

通过提供对.ts文件和SFC中的<script lang =“ ts”>的内置Typescript支持，Vite再次与Vue 3顺利集成。

理解 Vue3 组件

现在我们已经设置好了Vue 3应用程序，并且理解了Vue 3 Vite工具，让我们来看看这些组件是如何工作的。

Vue 3中最大的变化是引入了组合API。在这个新的结构中，我们能够根据特性来组织代码，而不是仅仅通过data、computed等来分离代码。

这允许我们创建更多模块化、可读性和可伸缩性的代码，因为单个特性的代码都可以在代码的一个区域中编写。

如果打开src/components/HelloWorld.vue文件，我们将看到与我们在Vue2中编写的代码看起来相同的代码-这称为Options API。

这很棒，因为在 Vue3 中，我们仍然可以在其中使用 vue2 的语法。

在本教程中，我们将介绍如何在新的Composition API中实现这一点，并从Options API中识别出这些变化。

组合API中的响应性数据

我们首先从vue核心库导入一些东西，以允许我们创建响应式变量。

import { ref } from ‘vue’

然后，让我们用如下所示的setup函数替换data选项。

import { ref } from ‘vue’

export default {

setup () {

return {

}

}

}

这个 setup 方法在组件创建时运行，在这里我们可以定义所有需要组件使用的响应数据、计算属性、方法等。

还有，该setup方法返回的任何内容都可以在模板中访问。

使用 ref 创建响应式数据

为了显示这一点，我们在模板中使用v-model创建一个文本输入。

Filter LearnVue Articles

<input

type=‘text’

placeholder=‘Filter Search’

v-model=‘query’

/>

{{ query }}

我们使用ref创建响应式query变量，然后从setup方法返回它。

setup () {

const query = ref(‘’)

return {

query

}

}

然后，如返回到应用程序，会看到我们使用Composition API获得了响应式数据。

很好！接下来，我们在input中添加一个clear按钮，看看如何在Composition API中创建一个方法。

组合API中的方法

在选项 API中，Vue对象中有一个完整的属性专门用于方法。对于较大的文件，这意味着数据可能在数百行之外的方法中声明，这使得组件更难读取和维护。

在组合API中，一切都在 setup 方法中，这意味着我们可以根据特性组织代码，甚至将通用特性提取到它们自己的代码模块中。

我们创建一个reset方法，它获取我们的ref并将其设置为一个空字符串。

setup () {

const query = ref(‘’)

const reset = (evt) => {

query.value = ‘’ // clears the query

}

return {

reset,

query

}

}

需要注意的一件事是，我们需要调用query.value才能访问数据的值。

为什么？

如果我们使用console.log(query)，我们看到它不仅仅是一个字符串值，而是一个 Proxy。使用 Proxy 允许我们轻松地获取数据变化，这也是为什么我们需要在引用上调用.value的原因。

然后，就像在选项API使用的一样，我们可以在模板中添加一个按钮，在单击时调用这个reset方法。

<button @click=‘reset’> Reset

向 Vue3 项目添加第二个组件

现在我们已经有了输入和查询数据，接着，创建一个组件显示结果。

这个组件取名为SearchResults.vue

要将其添加到我们的HelloWorld.vue组件中，首先必须将其导入并在我们的导出默认值中声明它。

然后，我们可以像这样将它添加到模板中:

// HelloWorld.vue

Filter LearnVue Articles

<input

type=‘text’

placeholder=‘Filter Search’

v-model=‘query’

/>

<button @click=‘reset’> Reset

传递参数

Vue props 允许父组件将数据传递给其子组件。对于我们的例子，我们希望从HelloWorld.vue传递query字符串给SearchResults.vue。

// HelloWorld.vue

访问参数

在SearchResults.vue内部，从 JSON 文件导入所有的文章信息。

import titles from ‘…/post-data.json’

export default {

setup (props, context) {

}

}

然后，我们需要几个步骤来访问 props。

首先，我们必须在 props 选项中声明它们。这告诉我们的组件需要什么数据。

// SearchResults.vue

export default {

props: {

query: String

},

setup (props, context) {

// …

如果我们仔细观察setup方法，就会发现它接受两个参数。

1. props – 包含传递给组件的所有 props

2. context– 包含 attrs，slot和emit

我们将使用 props 在 setup 方法中访问我们的 props 的值。

我们所需要做的就是使用计算属性来过滤使文章列表。

计算属性

// SearchResults.vue

import { computed } from ‘vue’

然后，我们这样设置它，其中我们的computed属性接受一个getter方法。每当其中一个依赖项发生更改时，此方法将更新我们的computed属性。

// SearchResults.vue

import { computed } from ‘vue’

import titles from ‘…/post-data.json’

export default {

props: {

query: String

},

setup (props, context) {

const filteredTitles = computed(() => {

})

return {

filteredTitles

}

}

}

对于这个方法，我们希望使用query过滤所有的标题。所有内容都转换为小写，所以我们不必担心大小写。

// SearchResults.vue

const filteredTitles = computed(() => {

return titles.filter(s => s.Name.toLowerCase().includes(props.query.toLowerCase()))

})

很好~

剩下要做的就是实际使用我们的模板来显示数据!这是使用v-for循环完成的。

// SearchResults.vue

Showing {{ filteredTitles.length }} results for "{{ query }}"

• {{ title.Name }}

  就这~

  

  Vue3 生命周期钩子

  在开始使用 Vue3 之前，还需要知道的另一件事是如何使用Vue生命周期钩子。

  

  像Composition API的其他部分一样，我们必须导入我们想要使用的生命周期钩子，并在setup方法中声明它们。

  // Lifecycle Example

  import { computed, onMounted } from ‘vue’

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
  
  
  
  
  
  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

  如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
  

  最后

  面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

  96道前端面试题：

  • 

  常用算法面试题：

  • 

  前端基础面试题：
  内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

  • 

  一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
  

  是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新**

  如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
  [外链图片转存中…(img-PEGVC7H7-1712877858671)]

  最后

  面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

  96道前端面试题：

  • [外链图片转存中…(img-vsRDFtum-1712877858672)]

  常用算法面试题：

  • [外链图片转存中…(img-apusAUqq-1712877858672)]

  前端基础面试题：
  内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

  • [外链图片转存中…(img-avuIq4YY-1712877858673)]

  一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
  [外链图片转存中…(img-4a100nx3-1712877858673)]