Vue入门三（表单控制｜购物车单选多选案例｜V-model进阶使用｜Vue生命周期｜与后端交互）

最新推荐文章于 2024-05-11 17:09:17 发布

LoisMay

最新推荐文章于 2024-05-11 17:09:17 发布

阅读量1k

点赞数

分类专栏： Vue 文章标签： vue.js 交互前端 python vue生命周期

本文链接：https://blog.csdn.net/MeiJin_/article/details/127533520

版权

Vue 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

文章目录

一、表单控制
二、购物车案例
三、V-model进阶
四、Vue生命周期
五、与后端交互Ajax

一、表单控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./Js/vue.js"></script>
</head>
<body>
<div id="first">
    <h1>单选</h1>
    <input type="radio" v-model="radio" value="Boys">Boys
    <input type="radio" v-model="radio" value="Girls">Girls
    <input type="radio" v-model="radio" value="Gays">Gays
    <br><br> 选择性别是： {{radio}}
</div>

<div id="two">
    <h1>多选</h1>
    <input type="checkbox" v-model="many" value="篮球">篮球
    <input type="checkbox" v-model="many" value="足球">足球
    <input type="checkbox" v-model="many" value="台球">台球
    <input type="checkbox" v-model="many" value="擦边球">擦边球
    <br><br> 选择的球类是：{{many}}
</div>
</body>
<script>
    var vm = new Vue({
        el:'#first',
        data:{
            'radio': '',
        },
    })

    var vm1 = new Vue({
        el:'#two',
        data:{
            'many':[],
        },
    })
</script>
</html>

在这里插入图片描述

二、购物车案例

<!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="first">
    <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>
                            <td>商品名称</td>
                            <td>价格</td>
                            <td>数量</td>
                            <td>全选|全不选<input type="checkbox" v-model="checkAll" @change="checkChange"></td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="shop in shopList">
                            <td>{{shop.name}}</td>
                            <td>{{shop.price}}</td>
                            <td>
                                <span class="btn btn-sm link" @click="handlerDown(shop)">-</span>
                                {{shop.count}}
                                <span class="btn btn-sm link" @click="shop.count++">+</span>
                            </td>
                            <td><input type="checkbox" v-model="checkGroup"  :value="shop" @change="checkOne"></td>
                        </tr>
                    </tbody>
                </table>
                <br>已选商品：{{checkGroup}}
                <br>总价：{{countPrice()}}
            </div>
        </div>
    </div>
</div>
</body>

<script>
    new Vue({
        el: '#first',
        data:{
            shopList: [
               {name: 'Audi', price: '999', count: 1},
               {name: 'Porsche', price: '8673', count: 1},
               {name: 'BMW', price: '777', count: 1},
               {name: 'Mercedes-Benz', price: '22222', count: 1},
            ],
            checkGroup: [],
            checkAll: false,
        },
        methods:{
            countPrice(){
                var total = 0
                for (i of this.checkGroup){
                    total += i.price * i.count
                }
                return total
            },
            checkChange(){
                if(this.checkAll){
                    this.checkGroup = this.shopList
                } else{
                    this.checkGroup = []
                }
            },
            checkOne(){
                this.checkAll = this.checkGroup.length == this.shopList.length
            },

            handlerDown(shop){
                if (shop.count>1){
                    shop.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="first">
<h1>v-model进阶使用</h1>
    Lazy--:<input type="text" v-model.lazy="name1">  ----->>> {{name1}} <br>
    Number:<input type="text" v-model.number="name2">  ----->>> {{name2}} <br>
    Trim--:<input type="text" v-model.trim="name3">  ----->>> {{name3}} <br>
</div>
</body>
<script>
    new Vue({
        el:'#first',
        data:{
            name1: '',
            name2: '',
            name3: '',
        },
    })
</script>
</html>

在这里插入图片描述

四、Vue生命周期

按照官网理解的生命周期流程图
在这里插入图片描述
生命周期八大钩子

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

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./Js/vue.js"></script>
</head>
<body>
<div id="first">
    <h1>Vue生命周期</h1>
    <button @click="showModule">点我显示组件和消失</button>
    <hr>
    <child v-if="show"></child>
    <hr>
</div>
</body>
<script>
    Vue.component('child', {
        template: `
          <div>
          <button>后退<</button>
          {{title}}
          <button @click="goClick">前进</button>
          </div>`,
        data() {
            return {
                title: '生命周期',
                t: ''
            }
        },
        methods: {
            goClick() {
                this.title = '我是新的生命周期'
            }
        },
        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: '#first',
        data:{
            show: true,
        },
        methods:{
            showModule(){
                this.show = !this.show
            }
        }
    })
</script>
</html>

在这里插入图片描述

五、与后端交互Ajax

<!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="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<div id="first">
    <h1>Jquery的Ajax与后端交互</h1>
    <button @click="actionData">点击加载数据</button>
    <br>
    <p>名称：{{name}}</p>          <!--一般不会使用Jquery和Ajax发送请求  ⬇️ ⬇️ -->
    <p>年龄：{{age}}</p>


    <h1>JS的fetch与后端交互</h1>
    <button @click="actionData1">点击加载数据</button>
    <br>
    <p>名称：{{name}}</p>          <!--一般不会使用Jquery和Ajax发送请求  ⬇️ ⬇️ -->
    <p>年龄：{{age}}</p>


    <h1>axios与后端交互</h1>
    <button @click="actionData2">点击加载数据</button>
    <br>
    <p>名称：{{name}}</p>          <!--用的很少  ⬇️ ⬇️ -->
    <p>年龄：{{age}}</p>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#first',
        data: {
            name: '',
            age: '',
        },
        methods: {
            actionData(){
                $.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
                    }
                })
            },
            actionData1(){
                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
                })
            },
            actionData2(){
                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>

from flask import Flask, jsonify

app = Flask(__name__)


@app.route('/')
def index():
    res = jsonify({'name': 'Like', 'age': 20})
    # 处理跨区 在响应头中添加 Access-Control-Allow-Origin': '*'
    res.headers = {'Access-Control-Allow-Origin': '*'}
    return res


if __name__ == '__main__':
    app.run()