📜  使用 VueJS 构建购物清单

📅  最后修改于: 2022-05-13 01:56:49.345000             🧑  作者: Mango

使用 VueJS 构建购物清单

以下方法介绍了如何使用 VueJs 构建一个简单的购物清单应用程序。 Vue(或 Vue.js)是一个面向构建用户界面的开源 JavaScript 框架,由 Evan You 创建。

先决条件:

  • 对 HTML 的基本了解。
  • CSS基础知识
  • JavaScript 基础知识

包含脚本:我们可以使用以下 CDN 链接将 Vue Js 包含到我们的 HTML 中:

示例:以下是使用 VueJS 的购物清单应用程序。

HTML


  

    
  
    
    
  
    
    
    
  
    
    

  

    
        
            
                
                    

Shopping List

                                                                                                            
            
            
                
                        
  •                         {{ list }}                                                                       
  •                 
            
            
                             
        
    
          



输出:

解释:

HTML 代码:此部分包含我们的字体图标链接、用于创建新列表项的表单输入,以及用于遍历列表并打印其项目的 v-for 指令。

JavaScript 代码:此部分包含应用程序的功能。这些是以下步骤:

  • 创建我们的 Vue 实例 Vue 实例是 Vue 应用程序的核心。
  • 返回需要在视图中处理的数据。该数据必须在数据选项中指定。
  • 运行数据属性中的项目列表。
  • 我们可以使用 v-for 指令基于数组呈现我们的水果项目列表。
  • 现在让我们通过使用 v-model 根据输入类型更新元素来创建双向数据绑定。
  • 创建一个函数,使您能够删除我们列出的每个项目。

结论:这是如何使用 CDN 通过静态 HTML 设置 Vue 项目以及如何在 Vue 中创建简单的购物清单。我们了解了 Vue 实例、数据、方法、条件、事件。