【Vue】Vue基础笔记

谁借莪１个温暖的怀抱￠ 2023-05-21 07:04 39阅读 0赞

### 目录 ###

*   *   *  1. 模板语法
         *  2. 计算属性、方法、侦听器
         *  3. 计算属性的setter和getter
         *  4. class与style绑定
         *  5. 条件渲染
         *  6. 列表渲染
         *  7. 事件处理

### 1. 模板语法 ###

*  插值表达式：用来渲染数据
 *  `v-text`：只能渲染数据
 *  `v-html`：可以渲染数据，也可以解析HTML代码
 *  `v-bind`：用来绑定数据和元素属性，可以简写为 `:`
 *  `v-on`：用来监听DOM事件，可以简写为 `@`

<div id="app">
        <div>差值表达式：{ { name}}</div>
        <div v-text="name"></div>
        <div v-html="<h1>'+name+'</h1>'"></div>
        <div v-bind:title="name"></div> //等同于 <div :title="name"></div>
        <a v-on:click="doSomething">监听 DOM 事件</a>
     
    </div>
    
    <script>
    var vm=new Vue({ 
        el:"#app",
        data:{ 
            name:"Vue"
        }
    });
    </script>

### 2. 计算属性、方法、侦听器 ###

*  Vue中的计算属性是基于它们的响应式依赖进行缓存的。当计算所需的变量值不发生改变时，数据重新渲染时不会再次进行计算，而是使用之前计算的结果进行渲染。只有当变量的值改变后，触发数据渲染时，计算属性才会被再次触发。
 *  数据渲染一次方法就执行一次，性能相对于计算属性较差
 *  下面示例中计算属性和侦听的效果是一样的，计算属性相对于`watch`侦听更加简洁
 *  当需要在数据变化时执行异步操作或者开销较大的操作时，侦听器就更为适用。

<div id="app">
        <div>{ { fullName1}}</div>
        <div>{ { fullName2()}}</div>
        <div>{ { fullName3}}</div>
    </div>
    <script>
    var vm=new Vue({ 
        el:"#app",
        data:{ 
            firstName:"hello",
            lastName:"world",
            fullName3:"hello world"
        },
        computed:{ 
            fullName1:function(){ 
                return this.firstName+" "+this.lastName;
            }
        },
        methods:{ 
            fullName2:function(){ 
                return this.firstName+" "+this.lastName;
            }
        },
        watch:{ 
            //监听 firstName 的变化
            firstName:function(){  
                this.fullName3=this.firstName+" "+this.lastName;
            },
            //监听 lastName 的变化
            lastName:function(){ 
                this.fullName3=this.firstName+" "+this.lastName;
            }
        }
    });
    </script>

### 3. 计算属性的setter和getter ###

计算属性默认只有 `getter`，不过在需要时你也可以提供一个 `setter`

*  当页面获取某个数据时，先会在`data`中查找，若找不到就会去计算属性找。在计算属性中获取数据会自动执行`get`方法
 *  当我们设置属性的属性值时，set方法就会执行，同时，会拿到这个设置的新的值

<div id='app'>
    　　{ { fullName}}
    </div>
    
    <script>
    　　var vm = new Vue({ 
    　　　　el:'#app',
    　　　　data:{ 
    　　　　　　firstName: 'hello',
    　　　　　　lastName: 'world'
    　　　　},
    　　　　computed:{ 
    　　　　　　fullName:{ 
    　　　　　　　　get:function(){ 
    　　　　　　　　　　return this.firstName +' '+ this.lastName
    　　　　　　　　},
    　　　　　　　　set:function(value){ 
    　　　　　　　　　　var arr = value.split(' ');
    　　　　　　　　　　this.firstName = arr[0];
    　　　　　　　　　　this.lastName = arr[1];
    　　　　　　　　}
    　　　　　　}
    　　　　}
    　　})
    </script>

### 4. class与style绑定 ###

操作元素的 class 列表和内联样式是数据绑定的一个常见需求，可以用 v-bind 处理它们：`v-bind:class`、`v-bind:style`  
**（1）绑定HTML class**

*  如果想根据条件切换列表中的`class`，可以使用三目方式来绑定
 *  当有多个属性时，我们可以用对象的方式来进行绑定，也可以绑定一个方法，在计算属性里来定义这个方法
 *  当多个class时，我们也可以使用数组写法

<div id="app">
         <div :class="isActive?'red':'green'">三目写法</div>
         <div :class="classobj">对象写法</div>
         <div :class="classarr">数组写法</div>
    </div>
    
    <script>
        var vm = new Vue({ 
          el: "#app",
          data: { 
            isActive: true,
            classobj: { 
              a: true,
              b: true
            },
            classarr: ["a", "b"]
          }
        })
    </script>

**（2）绑定内联样式**  
可以根据需要选择对象方式或数组方式来绑定样式

<div id="app">
       <div v-bind:style="styleObject1"> </div>
       <div v-bind:style="[styleObject1, styleObject2]"> </div>
    </div>
    
    <script>
        var vm = new Vue({ 
          el: "#app",
          data: { 
            styleObject1: { 
                  color: 'red',
                  fontSize: '18px'   //驼峰命名
            },
            styleObject2: { 
                  backgroundColor: 'green',
                  border: '1px solid #ccc'
            }
       }
    })
    </script>

### 5. 条件渲染 ###

**（1）v-if**

*  `v-if`指令用于条件性的渲染一块内容，只有当指令表达式返回truthy时才能被渲染
 *  如果想要切换多个元素，就把`v-if`添加到`<template>`是哪个，这是一个不可见的元素，渲染结果不会包含它。
 *  使用`v-else`充当`v-if`的`else`模块，使用`v-else-if`充当`v-if`的`else if`模块

**（2）v-show**

*  `v-show`根据条件选项展示元素的选项，带有`v-show`的元素始终会保留在DOM中，`v-show`只是简单的切换元素CSS的`display`

**（3）两者对比**

一般来说，`v-if` 有更高的切换开销，而 `v-show` 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 `v-show` 较好；如果在运行时条件很少改变，则使用 `v-if` 较好。

<div id="app">
        <div v-if="show">{ { message1}}</div>
        <div v-else>{ { message2}}</div>
        <div v-show="flag">{ { message1}}</div>
    </div>
    
    <div id="else">
        <div v-if="show=='a'">A</div>
        <div v-else-if="show=='b'">B</div>
        <div v-else>C</div>
    </div>
    
    <script>
    var vm=new Vue({ 
        el:"#app",
        data:{  
           message1:"hello world",
           message2："hello vue",
           show:false,
           flag:true
         }
    });
    var vue=new Vue({ 
        el:"#else",
        data:{ show:"a"}
    })
    </script>

**（4）用key管理可复用元素**

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做，除了使 Vue 变得非常快之外，还有一些有用的好处。例如，如果你允许用户在不同的登录方式之间切换:

<div id="app">
       <template v-if="loginType === 'username'">
          <label>Username</label>
          <input placeholder="Enter your username">
       </template>
    
       <template v-else>
          <label>Email</label>
          <input placeholder="Enter your email address">
       </template>
       
      <input type="button" @click="btn" value="切换"/>
    </div>
    
    <script>
      var vn=new Vue({ 
        el:".exp",
        data:{ 
          loginType:"username"
        },
        methods:{ 
          btn:function(){ 
            if(this.loginType==="username"){ 
              this.loginType="email"
            }else{ 
              this.loginType="username"
            }
          }
        }
      })
    </script>

上面的代码，因为两个模板使用了相同的元素，所有在切换登录方式后，不会清楚已经输入的内容，只能替`placeholder`的内容。我们可以使用key来标记`input`标签，添加唯一值的`key`属性：

<template v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username" key="username">
    </template>
    
    <template v-else>
        <label>Email</label>
        <input placeholder="Enter your email address" key="email">
    </template>

### 6. 列表渲染 ###

**（1）遍历数组**

*  用 `v-for` 指令基于一个数组来渲染一个列表。v-for 指令需要使用 `item in items` 形式的特殊语法，其中 `items` 是源数据数组，而 `item` 则是被迭代的数组元素的别名。
 *  还有可选的第二个参数，即当前项的索引

<div class="app1">
      <ul>
        <li v-for="item in items">{ { item.text}}</li>
      </ul>
    </div>
    <div class="app2">
      <ul>
        <li v-for="(item,index) in items">{ { index}}-{ { item.text}}</li>
      </ul>
    </div>
    
    <script> 
    var vue1=new Vue({ 
        el:"#app1",
        data:{ 
             items:[
                { text:"AAA"},
                { text:"BBB"},
                { text:"CCC"}
           ]
        }
    })
    var vue2=new Vue({ 
        el:"#app2",
        data:{ 
             items:[
                { text:"AAA"},
                { text:"BBB"},
                { text:"CCC"}
           ]
        }
    })
    </script>
    
    //渲染结果
    <div id="app1">
      <ul>
        <li>AAA</li>
        <li>BBB</li>
        <li>CCC</li>
      </ul>
    </div>
    
    <div id="app2">
      <ul>
        <li>0-AAA</li>
        <li>1-BBB</li>
        <li>2-CCC</li>
      </ul>
    </div>

**（2）遍历对象**

*  有两个可选的参数：第二个为键名，第三个为索引

<div id="app1">
      <ul>
        <li v-for="value in obj">{ { value}}</li>
      </ul>
    </div>
    
    <div id="app2">
      <ul>
        <li v-for="(value,key,index) in obj">{ { index+1}}-{ { key}}-{ { value}}</li>
      </ul>
    </div>
    
    <script>
      var vue1=new Vue({ 
        el:"#app1",
        data:{ 
          obj:{ 
            firstname:"hello",
            lastname:"world",
          }
        }
      });
       var vue2=new Vue({ 
        el:"#app2",
        data:{ 
          obj:{ 
            firstname:"hello",
            lastname:"world",
          }
        }
      })
    </script>
    // 渲染结果1
    // hello 
    // world
    // 渲染结果2
    //1-firstname-hello
    //2-lastname-world

**（3）数组更新**

*  数据变更

当调用数组的`push()、pop()、shift()、unshift()、splice()、sort()、reverse()`这些方法更新数据时，就会引发视图的更新。

Vue.items.push({  text: 'DDD' })

*  替换数组

当调用数组的`filter()、concat()` 和 `slice()`方法时，会替换原来的数组，返回一个新的数组。vue不会丢弃原来的DOM 而是用一个含有相同元素的数组替换原来的数组，实现高效操作。

*  数组更新检测

由于JavaScript的限制，以下两种情况修改数组时，vue无法监测到：  
1）当我们利用索引直接设置一个项时，例如： vue.items\[index\] = newValue  
2）当我们修改数组的长度时，例如： vue.items.length = newLength

我们可以使用以下方法来解决上述两个问题：

// 第一个问题
    Vue.set(app.items, index, newValue)   //方法一
    exp.items.splice(index, 1, newValue)  //方法二
    //第二个问题
    app.items.splice(newLength)

**（4）对象更新**

由于JavaScript的限制，Vue无法检测对象属性的添加或删除。我们可以使用以下方法来操作对象的属性：`Vue.set(object,key,value)`和`Vue.delete(object,key)`

Vue.set(app.obj,"age",20)       // 添加新属性
    Vue.delete(app.obj,"lastname")  // 删除已有属性

**（5）显示过滤/排序结果**  
我们不想改变原有数据，而是想返回过滤或排序后的结果，就可以创建一个计算属性来进行操作。

比如我们想让一个数组的偶数显示出来：

<div id="app">
      <ul>
        <li v-for="n in numbers">{ { n}}</li>
      </ul>
    </div>
    
    <script>
      var vue=new Vue({ 
        el:"#app",
        data:{ 
          num:[1,2,3,4,5,6,7,8,9,10]
        },
        computed:{ 
          numbers:function(){ 
            return this.num.filter(function(num){ 
              return num%2===0
            })
          }
        }
      })
    </script>

如果计算属性不适用（比如在嵌套`v-for`循环中），我们可以在方法中进行操作：

<div id="app">
      <ul>
        <li v-for="n in fn(num)">{ { n}}</li>
      </ul>
    </div>
    
    <script>
      var vue=new Vue({ 
        el:"#app",
        data:{ 
          num:[1,2,3,4,5,6,7,8,9,10]
        },
        methods:{ 
          fn:function(num){ 
            return num.filter(function(num){ 
              return num%2===0
            })
          }
        }
      })
    </script>

**（6）其他**

*  `v-for`使用值范围

v-for可以接受整数，这种情况下，它会把模板重复对应次数

<div>
      <span v-for="n in 10">{ {  n }} </span>
    </div>
    // 结果：1 2 3 4 5 6 7 8 9 10

*  在 `<template>` 上使用 `v-for`

和`v-if`类似，可以使用带有`v-for`的`template`来循环渲染一段元素：

### 7. 事件处理 ###

**（1）事件监听**

使用`v-on`指令监听DOM事件，并触发运行一些JavaScript代码：（`v-on`可以简写为`@`）

// 初始值为0，对其进行加1，减1 操作
    <div id="app">
        <button @click = "count++">加 1</button>
        <button @click = "count--">减 1</button>
        <p>{ { count}}</p>
    </div>
    
    <script>
    var vue = new Vue({ 
        el:'#app',
        data:{ 
          count:0
        }
    });
    </script>

**（2）事件处理方法**

*  当事件的处理逻辑比较复杂的时候，我们可以使用`v-on`绑定一个事件处理方法
 *  `event`是函数中的默认形参，代表原生的DOM事件，如果调用的函数有多个参数传入时，需要使用原生DOM事件，则通过 `$event` 作为实参传入，作用：用于监听 DOM 事件

1）无参数调用

<div id="app">
       <button @click = "greet">button</button>
    </div>
    <script>
    var vm = new Vue({ 
       el:'#app',
       data:{ 
         name:"hello world"
       },
       methods:{ 
         greet:function(event){ 
           console.log("out");
           if(event && this.name != ""){ 
    	      console.log(event.target.tagName); //输出结果： button
           }
         }
       }
    });
    </script>

2）有参数调用

*  在内联JavaScript语句中调用方法

<div id="app">
      <button @click = "say('hello vue')">say vue</button>
    </div>
    
    <script>
    var vm = new Vue({ 
      el:'#app',
      data:{ 
         name:"hello world"
      },
      methods:{ 
        say:function(message){ 
          console.log(message);
        }
      }
    });
    </script>

*  使用`$event`

```javascript
    <div id="app">
      <input type="submit" @click = "warn('Form cannot be submitted yet.', $event)">
    </div>
    
    <script>
    var vm = new Vue({ 
      el:'#app',
      data:{ 
        name:"hello world"
      },
      methods:{ 
        warn:function(message,event){  
          //可以访问原生的事件对象 
          if(event){ 
             event.preventDefault();
          }
          console.log(message);
        }
      }
    });
    </script>

**（3）事件修饰符**

*  事件修饰符的顺序很重要，会按照顺序执行
 *  不要把 `.passive` 和 `.prevent` 一起使用，因为 `.prevent` 将会被忽略，同时浏览器可能会弹出一个警告

// 阻止单击事件继续传播 
    <a v-on:click.stop="doThis"></a>
    
    // 提交事件不再重载页面 
    <form v-on:submit.prevent="onSubmit"></form>
    
    // 修饰符可以串联 
    <a v-on:click.stop.prevent="doThat"></a>
    
    // 只有修饰符 
    <form v-on:submit.prevent></form>
    
    // 添加事件监听器时使用事件捕获模式 
    // 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 
    <div v-on:click.capture="doThis">...</div>
    
    // 只当在 event.target 是当前元素自身时触发处理函数 
    // 即事件不是从内部元素触发的 
    <div v-on:click.self="doThat">...</div>
    
    // 点击事件将只会触发一次 
    <a v-on:click.once="doThis"></a>
    
    // 滚动事件的默认行为 (即滚动行为) 将会立即触发 
    // 而不会等待 `onScroll` 完成 
    // 这其中包含 `event.preventDefault()` 的情况 
    <div v-on:scroll.passive="onScroll">...</div>

**（4）按键修饰符**

// 只有在key是Enter时调用vm.submit()，enter是按键修饰符别名
    <input v-on:keyup.enter="submit">

*  其他按键修饰符别名：`.enter`、`.tab` 、`.delete`、`.esc`、`.space`、`.up`、`.down`、`.left`、`.right`
 *  我们也可以自定义按键修饰符别名

// 可以使用 `v-on:keyup.f1`
    Vue.config.keyCodes.f1 = 112

**（5）系统修饰符**  
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。  
`.ctrl`、`.alt`、`.shift`、`.meta`

// 同时按下 Alt + C 触发事件
    <input v-on:keyup.alt.67="clear">
    
    // 同时按下 Ctrl + Click 触发事件
    <div v-on:click.ctrl="doSomething">Do something</div>

**（6）`.exact` 修饰符**  
`.exact` 修饰符允许你控制由精确的系统修饰符组合触发的事件

// 即使 Alt 或 Shift 被一同按下时也会触发 
    <button v-on:click.ctrl="onClick">A</button>
    
    // 有且只有 Ctrl 被按下的时候才触发 
    <button v-on:click.ctrl.exact="onCtrlClick">A</button>
    
    // 没有任何系统修饰符被按下的时候才触发 
    <button v-on:click.exact="onClick">A</button>

**（7）鼠标按钮修饰符**  
`.left`、`.right`、`.middle`，这些修饰符会限制处理函数仅响应特定的鼠标按钮。