Vue-(3)

AL_QX

已于 2022-10-26 21:46:07 修改

阅读量1.4k

点赞数

文章标签： vue.js javascript 前端

于 2022-10-26 21:12:52 首次发布

本文链接：https://blog.csdn.net/AL_QX/article/details/127532818

版权

内容概览

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

表单控制

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>表单控制</h1>
    <p>用户名<input type="text" v-model="name"></p>
    <p>密码<input type="text" v-model="password"></p>
    <p><input type="checkbox" v-model="isRemember">记住密码----{{isRemember}}</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">保密
        ----{{gender}}
    </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="羽毛球">羽毛球
        ----{{hobby}}
    </p>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name:'',
            password:'',
            isRemember:false,  // checkbox单选,使用布尔类型
            gender:'',  // radio单选,使用字符串
            hobby:[],  // checkbox多选,使用数组
        },
    })
</script>
</html>

购物车案例

补充知识

// python中只有基于迭代的循环
// js,java,go中有基于迭代和索引两种循环
// 补充：js中的多种循环方式
1. for(let i=0; i<5; i++)  // 基于索引的循环
2. for(i in obj)       // 基于迭代的循环
3. for(i of obj)	   // es6语法中的循环
4. 数组内置方法.forEach()
5. jquery的方法 $.each

// 代码演示
    obj = [111, 222, 333, 444, 555]
    // 1. js基于索引的循环
    for (let i = 0; i < obj.length; i++) {
        console.log(i)
    }
    // 2. js基于迭代的循环
    for (i in obj) {
        console.log(i)  // 循环出来的是索引
        console.log(obj[i])  // 需要根据索引取到数据
    }
    // 3. of循环
    for (i of obj) {
        console.log(i)  // 直接获取数据
    }
    // 4. 数组的循环方法
    // obj.forEach(function(itme){console.log(itme)})
    obj.forEach(itme=>{console.log(itme)})  // 简写
    // 5. jquery
    $.each(obj,(i,v)=>{console.log(v)})  // i是索引,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>

                    </tbody>
                </table>
                <hr>
                选中的商品是：{{checkGroup}}
                <br>
                总价格是：{{getPrice()}}

            </div>
        </div>
q
    </div>
</div>
</body>
<script>
    var 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
            },
            handleChange(){
                if(this.checkAll===true){
                    // 当全选为true时,选中商品应该与商品列表相同
                    this.checkGroup=this.goodList
                }else{
                    this.checkGroup=[]
                }
            },
            handleCheckOne(){
                // 每次勾选商品时判断;当选中的商品数量与所有商品数量一致时,checkAll为true,否则为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>
    <h2>lazy</h2>
    <input type="text" v-model.lazy="name1">----{{name1}}
    <h2>number</h2>
    <input type="text" v-model.number="name2">----{{name2}}
    <h2>trim</h2>
    <input type="text" v-model.trim="name3">----{{name3}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name1: '',
            name2: '',
            name3: '',
        },
    })
</script>
</html>

Vue生命周期

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之后调用，data，el都有了
beforeUpdate	重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
updated	        重新渲染完成之后调用
beforeDestroy	销毁之前调用
destroyed	    销毁之后调用
// 钩子函数(hook) AOP的体现：面向切面编程(装饰器实现aop)

使用vm实例，只能看见前6个函数的执行，无法看见销毁；可以使用组件查看

<!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>
    <!--通过v-if销毁组件-->
    <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 = 'xxx'
            }
        },
        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
        },
    })
    var vm = new Vue({
        el: '#app',
        data: {show:true},
        methods: {
            handleShow(){this.show=!this.show}
        }
    })
</script>
</html>

学习生命周期重点掌握的
1. 组件向后端发送请求，获取数据，应该放在 created 写，此时data已经有数据了
2. destroyed做一些资源清理性的工作
什么场景下用定时任务？
1. 实时跟后端交互基于http+定时任务（websocket协议：服务端主动推送消息，手机app的消息推送）
2. 秒杀场景：先提交秒杀请求，每隔3s，查询是否秒到

与后端交互ajax

显示小案例

django:

from django.http import JsonResponse
from django import views
import json

class Test(views.View):
    def get(self, request):
        with open('./static/film.json', 'rb') as f:
            res = JsonResponse(json.load(f))
            res['Access-Control-Allow-Origin'] = '*'  # 为了解决跨域请求问题,需要在请求头中加入此属性
            return res

vue:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <!--    <button @click="submit">获取数据</button>-->
    <div v-for="film in filmsList">
        <p>{{film.name}}</p>
        <img :src="film.poster" alt="">
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            filmsList: []
        },
        methods: {
            submit() {
                $.ajax({
                    url: 'http://127.0.0.1:8000/',
                    type: 'get',
                    success: data => {
                        console.log(data)
                        this.films = data.data.films
                    }
                })
            }
        },
        // 使用axios
        // created() {
        //     axios.get('http://127.0.0.1:8000/').then(res => {
        //         this.filmsList = res.data.data.films
        //         console.log(res)
        //     })
        // }
    })
</script>
</html>