vue表单控制 购物车案例

鲜鸡屎
127 阅读2分钟

day03

表单控制

input：checkbox(单选，多选)，radio(单选)

<div id="app">
    <h1>表单控制</h1>
    <p>用户名：<input type="text" v-model="name"></p>
    <p>密码：<input type="text" v-model="pwd"></p>
    <p>记住密码：<input type="checkbox" v-model="confirm_pwd"></p>
    <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>
    <p>
        <input type="checkbox" v-model="hobby" value="篮球">篮球
        <input type="checkbox" v-model="hobby" value="足球">足球
        <input type="checkbox" v-model="hobby" value="网球">网球
        <input type="checkbox" v-model="hobby" value="乒乓">乒乓
    </p>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name: '',
            pwd: '',
            confirm_pwd: false,  // checkbox单选 使用布尔值
            gender: '',  // radio单选 使用字符串
            hobby: []  // checkbox多选 使用数组
        }
    })
</script>

js循环的五种方式

在python中 只有基于迭代的循环 没有基于索引的循环
在js、java、go中既有基于迭代的循环，又有基于索引的循环
js中循环的方式：
	1.	for(let i=0; i<list.length; i++)   // 基于索引的循环
	2.	for(let i in list)		// 基于迭代的循环 不太好用
	3.	for(i of list)		// 基于迭代的循环 好用
	4.	数组内置的循环方法  list.forEach()
	5.	jQuery的循环  $.each 

<script>
    ballList = ['篮球', '足球', '乒乓']
    // 1, 方式1 基于索引的循环
    for(let i=0; i< ballList.length; i++){
        console.log(i)
        console.log(ballList[i])
    }
    // 2.方式2 基于迭代的循环
    for(let i in ballList){
        console.log(i)
        console.log(ballList[i])
    }
    // 3. 方式3 基于迭代的循环
    for(i of ballList){
        console.log(i)
    }
    // 4. 方式4 数组的循环方法
    ballList.forEach((item)=> console.log(item))
    // 5 方法5 jquery:引入
    $.each(goodList, (i, v) => {
        console.log(v)
    })
</script>

购物车案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <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">
        <div class="row text-center">
            <div class="col-md-6 col-md-offset-3">
                <table class="table table-striped">
                    <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 goodList">
                        <th>{{good.id}}</th>
                        <td>{{good.name}}</td>
                        <td>{{good.price}}</td>
                        <td>{{good.count}}</td>
                        <td><input type="checkbox" v-model="checkGroup" :value="good" @change="handleCheckOne"></td>
                    </tr>
                    </tbody>
                </table>
                <hr>
                选中的商品有：{{checkGroup}}
                <br>
                总价格是：{{getPrice()}}
            </div>
        </div>
    </div>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            goodList: [
                {id: 1, name: '小汽车', price: 1200000, count: 1},
                {id: 2, name: '钢笔', price: 12, count: 34},
                {id: 3, name: '鸡蛋', price: 2, count: 4},
                {id: 4, name: '面包', price: 9, count: 10},
            ],
            checkGroup: [],
            checkAll: false
        },
        methods: {
            getPrice() {
                let total = 0
                for (item of this.checkGroup) {
                    total += item.price * item.count
                }
                return total
            },
            handleCheckAll() {
                if (this.checkAll) {
                    this.checkGroup = this.goodList
                } else {
                    this.checkGroup = []
                }
            },
            handleCheckOne() {
                if (this.checkGroup.length == this.goodList.length) {
                    this.checkAll = true
                } else {
                    this.checkAll = false
                }
            }
        }
    })
</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生命周期

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

    
    
# 6 vm实例：看不到它销毁       组件vc

# 7 组件：组件化开发

# 8 学习生命周期重点掌握的
	常用的钩子就两个：created 和 destroyed
	-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，查询是否秒到
avatar
文章
阅读
粉丝