Vue指令

￡神魔★判官ぃ 2021-07-24 19:31 520阅读 0赞

# 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>
        
        
        
        
        
        
        
        
        <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">×</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>
                </div>
            </div>
    
            <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. 事件对象 ##

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

<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. 事件修饰符 ##

1.  概念：v-on指令提供了事件修饰符来处理DOM事件细节
2.  语法：@click.修饰符=‘fn()’
3.  常见的按键修饰符： .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. 计算属性 ###

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

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

1.  使用

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

或者：

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

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

### 什么时候使用watch ###

1.  当需要在数据变化时执行异步或开销较大的操作时，watch这个方式是最有用的。
2.  计算属性与侦听器的区别：
    
    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>