Vue.js-Day02-AM【Vue表单、核心指令（单选框、密码框、多行文本框、单选、多选、勾选、下拉列表）、组件汇总案例、ToDoList案例、计算属性(computed)、watch监听】

Vue.js实训【基础理论(5天)+项目实战(5天)】博客汇总表【详细笔记】 

目   录

1、Vue表单

原生JS实现异步表单提交

运行截图

代码

核心指令

单选框、密码框、多行文本框

单选

多选

勾选

下拉列表（每个option标签都要有value值）

组件汇总案例

运行截图

代码

ToDoList案例

JS堆栈内存图

运行截图

代码

2、计算属性（对data中的数据进行加工处理）

实现

computed-案例

运行截图

代码

3、watch监听（监听data中数据变化）

实现

案例

运行截图

代码

---

1、Vue表单

Vue.js表单 是 双向数据绑定的。

原生JS实现异步表单提交

运行截图

代码

    
    



    
    
姓名：  
    
密码： 
    提交

    
    

        
        
        
    

核心指令

<标签控件 v-model="变量" />

单选框、密码框、多行文本框

单选

变量获取到的数据就是控件的value值，如果变量绑定的数据和控件的value值⼀致，则 该单选控件 被选中。

data:{
    变量:值2 // 值2的控件将会被选中
}

多选

data:{
    变量:[值1] // 绑定的变量是⼀个数组！ 值1的控件将会选中
}

勾选

data:{
    变量:布尔值
}

下拉列表（每个option标签都要有value值）

     111
     222
     333


data:{
    变量:值2 // 值2的option控件被选中
}

组件汇总案例

运行截图

代码

    
    
    



    

        
姓名：{{userinfo.username}}
        
密码：{{userinfo.password}}
        

            性别：
            
            男
            女
            {{userinfo.sex}}
        
        

            爱好：
            
            篮球
            足球
            羽毛球
            皮球
            {{userinfo.ah}}
        
        

            是否同意协议：
            
            xxxxx协议内容，是否同意
            {{userinfo.agree}}
        
        

            家乡：
            
            
                ==请选择==
                郑州
                南阳
                安阳
                信阳
                洛阳
            
            {{userinfo.city}}
        
        

            留言：
            
            {{userinfo.note}}
        
        提交
    

ToDoList案例

JS堆栈内存图

1. 基本数据类型  字符串、数字、布尔值、null、undefined   栈内存
2. 引用数据类型  object/array           堆内存

运行截图

代码

    
    
    
    



    

        

            主题：
            地点：
            时间：
            提交
            修改
        

        

            

                
序号
                
主题
                
地点
                
时间
                
状态
                
操作
            
            
            

                

                    

                    暂无数据
                    


                
            
        
    

2、计算属性（对data中的数据进行加工处理）

实现

计算属性的值为函数，且这个函数需要有返回值！

将数据处理好之后，赋给全局变量，再进行显示。

new Vue({
    el: "",
    data: {},
    computed: {
        属性名: function(){
            return xxx;
        }
    }
})

computed-计算属性案例

运行截图

代码

    
    
    



    

        {{abc}}
        

        {{money}}
        

        {{"￥"+num}}
    

3、watch监听（监听data中数据变化）

实现

new Vue({
    el: "",
    data: {
        变量名:值
    },
    watch: {
        // 浅监听： 监听的变量数据类型是基本数据类型
        变量名: function(新值){
            ....
        }
        // 深监听： 监听的变量数据类型是引⽤数据类型
        变量名: {
            deep: true,
            handler: function(新值){
                ...
            }
        }

    }
})

案例

运行截图

代码

    
    
    



    

        单价是：￥10.00
        数量是：{{num}}
        
        小计：￥{{ total }}
        累加
        

        {{person}}
    

多谢观看~