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">纱全局添加@ 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组件:
- 除掉src /组件/ HelloWorld.vue文件。
- 在src / App.vue,删除
你好组件模板中的元素。 - 然后，删除import语句
- 并删除参考
HelloWorld在组件应用程序的财产。
安装Vuetify.
在做了一些调查后，我发现模拟组件库应用非常广泛，并实现了材料设计。这使得库成为我的应用程序的一个简单选择。
$ Vue.<跨度类=”token function">添加vuetify以下是添加Vuetify项目时选择的选项：
- 使用预先制作的模板？（将取代app.vue和helloWorld.vue）没有
- 使用自定义主题?没有
- 使用零点组件?没有
- 使用Babel / 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 / Colors'<跨度类=”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">。一个CCENT2.<跨度类=”token punctuation">,口音<跨度类=”token operator">:颜色<跨度类=”token punctuation">。粉红色的<跨度类=”token punctuation">。一个CCENT3.<跨度类=”token punctuation">,错误<跨度类=”token operator">:颜色<跨度类=”token punctuation">。红色的<跨度类=”token punctuation">。一个CCENT3.<跨度类=”token punctuation">}<跨度类=”token punctuation">}<跨度类=”token punctuation">)<跨度类=”token punctuation">;更新应用程序模板
安装Vuetify之后，让我们更新应用程序模板src / App.vue:
<模板<跨度类=”token punctuation">><跨度类=”token tag"><V-App.<跨度类=”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-App.<跨度类=”token punctuation">><跨度类=”token tag">模板<跨度类=”token punctuation">>这里的大多数标记都是特定于Vuetify应用程序布局的:
- 的
V-App.组件用于在使用Vuetify时确定断点。所有的Vuetify布局都必须包装在这个组件中。 - 我们将申请的内容包装在内
v-content组件。 - 的
V-Flex.组件是Vuetify基于flexbox布局的一部分。对于Angular开发者来说，这类似于@ Angular / Flex-Slayout模块。 - 的
v-footer组件是申请的粘性页脚。
继续发放应用程序。您应该看到一个具有“Hello”标题的简单应用程序shell。
美元<跨度类=”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-listvuetify的组件要创建列表。这类似于垫子列表在@angular/material模块中的。 - 最后，我们将定义一个自定义
待办事项组件，该组件将输出待办事项。当待办事项被更改时，我们将发出一个更改事件到父组件，传递沿着美元的事件被发出的值。
你也会注意到待办事项组件使用Vue的内置指令：
- 的
v代表根据需要，迭代，根据需要，从DOM添加和删除元素。这类似于角度NgForOf结构性的指令。 - 的
:关键= " todo.id "指令类似于角度(例子)= " todo.id "在模板中输入绑定语法。重要的是要注意我正在使用的简写的v-bind指示这里。完整的语法是：v-bind:关键= " todo.id "。这是Vue提供的一些漂亮的语法糖，类似于* ngFor速记。 - 我们还绑定了
待办事项财产使用v-bind速记的语法:：todo =“todo”。 - 注意
@ change =“dosomething（）输出绑定。这与Angular的类似（更改）=“dosomething（$事件）语法。这也是vue的速记V-ON.指示。完整的语法是：v:改变= " doSomething ()。 - 为了向父组件发出事件，我们使用$排放()实例methjod。首先，我们指定事件名称后跟值。这类似于使用角度
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 > <组件在道具目的。这类似于使用该组件类中的角度的输入绑定@Input（）装饰。我们声明财产托将是一个阵列。
创造< 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列表 - 瓦片内容<跨度类=”token punctuation">><跨度类=”token tag"><V列表 - 瓦片标题<跨度类=”token attr-name">v-bind:类<跨度类=”token attr-value">=<跨度类=”token punctuation">”{完成:todo.complete}<跨度类=”token punctuation">”<跨度类=”token punctuation">>{{待办事项。任务}}<跨度类=”token tag">V列表 - 瓦片标题<跨度类=”token punctuation">><跨度类=”token tag">V列表 - 瓦片内容<跨度类=”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列表 - 瓦片标题组件如果任务已完成。这与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选项对象：
<脚本<跨度类=”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">>您可能会想知道导入路径。at-符号（@）是一个别名/ 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">>我们还需要指定两个选项：
一个计算属性使我们能够为函数组件定义属性，在函数组件中我们可以计算任何必要的值。这类似于Angular中的纯管道，因为值是缓存的。从我能看出的区别来看，Angular中的纯管道是根据输入值缓存的转变（）方法,而Vue的计算基于其依赖项缓存了属性。
的方法属性定义了我们的组件实例可以调用的方法。在角度下，这有点类似于在我们的组件中调用一种方法。
打开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">'看奥兹克季节2'<跨度类=”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">completEntodos.<跨度类=”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调用。
- 的
Todos（）计算属性返回一个待办事项数组。 - 的
completeTodos（）计算属性返回一个待办事项数组，其中完成是真正。 - 的
incompleteTodos ()计算属性返回一个待办事项数组，其中完成是假。 - 然后，我们声明一个新的
方法财产。 - 的
onchange（）函数接受一个待办事项。最后，我们希望分派一个动作来改变应用程序状态下的对象。
最后，更新模板以包含我们的newtodo-list.组件。我们将使用Vuetify在材料设计卡中添加列表:
<模板<跨度类=”token punctuation">><跨度类=”token tag"><V-App.<跨度类=”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-CARD.<跨度类=”token attr-name">类<跨度类=”token attr-value">=<跨度类=”token punctuation">”todo-card<跨度类=”token punctuation">”<跨度类=”token punctuation">><跨度类=”token tag"><V-CARD标题<跨度类=”token attr-name">初级职称<跨度类=”token punctuation">><跨度类=”token tag"><h1<跨度类=”token punctuation">>待办事项清单<跨度类=”token tag">h1<跨度类=”token punctuation">><跨度类=”token tag">V-CARD标题<跨度类=”token punctuation">><跨度类=”token tag"><todo-list.。<跨度类=”token attr-name">V-IF.<跨度类=”token attr-value">=<跨度类=”token punctuation">”incompletetodos.length> 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">todo-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">V-CARD.<跨度类=”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-App.<跨度类=”token punctuation">><跨度类=”token tag">模板<跨度类=”token punctuation">>再次，我们将跳过使用Vuetify创建卡的详细信息。但是，让我们回顾新添加的todo - list > <组件:
- 我们使用
V-IF.时切换列表的显示incompleteTodosComputed属性的长度大于零。 - 我们使用
v-bind绑定的简写语法托财产incompleteTodos计算属性。 - 我们使用
V-ON.调用的简写句法onchange（）方法时的方法更改发送事件。
使用Sass Loader.
在我们的应用程序构建之前，我们需要通过NPM或YARN安装SASS Loader：
美元<跨度类=”token function">NPM.<跨度类=”token function">安装-D sass-loader node-sass $<跨度类=”token function">纱<跨度类=”token function">添加-d sass-loader node-sass继续并服务应用程序:
美元<跨度类=”token function">NPM.为美元<跨度类=”token function">纱服务如果一切顺利，你应该会看到未完成的待办事项列表:
<模板<跨度类=”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">>让我们回顾一下新的
- 首先，我们用
错开组件。这是Vuetify的一部分。 - 我们也使用了
V-Text-Field组件创建一个材料设计输入元素。 - 的
V模型属性绑定任务的价值待办事项对象转换为输入值。 - 导出Vue选项对象，并指定
名称和道具属性。我们期待着待办事项属性为对象。
让我们添加一个新卡到App.vue模板，连接新的子组件并添加一个新的onAdd方法:
<模板<跨度类=”token punctuation">><跨度类=”token tag"><V-App.<跨度类=”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-CARD.<跨度类=”token attr-name">类<跨度类=”token attr-value">=<跨度类=”token punctuation">”todo-card<跨度类=”token punctuation">”<跨度类=”token punctuation">><跨度类=”token tag"><V-CARD标题<跨度类=”token attr-name">初级职称<跨度类=”token punctuation">><跨度类=”token tag"><h1<跨度类=”token punctuation">>待办事项清单<跨度类=”token tag">h1<跨度类=”token punctuation">><跨度类=”token tag">V-CARD标题<跨度类=”token punctuation">><跨度类=”token tag"><todo-list.。<跨度类=”token attr-name">V-IF.<跨度类=”token attr-value">=<跨度类=”token punctuation">”incompletetodos.length> 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">todo-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">V-CARD.<跨度类=”token punctuation">><跨度类=”token tag"><V-CARD.<跨度类=”token attr-name">类<跨度类=”token attr-value">=<跨度类=”token punctuation">”todo-card<跨度类=”token punctuation">”<跨度类=”token punctuation">><跨度类=”token tag"><V-CARD标题<跨度类=”token attr-name">初级职称<跨度类=”token punctuation">><跨度类=”token tag"><h1<跨度类=”token punctuation">>加做<跨度类=”token tag">h1<跨度类=”token punctuation">><跨度类=”token tag">V-CARD标题<跨度类=”token punctuation">><跨度类=”token tag"><todo-form.。<跨度类=”token attr-name">:待办事项<跨度类=”token attr-value">=<跨度类=”token punctuation">”待办事项<跨度类=”token punctuation">”<跨度类=”token punctuation">><跨度类=”token tag">todo-form.。<跨度类=”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">V-CARD.<跨度类=”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-App.<跨度类=”token punctuation">><跨度类=”token tag">模板<跨度类=”token punctuation">><跨度类=”token tag"><脚本<跨度类=”token punctuation">><跨度类=”token script">进口TodoForm<跨度类=”token keyword">从<跨度类=”token string">'@ / component / 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">'看奥兹克季节2'<跨度类=”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">completEntodos.<跨度类=”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">证明 - 内容<跨度类=”token punctuation">:Flex-End.<跨度类=”token punctuation">;<跨度类=”token punctuation">}<跨度类=”token punctuation">}<跨度类=”token punctuation">}<跨度类=”token tag">风格<跨度类=”token punctuation">>我还向我们的应用程序添加了一些样式。如果你使用这个应用程序，你应该会看到一个添加待办事项的新表单:
美元<跨度类=”token function">NPM.为美元<跨度类=”token function">纱服务
连接Vuex库来存储应用程序的状态，类似于Redux或NgRx
Brian F爱
嗨,我是布莱恩。我对TypeScript、Angular和Node.js感兴趣。我和我最好的朋友邦妮结婚了，我住在波特兰，我经常滑雪。