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

表单控制

checkbox单选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div id="app">
    <h1>checkbox单选</h1>
    <br>
    <br>
    <input type="text" placeholder="请输入用户名" v-model="username">
    <br>
    <br>
    <input type="password" placeholder="请输入密码" v-model="password">
    <br>
    <br>
    记住密码：<input type="checkbox" v-model="remember">
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username:'',
            password:'',
            remember:false,
        },
        
    })
</script>
</body>
</html>

image

单选radio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div id="app">
    <h1>radio</h1>
    <br>
    <br>
    <input type="text" placeholder="请输入用户名" v-model="username">
    <br>
    <br>
    <input type="password" placeholder="请输入密码" v-model="password">
    <br>
    <br>
    <input type="radio" v-model="gender" value="1">男
    <input type="radio" v-model="gender" value="2">女
    <input type="radio" v-model="gender" value="0">未知
    <hr>
    您选择的性别是：{{gender}}
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username:'',
            password:'',
            gender:'',
        },
    })
</script>
</body>
</html>

image

多选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div id="app">
    <h1>checkbox多选</h1>
    <br>
    爱好：
    <br>
    <input type="checkbox" v-model="check_many" value='化妆'>化妆
    <input type="checkbox" v-model="check_many" value='逛街'>逛街
    <input type="checkbox" v-model="check_many" value='吃饭'>吃饭
    <input type="checkbox" v-model="check_many" value='旅游'>旅游
    <hr>
    {{check_many}}
    <hr>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            check_many:[],
        },

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

image

购物车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div id="app">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>基本购物车</h1>
            <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" :key="good.id">
                    <th>{{good.id}}</th>
                    <td>{{good.name}}</td>
                    <td>{{good.price}}</td>
                    <td>{{good.number}}</td>
                    <td><input type="checkbox" v-model="checkGroup" :value="good"></td>

                </tr>
                </tbody>
            </table>
            <hr>
            总价格是：{{getPrice()}}
            <hr>
            选中了：{{checkGroup}}
        </div>
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            goodList: [{id: 1, name: '小汽车', price: 89731, number: 1},
                {id: 2, name: '小火车', price: 33292, number: 4},
                {id: 3, name: '小飞机', price: 49184, number: 5},
                {id: 4, name: '小坦克', price: 29433, number: 2},
                {id: 5, name: '小轮船', price: 53224, number: 6},
                {id: 6, name: '小木筏', price: 48972, number: 4},],
            checkGroup: [],
        },
        methods: {
            getPrice() {
                var total = 0
                // 方式一：
                // for (i = 0; i < this.checkGroup.length; i++) {
                //     total += this.checkGroup[i].price * this.checkGroup[i].number
                // }
                // 方式二：
                // for (i in this.checkGroup){
                //     total += this.checkGroup[i].price * this.checkGroup[i].number
                // }
                // 方式三：
                this.checkGroup.forEach(function (value,index){
                    total+=value.price*value.number
                })
                return total

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

image

购物车全选与全不选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div id="app">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>基本购物车</h1>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>商品id号</th>
                    <th>商品名</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>全选/全不选<input type="checkbox" v-model="allChecked" @change="checkAll"></th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="good in goodList" :key="good.id">
                    <th>{{good.id}}</th>
                    <td>{{good.name}}</td>
                    <td>{{good.price}}</td>
                    <td>{{good.number}}</td>
                    <td><input type="checkbox" v-model="checkGroup" :value="good" @change="checkOne"></td>

                </tr>
                </tbody>
            </table>
            <hr>
            总价格是：{{getPrice()}}
            <hr>
            选中了：{{checkGroup}}
        </div>
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            goodList: [{id: 1, name: '小汽车', price: 89731, number: 1},
                {id: 2, name: '小火车', price: 33292, number: 4},
                {id: 3, name: '小飞机', price: 49184, number: 5},
                {id: 4, name: '小坦克', price: 29433, number: 2},
                {id: 5, name: '小轮船', price: 53224, number: 6},
                {id: 6, name: '小木筏', price: 48972, number: 4},],
            checkGroup: [],
            allChecked: false,
        },
        methods: {
            getPrice() {
                var total = 0
                // 方式一：
                // for (i = 0; i < this.checkGroup.length; i++) {
                //     total += this.checkGroup[i].price * this.checkGroup[i].number
                // }
                // 方式二：
                // for (i in this.checkGroup){
                //     total += this.checkGroup[i].price * this.checkGroup[i].number
                // }
                // 方式三：
                this.checkGroup.forEach(function (value,index){
                    total+=value.price*value.number
                })
                return total

            },
            checkAll(){
                if (this.checkGroup.length > 0){
                    this.checkGroup = []
                }else{
                    this.checkGroup = this.goodList
                }
            },
            checkOne(){
                this.allChecked = this.checkGroup.length === this.goodList.length;
            }
        }
    })
</script>
</body>
</html>

image

购物车商品数量加减操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div id="app">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>基本购物车</h1>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>商品id号</th>
                    <th>商品名</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>全选/全不选<input type="checkbox" v-model="allChecked" @change="checkAll"></th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="good in goodList" :key="good.id">
                    <th>{{good.id}}</th>
                    <td>{{good.name}}</td>
                    <td>{{good.price}}</td>

                    <td><button class="btn link btn-sm" @click="reduceNum(good)">-</button>{{good.number}}<button class="btn link btn-sm" @click="good.number++">+</button></td>
                    <td><input type="checkbox" v-model="checkGroup" :value="good" @change="checkOne"></td>

                </tr>
                </tbody>
            </table>
            <hr>
            总价格是：{{getPrice()}}
            <hr>
            选中了：{{checkGroup}}
        </div>
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            goodList: [{id: 1, name: '小汽车', price: 89731, number: 1},
                {id: 2, name: '小火车', price: 33292, number: 4},
                {id: 3, name: '小飞机', price: 49184, number: 5},
                {id: 4, name: '小坦克', price: 29433, number: 2},
                {id: 5, name: '小轮船', price: 53224, number: 6},
                {id: 6, name: '小木筏', price: 48972, number: 4},],
            checkGroup: [],
            allChecked: false,
        },
        methods: {
            getPrice() {
                var total = 0
                // 方式一：
                // for (i = 0; i < this.checkGroup.length; i++) {
                //     total += this.checkGroup[i].price * this.checkGroup[i].number
                // }
                // 方式二：
                // for (i in this.checkGroup){
                //     total += this.checkGroup[i].price * this.checkGroup[i].number
                // }
                // 方式三：
                this.checkGroup.forEach(function (value,index){
                    total+=value.price*value.number
                })
                return total

            },
            checkAll(){
                if (this.checkGroup.length > 0){
                    this.checkGroup = []
                }else{
                    this.checkGroup = this.goodList
                }
            },
            checkOne(){
                this.allChecked = this.checkGroup.length === this.goodList.length;
            },
            reduceNum(good) {
                if (good.number === 1) {
                    good.number = 1
                } else {
                    good.number--
                }
            }
        }
    })
</script>
</body>
</html>

image

v-model进阶

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div id="app">
    <h1>v-model</h1>
    <input type="text" v-model.lazy="name1">------{{name1}}
    <br>
    <br>
    <input type="text" v-model.number="name2">------{{name2}}
    <br>
    <br>
    <input type="text" v-model.trim="name3">------{{name3}}
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name1: '',
            name2: '',
            name3: ''
        },

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

image

vue生命周期

image

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	销毁之后调用

注意：vm实例：看不到它销毁 组件v

学习生命周期重点掌握的

1 组件向后端发送请求，获取数据，应该放在 created 写，此时data已经有数据了

2 destroyed做一些资源清理性的工作

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div id="app">
    <button @click="handleShow">点我组件显示和消失</button>
    <Child v-if="show"></Child>
</div>
<script>
    // 创建一个组件
    Vue.component('Child',{
        template: `
            <div id="app">
                <h1>{{name}}</h1>
                <button @click="handleClick">点我看美女</button>
            </div>
        `,
        data(){
            return{
                name:'所以我是超幸福的'
            }
        },
        methods:{
            handleClick(){
                alert('美女')
            }
        },
        beforeCreate() {
            console.log('beforeCreate')
        },

        created() {
            console.log('created')
        },
        beforeMount() {
            console.log('beforeMount')
        },
        mounted() {
            //用的最多，向后端加载数据，创建定时器等
            console.log("页面已被vue实例渲染, data, methods已更新");
            console.log('mounted')
            this.t = setInterval(function () {
                console.log('张小冉是最美的女生，不接受反驳！！')
            }, 3000)
        },
        beforeUpdate() {
            console.log('beforeUpdate')
        },
        updated() {
            console.log('updated')
        },
        beforeDestroy() {
            console.log('created')
        },
        destroyed() {
            //组件销毁，清理定时器
            clearInterval(this.t)
            this.t = null
            console.log('destoryed')
        },
    })
    var vm = new Vue({
        el: '#app',
        data: {
            show:true,
        },
        methods: {
            handleShow(){
                this.show=!this.show
            }
        }

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

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

# 什么场景下用定时任务？
1 实时跟后端交互  基于http+定时任务 （websocket协议：服务端主动推送消息，手机app的消息推送）

2 秒杀场景：先提交秒杀请求，每隔3s，查询是否秒到

image

vue与后端交互

jquery的Ajax与后端交互

view.py

from django.http import JsonResponse


# Create your views here.
def index(request):
    user_dict = {'name': 'zxr', 'age': 18}
    res = JsonResponse(user_dict)
    res["Access-Control-Allow-Origin"] = '*'
    return res

html.py

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="app">
    <button @click="handleClick">点我想后端发送请求，获取用户信息</button>
    <br>
    <br>
    用户名：{{ name }}
    <br>
    <br>
    年龄：{{ age }}
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            name: '',
            age: '',
        },
        methods: {
            handleClick() {
                // 发送ajax请求
                $.ajax({
                    'url': 'http://127.0.0.1:8000/index/',
                    'type': 'get',
                    success: data=>{
                        this.name = data.name
                        console.log(this.name)
                        this.age = data.age
                        console.log(this.age)
                    }
                })
            }
        }
    })
</script>
</body>
</html>

image

js原生的fetch与后端交互

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

            },

axios与后端交互

handleClick3() { // 用的很少
                axios.get('http://127.0.0.1:8000/index/').then(res => {
                    console.log(res.data)  // 后端真正的数据在res.data中
                    this.name = res.data.name
                    this.age = res.data.age
                })

            },

axios加载后端小案例

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in film_data">
            <h2>电影名字：{{ item.name }}</h2>
            <p>电影介绍：{{ item.synopsis }}</p>
            <img :src="item.poster" alt=""width="200px" height="300">
        </li>
    </ul>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            film_data:[]
        },
        created() {
            axios.get('http://127.0.0.1:8000/film/').then(res =>{
                this.film_data = res.data.data.films
            })
        }
    })
</script>
</body>
</html>

view.py

import json

from django.http import JsonResponse


# Create your views here.
def film(request):
    with open('./film.json', 'r', encoding='utf8') as f:
        res = json.load(f)
        res1 = JsonResponse(res)
        res1["Access-Control-Allow-Origin"] = '*'
        return res1

url.py

from django.contrib import admin
from django.urls import path

from app01 import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/', views.index),
    path('film/', views.film),
]

image

posted @ 2022-10-26 21:14  okkk!!!  阅读(107)  评论(0)    收藏  举报