vue4

今日内容概要

  • 购物车案例
  • v-model进阶
  • 与后端交互
  • vue生命周期
  • vue组件

今日内容详细

购物车案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

</head>
<body>
<div id="shop">
    <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-hover">
                    <thead>
                    <tr>
                        <th>商品编号:</th>
                        <th>商品名:</th>
                        <th>数量:</th>
                        <th>单价:</th>
                        <th><span v-if="all">取消全选</span>
                            <span v-else>全选</span>
                            <input type="checkbox" v-model="all" @click="allClick">
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(goods, index) in goods_list">
                        <th scope="row">{{index + 1}}</th>
                        <td>{{goods.name}}</td>
                        <td>
                            <button @click="clickDown(goods)">-</button>
                            {{goods.num}}
                            <button @click="clickUp(goods)">+</button>
                        </td>
                        <td>{{goods.price}}</td>
                        <td>
                            选择<input type="checkbox" v-model="new_list" :value="goods" @change="goodsClick">
                        </td>
                    </tr>
                    </tbody>
                </table>
                <h2>总价{{allMoney()}}</h2>
            </div>
        </div>
    </div>


</div>
<script>
    var vm = new Vue({
        el: '#shop',
        data: {
            goods_list: [{name: '保时捷', num: 2, price: 999, stock:10}, {name: '法拉利', num: 3, price: 1000, stock:8}, {
                name: '兰博基尼',
                num: 1,
                price: 1000,
                stock: 12
            }],
            new_list: [],
            all: false,
        },
        methods: {
            clickUp(good){
                if (good.num < good.stock){
                    good.num++
                }else {
                    alert('库存不足了')
                }
            },
            clickDown(good){
                if (good.num > 1){
                    good.num--
                }else {
                    alert('太少啦 受不了了')
                }
            },
            allMoney() {
                var all = 0
                for (i of this.new_list) {
                    all += i.price * i.num
                }
                return all
            },
            goodsClick() {
                if (this.new_list.length === this.goods_list.length) {
                    this.all = true
                } else {
                    this.all = false
                }

            },
            allClick() {
                if (this.all) {
                    this.new_list = []
                } else {
                    this.new_list = this.goods_list
                }

            }
        }
    })
</script>
</body>
</html>

v-model进阶

就是v-model的修饰

.lazy				等待input框的数据绑定失去焦点之后再变化
.number				数字开头 只保留数字 后面的字母等不再保留 如果不是数字开头 那么都保留
.trim				去除首尾的空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="axios/axios.js"></script>

</head>
<body>
    <div id="app">
        <h1>v-model进阶</h1>
        <h2>.lazy</h2>
        <!--    当input框失去焦点的时候更新数据    -->
        <input type="text" v-model.lazy="name">-------->{{name}}
        <h2>.number</h2>
        <!--    数字开头只保留数字 其他开头保留全部    -->
        <input type="text" v-model.number="name">-------->{{name}}
        <h2>.trim</h2>
        <!--    去除首尾的空格    -->
        <input type="text" v-model.trim="name">-------->{{name}}

    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                name: 'lzj'
            }
        })
    </script>
</body>
</html>

与后端交互

前后端分离后前端与后端交互的时候会产生跨域问题
	跨域是浏览器的原因 只要不是向当前地址栏中的域名发送请求 就会被浏览器拦截

我们可以在后端中处理 只需要在响应头中加入允许即可
在django中我我们可以自定义一个中间件

from django.utils.deprecation import MiddlewareMixin


class MyMiddleware(MiddlewareMixin):

    def process_response(self, request, response):
        response['Access-Control-Allow-Origin'] = '*'
        return response

再配置一下 即可解决跨域问题

jQuery的ajax

<!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>

</head>
<body>
<div class="app">
    <h1>点击加载用户信息</h1>
    <button @click="handleClick">点我</button>
    <div v-if="age!=0">
        <p>用户名：{{name}}</p>
        <p>年龄：{{age}}</p>
        <p>性别：{{gender}}</p>
    </div>
    <div v-else>
        无用户信息
    </div>


</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            name:'',
            age:0,
            gender:'未知'
        },
        methods: {
            handleClick() {
                // 发送ajax请求
                $.ajax({
                    url: 'http://127.0.0.1:5000/',
                    type: 'get',
                    success: data => {
                        // console.log(data)
                        this.name=data.name
                        this.age=data.age
                        this.gender=data.gender
                    }

                })


            }
        }

    })
</script>
</html>

fetch发送ajax请求

# fetch 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应
	新的发送ajax 接口
	用起来比较方便
	支持promise写法[最新的异步写法]
	解决了原生的XMLHttpRequest兼容性的问题
	不是所有浏览器都支持
	主流现在是用axios[第三方]发送请求
# XMLHttpRequest: 原生js提供的
	比较老，不同浏览器需要做一些兼容性的处理，写起来比较麻烦 jq是基于它做了封装

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

</head>
<body>
<div class="app">
    <h1>点击加载用户信息</h1>
    <button @click="handleClick">点我</button>
    <div v-if="age!=0">
        <p>用户名：{{name}}</p>
        <p>年龄：{{age}}</p>
        <p>性别：{{gender}}</p>
    </div>
    <div v-else>
        无用户信息
    </div>


</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            name: '',
            age: 0,
            gender: '未知'
        },
        methods: {
            handleClick() {
                //1  fetch
                fetch('http://127.0.0.1:5000/').then(response => response.json()).then(res => {
                    // res是后端接口返回来的数据
                    console.log(res)
                    this.name = res.name
                    this.age = res.age
                    this.gender = res.gender
                })


            }
        }

    })
</script>
</html>

axios发送ajax请求

之后都是使用它来发送ajax请求 是第三方的模块
Axios是一个基于promise的HTTP库 还是基于XMLHttpRequest封装的

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

</head>
<body>
<div class="app">
    <h1>点击加载用户信息</h1>
    <button @click="handleClick">点我</button>
    <div v-if="age!=0">
        <p>用户名：{{name}}</p>
        <p>年龄：{{age}}</p>
        <p>性别：{{gender}}</p>
    </div>
    <div v-else>
        无用户信息
    </div>


</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            name: '',
            age: 0,
            gender: '未知'
        },
        methods: {
            handleClick() {
                // 点get是发送get请求 .post是发送post请求 其他同理
                axios.get('http://127.0.0.1:5000/').then(res => {
                    // res是对象，真正的数据(想要body体内容),在res.data中
                    console.log(res)
                    this.name = res.data.data.name
                    this.age = res.data.data.age
                    this.gender = res.data.data.gender


                })


            }
        }

    })
</script>
</html>

vue生命周期

从vue实例创建开始 到实例被销毁 总共经历了8个生命周期钩子函数 当我们自己写了时 就会执行
	钩子：反序列化验证---》钩子函数
	学名[专门名字]---》面向切面编程(AOP)
	OOP:面向对象编程

重点：
	-1 用的最多的，created  发送ajax请求----》有的人放在mounted中加载
	-2 beforeDestroy
    	-组件一创建，created中启动一个定时器
        -组件被销毁,beforeDestroy销毁定时器
	


# 实现实时聊天效果（在线聊天室）
	-轮询：定时器+ajax   http：http版本区别
    -长轮询：定时器+ajax  http
    -websocket协议：服务端主动推送消息
    https://zhuanlan.zhihu.com/p/371500343



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


</head>
<body>
<div class="app">
    <h1>热映电影</h1>
    {{name}}

</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            name: 'sss'
        },
        methods: {},


        beforeCreate() {
            console.group('当前状态：beforeCreate')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        created() {
            console.group('当前状态：created')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        beforeMount() {
            console.group('当前状态：beforeMount')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        mounted() {
            console.group('当前状态：mounted')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        beforeUpdate() {
            console.group('当前状态：beforeUpdate')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        updated() {
            console.group('当前状态：updated')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },

        // 如果写在Vue实例上，后面这俩是看不到的----》使用组件演示8个生命周期
        beforeDestroy() {
            console.group('当前状态：beforeDestroy')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        destroyed() {
            console.group('当前状态：destroyed')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },

    })
</script>
</html>

vue组件

组件开发的好处 就只可以重复使用代码

组件的分类:
	全局组件 在任意组件中都可以使用
	局部组件 只能在当前组件中使用

image-20230216221505203

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <!--    <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>-->
    <script src="axios/axios.js"></script>

</head>
<body>
<div id="app">
    <child></child>
<!--  局部组件只能在局部使用  -->
<!--    <lzj></lzj>-->
    <foo></foo>
</div>

<script>
    // 全局组件
    Vue.component('child',{
        template: `
        <div>
            <h1>{{name}}</h1>
            <button @click="clickBtn">点我</button>
            <lzj></lzj>
        </div>`,
        // 组件的数据得是函数的形式 这样每次使用组件的时候 数据相互不影响
        data(){
            return {
                name: 'lzj'
            }
        },
        // methods方法使用与之前一致
        methods:{
            clickBtn(){
                alert('嘻嘻')
            }
        },
        // 局部组件
        components:{
            'lzj': {
                template: `
                    <div>
                        <h2>我是局部组件</h2>
                    </div>
                `
            }
        }
    })

    // 可以先将局部组件提前保存起来 后续可以直接使用该变量名
    var foo = {
                template: `
                    <div>
                        <h2>我是局部组件</h2>
                    </div>
                `
            }

    var vm = new Vue({
        el: '#app',
        data:{},
        methods:{},
        components:{
            // 可以以这种形式
            foo
        }
    })
</script>
</body>
</html>
posted @   LZJJJ  阅读(167)  评论(0)  编辑  收藏  举报
相关博文：
· vue02
· vue06
· vue基础
· vue框架4
· vue_day04
阅读排行：
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示