从Angular开发者的角度学习如何使用Vue.js构建应用。
我们要清楚。
这篇文章是关于:
这是不一篇:
这篇文章的真正目的是:
从Angular前端架构师和工程师的角度来学习Vue.js。
在我使用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
在此过程中,您将看到几个选项。以下是我为这个项目选择的选项:
安装完成后,通过以下方式启动应用:
美元<跨度类=”token builtin class-name">cd跨度>待办事项美元<跨度类=”token function">纱跨度>服务
为了开始,让我们删除HelloWorld
组件:
hello-component
元素。HelloWorld
在组件
属性。在做了一些调查后,我发现Veutify组件库应用非常广泛,并实现了材料设计。这使得库成为我的应用程序的一个简单选择。
vue美元<跨度类=”token function">添加跨度>vuetify
以下是我在添加vuetify项目时选择的选项:
安装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.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 ()
。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.component ()
方法,如果您不使用单个文件组件。的名字
属性,它是组件的选择器。这与Angular的类似选择器
属性指定的配置对象中的@ component ()
装饰。todo - list > <
组件的道具
对象。这类似于Angular在组件类中使用@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-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
指令。定义好模板后,让我们把它连接起来:
<跨度>脚本<跨度类=”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">>跨度>
我们还需要指定另外两个选项:
一个计算
属性使我们能够为函数组件定义属性,在函数组件中我们可以计算任何必要的值。这类似于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">>跨度>
让我们快速回顾:
计算
属性。待办事项()
计算属性返回一个待办事项数组。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 ()
方法时,改变
发送事件。在我们的应用构建之前,我们需要通过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">纱跨度>服务
如果一切顺利,你应该会看到未完成的待办事项列表:
<跨度>模板<跨度类=”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模型
属性绑定任务
的价值待办事项
对象转换为输入值。的名字
和道具
属性。我们期待着待办事项
属性为对象
。让我们添加一个新卡到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">纱跨度>服务
连接Vuex库来存储应用程序的状态,类似于Redux或NgRx
嗨,我是布莱恩。我对TypeScript、Angular和Node.js感兴趣。我和我最好的朋友邦妮结婚了,我住在波特兰,我经常滑雪。