vue基础-CSDN博客

本文链接：https://blog.csdn.net/qq_64207331/article/details/126611129

本文详细介绍了 Vue.js 中的各种指令用法，包括 v-text、v-html、v-if、v-show、v-model、v-for 和 v-on 等，并探讨了计算属性 computed 与侦听属性 watch 的区别及应用场景。

摘要由CSDN通过智能技术生成

vue指令

v-指令

v-text 元素的InnerText属性,必须是双标签

v-html 元素的innerHTML

v-if 判断是否插入这个元素

v-else-if

v-else

v-show 隐藏元素如果确定要隐藏, 会给元素的style加上display:none

v-model 双向数据绑定

v-for 循环遍历

v-bind 动态绑定通常以：表示动态绑定

v-on 绑定事件通常以@符表示

备注：

vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
使用watch时根据数据的具体解构，决定是否采用深度监视

computed和watch区别

注意：

所有被vue管理的函数（methods，computed,watch函数），最好写成普通函数，这样this的指向才是vm或组件实例对象
所有不被Vue所管理的函数（定时器回调函数、ajax回调函数、Promise回调函数），写成箭头函数，这样this的指向才是vm或组件实例对象

@click.prevent 阻止默认事件
@click.stop 阻止冒泡
@click.once 只触发一次
@click.capture 在捕获阶段触发，而不是在冒泡阶段触发
@click.self 直接点击自己的时候触发（也可以用来阻止冒泡）
@click.passive 默认行为立即执行

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <div>名称：{{uname}}</div>
        <div>年龄：{{age}}</div>
        <button @click="myClick">点击</button>
        <!-- 阻止默认事件 -->
        <div>
            <a href="http://www.baidu.com" @click.prevent="myClick">百度</a>
        </div>
        <!-- 阻止冒泡 嵌套的形式才会有冒泡的发生-->
        <div @click="handleClick('outer')" class="outer">outer
            <div @click.stop="handleClick('inner')" class="inner">inner</div>
        </div>
    <!-- 阻止事件冒泡   只作用于点击的当前元素 -->
    <div @click.self="handleClick('outer')" class="outer">outer
        <div @click="handleClick('inner')" class="inner">inner</div>
    </div>
    </div>
</body>

</html>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            uname: "张三",
            age: 21
        },
        methods: {
            myClick(){
                console.log('大爷回来啦');
            },
            handleClick(e){
console.log(e);
            }
        },
    })

</script>
<style>
    .outer{
        width: 300px;
        height: 300px;
        background-color: chartreuse;
        margin-top: 20px;
    }
    .inner{
        width: 150px;
        height: 150px;
        background-color: burlywood;
    }
</style>

计算属性和侦听属性

计算属性 computed

侦听属性 watch

深度监视

vue中的watch默认不监测对象内部值的改变（一层）
配置deep:true，可以监测对象内部值的改变（多层）
computed能完成的，watch一定能完成
watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
通过computed计算属性完成的小案例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" placeholder="输入姓名" v-model="username">
        <button @click="flag=1">年龄升序</button>
        <button @click="flag=2">年龄降序</button>
        <button @click="flag=0">原顺序</button>
        <ul v-for="(item,index) in list" :key="key">
            <li>{{item.name}}-
                {{item.age}}-
                {{item.sex}}
            </li>
        </ul>
    </div>

</body>

</html>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            // 搜索框的关键词
            username: "",
            user: [
                {
                    name: "王林",
                    age: 27,
                    sex: "男"
                },
                {
                    name: "李树",
                    age: 21,
                    sex: "男"
                },
                {
                    name: "贺孝",
                    age: 23,
                    sex: "男"
                },
                {
                    name: "宁帅",
                    age: 25,
                    sex: "男"
                },
            ],
            // 标识
            flag: 0
        },
        // 计算属性依赖于属性的变化而变化
        computed: {
            // list是计算出来的
            list() {
                // 筛选
                var arr = this.user.filter(item => {
                    // 查找
                    return item.name.indexOf(this.username) !== -1
                })
        //  判断标识是1还是2
                if (this.flag) {
                    arr.sort((a, b) => {
                        return this.flag == 1 ? a.age - b.age : b.age - a.age
                    })
                }
                // 原顺序直接返回
                return arr
            }
        }
    })
</script>

通过watch监听实现的小案例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" placeholder="输入姓名" v-model="username">
        <button @click="flag=1">年龄升序</button>
        <button @click="flag=2">年龄降序</button>
        <button @click="flag=0">原顺序</button>
        <ul v-for="(item,index) in list" :key="key">
            <li>{{item.name}}-
                {{item.age}}-
                {{item.sex}}
            </li>
        </ul>
    </div>

</body>

</html>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            // 搜索框的关键词
            username: "",
            user: [
                {
                    name: "王林",
                    age: 27,
                    sex: "男"
                },
                {
                    name: "李树",
                    age: 21,
                    sex: "男"
                },
                {
                    name: "贺孝",
                    age: 23,
                    sex: "男"
                },
                {
                    name: "宁帅",
                    age: 25,
                    sex: "男"
                },
            ],
            // 标识
            flag: 0
        },
        // 计算属性依赖于属性的变化而变化
        computed: {
            // list是计算出来的
            list() {
                // 筛选
                var arr = this.user.filter(item => {
                    // 查找
                    return item.name.indexOf(this.username) !== -1
                })
        //  判断标识是1还是2
                if (this.flag) {
                    arr.sort((a, b) => {
                        return this.flag == 1 ? a.age - b.age : b.age - a.age
                    })
                }
                // 原顺序直接返回
                return arr
            }
        }
    })
</script>