vue03---表单控制/购物车案例/v-model进阶/与后端交互三种方式

表单控制

# 1 checkebox:
    -单选
    -多选
# 2 radio
    -单选

 

    
    
    



    
checkbox单选
    
    
    
    
    

    
checkbox多选
    
    
    
    
    
    
    
    
    

    
radio单选
    
用户名: 
    
密码: 
    
记住密码: 
    
爱好：
    
篮球：
    
足球：
    
乒乓球：
    
性别：
        男：
        女：
        保密：
    
    

    用户名：{{username}}--–>密码：{{password}}----> {{remember}}---》爱好：{{hobby}}---》性别：{{gender}}

购物车案例

基本购物车

    
    
    
    
    
    



    

        

            

                
购物车

                

                    

                    

                        
商品ID
                        
商品名
                        
商品价格
                        
商品数量
                        
操作
                    
                    
                    

                    

                        
{{good.id}}
                        
{{good.name}}
                        
{{good.price}}
                        
{{good.number}}
                        

                    
                    
                
                

                选中了：{{checkGroup}}
                
总价格：{{getPrice()}}
                
选中了checkbox，checkGroup会发生变化，页面也在变，都会重新刷新页面，函数就会重新执行
            


        

    

全选全不选

    
    
    
    
    



    

        

            

                
购物车

                

                    

                    

                        
商品ID
                        
商品名
                        
商品价格
                        
商品数量
                        
全选/全不选 
                    
                    
                    

                    

                        
{{good.id}}
                        
{{good.name}}
                        
{{good.price}}
                        
{{good.number}}
                        

                    
                    
                
                

                选中了：{{checkGroup}}
                

                {{checkAll}}
                
总价格：{{getPrice()}}
            


        

    

带加减

    
    
    
    
    



    

        

            

                
购物车

                

                    

                    

                        
商品ID
                        
商品名
                        
商品价格
                        
商品数量
                        
全选/全不选 
                    
                    
                    

                    

                        
{{good.id}}
                        
{{good.name}}
                        


                            {{good.price}}

                        
                        

                            -
                            {{good.number}}
                            +
                        
                        

                    
                    
                
                

                选中了：{{checkGroup}}
                

                {{checkAll}}
                
总价格：{{getPrice()}}
            


        

    

v-model进阶

v-model 之 lazy、number、trim
	# lazy：等待input框的数据绑定时区焦点之后再变化
	# number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
	# trim：去除首位的空格

    
    
    



    
lazy修饰符
    ---->{{username}}
    
number修饰符
    ---->{{username1}}
    
trim修饰符
    ---->{{username2}}

与后端交互三种方式

# 后端写了一堆接口
# 前端会了
#前后端要打通----》从前端发送ajax---》核心：使用js发送http请求，接收返回
	-原生js，可以开启ajax，但是原生js开启，比较麻烦，需要做浏览器兼容，有坑(基本不写)
    	
    -jq，写了个兼容所有浏览器的  $.ajax()，不仅仅有ajax，还封装了很多dom操作
    	-如果vue中使用它，不合适
    -axios：第三方的ajax包（咱们用）
    
    -fetch： 原生js发送ajax请求，有的浏览器也不兼容
    
    
    
    
# 写个后端：flask
# pip3 install flask

from flask import Flask, jsonify

app = Flask(__name__)


@app.route('/')
def index():
    print('来了，老弟')
    # 前后端分离后，一定会出跨域---》后面要解决的重点
    # 在响应头中加入：Access-Control-Allow-Origin ，就就可以解决跨域
    res = jsonify({'name': '彭于晏', 'age': 19})
    res.headers = {'Access-Control-Allow-Origin': '*'}
    return res


if __name__ == '__main__':
    app.run()

使用jq的ajax

            handleLoad() {
                // 请求发送成功，后端执行了，但是被浏览器拦截了，因为有跨域问题
                // 当前地址，如果向非浏览器地址栏中得地址发送请求，就会出现跨域
                // 1 ajax请求方式 1    jquery的ajax
                var _this = this
                $.ajax({
                    url: 'http://127.0.0.1:5000',
                    type: 'get',
                    success: function (data) {
                        console.log(typeof data)
                        var res = JSON.parse(data)
                        _this.name = res.name
                        _this.age = res.age

                    }
                })

            }

使用fetch

           handleLoad() {
                // 2 使用js原生的fetch(目前也不用)
                // fetch('http://127.0.0.1:5000').then(function (response) {
                //     // console.log(response)
                //     return response.json();
                // }).then(function (res) {
                //     console.log(res);
                // });
                // 了解，箭头函数一会讲
                fetch('http://127.0.0.1:5000').then(res=>res.json()).then(res=>{
                    console.log(res)
                })

            }

使用axios(以后用这个)

handleLoad() {
                var _this = this
                axios.get('http://127.0.0.1:5000').then(function (res) {
                    console.log(res.data)
                    _this.name = res.data.name
                    _this.age = res.data.age
                })
            }

箭头函数

# es6 的语法
	1 函数写法变简单
    2 箭头函数没有自己的this，在箭头函数中使用this，就是它上一层的
    
    
    
//  箭头函数
    //1 无参数，无返回值
    // var f =function (){
    //     console.log('我是匿名函数')
    // }
    // var f = () => {
    //     console.log('我是匿名函数')
    // }
    // f()

    //2 有一个参数，没有返回值  ,可以省略括号
    // var f = function (name) {
    //     console.log('我是匿名函数',name)
    // }
    // var f = name => {
    //     console.log('我是匿名函数', name)
    // }
    // f('Lqz')
    //3多个参数，不能省略括号
    // var f = (name, age) => {
    //     console.log('我是匿名函数', name, age)
    // }
    // f('Lqz', 19)

    //4多个参数，不能省略括号,一个返回值
    // var f = (name, age) => {
    //     return name + 'nb'
    // }


    // 简写成  省了return和大括号
    // var f = (name, age) => name + 'nb'
    // var res=f('Lqz', 19)
    // console.log(res)


    // 5 一个参数，一个返回值
    // var f = name => name + 'nb'
    // var res = f('Lqz')
    // console.log(res)