m0_52951519的博客

Vue 2 的支持将于 2023 年 12 月 31 日结束，所有 CLI 工具的默认 Vue 版本为 3 及以上版本。要把你的网站发布到网上，请把这个文件夹的内容复制到你的主机环境中。在使用这个 API 时，你需要对“响应式”的属性进行明确说明。Vue CLI 还为我们提供了准备向网络发布应用程序的工具。如果你的本地服务仍然正在运行，在控制台按下 Ctrl + C 停止它。这使得新的 API 通常被认为是一个更高级的用例。只有你从这个函数返回的东西在你的。，可以帮助你将应用发布到很多常见的托管平台。

具体来说，当用户激活“Edit”按钮时，我们将“Edit”按钮从 DOM 中移除，但我们并没有将用户的焦点移动到任何地方，所以实际上它只是消失了。然而，由于我们的编辑表单和“Edit”按钮在不同的组件中，我们不能仅仅在“Edit”按钮的点击事件处理器中设置焦点。当点击“Edit”按钮时，将焦点移到编辑名称文本框中是有意义的，而当取消或从编辑界面保存时，将焦点移回“Edit”按钮。值得注意的是，在一个组件中，引用必须是唯一的。当你激活“Edit”按钮时，你的按钮的 ref 之前是被定义的，但现在它不是了。

为了更好地理解这一点，最好编写一个流程图、描述或图表，说明是什么事件，在哪里触发和监听，以及触发后会发生什么。现在，当你保存并重新加载时，你将发现问题已经解决：当你在 todo 项的模板之间切换时，复选框的状态被保留了。现在，如果你打开你的应用程序并点击了一个待办事项的“Edit”按钮，你应该可以看到编辑表单代替了复选框。我们将在我们的应用程序中这样做，因为这将使我们能够用编辑表单替换显示待办事项的代码。，这意味着（在其他事情中）当模板发生变化时，它们的状态会被保存，就像我们现在做的那样。

你现在应该可以在你的应用程序中，看到列表的摘要。但是，如果你尝试勾选和取消勾选某些项，就会发现一个错误：到目前为止，我们并没有以任何方式跟踪“done”的数据，因此已完成项目的数量不会改变。这在为用户提供帮助的同时，也保留了列表的标签作为辅助。如果我们在待办事项列表中完成了 5 项中的 2 项，那么我们的摘要可以是“已完成 2/5”。但是对于更大的应用程序，或者当表达式更复杂时，这可能会导致严重的性能问题。计算属性的工作原理与方法类似，但仅在它们的一个依赖项发生变化时重新运行。匹配的项目，并翻转它的。

在下一篇文章中，我们将为我们的应用程序添加一些更多的功能，即使用一个计算属性来为我们的应用程序添加一个已完成的 todo 项目的计数。现在，我们已将 CSS 重置为在浏览器之间统一，需要对样式进行更多自定义。我们希望将某些样式应用于应用程序中的各个组件。在继续向我们的应用程序添加更多高级功能之前，我们应该添加一些基本的 CSS 使其看起来更好。让我们删除它们，并用下面的样式替换它们。现在我们需要在模板中添加一些 CSS 类来与我们的样式连接。这将导致在构建步骤中拾取文件并自动将其添加到我们的网站。

对于安装，以及使用 Vue 的一些更高级的功能（如单文件组件或渲染功能），你需要一个安装了 node + npm 的终端。所以在我们的例子中，我们的事件对象只是一个字符串。，当数据输入时触发的事件提交，一个在提交时触发以添加数据并重新呈现列表的方法，以及一个控制数据的模型。接下来我们真正需要的是允许我们的用户在应用程序中输入他们自己的待办事项的能力，为此我们需要一个“text”类型的。我们现在非常接近能够将新的待办事项添加到我们的列表中。接下来我们需要做的是将新创建的待办事项传递给我们的。

本地注册的组件只能在注册它们的组件内部使用，因此你需要将其导入并注册到使用它们的每个组件文件中。结尾的一个单文件中。组件可以把一个很大的应用程序拆分为独立创建和管理的不相关区块，然后彼此按需传递数据，这些小的代码块可以方便更容易的理解和测试。现在，它应该包含欢迎消息、Vue 文档的链接、使用 CLI 初始化应用程序时添加的插件的链接，以及指向 Vue 社区和生态系统的其他有用链接。的配置文件，可以在开发中使用 JavaScript 的新特性，并且将其转换为在生产环境中可以跨浏览器运行的旧语法代码。