vue学习笔记

今日内容概要

  • 表单控制
  • 购物车案例
  • v-model进阶
  • vue生命周期
  • 与后端交互ajax

今日内容详细

表单控制

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

代码演示：

<!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>表单控制之checkbox单选</h1>
    <p>用户名：<input type="text" v-model="name"></p>
    <p>密码：<input type="text" v-model="password"></p>
    <p><input type="checkbox" v-model="isRemember"> 记住密码</p>

    <h1>表单控制之checkbox多选</h1>
    <p>
        爱好：
        <input type="checkbox" value="篮球" v-model="hobby"> 篮球
        <input type="checkbox" value="足球" v-model="hobby"> 足球
        <input type="checkbox" value="乒乓球" v-model="hobby"> 乒乓球
        <input type="checkbox" value="橄榄球" v-model="hobby"> 橄榄球
    </p>
    {{hobby}}

    <h1>表单控制之radio单选</h1>
    <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>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name: '',
            password:'',
            isRemember: false, // checkbox单选，使用布尔类型
            hobby:[],  // checkbox多选，使用数组
            gender:'',  // radio单选，使用字符串
        },
    })
</script>
</html>

购物车案例

# 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. $.each 循环  # jquery中的循环

# 代码演示
    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)
    })

代码演示：

<!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">
        <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="handleChange">全选/全不选</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="good in goodList">
                        <th>{{good.id}}</th>
                        <td>{{good.name}}</td>
                        <td>{{good.price}}</td>
                         数量带加减功能
                        <td><span class="btn link btn-sm" @click="handleDown(good)">-</span>{{good.count}}<span
                                class="btn link btn-sm" @click="good.count++">+</span>
                        </td>
                        <td><input type="checkbox" v-model="checkGroup" :value="good" @change="handleCheckOne"></td>
                    </tr>
                    <tr>
                        <th>总价格是：{{getPrice()}}</th>
                    </tr>
                    </tbody>
                </table>
                <hr>
                    选中的商品是：{{checkGroup}}
            </div>
        </div>
    </div>
</div>
</body>
<script>
    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
            },
            //  全选全不选功能
            handleChange() {
                if (this.checkAll) {
                    this.checkGroup = this.goodList
                } else {
                    this.checkGroup = []
                }
            },
            handleCheckOne() {
                // 如果checkGroup的长度等于goodList的长度，说明全选了，checkAll就应该变为true，否则就是false
                // if (this.checkGroup.length == this.goodList.length) {
                //     this.checkAll = true
                // } else {
                //     this.checkAll = false
                // }
                // 简写
                this.checkAll = this.checkGroup.length == this.goodList.length
            },
            //  数量带加减功能
            handleDown(good) {
                if (good.count > 1) {
                    good.count--
                } else {
                    alert('不能再少了，受不了了')
                }
            }
        }
    })
</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生命周期

组件化开发，页面也是一个组件，一个组件就是一个Vue的对象，Vue对象是有生命周期：从创建那一刻到销毁的过程叫生命周期。

# var vm=new Vue实例()
1 实例创建，数据放到实例中
2 挂在模板：el---》div
3 改页面，改变量，都会相互影响 update
4 销毁实例

生命周期的4个过程对应8个钩子函数：当执行到那，就会执行某个钩子函数。

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

钩子函数（hook） AOP的体现：面向切面编程--》装饰器实现aop

学习生命周期重点掌握的：

  1. 组件向后端发送请求，获取数据，应该放在created写，此时data已经有数据了
  2. destroyed做一些资源清理性的工作

小案例：组件创建，开启定时器，不停的打印hello，在destroyed中对定时器进行销毁

补充：js 定时任务和延时任务   
# 延时任务
 setTimeout(()=>{
    console.log('3s后执行我')
},3000)
#定时任务
setInterval(()=>{
    console.log('hello')
},3000)

什么场景下用定时任务？
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="handleShow">点我组件显示和消失</button>
    <hr>
    <child v-if="show"></child>
</div>
</body>
<script>
    // 定义一个全局组件
    Vue.component('child',{
        template:`
            <div>
            <button>后退</button>
            {{title}}
            <button @click="handleClick">前进</button>
            </div>
        `,
        data(){
            return{title:'好看的首页', t:''}
        },
        methods:{
            handleClick(){
                this.title = 'wjl'
            }
        },
        beforeCreate() {
            console.log('beforeCreate')
            console.log(this.$data)
            console.log(this.$el)
        },
        created() {
            console.log('created')
            console.log(this.$data)
            console.log(this.$el)
            // 开启定时器，每隔3s，打印hello
            this.t=setInterval(()=>{
                console.log('hello')
            },3000)
        },
        beforeMount() {
            console.log('beforeMount')
            console.log(this.$data)
            console.log(this.$el)
        },
        mounted() {
            console.log('mounted')
            console.log(this.$data)
            console.log(this.$el)
        },
        beforeUpdate() {
            console.log('beforeUpdate')
        },
        updated() {
            console.log('updated')
        },
        beforeDestroy() {
            console.log('beforeDestroy')
        },
        destroyed() {
            console.log('destroyed')
            // 销毁定时器
            clearInterval(this.t)
            this.t=null
        },
    })
    let vm=new Vue({
        el: '#app',
        data: {
            show:true,
        },
        methods:{
            handleShow(){
                this.show = !this.show
            }
        }
    })
</script>
</html>

与后端交互ajax

# 与后端交互
js原生发送ajax请求：new XMLHTTpRequest()，浏览器兼容性不好，于是jquery基于它做了封装出了jquery的ajax方法，XMLHTTpRequest很多bug

jquery的ajax：vue中用的少

js原生提供的fetch：现在官方主推这个，不支持ie浏览器    基于promsie风格

axios：vue中常用的，它也是封装了XMLHTTpRequest     基于promsie风格

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="app">
    <h1>jquery的ajax与后端交互</h1>
    <button @click="handleLoad1">点击加载数据</button>
    <br>
    <p>名字是：{{name}}</p>
    <p>年龄是：{{age}}</p>

    <h1>js原生的fetch与后端交互</h1>
    <button @click="handleLoad2">点击加载数据</button>
    <br>
    <p>名字是：{{name}}</p>
    <p>年龄是：{{age}}</p>

    <h1>axios与后端交互</h1>
    <button @click="handleLoad3">点击加载数据</button>
    <br>
    <p>名字是：{{name}}</p>
    <p>年龄是：{{age}}</p>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name: '',
            age: 0
        },
        methods: {
            handleLoad1() {
                $.ajax({
                    url: "http://127.0.0.1:5000/",
                    type: 'get',
                    success: data => {
                        console.log(typeof data)
                        data = JSON.parse(data) // data 是字符串类型，需要转成对象类型
                        console.log(typeof data)
                        this.name = data.name
                        this.age = data.age
                    }
                })
            },

            handleLoad2() { // 用的很少
                fetch('http://127.0.0.1:5000/').then(res => res.json()).then(res => {
                    console.log(res)
                    console.log(typeof res)
                    this.name = res.name
                    this.age = res.age
                })
            },

            handleLoad3() {
                axios.get('http://127.0.0.1:5000/').then(res => {
                    console.log(res.data)  // 后端真正的数据在res.data中
                    this.name = res.data.name
                    this.age = res.data.age
                })
            },
        }
    })
</script>
</html>
posted @   空白o  阅读(17)  评论(0)  编辑  收藏  举报
相关博文：
· vue学习笔记
· vue学习笔记
· Vue学习-03
· vue生命周期，vue的购物车案例
· vue3-- 表单控制 - radio单选 - 购物车案例 - v-model进阶 （了解） - vue生命周期
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示