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

2022-06-28 21:03:39 阅读：166 来源： 互联网

标签：事件处理 vue console log res 单选 data check name

事件处理之按键修饰符

键盘有很多键，例如回车，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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9