vue——按键修饰符、checkbox单选与多选、radio、v-model修饰符、vue生命周期、vue与后端交互

最新推荐文章于 2024-05-21 21:57:08 发布

山上有个车

最新推荐文章于 2024-05-21 21:57:08 发布

阅读量789

点赞数

分类专栏：前端 web框架文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/kdq18486588014/article/details/125642403

版权

web框架同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

前端

12 篇文章 0 订阅

订阅专栏

系列文章目录

文章目录

系列文章目录
一、按键修饰符
二、checkbox单选与多选
三、radio
四、v-model修饰符
五、vue生命周期
六、vue与后端交互

一、按键修饰符

@keydown 当用户按下键盘键时触发，如果按住不放的话，会重复触发此事件

@keyup 当用户按下键盘键当按键恢复时触发，如果按住不放的话，会重复触发此事件

@keypress 当用户释放键盘上的字符键时触发，对退格没有响应

触发顺序 keydown>keypress>keyup 在vue中只有keydown能够赶上数据双向绑定的刷新速度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>按下任意键触发<input type="text" v-model="mytext1" @keydown="pressbtn1" />输入：{{mytext1}}</p>
        <p>按下字符键触发<input type="text" v-model="mytext2" @keyup="pressbtn2" />输入：{{mytext2}}</p>
        <p>按下释放后触发<input type="text" v-model="mytext3" @keypress="pressbtn3" />输入：{{mytext3}}</p>
        <p><input type="text" v-model="mytext4" @keydown="pressbtn4" @keyup="pressbtn5" @keypress="pressbtn6">输入：{{mytext4}}</p>

    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data: {
                mytext1:'',
                mytext2:'',
                mytext3:'',
                mytext4:'',
            },
            methods:{
                pressbtn1(){
                    console.log(this.mytext1)
                },
                pressbtn2(){
                    console.log(this.mytext2)
                },
                pressbtn3(){
                    console.log(this.mytext3)
                },
                pressbtn4(){
                    console.log('keydown')
                },
                pressbtn5(){
                    console.log('keyup')
                },
                pressbtn6(){
                    console.log('keypress')
                },
            },
        })
    </script>
</body>
</html>

二、checkbox单选与多选

单选：
通过v-model来设置其对应的变量，value来对应选中后之前所对应变量的值

<input type="checkbox" @change="chooise_one();summation1()" v-model="lists" :value="commodity">

多选：
通过v-model来设置其对应的变量，value来对应选中后之前所对应变量的值，区别在于多选情况，多选的地方会将所有的value在变量中组装为一个数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <table>
        <thead>
            <tr>
                <th>商品名</th>
                <th>商品单价</th>
                <th>商品数量</th>
                <th>全选/全不选 <input type="checkbox" @change="chooise_all();summation1()" v-model="chooiseAll"></th>
            </tr>
        </thead>
        <tbody>
        <tr v-for="commodity in commoditys">
            <td>{{commodity.name}}</td>
            <td>{{commodity.price}}</td>
<!--            计算机把小数转换成二级制，会出现无限循环的情况。再把无限循环的二级制转化成十进制的时候，变成了一个无限循环的数字。-->
            <td><button @click="reduce_commdity(commodity)">-</button>{{commodity.number}}<button @click="commodity.number++;summation1()">+</button></td>
            <td><input type="checkbox" @change="chooise_one();summation1()" v-model="lists" :value="commodity"></td>
        </tr>
        </tbody>
    </table>
    <p>总计：{{sum}}￥</p>

</div>
<script>
    new Vue({
        el: '#app',
        data: {
            commoditys:[{
                    'name':'梨子',
                    'price':125.6,
                    'number':20,
                },
                {
                    'name':'苹果',
                    'price':25.6,
                    'number':10,
                },
                {
                    'name':'土豆',
                    'price':5.6,
                    'number':30,
                },
            ],
            lists:[],
            chooiseAll:'',
            sum:0,
        },
        methods: {
            chooise_all() {
                if (this.chooiseAll){
                    this.lists = this.commoditys
                } else {
                    this.lists = []
                }
            },
            chooise_one() {
                if (this.commoditys.length !== this.lists.length){
                    this.chooiseAll = false
                } else {
                    this.chooiseAll = true
                }
            },
            chooise_one() {
                this.chooiseAll = this.commoditys.length === this.lists.length;
            },
            summation1() {
                var sums = 0
                for(i=0;i<this.lists.length;i++){
                    sums += this.lists[i].price * this.lists[i].number
                }
                this.sum = sums
            },
            reduce_commdity(commodity) {
                var i = 0
                if (commodity.number <= 1){
                    alert('商品数不能小于1')
                } else {
                    commodity.number --
                }
            },
        },
    })
</script>
</body>
</html>

三、radio

针对于radio，每个选项共用一个变量，选择一个之后值会替换到变量中

<input type="radio" v-model="gender" value="1">男
    <input type="radio" v-model="gender" value="2">女
    <input type="radio" v-model="gender" value="0">未知

四、v-model修饰符

lazy修饰符，取代change事件
number修饰符，输入字符串转换为有效的数值型
trim修饰符，过滤字符串首尾的空格

<div id="app">
    <p>lazy修饰符，取代change事件<input type="text" v-model.lazy="text1">输入：{{text1}}</p>
    <p>number修饰符，输入字符串转换为有效的数值型<input type="text" v-model.number="text2">输入：{{typeof(text2)}}</p>
    <p>trim修饰符，过滤字符串首尾的空格<input type="text" v-model.trim="text3">输入：{{text3}}</p>
    <p><button @click="showApp1">显示app1组件</button></p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            text1:'',
            text2:'',
            text3:'',
            key:false,
        },
        methods: {
            showApp1(){
                this.key=!this.key
            }
        },
    })

五、vue生命周期

vue是组件化开发，每一个组件都是一个vue对象，每个vue对象有自己的生命周期，vue从创建到销毁的整个过程就是生命周期

vue生命周期钩子函数有8个，这八个生命周期钩子函数，都在不同的时间点触发。

钩子函数	触发时间点
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="app">
    <child v-if="key">
        <p>显示了app1</p>
    </child>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        },
    })
    Vue.component('Child', {
        template: `
        <p>显示了app1</p>
        `,
        data() {
            return {
               name: ''
            }
        },
        beforeCreate(){
            console.log('beforeCreate')
        },
        created(){
            console.log('create')
            this.times = setInterval(() => {
                console.log('触发定时器')
            },3000)
        },
        beforeMount(){
            console.log('beforeMount')
        },
        mounted(){
            console.log('mounted')
        },
        beforeUpdate(){
            console.log('beforeUpdate')
        },
        updated(){
            console.log('update')
        },
        beforeDestroy(){
            console.log('beforeDestroy')
        },
        destroyed(){
            clearInterval(this.times)
            console.log('destroy')
        },
    })
</script>
</body>
</html>

六、vue与后端交互

前端与后端通信的三种方法：
在与后端的通信中如果需要使用this也就是之前的vue对象中的内容需要用箭头函数来进行

第一种js原生的fetch

fetch(api接口地址).then(此处为response).then(此处为error)

第一种使用js原生的fetch与后端交互
	fetch('http://127.0.0.1:8000/api/v1/shopping/').then(data => data.json()).then(data => {
	    this.commoditys = data
	})
	fetch('http://127.0.0.1:8000/api/v1/shopping/').then(function (res){return res.json()})

第二种jQuery的ajax进行通信
$.ajax({
此处编写请求地址、类型、头、数据等，在回调函数中获取response
})

第一种使用jquery的ajax来获取后端数据
	$.ajax({
	    'url':'http://127.0.0.1:8000/api/v1/shopping/',
	    'type':'get',
	    success: data => {
	        this.commoditys = data
	    }
	})

第三种使用axios
axios.请求方式(地址,携带的数据,请求的配置).then(此为response).then(此为error)

axios.get('http://127.0.0.1:8000/api/v1/shopping/').then(data => {
                    console.log(data.data)
                    this.commoditys = data.data
                })