帖子 yobet软件 雇用我 的简历
布莱恩F爱 雇用我
布莱恩F爱
从专注于角图，Web技术以yobet英雄联盟及波特兰的Node.js的Google开发人员专家中学习。
广告<跨度类＝＂spacer">·ultimatecourses.com.．
使用Ultimate Courses以正确的方式学习Angular＂></a> </div> <article class=

Angular Dev的Vue.js

从Angular Dev的角度学习使用Vue.js构建应用。

一个ngular React Vue.js

让我们清楚。

这是一个关于的帖子：

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

这是不一篇:

  • 选择一个框架而不是另一个框架。
  • 认为一个框架比另一个更好。
  • 挑起战火

这篇文章的真正内容是:

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

一个Angular的Todo应用

在使用Vue.js创建应用程序之前，我希望有一个比较，知识转移和理解的基础。因此，我使用角度，角度材料和ngrx创建了一个相当简单的“做”应用程序。这个堆栈很受欢迎，所以我想使用一个流行的堆栈，我很熟悉。

这是我的Angular的StackBlitz Do App：

下载

在这篇文章中，我将使用演示Vue.js申请。您可以克隆存储库或下载源代码的zip文件：

安装

我们将使用Vue CLI（本文的版本3）。因此，我们需要使用纱线或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配置:Prettier
  • 挑选额外的衣料功能:衣料保存
  • 你更喜欢在哪里放置配置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 / 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中阅读更多关于反应性的内容以及变化检测是如何工作的。

创建

接下来，让我们创建一个简单的组件。这是我们应该真正开始学习如何使用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">@改变<跨度类＝＂token attr-value">＝<跨度类＝＂token punctuation">＂＄emit（'更改'，$活动）<跨度类＝＂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中添加或删除元素。这类似于Angularngforof.结构性的指令。
  • 的：key =“todo.id”指令类似于Angular的(例子)= " todo.id "输入模板中的绑定语法。还需要注意的是，我使用的是简写的v-bind.指令在这里。完整的语法是:v-bind：key =“todo.id”．这是Vue提供的一些很好的语法，类似于* Ngfor.速记。
  • 我们还绑定待办事项财产的使用v-bind.速记语法：: todo =“待办事项”．
  • 注意@change = " doSomething ()输出绑定。这与Angular的类似美元(变化)= " doSomething(事件)句法。这也是Vue的缩写v指令．完整的语法是:v:改变= " doSomething ()．
  • 要将事件发出到父组件，我们使用$ emit（）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的类似选择器属性指定的配置对象中的@成分（）装饰。
  • 的属性组件的道具对象。这类似于Angular在组件类中使用@Input ()装饰。我们宣布该物业待办事项将是一个数组．

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

创建< todo >

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

创建一个新的src / components / todo.vue文件然后定义模板：

<模板<跨度类＝＂token punctuation">><跨度类＝＂token tag"><V列表瓦片<跨度类＝＂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">@改变<跨度类＝＂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列表瓦片<跨度类＝＂token punctuation">><跨度类＝＂token tag">模板<跨度类＝＂token punctuation">>

许多模板都是基于使用Vuetify的列表。让我们关注一下vue特定的语法:

  • 的v模型指令在Vue中绑定一个表单值。这与Angular的类似ngmodel.指令。我们与完整的待办事项的价值。
  • 我们使用@改变事件处理程序来触发改变事件，指定当前待办事项对象。同样，这类似于Angular的输出绑定语法。
  • 我们使用v-bind:类指令将“完整”类添加到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">>

类似于组件，则从模块中导出配置对象的名字和道具属性。在这种情况下，我们期望待办事项属性是目的．

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

我们还通过指定来扩展到此组件的样式作用域属性。这类似于Angular的视图封装。

更新

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

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

<脚本<跨度类＝＂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">>

您可能想知道导入路径。符号(@)是的别名/ 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中的纯管类似，因为该值被缓存。从我所说的不同之处在于，基于输入值缓存​​角度的纯管变换()方法,而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">>

让我们快速回顾:

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

最后，更新模板以包含我们的新todo - 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">＂待办事项-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">@改变<跨度类＝＂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创建卡片的细节。不过，让我们来回顾一下新添加的成分：

  • 我们使用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-form'<跨度类＝＂token punctuation">，道具<跨度类＝＂token operator">：<跨度类＝＂token punctuation">｛待办事项<跨度类＝＂token operator">：目的<跨度类＝＂token punctuation">｝<跨度类＝＂token punctuation">｝<跨度类＝＂token operator"><<跨度类＝＂token operator">/脚本<跨度类＝＂token operator">>

让我们回顾一下新的< todo表单>成分：

  • 拳头，我们把我们的表格包装在一起V形式组件。这是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">＂待办事项-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">@改变<跨度类＝＂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">＂待办事项-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">@点击<跨度类＝＂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">。应用程序<跨度类＝＂token punctuation">｛<跨度类＝＂token property">填充<跨度类＝＂token punctuation">：20 px<跨度类＝＂token selector">；.todo卡<跨度类＝＂token punctuation">｛<跨度类＝＂token property">保证金<跨度类＝＂token punctuation">：20px 0.．<跨度类＝＂token punctuation">；<跨度类＝＂token property">填充<跨度类＝＂token punctuation">：20 px<跨度类＝＂token selector">；.actions<跨度类＝＂token punctuation">｛<跨度类＝＂token property">弯曲方向<跨度类＝＂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爱

嗨，我是布莱恩。我对类型名称，Angular和node.js感兴趣我嫁给了我最好的朋友邦妮，我住在波特兰和我滑雪（很多）。