Vue 进阶语法-上篇

最新推荐文章于 2024-11-08 23:19:07 发布

在飞行-米龙

最新推荐文章于 2024-11-08 23:19:07 发布

阅读量415

点赞数 3

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_48183870/article/details/139024831

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

【10】修饰符

（1）事件修饰符

.stop和.self
- .stop 修饰符调用 event.stopPropagation()。它阻止了点击事件继续传播。
- .self 修饰符只会在事件在该元素本身（而不是子元素）触发时触发回调。
- 他们都可以阻止事件冒泡

<style>
    .outer {
        width: 100px;
        height: 100px;
        background-color: #40ef40;
    }

    .inner {
        width: 50px;
        height: 25px;
        background-color: #a14bf1;
    }
</style>
<body>
<div id="app">
    <h2>事件冒泡</h2>
    <div class="outer" @click='handleOuter'>
        <div class="inner" @click='handleInner'>子标签</div>
    </div>
    <hr>
    <h2>self阻止</h2>
    <div class="outer" @click.self='handleOuter'>
        <div class="inner" @click='handleInner'>子标签</div>
    </div>
    <hr>
    <h2>stop阻止</h2>
    <div class="outer" @click.self='handleOuter'>
        <div class="inner" @click.stop='handleInner'>子标签</div>
    </div>
</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            handleOuter(){
                console.log('outer被点击')
            },
            handleInner(){
                console.log('inner被点击')
            }
        }
    })
</script>

.prevent和.once
- .prevent 修饰符调用 event.preventDefault()。它阻止了元素的默认行为。例如，阻止表单提交或阻止点击链接的默认行为。可以阻止以后根据具体条件再次判断执行其他内容
- .once 修饰符确保事件处理器只触发一次。常用于抽奖上.。

<body>
<div id="app">
    <a href="https://www.baidu.com/" @click.prevent="handlePrevent">百度一下</a>
    <hr>
    <button @click.once="handleOnce">抽出大奖</button>
</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            handlePrevent() {
                location.href = 'https://www.sogou.com/'
            },
            handleOnce() {
                alert('再接再厉')
            }
        }
    })
</script>

（2）按键修饰符

Vue允许使用按键修饰符来监听特定的按键事件。例如，你可以监听 keyup 事件，并只在按下特定的键时触发回调。
键码对照表：键盘键值对照表 - 在线工具栏 (usetoolbar.com)
常用按键
- @keyup.enter：监听键盘上的 “Enter” 键（键码 13）。
- @keyup.esc：监听键盘上的 “Escape” 键（键码 27）。
- 除了这些，Vue.还支持很多其他的按键修饰符，例如 .left、.right、.up、.down、.space 等，用于监听箭头键、空格键等。

<body>
<div id="app">
    <label for="">搜索框
        <input v-model="inputText" type="text" @keyup.enter="handleEnter">
    </label>
</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            inputText:''
        },
        methods: {
            handleEnter() {
                console.log(this.inputText)
            },
        }
    })
</script>

【11】表单

（1）表单控制

Checkbox（复选框）

checkbox 通常用于表示一系列选项，用户可以选择一个或多个。checkbox 的值取决于你如何设置表单处理逻辑。
- 布尔值：如果你只关心用户是否选中了某个 checkbox，而不关心其具体的值，你可以简单地将选中状态映射为 true，未选中状态映射为 false。
- 数组：当用户可以选择多个 checkbox 时，通常会将选中的 checkbox 的值存储在一个数组中。这样，你可以知道用户选择了哪些选项。

Radio（单选按钮）

radio 通常用于表示一组互斥的选项，用户只能选择其中一个。
- 字符串：radio 的值通常是字符串类型，表示被选中的选项的值。在表单提交时，只会发送被选中的 radio 按钮的值。

<body>
<div id="app">
    <h2>后台管理登录(checkbox 布尔值)</h2>
    <p>用户名： <input type="text" v-model="username"></p>
    <p>密码： <input type="text" v-model="password"></p>
    <p>记住密码： <input type="checkbox" v-model="isRemember"></p>
    <br>
    <h2>详细信息收集(checkbox 数组)(radio 字符串)</h2>
    <p>兴趣爱好：
        篮球<input type="checkbox" v-model="hobbyArray" value="basketball">
        足球<input type="checkbox" v-model="hobbyArray" value="football">
        羽毛球<input type="checkbox" v-model="hobbyArray" value="badmintion">
    </p>
    <p>性别：
        男<input type="radio" v-model="gender" value="0">
        女<input type="radio" v-model="gender" value="1">
        保密<input type="radio" v-model="gender" value="2">
    </p>
    <button @click="handleSubmit">提交</button>

</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            username: '',
            password: '',
            isRemember: '',
            hobbyArray: [],
            gender: '',
        },
        methods: {
            handleSubmit() {
                console.log("checkbox 布尔值【isRemember】", this.isRemember)
                console.log("checkbox 数组【hobbyArray】", this.hobbyArray)
                console.log("radio 字符串【gender】", this.gender)
            }
        }
    })
</script>

（2）购物车案例

功能要求：全选、单选、单个商品增加减少、彻底删除单个商品、计算总价

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div id="app">
    <h1 class="text-center">购物车</h1>
    <table class="table table-striped">
        <thead>
        <tr>
            <td><input type="checkbox" v-model="selected" @change="selectAll"/>全选</td>
            <td>商品</td>
            <td>单价</td>
            <td>库存</td>
            <td>操作1</td>
            <td>操作2</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in goodsList" :key="index">
            <td>
                <input type="checkbox" v-model="checkboxList" :value="item" @change="checkSelect"/>
            </td>
            <td>{{ item.name }}</td>
            <td>{{ item.price }}</td>
            <td>{{ item.stock }}</td>
            <td>
                <button @click="subGoods(item)">-</button>
                {{ item.number }}
                <button @click="addGoods(item)">+</button>
            </td>
            <td>
                <button @click="delGoods(index,item)">删除</button>
            </td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td>总价: {{ totalPrice() }}</td>
        </tr>
        </tfoot>
    </table>
</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            selected: false,
            checkboxList: [],
            goodsList: [
                {id: 1, name: "铅笔", price: 10, number: 1, stock: 3},
                {id: 2, name: "鼠标", price: 20, number: 2, stock: 5},
                {id: 3, name: "键盘", price: 30, number: 1, stock: 6}
            ],
        },
        methods: {
            // 计算总价格
            totalPrice() {
                let price = 0
                this.goodsList.forEach(item => price += item.price * item.number)
                return price
            },
            // 单选按钮
            checkSelect() {
                if (this.checkboxList.length === this.goodsList.length) {
                    this.selected = true
                } else {
                    this.selected = false
                }
            },
            // 全选按钮
            selectAll() {
                if (this.selected) {
                    this.checkboxList = this.goodsList
                } else {
                    this.checkboxList = []
                }
            },
            // 减少商品
            subGoods(item) {
                if (item.number > 1) {
                    item.number--
                }
            },
            // 增加商品
            addGoods(item) {
                if (item.number < item.stock) {
                    item.number++
                }
            },
            // 删除商品
            delGoods(index, item) {
                this.goodsList.splice(index, 1)
            }
        }
    })
</script>

【12】vue和Ajax

（0）flask后端

flask发送一个简单的json数据，添加头部信息Access-Control-Allow-Origin解决简单的get请求跨域问题

from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/')
def index():
    res = jsonify({
        'code': 100,
        "msg": "成功",
        'userinfo': {"username": 'bruce', "age": 18}
    })
    res.headers['Access-Control-Allow-Origin'] = '*'
    return res

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

（1）jQuery的ajax

jQuery的Ajax功能是通过其核心方法$.ajax()实现的，它提供了丰富的选项和回调函数，用于配置和执行Ajax请求。
- 如果请求成功，success回调函数将被触发，并接收返回的数据作为参数。
- 如果请求失败，error回调函数将被触发，并接收关于错误的信息。

（2）内置fetch

Fetch是JavaScript的一个内置功能，用于执行网络请求
- Fetch API返回的Promise对象在请求成功时会触发第一个.then()方法，并将响应对象作为参数传递给该方
- 在.then()中，可以检查响应对象的ok属性来判断请求是否成功（状态码为200）。如果成功，可以使用.json()方法解析响应的JSON数据。

（3）第三方axios

axios是一个基于Promise的HTTP客户端，用于浏览器和node.js。
- 它具有简单易用的API，支持Promise，能够方便地处理请求结果。axios可以在浏览器端发送XMLHttpRequests请求，也可以在node.js端发送http请求。
- 安装axios后，可以在Vue项目中使用它发送HTTP请求。axios支持发送GET、POST等不同类型的请求，与后端进行数据交互。在处理请求结果时，可以通过.then()方法处理成功的响应，通过.catch()方法处理错误。

<body>
<div id="app">
    <h2>用户信息</h2>
    <p>username:{{username}}</p>
    <p>age:{{age}}</p>
    <button @click="handleGetInfo">获取数据</button>
</div>
</body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            username: "",
            age: "",
        },
        methods: {
            handleGetInfo() {
                // 第三方 axios
                axios.get("http://127.0.0.1:5000/")
                    .then(res => {
                        console.log(res);
                        this.username = res.data.userinfo.username
                        this.age = res.data.userinfo.age
                    })
                    .catch(error => {
                        console.log(error);
                    })


                // 内置fetch
                // fetch('http://127.0.0.1:5000/').then(response => response.json()).then(
                //     data => {
                //         console.log(data);
                //         this.username = data.userinfo.username
                //         this.age = data.userinfo.age
                //     });


                // jquery的ajax
                // $.ajax({
                //     url: 'http://127.0.0.1:5000/',
                //     method: 'get',
                //     success: (data) => {
                //         console.log(data)
                //         this.username = data.userinfo.username
                //         this.age = data.userinfo.age
                //     }
                // })
            }
        }
    })
</script>

【13】计算属性

（1）计算属性

计算属性是基于组件的响应式依赖进行计算的。它们只有在相关依赖发生变化时才会重新求值。
- 这使得计算属性在处理复杂逻辑或执行昂贵操作时非常高效
- 可以简单理解为python中的property装饰器，将方法伪装成了属性
计算属性与普通属性的对比
1. 计算逻辑：普通属性直接存储数据，而计算属性则根据其他属性或数据计算得出结果。
2. 依赖跟踪：计算属性会自动跟踪其依赖的响应式数据。当依赖的数据发生变化时，计算属性会重新计算。而普通属性则没有这种依赖跟踪机制。
3. 性能优化：由于计算属性具有缓存机制，只有当其依赖的数据发生变化时，它才会重新计算。这使得计算属性在处理复杂逻辑或执行昂贵操作时更加高效。
4. 使用场景：普通属性适用于存储简单的数据值，而计算属性则更适用于根据其他数据计算得出的结果，例如拼接字符串、计算总数等。

<body>
<div id="app">
    <p>username: <input type="text" v-model="username"></p>
    <p>用户名：{{bigName}}</p>


</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            username: "",
        },
        computed: {
            bigName() {
                return this.username.substring(0, 1).toUpperCase() + this.username.substring(1)
            }
        }
    })
</script>

（2）计算属性重写过滤案例

计算属性可以返回的是一个值也可以返回的是一个数组或对象
在这里用计算属性返回搜索的数据数组
代码解释
- newInfoArray 计算属性会基于当前的 inputText 值（空字符串）来过滤 infoArray 中的项。
- 由于空字符串是任何字符串的子串（即任何字符串都包含空字符串），所以 filter 函数会返回 infoArray 中的所有项，因此 newInfoArray 的初始值就是 infoArray 的全部内容。

<body>
<div id="app">
    <h2>过滤案例</h2>
    <label>输入框：
        <input @input="inputFunc" type="text" v-model="inputText">
    </label>
    <hr>
    <h2>信息列表</h2>
    <ul>
        <li v-for="(item,index) in newInfoArray" :key='index'>第【{{index + 1}}】条数据>>:{{item}}</li>
    </ul>

</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            inputText: "",
            infoArray: ["a", "ae", "eo", "aei", "ei", "aeiou"],
        },
        computed: {
            newInfoArray() {
                return this.infoArray.filter(item => item.indexOf(this.inputText) >= 0)
            }
        }
    })
</script>

【14】监听属性

监听属性允许开发者监听数据的变化并在数据发生变化时执行特定的操作。
- 这与计算属性有所不同，计算属性主要是根据依赖数据的变化进行数据的操作，而监听属性更侧重于检测某个数据变化后所执行的系列操作。
在watch选项中，你可以定义一个或多个监听器，每个监听器对应一个要监听的数据属性。当这个数据属性发生变化时，对应的监听器函数就会被调用。
- 监听器的定义采用键值对的形式，其中键是你要监听的数据属性的名称，值是一个函数或者一个包含处理逻辑的对象。当数据属性变化时，这个函数或对象中的方法会被调用，并传入新值和旧值作为参数。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<body>
<div id="app">

    <label for="">性别：
        男<input type="radio" v-model="gender" value="m">
        女<input type="radio" v-model="gender" value="f">
    </label>

</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            gender: "m",
        },
        watch: {
            gender(newValue, oldValue) {
                console.log(oldValue, '---->', newValue)
            }
        }
    })
</script>