首页 > 其他分享> > vue---事件处理之按键修饰符，表单控制之checkbox单选多选和radio，购物车，v-model进阶，vue生命周期和vue与后端交互

vue---事件处理之按键修饰符，表单控制之checkbox单选多选和radio，购物车，v-model进阶，vue生命周期和vue与后端交互

2022-06-28 21:03:39 作者：互联网

事件处理之按键修饰符

键盘有很多键，例如回车，esc....等。

按下或者抬起能够触发某个事件(函数执行)。

普通的使用：

<!--    body    -->
<input type="text" v-model="myText" @keydown="handleDown($event)">
<!--    script    -->
methods: {
            handleDown(event) {
                console.log(event.key)
            }}
<!--    可以通过event里的key获取到被按下的案件   -->

监控键用法：

<!--    body    --> 
<input type="text" v-model="myText" @keydown.enter="handleDown1()">
<!--    script    --> 
methods: {
		handleDown1() {
                console.log('enter被按了')
            }}
<!--    @keydown.enter选择监控的按键，也可以使用按键对应的数字    -->

表单控制之checkbox单选多选和radio

checkbox单选---使用布尔

<input type="text" placeholder="请输入用户名" v-model="username">
    <br>
    <input type="password" placeholder="请输入密码" v-model="password">
    <br>
    记住密码：<input type="checkbox" v-model="check_rem">
    {{check_rem}}  # data：{ check_rem: false } 可以根据是否选择返回布尔值

checkbox多选---使用数组

    爱好:
    <br>
    <input type="checkbox" v-model="check_many" value="1">喝酒
    <input type="checkbox" v-model="check_many" value="2">烫头
    <input type="checkbox" v-model="check_many" value="3">抽烟
    <input type="checkbox" v-model="check_many" value="4">睡觉
    <hr>
    {{check_many}}  # data：{check_many: []}  根据知否选择上给check_many里添加对应的value

radio---使用字符串

<input type="text" placeholder="请输入用户名" v-model="username">
    <br>
    <input type="password" placeholder="请输入密码" v-model="password">
    <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}}  # data:{gender:''} 根据选择的其中之一gender的值跟着选择的value变

购物车案例

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


</head>
<body>
<div id="app">
    <div class="row col-md-8 col-md-offset-2">
        <h1>购物车</h1>
        <div class="bs-example" data-example-id="hoverable-table">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>全选 <input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in dataList">
                    <th scope="row">{{item.name}}</th>
                    <td>{{item.price}}</td>
                    <td>
                        <button class="btn btn-group" @click="item.number++">+</button>
                        {{item.number}}
                        <button class="btn btn-group" @click="reduceNum(item)">-</button>
                    </td>
                    <td><input type="checkbox" v-model="check_many" :value="item" @change="handleOne"></td>
                </tr>

                </tbody>
            </table>
            总价：{{getPrice()}}
        </div>

    </div>

</div>

</body>
<script>
    new Vue({
        el: '#app',
        data: {
            dataList: [
                {name: '西游记', price: 99, number: 2},
                {name: '水浒传', price: 59, number: 1},
                {name: '三国演义', price: 89, number: 5},
                {name: '红楼梦', price: 63, number: 3},
            ],
            check_many: [],
            checkAll: false
        },
        methods: {
            getPrice() {
                let total = 0
                for (item of this.check_many) {
                    total += item.price * item.number
                }
                return total
            },
            handleCheckAll(){
                if(this.checkAll){
                    this.check_many=this.dataList
                }else {
                    this.check_many=[]
                }
            },
            handleOne(){
                this.checkAll = (this.check_many.length === this.dataList.length)
            },
             reduceNum(item){
                if(item.number<=1){
                    alert('至少一件')
                }else {
                    item.number--
                }
             }
        },
    })


</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">
    lazy的使用：<input type="text" v-model.lazy="myText">{{myText}}
    <br>
    number的使用：<input type="text" v-model.number="myText2">{{myText2}}
    <br>
    trim的使用：<input type="text" v-model.trim="myText3">{{myText3}}
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            myText: '',
            myText2: '',
            myText3: '',
        }
    })

</script>
</html>

vue生命周期

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

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

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

补充：AOP 面向切面编程；OOP 面向对象编程

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="handleShow">点我组件显示和消失</button>
    <Child v-if="show"></Child>

</div>

</body>
<script>
    // 创建一个组件
    Vue.component('Child', {
        template: `
          <div>
          <h1>{{ name }}</h1>
          <button @click="handleClick">点我看美女</button>
          </div>
        `,
        data() {
            return {
                name: 'lqz',
                t:'',
            }
        },
        methods: {
            handleClick() {
                alert('美女')
            }
        },
        beforeCreate(){
            console.log('beforeCreate')
        },
        created(){
            console.log('created')
            console.log('这个用的多，只要创建，data变量就初始化完成了，一般是从后端获取到的，在此处发送ajax请求')
            // 延迟任务，延迟几秒执行某个函数
            // setTimeout(()=>{
            //     alert('lqz is handsome')
            // },3000)

            // 定时任务，每个几秒，执行一次
            this.t=setInterval(()=>{
                console.log('3s结束了')
            },3000)
        },
        beforeMount(){
            console.log('beforeMount')
        },
        mounted(){
            console.log('mounted')
        },
        beforeUpdate(){
            console.log('beforeUpdate')
        },
        updated(){
            console.log('updated')
        },
        beforeDestroy(){
            console.log('beforeDestroy')
            console.log('可能会有，组件销毁，清理资源')
            clearInterval(this.t)
            this.t=null
        },
        destroyed(){
            console.log('destroyed')
        }

    })


    new Vue({
        el: '#app',
        data: {
            show: false,
        },
        methods:{
            handleShow(){
                this.show=!this.show
            }
        }
    })
</script>
</html>

vue与后端交互

向后端发送ajax请求，jq的ajax方法。

-方案一：jq的ajax----》在vue中不推荐
-方案二：js原始官方 fetch方法
-方案三：axios 第三方

// 方案一
 handleClick() {
                 // 发送ajax请求  使用jq的ajax
                 $.ajax({
                     'url': 'http://127.0.0.1:5000/index',
                     'type': 'get',
                     success: data => {
                         this.name = data.name
                         this.age = data.age
                     }
                 })
             }
// 方案二
handleClick() {
                 // 发送ajax请求--使用原始的fetch
                 fetch('http://127.0.0.1:5000/index').then(res => res.json()).then(res => {
                     console.log(res)
                     this.name = res.name
                     this.age = res.age
                 })
                 // 简写fetch('http://127.0.0.1:5000/index').then(function (res){return res.json()})
            // }
// 方案三
handleClick() {
                // 发送ajax请求--使用axios
                axios.get('http://127.0.0.1:5000/index').then(res => {
                    console.log(res.data)
                    this.name = res.data.name
                    this.age = res.data.age
                })
            }
        }
    })

标签：事件处理,vue,console,log,res,单选,data,check,name
来源： https://www.cnblogs.com/zaoan1207/p/16421079.html