【2022-10-26】前端Vue框架(三)

标签：count 10 26 Vue checkInfo price good id

一、表单控制

# 表单控制可以用一个input框来实现数据绑定：主要参数有checkbox（单选，多选），radio（单选），示例如下：

1.1 单选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">
    <h1>表单控制</h1>
    <p>username:
        <input type="text" v-model="username">
    </p>
    <p>password:
        <input type="text" v-model="password">
    </p>
    <p>记住密码
        <input type="checkbox" v-model="isRemember">
    </p>
    <!--    {{isRemember}} checkbox单选，使用布尔值类型-->
    <p>
        <input type="radio" v-model="gender" value="1">男
        <input type="radio" v-model="gender" value="2">女
        <input type="radio" v-model="gender" value="0">其他
    </p>
    <!--    {{gender}}    radio单选，使用字符串类型-->
</div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            username: '',
            password: '',
            isRemember: false,
            gender: '',
        },
        
    })
</script>
</html>

1.2 多选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">
    <h1>表单控制</h1>
    <p>username:
        <input type="text" v-model="username">
    </p>
    <p>password:
        <input type="text" v-model="password">
    </p>
    <p>记住密码
        <input type="checkbox" v-model="isRemember">
    </p>
    <!--    {{isRemember}} checkbox单选，使用布尔值类型-->
    <p>
        <input type="radio" v-model="gender" value="1">男
        <input type="radio" v-model="gender" value="2">女
        <input type="radio" v-model="gender" value="0">其他
    </p>
    <!--    {{gender}}    radio单选，使用字符串类型-->

    <p>爱好：
        <input type="checkbox" v-model="hobby" value="唱"> 唱
        <input type="checkbox" v-model="hobby" value="跳"> 跳
        <input type="checkbox" v-model="hobby" value="rap"> rap
        <input type="checkbox" v-model="hobby" value="打篮球"> 打篮球
    </p>
    <!--    {{hobby}}   checkbox多选，使用数组类型-->

    <button @click="handlerSubmit"></button>

</div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            username: '',
            password: '',
            isRemember: false,
            gender: '',
            hobby: [],
        },
        methods: {
            handlerSubmit() {
                console.log(this.hobby)
            }
        }

    })
</script>
</html>

二、购物车案例

2.1 购物车结算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

</head>
<body>

<div id="app">
    <div class="container-fluid">
        <h1 class="text-center">购物车</h1>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>商品id</th>
                        <th>商品名称</th>
                        <th>商品数量</th>
                        <th>商品价格</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="good in goodList">
                        <th>{{good.id}}</th>
                        <td>{{good.name}}</td>
                        <td>{{good.count}}</td>
                        <td>{{good.price}}</td>
                        <td><input type="checkbox" v-model="checkInfo" :value="good"></td>
                    </tr>
                    </tbody>
                </table>
                <hr>
                购买的商品是：{{checkInfo}}
                <br>
                商品总价格是：{{getPrice()}}
            </div>
        </div>
    </div>


</div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            goodList: [
                {id: 1, name: '印度飞饼', price: 2000, count: 20},
                {id: 2, name: '极品木瓜', price: 10000, count: 20},
                {id: 3, name: '仿真玩偶', price: 60000, count: 10},
            ],
            checkInfo: [],
        },
        methods: {
            getPrice() {
                // 取出商品数量和商品价格进行相乘，做累加
                // 使用for循环计算总价
                var total = 0
                for (item of this.checkInfo) {
                    total += item.price * item.count
                }
                return total
            }
        }


    })
</script>
</html>

2.2 购物车全选/全不选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

</head>
<body>

<div id="app">
    <div class="container-fluid">
        <h1 class="text-center">购物车</h1>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>商品id</th>
                        <th>商品名称</th>
                        <th>商品数量</th>
                        <th>商品价格</th>
                        <th><input type="checkbox" v-model="checkAll" @change="handlerChange">全选/全不选</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="good in goodList">
                        <th>{{good.id}}</th>
                        <td>{{good.name}}</td>
                        <td>{{good.count}}</td>
                        <td>{{good.price}}</td>
                        <td><input type="checkbox" v-model="checkInfo" :value="good" @change="handlerChange01"></td>
                    </tr>
                    </tbody>
                </table>
                <hr>

                购买的商品是：{{checkInfo}}
                <br>
                商品总价格是：{{getPrice()}}
            </div>
        </div>
    </div>


</div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            goodList: [
                {id: 1, name: '印度飞饼', price: 2000, count: 20},
                {id: 2, name: '极品木瓜', price: 10000, count: 20},
                {id: 3, name: '仿真玩偶', price: 60000, count: 10},
            ],
            checkInfo: [],
            checkAll: false,
        },
        methods: {
            getPrice() {
                // 取出商品数量和商品价格进行相乘，做累加
                // 使用for循环计算总价
                var total = 0
                for (item of this.checkInfo) {
                    total += item.price * item.count
                }
                return total
            },
            handlerChange() {
                if (this.checkAll) {
                    this.checkInfo = this.goodList
                } else {
                    this.checkInfo = []
                }
            },
            handlerChange01() {
                //     // 如果checkInfo的长度等于goodList的长度，说明全选了，这个时候checkAll就是true，否则就是false
                //     if (this.checkInfo.length == this.goodList.length) {
                //         this.checkAll = true
                //     } else
                //         this.checkAll = false
                // },
                // 上述代码可以简写为：
                this.checkAll = (this.checkInfo.length == this.goodList.length)
            }
        }
    })
</script>
</html>

2.3 购物车数量加减

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

</head>
<body>

<div id="app">
    <div class="container-fluid">
        <h1 class="text-center">购物车</h1>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>商品id</th>
                        <th>商品名称</th>
                        <th>商品数量</th>
                        <th>商品价格</th>
                        <th><input type="checkbox" v-model="checkAll" @change="handlerChange">全选/全不选</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="good in goodList">
                        <th>{{good.id}}</th>
                        <td>{{good.name}}</td>
                        <td>
                            <button class="btn link btn-sm" @click="handlerDown(good)">-</button>
                            {{good.count}}
                            <button class="btn link btn-sm" @click="good.count++">+</button>
                        </td>
                        <td>{{good.price}}</td>
                        <td><input type="checkbox" v-model="checkInfo" :value="good" @change="handlerChange01"></td>
                    </tr>
                    </tbody>
                </table>
                <hr>

                购买的商品是：{{checkInfo}}
                <br>
                商品总价格是：{{getPrice()}}
            </div>
        </div>
    </div>


</div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            goodList: [
                {id: 1, name: '印度飞饼', price: 2000, count: 20},
                {id: 2, name: '极品木瓜', price: 10000, count: 20},
                {id: 3, name: '仿真玩偶', price: 60000, count: 10},
            ],
            checkInfo: [],
            checkAll: false,
        },
        methods: {
            getPrice() {
                // 取出商品数量和商品价格进行相乘，做累加
                // 使用for循环计算总价
                var total = 0
                for (item of this.checkInfo) {
                    total += item.price * item.count
                }
                return total
            },
            handlerChange() {
                if (this.checkAll) {
                    this.checkInfo = this.goodList
                } else {
                    this.checkInfo = []
                }
            },
            handlerChange01() {
                //     // 如果checkInfo的长度等于goodList的长度，说明全选了，这个时候checkAll就是true，否则就是false
                //     if (this.checkInfo.length == this.goodList.length) {
                //         this.checkAll = true
                //     } else
                //         this.checkAll = false
                // },
                // 上述代码可以简写为：
                this.checkAll = (this.checkInfo.length == this.goodList.length)
            },
            handlerDown(good) {
                if (good.count > 1) {
                    good.count--
                } else {
                    alert('数量低于1，不能减少了')
                }
            }
        }
    })
</script>
</html>

三、V-model进阶

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>v-model进阶</h1>
    <input type="text" v-model.lazy="name1"> ---->{{name1}}
    <br>
    <input type="text" v-model.number="name2"> ---->{{name2}}
        <br>
    <input type="text" v-model.trim="name3"> ---->{{name3}}


</div>
</body>

<script>

    new Vue({
        el: '#app',
        data: {
            name1: '',
            name2: '',
            name3: '',
        },

    })
</script>
</html>

四、Vue生命周期

钩子函数	描述
beforeCreate	创建Vue实例之前调用
created	创建Vue实例成功后调用（可以在此处发送异步请求后端数据）
beforeMount	渲染DOM之前调用
mounted	渲染DOM之后调用
beforeUpdate	重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
updated	重新渲染完成之后调用
beforeDestroy	销毁之前调用
destroyed	销毁之后调用

# var vm=new Vue实例()
	-1 实例创建，数据放到实例中
    -2 挂在模板：el---》div
    -3 改页面，改变量，都会相互影响 update
    -4 销毁实例
    
# 4个过程，对应八个函数，依次执行（到某个过程就会执行某个函数）
	beforeCreate    创建Vue实例之前调用，data，el都没有
    created	        创建Vue实例成功后调用（可以在此处发送异步请求后端数据），data有了，el没有的
    beforeMount	    渲染DOM之前调用 ，data有了，el没有
    mounted	        渲染DOM之后调用
    beforeUpdate	重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
    updated	        重新渲染完成之后调用
    beforeDestroy	销毁之前调用
    destroyed	    销毁之后调用
 
# 5 钩子函数（hook）  AOP的体现：面向切面编程--》装饰器实现aop
    
# 6 vm实例：看不到它销毁       组件vc

# 7 组件：组件化开发

# 8 学习生命周期重点掌握的
	-1 组件向后端发送请求，获取数据，应该放在 created 写，此时data已经有数据了
    -2 destroyed做一些资源清理性的工作

# 9 小案例：组件创建，开启定时器，不停的打印hello，在destroyed中对定时器进行销毁
	-补充：js 定时任务和延时任务   
    # 延时任务
    setTimeout(()=>{
       console.log('3s后执行我')
    },3000)
    #定时任务
   setInterval(()=>{
     console.log('hello')
   },3000)

#10 什么场景下用定时任务？
	1 实时跟后端交互  基于http+定时任务 （websocket协议：服务端主动推送消息，手机app的消息推送）
    2 秒杀场景：先提交秒杀请求，每隔3s，查询是否秒到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">
    <h1>vue生命周期</h1>
    <button @click="handlerClick01">组件的显示与消失</button>
    <hr>
    <child v-if="show"></child>
    <hr>
</div>
</body>

<script>
    // 定义一个全局组件
    Vue.component('child', {
        template: `
          <div>
          <button>回退</button>
          {{ title }}
          <button @click="handlerClick">前进</button>
          </div>`,
        data() {
            return {
                title: '首页'
            }
        },
        methods: {
            handlerClick() {
                // alert('前进')
                this.title = 'jason'
            }
        },
        beforeCreate() {
            console.log('当前状态: beforeCreate')
        },
        created() {
            console.log('当前状态：created')
        },
        beforeMount() {
            console.log('当前状态：beforeMount')
        },
        mounted() {
            console.log('当前状态：mounted')
        },
        beforeUpdate() {
            console.log('当前状态：beforeUpdate')
        },
        updated() {
            console.log('当前状态: updated')
        },
        beforeDestroy() {
            console.log('当前状态：beforeDestroy')
        },
        destroyed() {
            console.log('当前状态：destroyed')
        }
    })


    var vm = new Vue({
        el: '#app',
        data: {
            show: true,
        },
        methods: {
            handlerClick01() {
                this.show = !this.show
            }
        }


    })
</script>
</html>

五、后端交互Ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">
    <h1>jQuery的ajax与后端交互</h1>
    <button @click="handleLoad">点击加载数据</button>
    <br>
    <p>username: {{name}}</p>
    <p>age: {{age}}</p>
    <hr>
</div>
</body>

<script>

    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            age: '',
        },
        methods: {
            handleLoad() {
                $.ajax({
                    url: '',
                    type: 'get',
                    success: data => {
                        console.log(data)
                    }
                })

            }
        }


    })
</script>
</html>

六、JS中的for循环

# python中只有基于迭代的循环，没有基于索引的循环
# js，java，go中有基于迭代和索引的两种循环
# js中for循环：
    1 for (i=0;i<checkGroup.length;i++)     # 基于索引的循环
    2 for (i in checkGroup)                 # 基于迭代的循环
    3 for (i of checkGroup)                 # es6中的循环
    4 数组内置方法.forEach()
    5 jquery  $.each 循环
    
    
    
 # 代码演示
    // 1 方式一：js的基于索引的循环
    // for (var i = 0; i< goodList.length; i++) {
    //     console.log(goodList[i])
    // }
    // 2 方式二：基于迭代的循环
    // for (i in goodList){
    //     console.log(goodList[i])
    // }

    // 3 方式三：of 循环，基于迭代的
    //   for (i of goodList){
    //     console.log(i)
    // }
    // 4 方式四：数组的循环方法
    // goodList.forEach(item => {
    //     console.log('---', item)
    // })

    // 5 jquery:引入
    // $.each(goodList, (i, v) => {
    //     console.log(v)
    // })

七、跨域请求及问题解决

# 关于什么是跨域请求，以及如何解决这个问题，请参考下方博客链接：
	https://www.cnblogs.com/zaking/p/16532324.html

标签：count,10,26,Vue,checkInfo,price,good,id
From： https://www.cnblogs.com/dy12138/p/16830218.html

【2022-10-26】前端Vue框架(三)

一、表单控制

1.1 单选

1.2 多选

二、购物车案例

2.1 购物车结算

2.2 购物车全选/全不选

2.3 购物车数量加减

三、V-model进阶

四、Vue生命周期

五、后端交互Ajax

六、JS中的for循环

七、跨域请求及问题解决

相关文章

赞助商

阅读排行