创建你的第一个 Vue3 项目——Vue 教程

牛X！

接下来，让我们在输入中添加一个清除按钮，看看如何在 Composition API 中创建一个方法。

Composition API 中的方法

在 Options API 中，我们的 Vue 对象中有一个完整的属性专门用于方法。

对于较大的文件，这意味着可以在距离使用它的方法数百行之外声明数据——使组件更难阅读和维护。

在 Composition API 中，一切都在设置方法中，这意味着我们可以根据特性组织代码，甚至可以将公共特性提取到自己的代码模块中。

让我们创建一个重置方法，它接受我们的 ref 并将其设置为一个空字符串。

setup () { 
      const query = ref('') 

      const reset = (evt) => { 
        query.value = '' // 清除查询
      } 
      
      return { 
        reset, 
        query 
      } 
}

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

为什么？

如果我们console.log(query)，我们会看到它不仅仅是一个 String 值，而是一个Proxy。代理中的陷阱使我们能够轻松获取数据，但这就是为什么我们需要在我们的 refs 上调用 .value 的原因。

然后，就像在 Options API 中一样，我们可以在模板中添加一个按钮，以便reset在单击时调用此方法。

<button @click='reset'>reset</button>

现在，当我们使用新的清晰输入代码检查我们的应用程序时，它应该看起来有点像这样。

向我们的 Vue3 项目添加第二个组件

现在我们有了输入和查询数据，让我们实际创建一个结果组件并开始显示我们的结果。

我们称它为SearchResults.vue

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

<script>
    import { ref } from 'vue'  
    import SearchResults from './SearchResults.vue'  
    export default {  
        components: {  
            SearchResults  
        },  
        // ...  
    }
<script>

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

<template>  
    <div>  
        <h2> Filter LearnVue Articles </h2>  
        <input  
        type='text'  
        placeholder='Filter Search'  
        v-model='query'  
        />  
        <br>  
        <button @click='reset'>reset </button>  
        <search-results/>  
    </div>  
</template>

可以，接下来让我们找到一种方法来使用 HelloWorld 组件中的查询字符串。

props

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

我们可以通过在 HelloWorld.vue 的标签内添加一个属性来做到这一点<search-result>。

<search-results :query='query'/>  <!--是吧？easy-->

使用props

在 SearchResults.vue 中，让我们创建脚本的框架并从 JSON 文件导入所有文章信息。

import titles from '../post-data.json' 
export default { 
  setup (props, context) { 
 
  } 
}

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

首先，我们必须在道具选项中声明它们。这告诉我们的组件期望什么 props 以及执行我们指定的任何 prop 验证。

export default { 
  props: { 
    query: String 
  }, 
  setup (props, context) { 
  // ...

如果仔细查看设置方法，您会发现它接受两个参数。

1. props- 包含传递给我们组件的所有道具
2. context- 包含属性、插槽和发射

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

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

计算属性

与使用 ref 类似，我们需要将 computed 导入到我们的项目中。

import { computed } from 'vue'

然后，我们像这样设置它，我们的计算属性接受一个 getter 方法。只要其中一个依赖项发生变化，此方法就会更新我们的计算属性。

import { computed } from 'vue' 
import titles from '../post-data.json' 
export default { 
  props: { 
    query: String 
  }, 
  setup (props, context) { 
    
    const filteredTitles = computed(() => { 
     
    } )

    return { 
      filteredTitles 
    } 
  } 
}

对于此方法，我们要使用 query 属性过滤所有标题。一切都被转换为小写，所以我们不必担心大小写。

const filteredTitles = computed(() => { 
      return titles.filter(s => s.Name.toLowerCase().includes(props.query.toLowerCase())) } 
)

OK！

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

<template> 
  <div class='root'> 
    <p> {{ query }}- {{ filteredTitles.length }} </p> 
    <ul> 
      <li v-for='title in filteredTitles' : key='title.Page'> 
        {{ title.Name }} 
      </li> 
    </ul> 
  </div> 
</template>

OK。最后让我们看看我们现在做了什么，再次单击此处以获取我用于此组件的确切 CSS 样式。

Vue3 项目中的生命周期挂钩

在开始使用 Vue3 之前您应该了解的另一件事是如何使用[Vue 生命周期钩子]。

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

下面是一个如何使用生命周期挂钩的简单示例。

import { computed, onMounted } from 'vue' 
export default { 
  setup () { 
    
    onMounted(() => { 
      console.log('mounted') 
    }) } 
  }

总结

Vue3 中有很多很酷的特性，它们应该对创建可扩展的 Vue 应用程序非常有用。

希望本教程能让您在新环境中进行设置，并为您提供开始创建自己的 Vue3 项目的基础知识。

和往常一样，如果您有任何意见或问题，请留下回复。

祝你编码愉快！每天一个小知识