vue表单案例练习：vue表单创建一行数据及删除数据的实现与理解

==如何使用Vue：
基本结构:

    1、引入Vue的核心JS文件
    2、准备Dom结构
     3、实例化组件
            通过el属性，挂载元素，绑定id为app的html元素
            通过data属性，定义数据，可以在html代码段中显示的数据
    4、获取数据
             数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值==

@[TOC]

目标两个例子:

1.表单数据一行的创建+删除(彻底删除/隐藏双实现)

代码+注释

==特色:1:内容提前判断为空的功能,红色字显示,且无法实现创建功能,只有全部符合要求才可以创建用户

    2:创建的用户自动追加到最后一行数据
    3:所有数据都存储在组件data中,body标签中没有任何数据,即都是从data中动态获取出来的==

判断为空效果如下:

    
    
    


    
    

        

            

                
                姓名:
            
            

                年龄:
            
            

                性别:
                男 
                女
            
            
            

                手机:
            
            
            创建新用户   {{errorMsg}}
        
        

            

                
姓名
                
性别
                
年龄
                
手机
                
删除
            
            
   
                
{{person.name}}
                
{{person.sex}}
                
{{person.age}}
                
{{person.tel}}
                
                
删除
            
        
    

2.计算商品总价格

==特色:1:隔行换色

    2:数量为0时不会再减少,即不会出现负数
    3:删除某一行总金额钱数也会动态跟着改变
    4:初始表没有信息将不会显示表格,且左下方显示:暂无数据.....==

添加一个初始判断语句,当属性表格没数据是显示:

代码+注释

    
    
    
    
    


    

        
        

            

                
编号
                
名称
                
单价
                
数量
                
操作
            
            

                
{{product.id}}
                
{{product.name}}
                
{{product.price}}
                

                    
                    -
                    {{product.num}}
                    +
                
                

                    删除
                
            
            

                
 
                    总金额:{{sum()}}
                
            
        
        
 
暂无数据......

    

本人其他相关文章链接

1.《基础篇第1章：vue2简介》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结

2.《基础篇第2章：vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结

3.《进阶篇第3章：vue进阶-组件》包含组件、自定义事件、插槽、路由等等扩展知识点

4.《基础篇第4章》：使用vue脚手架创建项目

5.vue2知识点：数据代理

6.vue2知识点：事件处理

7.vue2知识点：列表渲染（包含：v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测）

8.vue2知识点：计算属性与监听属性

9.vue2知识点：生命周期（包含：生命周期介绍、生命周期钩子、整体流程图详解）

10.vue2知识点：非单文件组件和单文件组件

11.vue2知识点：组件is属性

12.vue2知识点：组件模板定义

13.vue2知识点：组件的props属性、非props属性、props属性校验

14.vue2知识点：组件自定义事件

15.vue2知识点：组件插槽分发

16.vue2知识点：动态组件

17.vue2知识点：混入

18.vue2知识点：浏览器本地缓存

19.vue2知识点：全局事件总线（GlobalEventBus）

20.vue2知识点：消息订阅与发布

21.vue2知识点：nextTick语法

22.vue2知识点：Vue封装的过度与动画

23.vue2知识点：路由

24.vue2知识点：vm调用待$命令介绍

25.vue组件通信案例练习（包含：父子组件通信及平行组件通信）

26.vue表单案例练习：vue表单创建一行数据及删除数据的实现与理解

27.vue2基础组件通信案例练习：待办事项Todo-list案例练习

28.vue2基础组件通信案例练习：把案例Todo-list改写成本地缓存

29.vue2基础组件通信案例练习：把案例Todo-list改成使用自定义事件

30.vue2基础组件通信案例练习：把案例Todo-list改成使用全局事件总线

31.vue2基础组件通信案例练习：把案例Todo-list改成使用消息订阅与发布

32.vue2基础组件通信案例练习：把案例Todo-list新增编辑按钮

33.vue2基础组件通信案例练习：把案例Todo-list改成使用动画与过度

34.学习vue2遇到过的问题及个人总结