布莱恩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感兴趣我嫁给了我最好的朋友邦妮,我住在波特兰和我滑雪(很多)。