Vue指令

程序员文章站 2022-05-16 18:34:29

...

Vue指令

1. watch监听

在vue中watch就是时时刻刻的监听绑定的这个data模型数据，当这个数据发生变化的时候，watch就会被触发，自动的执行其中的逻辑
代码：

<div id="demodiv">
    <input type="text" v-model="text">{{text}}
</div>

<script>
    new Vue({
        el:"#demodiv",
        data:{
            text:"这是watch测试"
        },
        methods: {
            
        },
        watch: {
            text(newval,oldval){
                console.log(newval+"-----"+oldval);
            }
        }
    })
</script>

案例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>

<body>
    <!-- 1.重置功能   点击之后清空输入框 -->
    <!-- 2.写一些模拟数据先把表格用模拟数据生成 -->
    <!-- 3.添加功能的完成 -->
    <!-- 4.设置当没有输入内容的时候添加不能点击 -->
    <!-- 5.设置好模态框 -->
    <!-- 6.删除功能 -->
    <!-- 6-1删除单个 当点击删除按钮的时候 把当前按钮这一行的下标传给一个变量 -->
    <!-- 6-2在模态框的删除按钮上添加一个点击事件 调用删除的函数并且 把delnum当成实参传入 -->
    <div id="demodiv">
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">删除</h4>
                    </div>
                    <div class="modal-body">
                        <p>亲^_^，您确定要删除吗？</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" @click="del(delnum)">删除</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <div class="container">
            <input type="text" class="form-control" placeholder="请输入用户名" v-model="inputa"><br>
            <input type="text" class="form-control" placeholder="请输入年龄" v-model="inputb"><br>
            <button type="button" class="btn btn-success" @click="add()" v-bind:disabled="bool">添加</button>
            <button type="button" class="btn btn-info" v-on:click="chongzhi()">重置</button>
            <h1>用户信息收集表</h1>
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>名字</th>
                        <th>年龄</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(v,i) in obj">
                        <td>{{i}}</td>
                        <td>{{v.name}}</td>
                        <td>{{v.age}}</td>
                        <td>
                            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal"
                                @click="delnum=i">删除</button>
                        </td>
                    </tr>
                    <tr v-if="obj.length>0">
                        <td colspan="4" align="right">
                            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" @click="delnum=-1">删除全部</button>
                        </td>
                    </tr>
                    <tr v-else>
                        <td colspan="4" align="center">
                            <span>暂无数据...</span>
                        </td>
                    </tr>
                </tbody>
            </table>

        </div>
    </div>
</body>

</html>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
    new Vue({
        el: "#demodiv",
        data: {
            inputa: "",
            inputb: "",
            obj: [{
                    name: "王大锤",
                    age: 23
                },
                {
                    name: "王大锤",
                    age: 23
                },
                {
                    name: "王大锤",
                    age: 23
                },
                {
                    name: "王大锤",
                    age: 23
                },
                {
                    name: "王大锤",
                    age: 23
                }
            ],
            bool: true,
            delnum:-2
        },
        methods: {
            chongzhi() {
                this.inputa = "";
                this.inputb = "";
            },
            add() {
                this.obj.push({
                    name: this.inputa,
                    age: this.inputb
                });
                this.inputa = "";
                this.inputb = "";
            },
            del(delnum) {
                console.log(delnum);
                if(delnum==-1){
                    this.obj=[];
                }else{
                    this.obj.splice(delnum,1);
                }
            }
        },
        watch: {
            //监听两个输入框的值
            inputa() {
                if (this.inputa != "" && this.inputb != "") {
                    this.bool = false;
                } else {
                    this.bool = true;
                }
            },
            inputb() {
                if (this.inputa != "" && this.inputb != "") {
                    this.bool = false;
                } else {
                    this.bool = true;
                }
            }
        }
    })
</script>

2. 事件对象

语法：
<div @click=‘fn($event)’>< /div>
在上述对象中，event为事件对象
作用：记录事件相关的信息

<div id="demodiv">
    <button @click="fun($event)">点我啊</button>
    <input type="text" @keydown="func($event)">
</div> 
<script>
    new Vue({
        el:"#demodiv",
        methods:{
            fun(e){
                console.log(e);
            },
            func(e){
                if(e.keyCode==65){
                    console.log("么么哒");
                }
            }
        }
    })
</script>

3. 事件修饰符

概念：v-on指令提供了事件修饰符来处理DOM事件细节
语法：@click.修饰符=‘fn()’
常见的按键修饰符： .up, .down, .ctrl, .enter, .space等等

1. prevent修饰符

阻止事件的默认行为(submit提交表单)

2. stop修饰符

阻止事件冒泡
注意: 修饰符可以串联使用
案例：

<div id="demodiv">
    <input type="text" v-on:keydown.down="fun()">
    <form action="http://www.baidu.com" method="GET">
        <input type="submit" value="提交" @click.prevent="funa()">
    </form>
    <div @click="funb()">
        哪吒之魔童转世
        <input type="button" value="购买" @click.stop="func()">
    </div>
</div>  
<script>
    new Vue({
        el:"#demodiv",
        data:{
            input:""
        },
        methods: {
            fun(){
                console.log("么么哒");
            },

            funa(){
                console.log("提交");
            }, 

            funb(){
                console.log("我是div");
            },

            func(){
                console.log("我是button");
            }
        }
    })
</script>

4. 计算属性

1. 为什么要用计算属性

板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护

<p>{{text.toUpperCase().substr(2,1)}}</p>

2. 计算属性

概念：
顾名思义，首先它是一种属性，其次它有“计算”这个特殊性质。每次取得它的值得时候，它并不像普通属性那样直接返回结果，而是经过一系列的计算之后再返回结果。同时只要在它的当中里引用了 data 中的某个属性，当这个属性发生变化时，计算属性仿佛可以嗅探到这个变化，并自动重新执行。
语法

computed: {
    需要返回的数据: function () {
        return 处理操作
    }
}

使用

//改造把数据转大写并且截取的例子
computed:{
    demoText:function(){
        return  this.text.toUpperCase().substr(2,1);
    }
}

或者：

methods:{
    textfun(){
        return this.text.toUpperCase().substr(2,2)
    }
}

那么计算属性和方法有什么区别呢？
- 计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
- 方法绑定数据只要被调用，方法将总会再次执行函数。
- 计算属性相对于方法在处理特定场合下节省资源性能
- watch：可以监听模型数据当模型数据改变的时候就会触发
- watch初始化的时候不会运行,只有数据被改变之后才会运行

什么时候使用watch

当需要在数据变化时执行异步或开销较大的操作时，watch这个方式是最有用的。
计算属性与侦听器的区别：
1. 当watch监听的值发生改变就会被调用，watch可以在数据变化时做一些异步处理或者开销大的操作
2. 计算属性是计算依赖的值，当依赖的值发生改变才会触发。
  案例:

<div id="demodiv">
    <p>{{fun()}}</p>
    <p>{{fun()}}</p>
    <p>{{fun()}}</p>
    <p>{{fun()}}</p>
    <p>{{fun()}}</p>
    <p>{{fun()}}</p>
    <h1>{{newtext}}</h1>
    <h1>{{newtext}}</h1>
    <h1>{{newtext}}</h1>
    <h1>{{newtext}}</h1>
    <h1>{{newtext}}</h1>
    <h1>{{newtext}}</h1>
</div>

<script>
    new Vue({
        el: "#demodiv",
        data: {
            text: "0123456789"
        },
        methods: {
            fun() {
                console.log("我是函数");
                return this.text.toUpperCase().substr(3, 1);
            }
        },
        // 计算属性
        computed: {
            newtext() {
                console.log("我是计算属性");
                return this.text.toUpperCase().substr(3, 1);
            }
        }
    })
</script>

Vue指令

Vue指令

1. watch监听

2. 事件对象

3. 事件修饰符

1. prevent修饰符

2. stop修饰符

4. 计算属性

1. 为什么要用计算属性

2. 计算属性

什么时候使用watch

C#编程实现向并口设备发送指令、获取并口设备的状态

详解关于Vue2.0路由开启keep-alive时需要注意的地方

vue自定义tap指令及tap事件的实现

解决vue attr取不到属性值的问题

vue2.0 + ele的循环表单及验证字段方法

vue中的计算属性实例详解

Vue中 key keep-alive的实现原理

vue动态设置img的src路径实例

vue添加axios,并且指定baseurl的方法

vue webpack开发访问后台接口全局配置的方法