Vue——表单控制、购物车案例、v-model进阶、与后端交互三种方式、箭头函数-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue——表单控制、购物车案例、v-model进阶、与后端交互三种方式、箭头函数。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

表单控制

// 1 checkbox
	单选
	多选
// 2 radio
	单选

<body>
<div id="app">
    <h1>checkbox单选</h1>
    <p>用户名: <input type="text" v-model="username"></p>
    <p>密码: <input type="password" v-model="password"></p>
    <p>记住密码: <input type="checkbox" v-model="remember"></p>
    <hr>
    用户名：{{username}}----->密码：{{password}}------>记住密码：{{remember}}

    <h1>checkbox多选</h1>
    <p>用户名: <input type="text" v-model="username"></p>
    <p>密码: <input type="password" v-model="password"></p>
    <p>记住密码: <input type="checkbox" v-model="remember"></p>
    <p>爱好：</p>
    <p>足球：<input type="checkbox" v-model="hobby" value="1"></p>
    <p>篮球：<input type="checkbox" v-model="hobby" value="2"></p>
    <p>乒乓球：<input type="checkbox" v-model="hobby" value="3"></p>
    <hr>
    用户名：{{username}}----->密码：{{password}}------>记住密码：{{remember}}----->爱好：{{hobby}}

    <h1>radio单选</h1>
    <p>用户名：<input type="text" v-model="username"></p>
    <p>密码：<input type="password" v-model="password"></p>
    <p>记住密码：<input type="checkbox" v-model="remember"></p>
    <p>爱好：</p>
    <p>足球：<input type="checkbox" v-model="hobby" value="1"></p>
    <p>篮球：<input type="checkbox" v-model="hobby" value="2"></p>
    <p>乒乓球：<input type="checkbox" v-model="hobby" value="3"></p>
    <p>性别：</p>
    <p>男：<input type="radio" v-model="gender" value="1"></p>
    <p>女：<input type="radio" v-model="gender" value="2"></p>
    <p>保密：<input type="radio" v-model="gender" value="3"></p>
    <hr>
    用户名：{{username}}--&ndash;&gt;密码：{{password}}----> {{remember}}--->爱好：{{hobby}}--->性别：{{gender}}
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            username: '',
            password: '',
            remember: false,
            hobby:[],
            gender:''
        },
    })
</script>

js循环补充

<script>
    var arr = [1,2,3,4,5,6,7]
    // 1 基础for循环
    // for(var i = 0;i<arr.length;i++){
    //     console.log(arr[i])
    // }

    // 2 in的循环(不怎么用)，循环出索引
    // for (i in arr){
    //     // console.log(i)
    //     console.log(arr[i])
    // }

    // 3 of循环 es6的语法 循环出value值
    // for (i of arr){
    //     console.log(i)
    // }

    // 4 数组的循环 值在前索引在后
    // arr.forEach(function(value,index){
    //     console.log(index,'-----',value)
    // })

    // 5 jQuery的循环 索引在前值在后
    $.each(arr,function (index,value) {
        console.log(index,'----',value)
    })
</script>

购物车案例

<body>
<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h1 class="text-center">购物车</h1>
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>商品id</th>
                        <th>商品名</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <th>全选/全不选 <input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="good in good_list">
                        <th>{{good.id}}</th>
                        <td>{{good.name}}</td>
                        <td>{{good.price}}</td>
                        <td>
                            <button class="btn" @click="handleJian(good)">-</button>
                            {{good.number}}
                            <button class="btn" @click="handleJia(good)">+</button>
                        </td>
                        <td><input type="checkbox" :value="good" v-model="checkGroup" @change="handleOne"></td>
                    </tr>
                    </tbody>
                </table>
                <hr>
                选中了：{{checkGroup}}
                <h3>总价格：{{getPrice()}}</h3>
                <h3>选中了checkbox，checkGroup会发生变化，页面也在变，都会重新刷新页面。函数就会重新执行</h3>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            good_list: [
                {id: 1, name: '钢笔', price: 12, number: 1},
                {id: 2, name: '脸盆', price: 20, number: 1},
                {id: 3, name: '毛笔', price: 6, number: 1},
                {id: 4, name: '圆珠笔', price: 8, number: 1},
                {id: 5, name: '铅笔', price: 1, number: 1},
            ],
            checkGroup: [],
            checkAll: false,
        },
        methods: {
            getPrice() {
                // 1 根据checkGroup选中的计算
                // 循环checkGroup 拿出价格*数量 累加 最后返回
                var total = 0
                for (item of this.checkGroup) {
                    total += item.price * item.number
                }
                return total
            },
            handleCheckAll() {
                // console.log(this.checkAll)
                // 全选中：对钩都打上 js中的含义是：checkGroup变量满值
                if (this.checkAll){
                    this.checkGroup = this.good_list  // 全选
                }else {
                    this.checkGroup = [] // 全不选
                }
            },
            handleOne(){
                // 判断checkGroup的长度 是否等于good_list的长度
                if (this.checkGroup.length === this.good_list.length){
                    this.checkAll = true
                }else {
                    this.checkAll = false
                }
            },
            handleJian(good){
              if (good.number > 1){
                  good.number--
              }else {
                  alert('不能减了')
              }
            },
            handleJia(good){
                good.number++
            }
        }
    })
</script>

v-model

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

<body>
<div id="app">
    <h1>lazy修饰符</h1>
    <input type="text" v-model.lazy="username">-------{{username}}
    <h1>number修饰符</h1>
    <input type="text" v-model.number="username1">------{{username1}}
    <h1>trim修饰符</h1>
    <input type="text" v-model.trim="username2">-----{{username2}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            username1: '',
            username2: '',
        },
    })
</script>

与后端交互的三种方式

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

from flask import Flask,jsonify

方式一：使用jQuery的ajax

<body>
<div id="app">
    <button @click="handleLoad">点我加载数据</button>
    <hr>
    你的名字是：{{name}},你的年龄是{{age}}
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name: '',
            age: '',
        },
        methods: {
             // 请求发送成功，后端执行了，但是被浏览器拦截了，因为有跨域问题
             // 当前请求地址，如果向非当前地址栏中的地址发送请求，就会出现跨域
             // 1.jQuery的ajax请求
             handleLoad(){
                 $.ajax({
                     url:'http://127.0.0.1:5000',
                     type:'get',
                     success:data =>{
                         console.log(typeof data)
                         var res = JSON.parse(data)
                         this.name = res.name
                         this.age = res.age
                     }
                 })
             },  
        },
    })
</script>

方式二：使用js原生的fetch(目前不用)

<body>
<div id="app">
    <button @click="handleLoad">点我加载数据</button>
    <hr>
    你的名字是：{{name}},你的年龄是{{age}}
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name: '',
            age: '',
        },
        methods: {
            handleLoad() {
                // var _this = this
                // fetch('http://127.0.0.1:5000').then(function (response) {
                //     // console.log(response)
                //     return response.json()
                // }).then(function (res) {
                //     // console.log(res)
                //     _this.name = res.name
                //     _this.age = res.age
                // })
                
                // 箭头函数写法
           fetch('http://127.0.0.1:5000').then(response=>response.json().then(res=>{
                    this.name = res.name
                    this.age = res.age
                }))
            }
        },
    })
</script>

方式三：使用axios，以后都用这个

<body>
<div id="app">
    <button @click="handleLoad">点我加载数据</button>
    <hr>
    你的名字是：{{name}},你的年龄是{{age}}
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name: '',
            age: '',
        },
        methods: {
            handleLoad() {
                // var _this = this
                // axios.get('http://127.0.0.1:5000')
                //     .then(function (response) {
                //         // console.log(response.data);
                //         _this.name = response.data.name
                //         _this.age = response.data.age
                //     })
                //     .catch(function (error) {
                //         console.log(error);
                //     });
                // 箭头函数写法
                axios.get('http://127.0.0.1:5000').then(res => {
                    this.name = res.data.name
                    this.age = res.data.age
                }).catch(error => {
                    console.log(error)
                })
            }
        },
    })
</script>

箭头函数

<script>
    // 箭头函数
    // 1.无参数，无返回值
    let f = function () {
        console.log('我是匿名函数')
    }
    let f = () => {
        console.log('我是匿名函数')
    }
    f()

    // 2.有一个参数，没有返回值，可以省略括号
    let f = function (name) {
        console.log('我是匿名函数',name)
    }
    let f = name => {
        console.log('我是匿名函数',name)
    }
    f('XxMa')

    // 3.多个参数，不能省略括号
    let f = function (name,age) {
        console.log('我是匿名函数',name,age)
    }
    let f = (name,age) => {
        console.log('我是匿名函数',name,age)
    }
    f('XxMa',19)

    // 4.多个参数，不能省略括号，一个返回值
    let f = (name,age) => {
        return name + 'nb'
    }
    // 简写
    let f = (name,age) => name + 'nb'
    let res = f('XxMa',19)
    console.log(res)
    
    // 5.一个参数，一个返回值
    let f = name => name + 'nb'
    let res = f('XxMa',19)
    console.log(res)
</script>

文章来源地址https://www.toymoban.com/news/detail-472177.html

到了这里，关于Vue——表单控制、购物车案例、v-model进阶、与后端交互三种方式、箭头函数的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！