的帖子 yobet软件 雇用我 的简历
布莱恩F爱 雇用我
布莱恩F爱
向一位来自波特兰的专注于Ayobet英雄联盟ngular、Web技术和Node.js的谷歌开发专家学习。
广告<跨度类=”spacer">·ultimatecourses.com
用终极课程正确地学习Angular”></a> </div> <article class=

Vue.js用于Angular开发

从Angular开发者的角度学习如何使用Vue.js构建应用。

一个ngular React Vue.js

我们要清楚。

这篇文章是关于:

  • 两个前端JavaScript框架。
  • 两个非常流行的框架。
  • 两个框架在单页应用程序空间。

这是不一篇:

  • 选择一个框架而不是另一个。
  • 提出一个比另一个更好的框架。
  • 开始一场激烈的论战

这篇文章的真正目的是:

从Angular前端架构师和工程师的角度来学习Vue.js。

Angular的Todo应用

在我使用Vue.js创建一个应用程序之前，我想要有一个比较、知识转移和理解的基础。我用Angular、Angular Material和NgRx创建了一个相当简单的“To Do”应用。这个堆栈非常流行，所以我想使用一个既流行又熟悉的堆栈。

下面是我的Angular To Do应用的stack闪电战:

下载

在这篇文章中，我将使用一个Vue.js的演示应用程序。您可以克隆存储库或下载源代码的zip文件:

安装

我们将使用Vue CLI(编写本文时的版本3)。因此，我们需要使用yarn或npm来全局安装CLI:

美元<跨度类=”token function">npm<跨度类=”token function">安装美元- g @vue / cli<跨度类=”token function">纱全球add@vue / cli

我还建议您安装Vue.js devtools。这在调试Vue应用时很有帮助，而且它与Vuex状态管理库无缝协作，类似于Redux和NgRx的Redux Devtools。

创建项目

接下来，使用CLI创建一个新的Vue项目:

$ vue创建todo

在此过程中，您将看到几个选项。以下是我为这个项目选择的选项:

  • 请选择预设:手动选择功能
  • 检查你的项目需要的特性:Babel, Vuex, Linter
  • 选择一个linter / formatter配置:更漂亮
  • 选择额外的检测功能:保存时检测
  • 你喜欢把Babel, PostCSS, ESLint等的配置放在哪里?在专用配置文件中

安装完成后，通过以下方式启动应用:

美元<跨度类=”token builtin class-name">cd待办事项美元<跨度类=”token function">纱服务

删除HelloWorld

为了开始，让我们删除HelloWorld组件:

  1. 删除src /组件/ HelloWorld.vue文件。
  2. 在src / App.vue,删除hello-component元素。
  3. 然后，删除import语句
  4. 并删除对HelloWorld在组件属性。

安装Vuetify

在做了一些调查后，我发现Veutify组件库应用非常广泛，并实现了材料设计。这使得库成为我的应用程序的一个简单选择。

vue美元<跨度类=”token function">添加vuetify

以下是我在添加vuetify项目时选择的选项:

  • 使用预先制作的模板?(将替换App.vue和HelloWorld.vue
  • 使用自定义主题?没有
  • 使用零点组件?没有
  • 使用巴别塔/ polyfill吗?是的

安装Vuetify后，打开src /插件/ vuetify.js文件，这样我们就可以指定主题:

进口<跨度类=”token string">“vuetify / dist / vuetify.min.css”<跨度类=”token punctuation">;<跨度类=”token keyword">进口Vue<跨度类=”token keyword">从<跨度类=”token string">“vue”<跨度类=”token punctuation">;<跨度类=”token keyword">进口Vuetify<跨度类=”token keyword">从<跨度类=”token string">“vuetify”<跨度类=”token punctuation">;<跨度类=”token keyword">进口颜色<跨度类=”token keyword">从<跨度类=”token string">“vuetify / es5 / util /颜色”<跨度类=”token punctuation">;Vue<跨度类=”token punctuation">。<跨度类=”token function">使用<跨度类=”token punctuation">(Vuetify<跨度类=”token punctuation">,<跨度类=”token punctuation">{主题<跨度类=”token operator">:<跨度类=”token punctuation">{主<跨度类=”token operator">:颜色<跨度类=”token punctuation">。靛蓝<跨度类=”token punctuation">,二次<跨度类=”token operator">:颜色<跨度类=”token punctuation">。粉红色的<跨度类=”token punctuation">。accent2<跨度类=”token punctuation">,口音<跨度类=”token operator">:颜色<跨度类=”token punctuation">。粉红色的<跨度类=”token punctuation">。accent3<跨度类=”token punctuation">,错误<跨度类=”token operator">:颜色<跨度类=”token punctuation">。红色的<跨度类=”token punctuation">。accent3<跨度类=”token punctuation">}<跨度类=”token punctuation">}<跨度类=”token punctuation">)<跨度类=”token punctuation">;

更新应用程序模板

安装Vuetify之后，让我们更新应用程序模板src / App.vue:

<模板<跨度类=”token punctuation">><跨度类=”token tag"><v-应用程序<跨度类=”token attr-name">类<跨度类=”token attr-value">=<跨度类=”token punctuation">”应用程序<跨度类=”token punctuation">”<跨度类=”token punctuation">><跨度类=”token tag"><v-content<跨度类=”token punctuation">><跨度类=”token tag"><v-flex<跨度类=”token attr-name">xs12<跨度类=”token attr-name">sm8<跨度类=”token attr-name">offset-sm2<跨度类=”token attr-name">md6<跨度类=”token attr-name">offset-md3<跨度类=”token punctuation">><跨度类=”token tag"><h1<跨度类=”token punctuation">>你好<跨度类=”token tag">h1<跨度类=”token punctuation">><跨度类=”token tag">v-flex<跨度类=”token punctuation">><跨度类=”token tag">v-content<跨度类=”token punctuation">><跨度类=”token tag"><v-footer<跨度类=”token attr-name">:固定<跨度类=”token attr-value">=<跨度类=”token punctuation">”固定<跨度类=”token punctuation">”<跨度类=”token attr-name">应用程序<跨度类=”token punctuation">><跨度类=”token tag"><跨度<跨度类=”token punctuation">>角Vue<跨度类=”token tag">跨度<跨度类=”token punctuation">><跨度类=”token tag">v-footer<跨度类=”token punctuation">><跨度类=”token tag">v-应用程序<跨度类=”token punctuation">><跨度类=”token tag">模板<跨度类=”token punctuation">>

这里的大多数标记都是特定于Vuetify应用程序布局的:

  • 的v-app组件用于在使用Vuetify时确定断点。所有的Vuetify布局都必须包装在这个组件中。
  • 将应用程序的内容包装在v-content组件。
  • 的v-flex组件是Vuetify基于flexbox布局的一部分。对于Angular开发者来说，这类似于@angular / flex-layout模块。
  • 的v-footer组件是应用程序的粘性页脚。

继续并提供应用程序。您应该看到一个带有“Hello”标题的简单应用程序外壳。

美元<跨度类=”token function">纱服务

更新应用程序

我们还需要指定固定数据值在我们的应用的根目录应用程序组件配置Vuetify。开放src / App.vue并更新如下:

<脚本<跨度类=”token operator">><跨度类=”token keyword">出口<跨度类=”token keyword">默认的<跨度类=”token punctuation">{的名字<跨度类=”token operator">:<跨度类=”token string">“应用程序”<跨度类=”token punctuation">,<跨度类=”token function">数据<跨度类=”token punctuation">(<跨度类=”token punctuation">)<跨度类=”token punctuation">{<跨度类=”token keyword">返回<跨度类=”token punctuation">{固定<跨度类=”token operator">:<跨度类=”token boolean">假<跨度类=”token punctuation">}<跨度类=”token punctuation">}<跨度类=”token punctuation">,<跨度类=”token punctuation">}<跨度类=”token operator"><<跨度类=”token operator">/脚本<跨度类=”token operator">>

的数据的选择在Vue.js中启用反应性。我们在组件实例中指定的数据是响应性的，因为一旦数据发生变化，该值就会在整个组件和应用程序中传播。

你可以在Vue.js中阅读更多关于反应性的内容以及变化检测是如何工作的。

创建todo - list > <

接下来，让我们创建一个简单的组件。这是我们真正应该开始学习如何使用带有组件架构的Vue构建应用程序的地方。

我没有找到的一种方法是使用Vue CLI生成新组件。这相对来说并不重要，但如果你能像Angular CLI那样生成脚手架，那就太酷了。

首先，创建一个新的src /组件/ TodoList.vue文件。然后,定义<模板>对于我们的新组件:

<模板<跨度类=”token punctuation">><跨度类=”token tag"><v-list<跨度类=”token punctuation">><跨度类=”token tag"><待办事项<跨度类=”token attr-name">v代表<跨度类=”token attr-value">=<跨度类=”token punctuation">”待办事项的行动计划<跨度类=”token punctuation">”<跨度类=”token attr-name">:关键<跨度类=”token attr-value">=<跨度类=”token punctuation">”todo.id<跨度类=”token punctuation">”<跨度类=”token attr-name">:待办事项<跨度类=”token attr-value">=<跨度类=”token punctuation">”待办事项<跨度类=”token punctuation">”<跨度类=”token attr-name">@change<跨度类=”token attr-value">=<跨度类=”token punctuation">”发出(“改变”,事件)美元美元<跨度类=”token punctuation">”<跨度类=”token punctuation">><跨度类=”token tag">待办事项<跨度类=”token punctuation">><跨度类=”token tag">v-list<跨度类=”token punctuation">><跨度类=”token tag">模板<跨度类=”token punctuation">>

让我们快速回顾:

  • 首先，重要的是要注意我将使用使用Vue构建组件的单文件方法。这感觉上和Angular很相似，我们并不是全局地定义一个组件Vue.component ()。另一个原因是，使用Angular CLI生成组件时，默认选项会为模板、组件(脚本)和样式创建单独的文件。
  • 我们使用模板元素来包装将用于生成Vue组件的内容。我喜欢Vue使用这种标准方法来定义模板(并不是说Angular通常不遵守标准)。
  • 接下来，我们使用v-list组件来创建一个列表。这类似于mat-list在@angular/material模块中的。
  • 最后，我们将定义一个自定义待办事项组件，该组件将输出待办事项。当待办事项被更改时，我们将发出一个改变事件传递给父组件，并传递美元的事件被发出的值。

你也会注意到待办事项组件使用Vue的内置指令:

  • 的v代表迭代可迭代对象，根据需要在DOM中添加或删除元素。这类似于角函数NgForOf结构性的指令。
  • 的:关键= " todo.id "指令类似于Angular的指令(例子)= " todo.id "模板中的输入绑定语法。同样重要的是要注意，我使用的是简写的v-bind指令在这里。完整的语法是:v-bind:关键= " todo.id "。这是Vue提供的一些不错的语法糖，类似于* ngFor速记。
  • 我们也绑定待办事项财产的使用v-bind速记的语法:: todo =“待办事项”。
  • 注意@change = " doSomething ()输出绑定。这与Angular的类似美元(变化)= " doSomething(事件)语法。这也是Vue的缩写v指令。完整的语法是:v:改变= " doSomething ()。
  • 为了向父组件发出事件，我们使用$排放()methjod实例。首先，我们指定事件名和值。这类似于使用Angular的EventEmitter.emit ()方法。

接下来，让我们使用Vue连接模板:

<脚本<跨度类=”token operator">><跨度类=”token keyword">出口<跨度类=”token keyword">默认的<跨度类=”token punctuation">{的名字<跨度类=”token operator">:<跨度类=”token string">“todo - list”<跨度类=”token punctuation">,道具<跨度类=”token operator">:<跨度类=”token punctuation">{待办事项<跨度类=”token operator">:数组<跨度类=”token punctuation">}<跨度类=”token punctuation">}<跨度类=”token operator"><<跨度类=”token operator">/脚本<跨度类=”token operator">>

让我们回顾一下:

  • 我们导出一个新的Vue定义对象。类的第二个参数与此对象相同Vue.component ()方法，如果您不使用单个文件组件。
  • 这个对象有的名字属性，它是组件的选择器。这与Angular的类似选择器属性指定的配置对象中的@ component ()装饰。
  • 然后定义属性todo - list > <组件的道具对象。这类似于Angular在组件类中使用@Input ()装饰。我们声明财产待办事项将是一个数组。

你可以了解更多关于组件基础知识和组件注册在Vue文档中。

创建< todo >

与我们的todo - list > <组件创建后，让我们快速定义子组件< todo >组件。

创建一个新的src /组件/ Todo.vue文件，然后定义模板:

<模板<跨度类=”token punctuation">><跨度类=”token tag"><v-list-tile<跨度类=”token punctuation">><跨度类=”token tag"><v-list-tile-action<跨度类=”token punctuation">><跨度类=”token tag"><v-checkbox<跨度类=”token attr-name">v模型<跨度类=”token attr-value">=<跨度类=”token punctuation">”todo.complete<跨度类=”token punctuation">”<跨度类=”token attr-name">@change<跨度类=”token attr-value">=<跨度类=”token punctuation">”发出(‘改变’,todo)美元<跨度类=”token punctuation">”<跨度类=”token punctuation">><跨度类=”token tag">v-checkbox<跨度类=”token punctuation">><跨度类=”token tag">v-list-tile-action<跨度类=”token punctuation">><跨度类=”token tag"><v-list-tile-content<跨度类=”token punctuation">><跨度类=”token tag"><v-list-tile-title<跨度类=”token attr-name">v-bind:类<跨度类=”token attr-value">=<跨度类=”token punctuation">”{完成:todo.complete}<跨度类=”token punctuation">”<跨度类=”token punctuation">>{{待办事项。任务}}<跨度类=”token tag">v-list-tile-title<跨度类=”token punctuation">><跨度类=”token tag">v-list-tile-content<跨度类=”token punctuation">><跨度类=”token tag">v-list-tile<跨度类=”token punctuation">><跨度类=”token tag">模板<跨度类=”token punctuation">>

模板的大部分是基于使用Vuetify的列表。让我们关注特定于vue的语法:

  • 的v模型指令在Vue中绑定表单值。这与Angular的类似ngModel指令。我们受法律约束完整的待办事项的值。
  • 我们使用@change事件处理程序来发出改变事件发送给父组件，指定当前待办事项对象。同样，这类似于Angular的输出绑定语法。
  • 我们使用v-bind:类指令来添加'complete'类到v-list-tile-title组件，如果任务已经完成。这与Angular的类似ngClass指令。
  • 最后，我们在模板中使用双花括号语法来做字符串插值，就像在Angular中一样。好了。

定义好模板后，让我们把它连接起来:

<脚本<跨度类=”token operator">><跨度类=”token keyword">出口<跨度类=”token keyword">默认的<跨度类=”token punctuation">{的名字<跨度类=”token operator">:<跨度类=”token string">“待办事项”<跨度类=”token punctuation">,道具<跨度类=”token operator">:<跨度类=”token punctuation">{待办事项<跨度类=”token operator">:对象<跨度类=”token punctuation">}<跨度类=”token punctuation">}<跨度类=”token operator"><<跨度类=”token operator">/脚本<跨度类=”token operator">><跨度类=”token operator"><风格朗<跨度类=”token operator">=<跨度类=”token string">“scss”作用域<跨度类=”token operator">><跨度类=”token punctuation">。完整的<跨度类=”token punctuation">{文本<跨度类=”token operator">-装饰<跨度类=”token operator">:行<跨度类=”token operator">-通过<跨度类=”token punctuation">;<跨度类=”token punctuation">}<跨度类=”token operator"><<跨度类=”token operator">/风格<跨度类=”token operator">>

类似于todo - list > <组件时，我们从模块中导出配置对象的名字和道具属性。在这种情况下，我们期望待办事项属性为对象。

我们还使用标准对组件进行了一些样式化<时尚>元素。我将在这个项目中使用Sass，类似于我的Angular项目，所以我们需要指定朗属性。

我们还通过指定作用域属性。这类似于Angular的视图封装。

更新todo - list > <

与< todo >组件创建后，我们需要循环回到我们的todo - list > <组件，并声明这个新的子组件。

开放src /组件/ TodoList.vue并添加组件属性设置为vue options对象:

<脚本<跨度类=”token operator">>><跨度类=”token keyword">进口待办事项<跨度类=”token keyword">从<跨度类=”token string">“@ /组件/ Todo.vue”<跨度类=”token punctuation">;<跨度类=”token keyword">出口<跨度类=”token keyword">默认的<跨度类=”token punctuation">{的名字<跨度类=”token operator">:<跨度类=”token string">“todo - list”<跨度类=”token punctuation">,组件<跨度类=”token operator">:<跨度类=”token punctuation">{待办事项<跨度类=”token punctuation">}<跨度类=”token punctuation">,道具<跨度类=”token operator">:<跨度类=”token punctuation">{待办事项<跨度类=”token operator">:数组<跨度类=”token punctuation">}<跨度类=”token punctuation">}<跨度类=”token punctuation">;<跨度类=”token operator"><<跨度类=”token operator">/脚本<跨度类=”token operator">>

您可能想知道导入路径。符号@是to的别名/ src目录。

更新<应用>

类似地，我们也需要更新<应用>组件来声明基于网络组件。开放src / App.vue并导入TodoList.vue文件中定义新的子组件组件属性设置为:

<脚本<跨度类=”token operator">><跨度类=”token keyword">进口基于网络<跨度类=”token keyword">从<跨度类=”token string">“@ /组件/ TodoList.vue”<跨度类=”token punctuation">;<跨度类=”token keyword">出口<跨度类=”token keyword">默认的<跨度类=”token punctuation">{的名字<跨度类=”token operator">:<跨度类=”token string">“应用程序”<跨度类=”token punctuation">,<跨度类=”token function">数据<跨度类=”token punctuation">(<跨度类=”token punctuation">)<跨度类=”token punctuation">{<跨度类=”token keyword">返回<跨度类=”token punctuation">{固定<跨度类=”token operator">:<跨度类=”token boolean">假<跨度类=”token punctuation">}<跨度类=”token punctuation">;<跨度类=”token punctuation">}<跨度类=”token punctuation">,组件<跨度类=”token operator">:<跨度类=”token punctuation">{基于网络<跨度类=”token punctuation">}<跨度类=”token punctuation">}<跨度类=”token operator"><<跨度类=”token operator">/脚本<跨度类=”token operator">>

我们还需要指定另外两个选项:

  1. 的计算财产
  2. 的方法财产

一个计算属性使我们能够为函数组件定义属性，在函数组件中我们可以计算任何必要的值。这类似于Angular中的纯管道，因为值是缓存的。从我能看出的区别来看，Angular中的纯管道是根据输入值缓存的变换()方法,而Vue的计算属性会根据它们的依赖关系进行缓存。

的方法属性定义了组件实例可以调用的方法。在Angular中，这有点类似于在组件中调用方法。

开放src / App.vue并声明这些新属性:

<脚本<跨度类=”token operator">><跨度类=”token keyword">进口基于网络<跨度类=”token keyword">从<跨度类=”token string">“@ /组件/ TodoList.vue”<跨度类=”token punctuation">;<跨度类=”token keyword">出口<跨度类=”token keyword">默认的<跨度类=”token punctuation">{的名字<跨度类=”token operator">:<跨度类=”token string">“应用程序”<跨度类=”token punctuation">,<跨度类=”token function">数据<跨度类=”token punctuation">(<跨度类=”token punctuation">)<跨度类=”token punctuation">{<跨度类=”token keyword">返回<跨度类=”token punctuation">{固定<跨度类=”token operator">:<跨度类=”token boolean">假<跨度类=”token punctuation">}<跨度类=”token punctuation">;<跨度类=”token punctuation">}<跨度类=”token punctuation">,组件<跨度类=”token operator">:<跨度类=”token punctuation">{基于网络<跨度类=”token punctuation">}<跨度类=”token punctuation">,计算<跨度类=”token operator">:<跨度类=”token punctuation">{<跨度类=”token function">待办事项<跨度类=”token punctuation">(<跨度类=”token punctuation">)<跨度类=”token punctuation">{<跨度类=”token keyword">返回<跨度类=”token punctuation">(<跨度类=”token punctuation">{任务<跨度类=”token operator">:<跨度类=”token string">观看奥扎克第二季<跨度类=”token punctuation">,完整的<跨度类=”token operator">:<跨度类=”token boolean">假<跨度类=”token punctuation">}<跨度类=”token punctuation">,<跨度类=”token punctuation">{任务<跨度类=”token operator">:<跨度类=”token string">“在我的应用程序中使用Vuex”<跨度类=”token punctuation">,完整的<跨度类=”token operator">:<跨度类=”token boolean">真正的<跨度类=”token punctuation">}<跨度类=”token punctuation">]<跨度类=”token punctuation">;<跨度类=”token punctuation">}<跨度类=”token punctuation">,<跨度类=”token function">completeTodos<跨度类=”token punctuation">(<跨度类=”token punctuation">)<跨度类=”token punctuation">{<跨度类=”token keyword">返回<跨度类=”token keyword">这<跨度类=”token punctuation">。待办事项<跨度类=”token punctuation">。<跨度类=”token function">过滤器<跨度类=”token punctuation">(<跨度类=”token parameter">待办事项<跨度类=”token operator">= >待办事项<跨度类=”token punctuation">。完整的<跨度类=”token punctuation">)<跨度类=”token punctuation">;<跨度类=”token punctuation">}<跨度类=”token punctuation">,<跨度类=”token function">incompleteTodos<跨度类=”token punctuation">(<跨度类=”token punctuation">)<跨度类=”token punctuation">{<跨度类=”token keyword">返回<跨度类=”token keyword">这<跨度类=”token punctuation">。待办事项<跨度类=”token punctuation">。<跨度类=”token function">过滤器<跨度类=”token punctuation">(<跨度类=”token parameter">待办事项<跨度类=”token operator">= ><跨度类=”token operator">!待办事项<跨度类=”token punctuation">。完整的<跨度类=”token punctuation">)<跨度类=”token punctuation">;<跨度类=”token punctuation">}<跨度类=”token punctuation">}<跨度类=”token punctuation">,方法<跨度类=”token operator">:<跨度类=”token punctuation">{<跨度类=”token function">onChange<跨度类=”token punctuation">(<跨度类=”token parameter">待办事项<跨度类=”token punctuation">)<跨度类=”token punctuation">{<跨度类=”token comment">// todo:调度动作更新状态控制台<跨度类=”token punctuation">。<跨度类=”token function">日志<跨度类=”token punctuation">(待办事项<跨度类=”token punctuation">)<跨度类=”token punctuation">;<跨度类=”token punctuation">}<跨度类=”token punctuation">}<跨度类=”token punctuation">}<跨度类=”token punctuation">;<跨度类=”token operator"><<跨度类=”token operator">/脚本<跨度类=”token operator">>

让我们快速回顾:

  • 首先，我们声明一个新的计算属性。
  • 每个计算属性都是一个getter函数，将由Vue调用。
  • 的待办事项()计算属性返回一个待办事项数组。
  • 的completeTodos ()计算属性返回一个待办事项数组，其中完整的是真正的。
  • 的incompleteTodos ()计算属性返回一个待办事项数组，其中完整的是假。
  • 然后，我们声明一个新的方法财产。
  • 的onChange ()函数接受一个待办事项。最后，我们希望分派一个动作来改变应用程序状态下的对象。

最后，更新模板以包含我们的newtodo - list组件。我们将使用Vuetify在材料设计卡中添加列表:

<模板<跨度类=”token punctuation">><跨度类=”token tag"><v-应用程序<跨度类=”token attr-name">类<跨度类=”token attr-value">=<跨度类=”token punctuation">”应用程序<跨度类=”token punctuation">”<跨度类=”token punctuation">><跨度类=”token tag"><v-content<跨度类=”token punctuation">><跨度类=”token tag"><v-flex<跨度类=”token attr-name">xs12<跨度类=”token attr-name">sm8<跨度类=”token attr-name">offset-sm2<跨度类=”token attr-name">md6<跨度类=”token attr-name">offset-md3<跨度类=”token punctuation">><跨度类=”token tag"><h1<跨度类=”token punctuation">>你好<跨度类=”token tag">h1<跨度类=”token punctuation">><跨度类=”token tag"><趁虚而入<跨度类=”token attr-name">类<跨度类=”token attr-value">=<跨度类=”token punctuation">”todo-card<跨度类=”token punctuation">”<跨度类=”token punctuation">><跨度类=”token tag"><v-card-title<跨度类=”token attr-name">初级职称<跨度类=”token punctuation">><跨度类=”token tag"><h1<跨度类=”token punctuation">>待办事项清单<跨度类=”token tag">h1<跨度类=”token punctuation">><跨度类=”token tag">v-card-title<跨度类=”token punctuation">><跨度类=”token tag"><待办事项-list<跨度类=”token attr-name">v<跨度类=”token attr-value">=<跨度类=”token punctuation">”incompleteTodos。长度> 0<跨度类=”token punctuation">”<跨度类=”token attr-name">:待办事项<跨度类=”token attr-value">=<跨度类=”token punctuation">”incompleteTodos<跨度类=”token punctuation">”<跨度类=”token attr-name">@change<跨度类=”token attr-value">=<跨度类=”token punctuation">”onChange<跨度类=”token punctuation">”<跨度类=”token punctuation">><跨度类=”token tag">待办事项-list<跨度类=”token punctuation">><跨度类=”token tag"><div<跨度类=”token attr-name">v-else<跨度类=”token attr-name">类<跨度类=”token attr-value">=<跨度类=”token punctuation">”text-xs-center<跨度类=”token punctuation">”<跨度类=”token punctuation">><跨度类=”token tag"><h4<跨度类=”token punctuation">>全部完成!<跨度类=”token tag">h4<跨度类=”token punctuation">><跨度类=”token tag">div<跨度类=”token punctuation">><跨度类=”token tag">趁虚而入<跨度类=”token punctuation">><跨度类=”token tag">v-flex<跨度类=”token punctuation">><跨度类=”token tag">v-content<跨度类=”token punctuation">><跨度类=”token tag"><v-footer<跨度类=”token attr-name">:固定<跨度类=”token attr-value">=<跨度类=”token punctuation">”固定<跨度类=”token punctuation">”<跨度类=”token attr-name">应用程序<跨度类=”token punctuation">><跨度类=”token tag"><跨度<跨度类=”token punctuation">>角Vue<跨度类=”token tag">跨度<跨度类=”token punctuation">><跨度类=”token tag">v-footer<跨度类=”token punctuation">><跨度类=”token tag">v-应用程序<跨度类=”token punctuation">><跨度类=”token tag">模板<跨度类=”token punctuation">>

再次，我们将跳过使用Vuetify创建卡的细节。但是，让我们回顾一下新添加的内容todo - list > <组件:

  • 我们使用v时切换列表的显示incompleteTodos计算属性的长度大于零。
  • 我们使用v-bind绑定的简写语法待办事项财产incompleteTodos计算属性。
  • 我们使用v调用的简写句法onChange ()方法时,改变发送事件。

使用Sass装载机

在我们的应用构建之前，我们需要通过npm或yarn安装Sass加载器:

美元<跨度类=”token function">npm<跨度类=”token function">安装-D sass-loader node-sass $<跨度类=”token function">纱<跨度类=”token function">添加-d sass-loader node-sass

继续并服务应用程序:

美元<跨度类=”token function">npm为美元<跨度类=”token function">纱服务

如果一切顺利，你应该会看到未完成的待办事项列表:

不完整,Dos”></p> <h2>创建<code>< todo表单></code></h2> <p>显然，我们的用户需要能够创建新的待办事项以添加到他们的列表中。让我们创建一个新的<code>< todo表单></code>组件。</p> <p>创建<strong>src /组件/ TodoForm.vue</strong>文件:</p> <div class= 

<模板<跨度类=”token operator">><跨度类=”token operator"><v<跨度类=”token operator">-形式<跨度类=”token operator">><跨度类=”token operator"><v<跨度类=”token operator">-文本<跨度类=”token operator">-场v<跨度类=”token operator">-模型<跨度类=”token operator">=<跨度类=”token string">“todo.task”标签<跨度类=”token operator">=<跨度类=”token string">“任务”要求<跨度类=”token operator">><跨度类=”token operator"><<跨度类=”token operator">/v<跨度类=”token operator">-文本<跨度类=”token operator">-场<跨度类=”token operator">><跨度类=”token operator"><<跨度类=”token operator">/v<跨度类=”token operator">-形式<跨度类=”token operator">><跨度类=”token operator"><<跨度类=”token operator">/模板<跨度类=”token operator">><跨度类=”token operator"><脚本<跨度类=”token operator">><跨度类=”token keyword">出口<跨度类=”token keyword">默认的<跨度类=”token punctuation">{的名字<跨度类=”token operator">:<跨度类=”token string">“todo表单”<跨度类=”token punctuation">,道具<跨度类=”token operator">:<跨度类=”token punctuation">{待办事项<跨度类=”token operator">:对象<跨度类=”token punctuation">}<跨度类=”token punctuation">}<跨度类=”token operator"><<跨度类=”token operator">/脚本<跨度类=”token operator">>

让我们回顾一下新的< todo表单>组件:

  • 首先，我们用错开组件。这是Vuetify的一部分。
  • 我们也用v-text-field组件创建一个材料设计输入元素。
  • 的v模型属性绑定任务的价值待办事项对象转换为输入值。
  • 导出Vue选项对象，并指定的名字和道具属性。我们期待着待办事项属性为对象。

让我们添加一个新卡到App.vue模板，连接新的子组件并添加一个新的onAdd方法:

<模板<跨度类=”token punctuation">><跨度类=”token tag"><v-应用程序<跨度类=”token attr-name">类<跨度类=”token attr-value">=<跨度类=”token punctuation">”应用程序<跨度类=”token punctuation">”<跨度类=”token punctuation">><跨度类=”token tag"><v-content<跨度类=”token punctuation">><跨度类=”token tag"><v-flex<跨度类=”token attr-name">xs12<跨度类=”token attr-name">sm8<跨度类=”token attr-name">offset-sm2<跨度类=”token attr-name">md6<跨度类=”token attr-name">offset-md3<跨度类=”token punctuation">><跨度类=”token tag"><h1<跨度类=”token punctuation">>你好<跨度类=”token tag">h1<跨度类=”token punctuation">><跨度类=”token tag"><趁虚而入<跨度类=”token attr-name">类<跨度类=”token attr-value">=<跨度类=”token punctuation">”todo-card<跨度类=”token punctuation">”<跨度类=”token punctuation">><跨度类=”token tag"><v-card-title<跨度类=”token attr-name">初级职称<跨度类=”token punctuation">><跨度类=”token tag"><h1<跨度类=”token punctuation">>待办事项清单<跨度类=”token tag">h1<跨度类=”token punctuation">><跨度类=”token tag">v-card-title<跨度类=”token punctuation">><跨度类=”token tag"><待办事项-list<跨度类=”token attr-name">v<跨度类=”token attr-value">=<跨度类=”token punctuation">”incompleteTodos。长度> 0<跨度类=”token punctuation">”<跨度类=”token attr-name">:待办事项<跨度类=”token attr-value">=<跨度类=”token punctuation">”incompleteTodos<跨度类=”token punctuation">”<跨度类=”token attr-name">@change<跨度类=”token attr-value">=<跨度类=”token punctuation">”onChange<跨度类=”token punctuation">”<跨度类=”token punctuation">><跨度类=”token tag">待办事项-list<跨度类=”token punctuation">><跨度类=”token tag"><div<跨度类=”token attr-name">v-else<跨度类=”token attr-name">类<跨度类=”token attr-value">=<跨度类=”token punctuation">”text-xs-center<跨度类=”token punctuation">”<跨度类=”token punctuation">><跨度类=”token tag"><h4<跨度类=”token punctuation">>全部完成!<跨度类=”token tag">h4<跨度类=”token punctuation">><跨度类=”token tag">div<跨度类=”token punctuation">><跨度类=”token tag">趁虚而入<跨度类=”token punctuation">><跨度类=”token tag"><趁虚而入<跨度类=”token attr-name">类<跨度类=”token attr-value">=<跨度类=”token punctuation">”todo-card<跨度类=”token punctuation">”<跨度类=”token punctuation">><跨度类=”token tag"><v-card-title<跨度类=”token attr-name">初级职称<跨度类=”token punctuation">><跨度类=”token tag"><h1<跨度类=”token punctuation">>加做<跨度类=”token tag">h1<跨度类=”token punctuation">><跨度类=”token tag">v-card-title<跨度类=”token punctuation">><跨度类=”token tag"><待办事项表单<跨度类=”token attr-name">:待办事项<跨度类=”token attr-value">=<跨度类=”token punctuation">”待办事项<跨度类=”token punctuation">”<跨度类=”token punctuation">><跨度类=”token tag">待办事项表单<跨度类=”token punctuation">><跨度类=”token tag"><v-card-actions<跨度类=”token attr-name">类<跨度类=”token attr-value">=<跨度类=”token punctuation">”行动<跨度类=”token punctuation">”<跨度类=”token punctuation">><跨度类=”token tag"><v-btn<跨度类=”token attr-name">@click<跨度类=”token attr-value">=<跨度类=”token punctuation">”onAdd<跨度类=”token punctuation">”<跨度类=”token attr-name">颜色<跨度类=”token attr-value">=<跨度类=”token punctuation">”主<跨度类=”token punctuation">”<跨度类=”token punctuation">>添加<跨度类=”token tag">v-btn<跨度类=”token punctuation">><跨度类=”token tag">v-card-actions<跨度类=”token punctuation">><跨度类=”token tag">趁虚而入<跨度类=”token punctuation">><跨度类=”token tag">v-flex<跨度类=”token punctuation">><跨度类=”token tag">v-content<跨度类=”token punctuation">><跨度类=”token tag"><v-footer<跨度类=”token attr-name">:固定<跨度类=”token attr-value">=<跨度类=”token punctuation">”固定<跨度类=”token punctuation">”<跨度类=”token attr-name">应用程序<跨度类=”token punctuation">><跨度类=”token tag"><跨度<跨度类=”token punctuation">>角Vue<跨度类=”token tag">跨度<跨度类=”token punctuation">><跨度类=”token tag">v-footer<跨度类=”token punctuation">><跨度类=”token tag">v-应用程序<跨度类=”token punctuation">><跨度类=”token tag">模板<跨度类=”token punctuation">><跨度类=”token tag"><脚本<跨度类=”token punctuation">><跨度类=”token script">进口TodoForm<跨度类=”token keyword">从<跨度类=”token string">“@ /组件/ TodoForm.vue”<跨度类=”token punctuation">;<跨度类=”token keyword">进口基于网络<跨度类=”token keyword">从<跨度类=”token string">“@ /组件/ TodoList.vue”<跨度类=”token punctuation">;<跨度类=”token keyword">出口<跨度类=”token keyword">默认的<跨度类=”token punctuation">{的名字<跨度类=”token operator">:<跨度类=”token string">“应用程序”<跨度类=”token punctuation">,<跨度类=”token function">数据<跨度类=”token punctuation">(<跨度类=”token punctuation">)<跨度类=”token punctuation">{<跨度类=”token keyword">返回<跨度类=”token punctuation">{固定<跨度类=”token operator">:<跨度类=”token boolean">假<跨度类=”token punctuation">,待办事项<跨度类=”token operator">:<跨度类=”token punctuation">{任务<跨度类=”token operator">:<跨度类=”token keyword">零<跨度类=”token punctuation">}<跨度类=”token punctuation">}<跨度类=”token punctuation">;<跨度类=”token punctuation">}<跨度类=”token punctuation">,组件<跨度类=”token operator">:<跨度类=”token punctuation">{TodoForm<跨度类=”token punctuation">,基于网络<跨度类=”token punctuation">}<跨度类=”token punctuation">,计算<跨度类=”token operator">:<跨度类=”token punctuation">{<跨度类=”token function">待办事项<跨度类=”token punctuation">(<跨度类=”token punctuation">)<跨度类=”token punctuation">{<跨度类=”token keyword">返回<跨度类=”token punctuation">(<跨度类=”token punctuation">{任务<跨度类=”token operator">:<跨度类=”token string">观看奥扎克第二季<跨度类=”token punctuation">,完整的<跨度类=”token operator">:<跨度类=”token boolean">假<跨度类=”token punctuation">}<跨度类=”token punctuation">,<跨度类=”token punctuation">{任务<跨度类=”token operator">:<跨度类=”token string">“在我的应用程序中使用Vuex”<跨度类=”token punctuation">,完整的<跨度类=”token operator">:<跨度类=”token boolean">真正的<跨度类=”token punctuation">}<跨度类=”token punctuation">]<跨度类=”token punctuation">;<跨度类=”token punctuation">}<跨度类=”token punctuation">,<跨度类=”token function">completeTodos<跨度类=”token punctuation">(<跨度类=”token punctuation">)<跨度类=”token punctuation">{<跨度类=”token keyword">返回<跨度类=”token keyword">这<跨度类=”token punctuation">。待办事项<跨度类=”token punctuation">。<跨度类=”token function">过滤器<跨度类=”token punctuation">(<跨度类=”token parameter">待办事项<跨度类=”token operator">= >待办事项<跨度类=”token punctuation">。完整的<跨度类=”token punctuation">)<跨度类=”token punctuation">;<跨度类=”token punctuation">}<跨度类=”token punctuation">,<跨度类=”token function">incompleteTodos<跨度类=”token punctuation">(<跨度类=”token punctuation">)<跨度类=”token punctuation">{<跨度类=”token keyword">返回<跨度类=”token keyword">这<跨度类=”token punctuation">。待办事项<跨度类=”token punctuation">。<跨度类=”token function">过滤器<跨度类=”token punctuation">(<跨度类=”token parameter">待办事项<跨度类=”token operator">= ><跨度类=”token operator">!待办事项<跨度类=”token punctuation">。完整的<跨度类=”token punctuation">)<跨度类=”token punctuation">;<跨度类=”token punctuation">}<跨度类=”token punctuation">}<跨度类=”token punctuation">,方法<跨度类=”token operator">:<跨度类=”token punctuation">{<跨度类=”token function-variable function">onAdd<跨度类=”token operator">:<跨度类=”token keyword">函数<跨度类=”token punctuation">(<跨度类=”token punctuation">)<跨度类=”token punctuation">{<跨度类=”token comment">// todo:调度动作添加todo<跨度类=”token punctuation">}<跨度类=”token punctuation">,<跨度类=”token function">onChange<跨度类=”token punctuation">(<跨度类=”token parameter">待办事项<跨度类=”token punctuation">)<跨度类=”token punctuation">{<跨度类=”token comment">// todo:调度动作更新状态控制台<跨度类=”token punctuation">。<跨度类=”token function">日志<跨度类=”token punctuation">(待办事项<跨度类=”token punctuation">)<跨度类=”token punctuation">;<跨度类=”token punctuation">}<跨度类=”token punctuation">}<跨度类=”token punctuation">}<跨度类=”token punctuation">;<跨度类=”token tag">脚本<跨度类=”token punctuation">><跨度类=”token tag"><风格<跨度类=”token attr-name">朗<跨度类=”token attr-value">=<跨度类=”token punctuation">”scss<跨度类=”token punctuation">”<跨度类=”token attr-name">作用域<跨度类=”token punctuation">><跨度类=”token style">.app<跨度类=”token punctuation">{<跨度类=”token property">填充<跨度类=”token punctuation">:20 px<跨度类=”token selector">;.todo-card<跨度类=”token punctuation">{<跨度类=”token property">保证金<跨度类=”token punctuation">:20 px 0<跨度类=”token punctuation">;<跨度类=”token property">填充<跨度类=”token punctuation">:20 px<跨度类=”token selector">;.actions<跨度类=”token punctuation">{<跨度类=”token property">flex-direction<跨度类=”token punctuation">:行<跨度类=”token punctuation">;<跨度类=”token property">justify-content<跨度类=”token punctuation">:flex-end<跨度类=”token punctuation">;<跨度类=”token punctuation">}<跨度类=”token punctuation">}<跨度类=”token punctuation">}<跨度类=”token tag">风格<跨度类=”token punctuation">>

我还向我们的应用程序添加了一些样式。如果你使用这个应用程序，你应该会看到一个添加待办事项的新表单:

美元<跨度类=”token function">npm为美元<跨度类=”token function">纱服务

任务形式”></p> <h2>存储状态</h2> <p>在下一篇文章中，我们将<a href=连接Vuex库来存储应用程序的状态，类似于Redux或NgRx。

布莱恩F爱

嗨,我是布莱恩。我对TypeScript、Angular和Node.js感兴趣。我和我最好的朋友邦妮结婚了，我住在波特兰，我经常滑雪。