Chimengmeng
Chimengmeng

【二】Vue之基础

【一】条件渲染

指令 释义
v-if 相当于： if
v-else 相当于：else
v-else-if 相当于：else if
  • 在Vue中，条件渲染是一种根据特定条件决定是否显示或隐藏元素的方式。
  • Vue提供了v-if、v-else和v-else-if指令来实现条件渲染。

【1】v-if指令：

  • v-if指令用于根据表达式的真假值来决定是否渲染元素。

    • 如果表达式的值为真，则元素会被渲染到DOM中；
    • 如果值为假，则元素会从DOM中移除。

  • 示例代码：

Hello World
  • 在上述代码中
    • 当isShow为true时，
      元素会被渲染到DOM中
    • 否则不会。

【2】v-else指令：

  • v-else指令必须紧跟在带有v-if或者v-else-if指令的元素之后

    • 用于在前一个条件不满足时渲染该元素。

  • 示例代码：

Hello World


Goodbye World
  • 在上述代码中
    • 当isShow为true时，第一个
      元素会被渲染；
    • 当isShow为false时，第二个
      元素会被渲染。

【3】v-else-if指令：

  • v-else-if指令用于在多个条件之间进行切换。

    • 它必须跟在带有v-if指令或者另一个v-else-if指令的元素之后。

  • 示例代码：

Status A


Status B


Status C
  • 在上述代码中，根据不同的status值，会显示不同的提示信息。

【4】总结：

  • 通过v-if、v-else和v-else-if指令，在Vue中可以实现条件渲染，根据特定条件来决定是否显示或隐藏元素。
  • 这样可以根据不同的条件动态地展示不同的内容，使界面更加灵活和智能。

【5】案例




    
    if、else if、else
    




    
案例：if、else if、else

    
A

    
B

    
C

【二】Vue之基础_第1张图片

【二】列表渲染

【1】v-if+v-for+v-else控制购物车商品的显示

  • v-if、v-for和v-else是Vue中常用的指令，它们可以结合使用来实现复杂的条件渲染和循环列表操作。

(1)v-if指令：

  • v-if指令用于根据表达式的真假值来条件性地渲染元素或组件。
  • 当表达式为真时，渲染该元素或组件；当表达式为假时，将其从DOM中移除。
  • 可以搭配v-else指令一起使用来定义条件为假时要渲染的内容。

(2)v-for指令：

  • v-for指令用于对数组或对象进行循环遍历，生成相应的多个元素或组件。
  • 在使用v-for时，可以通过每项迭代的数据来动态地渲染元素或组件。
  • 通常结合:key属性一起使用，为每个循环项指定唯一的标识，以优化性能和避免渲染错误。

(3)v-else指令：

  • v-else指令用于与v-if结合使用，表示一个“否则”的块。
  • v-else元素必须紧跟在带有v-if或v-else-if的元素后面，作为其兄弟节点。

(4)小案例

  • 结合使用v-if、v-for和v-else可以实现更复杂的条件渲染和循环操作：

  

    // 渲染某个元素或组件
  

  

    // 渲染另一个元素或组件
  

  

    // 渲染其他元素或组件
  

  

    // 循环渲染数组中的元素或组件
  • 在上述代码中
    • 当满足condition1时，会渲染第一个div；
    • 当满足condition2时，会渲染第二个div；
    • 如果条件都不满足，则会渲染第三个div。
  • 同时，v-for指令会遍历数组items中的每个元素，并根据数组项生成相应的div，通过:key属性来优化循环渲染。
  • 总结：通过灵活运用v-if、v-for和v-else指令，我们可以实现复杂的条件渲染和列表操作，让Vue的模板更具动态性和适应性。

(5)控制购物车商品的显示案例




    
    v-if + v-for + v-else控制购物车商品的显示
    
    




    
我的购物车

    
    


    

        

            商品名称
            价格
        

        

            {{item.name}}
            {{item.price}}
        

    

    

        

            商品名称
            价格
        

        

            暂无信息
            暂无信息

【二】Vue之基础_第2张图片

【2】v-for遍历数组(列表)、对象(字典)、数字

  • v-for指令在Vue中可以用于遍历数组(列表)、对象(字典)以及数字，让我们逐个渲染它们的每个元素或属性。

(1)遍历数组(列表)：

  • 使用v-for指令遍历数组时，可以通过指定数组的名称和当前项的引用来动态生成多个元素或组件。
  • 例如：

  

    {{ item }}
  • 在上述代码中，array是一个数组，通过v-for="item in array"指定了当前项的引用为item，然后在
    元素中使用{{ item }}输出当前项的内容。

(2)遍历对象(字典)：

  • 使用v-for指令遍历对象时，可以通过指定对象的名称和键值对的引用来动态生成多个元素或组件。
  • 例如：

  

    {{ key }}: {{ value }}
  • 在上述代码中，object是一个对象，通过v-for="(value, key) in object"同时指定了键值对的引用，然后在
    元素中使用{{ key }}和{{ value }}分别输出键和值的内容。

(3)遍历数字：

  • 使用v-for指令遍历数字时，可以通过指定一个数字范围来动态生成多个元素或组件。
  • 例如：

  

    {{ num }}
  • 在上述代码中，v-for="num in 5"指定了从1到5的数字范围，然后在
    元素中使用{{ num }}输出当前数字。

(4)总结：

  • 通过使用v-for指令，我们可以轻松遍历数组(列表)、对象(字典)以及数字，并根据需要动态地生成对应的元素或组件。
  • 这为我们在Vue中处理动态数据提供了强大的能力。

(5)案例




    
    v-for遍历数组(列表)、对象(字典)
    
    





    
数组(列表)for循环遍历

    
    
        
  • {{index}} —— {{value}}
    • 
    


    
对象(字典)for循环遍历

    
    
        
  • {{key}} —— {{value}}
    • 
    


    
数组(列表)套对象(字典)for循环遍历

    

        

            姓名
            年龄
            性别
            国籍
        

        

            {{info.name}}
            {{info.age}}
            {{info.gender}}
            {{info.country}}

【二】Vue之基础_第3张图片

注意！在Vue中：

  • 数组的index和value是反的
  • 对象的key和value也是反的

【3】key值 的解释

vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度(虚拟DOM用了diff算法)

  • 在v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，属性值唯一

    • 页面更新之后，会加速DOM的替换(渲染)

  • :key="变量"

  • 在Vue中，key是用来标识节点的特殊属性。
    • 它主要用于帮助Vue识别和跟踪每个节点的身份，以便在进行列表渲染时能够高效地更新DOM。
  • 当使用v-for指令对数组或对象进行循环遍历时，Vue会创建一个虚拟DOM节点的列表。
    • 在进行列表更新时，Vue会通过比较新旧虚拟DOM节点的key值，来确定节点的变化情况并进行相应的更新操作。

(1)唯一标识：

  • 在进行列表渲染时，为每个节点添加唯一的key属性，用来标识该节点。这样Vue可以根据节点的key来准确判断哪些节点是新增、修改或删除的，提高页面的渲染效率和性能。

(2)列表动态添加元素：

  • 当在列表中动态添加元素时，Vue会根据每个节点的key值来定位要插入的位置，而不是直接将新元素添加到列表的末尾。
  • 如果不使用key属性，Vue无法正确追踪新元素的位置，导致插入错误的位置或者出现重复的元素。

(3)列表元素的顺序改变：

  • 在进行列表渲染时，如果改变了列表元素的顺序，而且没有提供key属性，Vue无法区分新旧节点的关系。
  • 使用了key属性后，Vue可以通过比较key的值来确定变动节点的位置和更新，避免不必要的DOM操作。

(4)优化DOM更新：

  • 当列表中的元素发生更改时，Vue会使用一种高效的算法(diff算法)来比较新旧节点的变化，只对真正发生变化的部分进行更新，提高页面渲染的速度和性能。

(5)综上所述

  • 使用key属性可以帮助Vue在进行列表渲染时高效地跟踪节点的变化，并进行准确的DOM更新，从而提高页面渲染的性能和用户体验。
  • 因此，在使用v-for循环渲染数组或对象时，建议为每个节点添加唯一的key属性。

【4】数组更新与检测

(1)可以检测到变动的数组操作：

[1]push：最后位置添加

  • 将元素添加到数组的末尾

  • push()方法是用于将一个或多个元素添加到数组的末尾。它返回修改后的数组的新长度。

  • 例如，array.push(item1, item2, ...)。

    • item1, item2, ...：要添加到数组末尾的一个或多个元素。

  • 示例：

    const array = [1, 2, 3];
const length = array.push(4, 5);
console.log(array); // [1, 2, 3, 4, 5]
console.log(length); // 5

  • 在上面的示例中

    • 我们使用push()方法向数组末尾添加了两个元素4和5。
    • 然后，我们通过const length = array.push(4, 5)将新数组的长度存储在length变量中，length的值为5。
    • 最终的数组为[1, 2, 3, 4, 5]。

  • 需要注意的是

    • push()方法会修改原始数组，并返回新数组的长度。
    • 这是一个常用的数组操作方法，特别适用于需要动态追加元素的情况，如在循环中添加数据或实现栈的功能。

  • 总结：

    • push()方法是用于将一个或多个元素添加到数组的末尾，它会修改原始数组并返回新数组的长度。
    • 这是一个常用的数组操作方法，在需要向数组末尾添加元素时非常有用。

[2]pop：最后位置删除

  • 从数组的末尾删除元素

  • pop()方法用于从数组的末尾删除一个元素，并返回被删除的元素。

  • 例如，array.pop()。

  • 示例：

    const array = [1, 2, 3, 4, 5];
const removedElement = array.pop();
console.log(array); // [1, 2, 3, 4]
console.log(removedElement); // 5

  • 在上面的示例中

    • 我们使用pop()方法从数组末尾删除了最后一个元素5。
    • 然后，我们将被删除的元素存储在removedElement变量中，removedElement的值为5。
    • 最终的数组为[1, 2, 3, 4]。

  • 需要注意的是

    • pop()方法会修改原始数组，并返回被删除的元素。
    • 这是一个常用的数组操作方法，特别适用于需要从数组末尾删除元素的情况，如实现栈的功能或者对数组进行动态调整。

  • 总结：

    • pop()方法用于从数组的末尾删除一个元素，并返回被删除的元素。
    • 它会修改原始数组。该方法常用于需要删除数组末尾元素的操作。

[3]shift：第一个位置删除

  • 删除数组的第一个元素

  • shift()方法用于删除数组的第一个元素，并返回被删除的元素。

  • 例如，array.shift()。

  • 示例：

const array = [1, 2, 3, 4, 5];
const removedElement = array.shift();
console.log(array); // [2, 3, 4, 5]
console.log(removedElement); // 1
  • 在上面的示例中
    • 我们使用shift()方法从数组的开头删除了第一个元素1。
    • 然后，我们将被删除的元素存储在removedElement变量中，removedElement的值为1。
    • 最终的数组为[2, 3, 4, 5]。
  • 需要注意的是
    • shift()方法会修改原始数组，并返回被删除的元素。
    • 这是一个常用的数组操作方法，特别适用于需要从数组开头删除元素的情况，如实现队列的功能或者对数组进行动态调整。
  • 总结：
    • shift()方法用于删除数组的第一个元素，并返回被删除的元素。
    • 它会修改原始数组。该方法常用于需要删除数组开头元素的操作。

[4]unshift：第一个位置添加

  • 将元素添加到数组的开头

  • unshift()方法用于将一个或多个元素添加到数组的开头，并返回修改后的数组的长度。

  • 例如，array.unshift(element1, element2, ...)。

  • 示例：

const array = [2, 3, 4, 5];
const newLength = array.unshift(1);
console.log(array); // [1, 2, 3, 4, 5]
console.log(newLength); // 5
  • 在上面的示例中
    • 我们使用unshift()方法将元素1添加到数组的开头。
    • 然后，我们打印修改后的数组[1, 2, 3, 4, 5]，以及unshift()方法返回的新数组长度5。
  • 需要注意的是
    • unshift()方法会修改原始数组，并返回修改后的数组的新长度。
    • 可以通过添加多个参数来一次性添加多个元素到数组的开头。
  • 总结：
    • unshift()方法用于将一个或多个元素添加到数组的开头，并返回修改后的数组的长度。
    • 它会修改原始数组。该方法常用于需要向数组头部添加元素的操作。

[5]]splice：从数组中添加或删除元素(切片效果)

  • splice()是一个可以在数组中添加或删除元素的方法。

    • 它接受三个参数：
      • 起始索引
      • 删除的元素个数
      • 可选的要插入的新元素。

  • 例如，array.splice(start, deleteCount, item1, item2, ...)。

    • start：

      • 指定要修改的起始索引位置。

    • deleteCount：

      • 指定要删除的元素个数。

    • item1, item2, ...：

      • 可选参数，在 start 位置插入的新元素。

  • splice() 可以实现切片效果，通过指定起始索引和删除的元素个数可以从数组中获取一部分子数组。

  • 示例：

const array = [1, 2, 3, 4, 5];

// 删除第2位开始的两个元素，并插入新元素
const removed = array.splice(1, 2, 'a', 'b');
console.log(array); // [1, 'a', 'b', 4, 5]
console.log(removed); // [2, 3]
  • 在上面的示例中，splice() 方法首先删除了从索引 1 开始的两个元素(即数字2和3)，然后插入了两个新元素(即字符'a'和'b')。
    • 最终的数组为 [1, 'a', 'b', 4, 5]。
  • 需要注意的是，splice()方法会修改原始数组，并且它还可以通过返回一个被删除子数组的方式提供反馈信息。
    • 在示例中，我们通过const removed = array.splice(1, 2, 'a', 'b')将被删除的元素存储在 removed 数组中，它的值为 [2, 3]。这样，我们可以在需要时使用这些被删除的元素。
  • 总结：
    • splice()方法可以在数组中进行切片操作，通过指定起始索引和删除的元素个数，我们可以删除并插入新的元素。
    • 这是一个常用的数组操作方法，在Vue中也能被检测到变动。

[6]sort：排序

  • 对数组进行排序

  • sort()方法用于对数组中的元素进行排序，默认是按照字符编码的顺序进行排序。

    • 如果想要按照其他方式进行排序，可以提供一个比较函数作为参数。

  • 例如，array.sort(compareFunction)。

  • 比较函数是可选的，用于指定排序规则。

    • 它需要接受两个参数，表示要进行比较的两个元素。
    • 比较函数应该返回一个负数、零或正数，分别表示第一个参数小于、等于或大于第二个参数。
    • 根据返回值，sort()方法会决定元素的顺序。

  • 示例：

const array = [3, 1, 4, 2, 5];
array.sort();
console.log(array); // [1, 2, 3, 4, 5]
  • 在上面的示例中
    • 我们对数组进行了排序，默认按照字符编码的顺序进行排序。
    • 因此，最终的结果是数组的元素从小到大排列。
  • 如果希望按照其他顺序进行排序
    • 可以使用比较函数。
    • 比如，按照数字大小进行排序：
const array = [3, 1, 4, 2, 5];
array.sort((a, b) => a - b);
console.log(array); // [1, 2, 3, 4, 5]

  • 在上面的示例中，我们提供了一个比较函数(a, b) => a - b，该函数将数组元素从小到大排序。

  • 总结：

    • sort()方法可以用于对数组进行排序，默认按照字符编码的顺序进行排序。
    • 可以通过提供一个比较函数来指定排序规则，自定义排序方式。注意，sort()方法会修改原始数组。

[7]reverse：反转

  • 倒转数组的顺序

  • reverse()方法用于反转数组中元素的顺序，将数组中的第一个元素变为最后一个，最后一个元素变为第一个，依此类推。

  • 例如，array.reverse()。

  • 这个方法会修改原始数组，不会创建新的反转数组。

  • 示例：

const array = [1, 2, 3, 4, 5];
array.reverse();
console.log(array); // [5, 4, 3, 2, 1]
  • 在上面的示例中
    • 我们调用了reverse()方法来反转数组的顺序。
    • 最终的结果是数组中的元素被倒转，第一个元素成为了最后一个元素，最后一个元素成为了第一个元素。
  • 注意
    • reverse()方法会修改原始数组，而不是创建一个新的反转后的数组。
    • 如果想要保留原始数组并创建一个新数组，可以使用Array.from()方法或者扩展运算符。
const array = [1, 2, 3, 4, 5];
const reversedArray = Array.from(array).reverse();
console.log(reversedArray); // [5, 4, 3, 2, 1]
console.log(array); // [1, 2, 3, 4, 5]
  • 或者使用扩展运算符：
const array = [1, 2, 3, 4, 5];
const reversedArray = [...array].reverse();
console.log(reversedArray); // [5, 4, 3, 2, 1]
console.log(array); // [1, 2, 3, 4, 5]
  • 总结：
    • reverse()方法可以用于倒转数组的顺序，将数组中的元素反转过来。
    • 注意，这个方法会修改原始数组，而不是创建一个新的反转后的数组。

(2)检测不到变动的数组操作：

[1]filter()：过滤

  • 返回符合条件的元素组成的新数组

  • filter()方法用于创建一个新的数组，其中包含满足指定条件的所有元素。

  • 该方法接受一个回调函数作为参数，并对数组中的每个元素调用该回调函数。

    • 回调函数应返回一个布尔值，表示该元素是否应包含在过滤后的数组中。
      • 如果回调函数返回 true，则该元素将被包含在新数组中
      • 如果返回 false，则将被排除在外。

  • 示例：

const array = [1, 2, 3, 4, 5];
const filteredArray = array.filter(element => element > 2);
console.log(filteredArray); // [3, 4, 5]

  • 在上面的示例中

    • 我们使用 filter() 方法过滤了数组 array。
    • 回调函数 (element => element > 2) 的作用是判断元素是否大于 2。
    • 返回值为 true 则表示元素大于 2，将被包含在新数组 filteredArray 中。
    • 最终得到的 filteredArray 为 [3, 4, 5]，只包含大于 2 的元素。

  • 需要注意的是，filter() 方法不会修改原始数组，而是返回一个新的过滤后的数组。

  • 如果需要进一步操作过滤后的数组，可以链式调用其他数组方法。

const array = [1, 2, 3, 4, 5];
const filteredArray = array.filter(element => element > 2).map(element => element * 2);
console.log(filteredArray); // [6, 8, 10]
  • 在上面的示例中
    • 我们首先使用 filter() 方法过滤出大于 2 的元素
    • 然后使用 map() 方法对过滤后的数组中的每个元素进行乘以 2 的操作。
    • 最终得到的结果为 [6, 8, 10]。
  • 总结：
    • filter() 方法可以用于创建一个新的数组，其中包含满足指定条件的所有元素。
    • 该方法不会修改原始数组，而是返回一个新的过滤后的数组。

[2]concat()：追加另一个数组

  • 将多个数组合并为一个新数组

  • concat() 方法用于将多个数组或值合并成一个新数组。

  • 该方法可以接受任意数量的参数，每个参数可以是一个数组或一个值。

    • 它会按照参数的顺序依次将它们合并到一个新数组中。

  • 示例：

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [7, 8, 9];

const newArray = array1.concat(array2, array3);
console.log(newArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
  • 在上面的示例中
    • 我们首先创建了三个数组 array1、array2 和 array3。
    • 然后，通过调用 array1 的 concat() 方法，并传入 array2 和 array3 作为参数，将这三个数组合并成一个新数组 newArray。
    • 最终得到的 newArray 为 [1, 2, 3, 4, 5, 6, 7, 8, 9]。
  • 需要注意的是
    • concat() 方法不会修改原始数组，而是返回一个新的合并后的数组。
    • 如果参数是数组，则会将该数组中的元素依次添加到新数组的末尾；
    • 如果参数是值，则将该值添加到新数组的末尾。
  • 除了数组和值，concat() 方法还可以接受其他类型的参数，如字符串、对象等。
const array = [1, 2, 3];
const str = 'Hello';
const obj = { name: 'John', age: 25 };

const newArray = array.concat(str, obj);
console.log(newArray);
// [1, 2, 3, 'Hello', { name: 'John', age: 25 }]
  • 在上面的示例中
    • 我们将字符串 'Hello' 和对象 { name: 'John', age: 25 } 作为参数传入 concat() 方法。
    • 最终得到的 newArray 包含了数组 array 的元素、字符串 'Hello' 和对象 { name: 'John', age: 25 }。
  • 总结：
    • concat() 方法用于将多个数组或值合并成一个新数组。
    • 它不会修改原始数组，而是返回一个新的合并后的数组。

[3]slice()：

  • 返回指定索引范围内的元素组成的新数组

  • slice() 方法用于返回一个新数组，其中包含从原始数组中指定索引范围内的元素。

  • 该方法可以接受两个参数

    • 分别表示起始索引和结束索引(不包括结束索引对应的元素)。
    • 如果省略第二个参数，则 slice() 方法会一直截取到原始数组的末尾。

  • 示例：

const array = [1, 2, 3, 4, 5];

const newArray = array.slice(1, 4);
console.log(newArray); // [2, 3, 4]
  • 在上面的示例中，我们首先创建了一个数组 array。
    • 然后，通过调用 array 的 slice() 方法，并传入起始索引 1 和结束索引 4 作为参数，创建了一个新数组 newArray。
    • 最终得到的 newArray 包含了索引 1 到索引 3(不包括索引 4 对应的元素)之间的元素 [2, 3, 4]。
  • 需要注意的是，slice() 方法不会修改原始数组，而是返回一个新的数组。
    • 如果省略起始索引，则默认为 0，即从原始数组的开头截取；
    • 如果省略结束索引，则默认为原始数组的长度，即截取到原始数组的末尾。
  • 除了正整数索引外，slice() 方法还支持使用负值索引的方式来截取数组。
    • 负值索引表示从数组的末尾开始计算，例如 -1 表示最后一个元素，-2 表示倒数第二个元素，依此类推。
const array = [1, 2, 3, 4, 5];

const newArray = array.slice(-3, -1);
console.log(newArray); // [3, 4]
  • 在上面的示例中
    • 我们使用负值索引来截取数组。
    • 通过 slice() 方法，我们得到了索引 -3 到索引 -2(不包括索引 -1 对应的元素)之间的元素 [3, 4]。
  • 总结：
    • slice() 方法用于返回一个新数组，其中包含从原始数组中指定索引范围内的元素。
    • 它不会修改原始数组，而是返回一个新的数组。
    • 如果省略第二个参数，则截取到原始数组的末尾。
    • 该方法还支持使用负值索引来截取数组。

[4]map()：

  • 通过对数组中的每个元素执行函数操作，生成一个新数组

  • map() 方法是 JavaScript 数组的一个高阶函数，它通过对数组中的每个元素执行指定的函数操作，生成一个新的数组。

  • map() 方法需要传入一个函数作为参数，这个函数将被依次应用到原始数组的每个元素上。

    • 在函数中，我们可以对元素进行一些操作，并返回一个处理后的值。
    • map() 方法会将每个函数的返回值按照原始数组的顺序存储到一个新的数组中，最终返回这个新的数组。

  • 示例：

const array = [1, 2, 3, 4, 5];

const newArray = array.map((element) => {
  return element * 2;
});

console.log(newArray); // [2, 4, 6, 8, 10]
  • 在上面的示例中
    • 我们首先创建了一个数组 array。然后，通过调用 array 的 map() 方法，并传入一个函数 (element) => { return element * 2; } 作为参数，对数组中的每个元素进行乘以 2 的操作。
    • map() 方法会将每个元素乘以 2 的结果存储到一个新的数组 newArray 中，并返回这个新的数组。
    • 最终得到的 newArray 为 [2, 4, 6, 8, 10]，即原始数组中的每个元素乘以 2 后的结果。
  • map() 方法还有一个可选的第二个参数，用于指定在函数中执行操作时的 this 上下文。
    • 如果省略该参数，则默认为 undefined。
const array = [1, 2, 3, 4, 5];

const context = {
  multiplier: 3,
};

const newArray = array.map(function(element) {
  return element * this.multiplier;
}, context);

console.log(newArray); // [3, 6, 9, 12, 15]
  • 在上面的示例中
    • 我们通过传入第二个参数 context 来指定函数中的 this 上下文对象。
    • 在函数中，我们可以通过 this.multiplier 访问到 context 对象中的属性值，并将元素与 multiplier 相乘。
    • 最终得到的 newArray 为 [3, 6, 9, 12, 15]。
  • 总结：
    • map() 方法通过对数组中的每个元素执行函数操作，生成一个新的数组。
    • 它将原始数组的每个元素传入指定的函数中，并将每个函数的返回值按照原始数组的顺序存储到一个新的数组中并返回。
    • 可以通过传入第二个参数来指定函数执行时的 this 上下文。

(3)原因：

作者重写了相关方法(只重写了一部分方法，但是还有另一部分没有重写)

  • 这些操作之所以无法被Vue检测到变动，是因为Vue只重写了部分数组方法来实现响应式。
  • 因此，在执行这些操作时，虽然数据会发生改变，但视图不会自动更新。

(4)解决方法：

  • 通过直接修改数组的索引值来更新数组。
    • 例如，vm.arrayList[0] = 'Darker'。
    • 这样可以更新数组的值，但视图不会自动更新。
  • 使用Vue.set(对象, index/key, value)方法来更新数组。
    • 例如，Vue.set(vm.arrayList, 0, 'Darker')。
    • 通过这种方式修改数组，Vue可以检测到变动并更新对应的视图。
// 方法1：通过 索引值 更新数组(数据会更新，但是页面不会发生改变)
vm.arrayList[0]
"Alan"
vm.arrayList[0]='Darker'
"Darker"

// 方法2：通过 Vue.set(对象, index/key, value) 更新数组(数据会更新，页面也会发生改变)
Vue.set(vm.arrayList, 0, 'Darker')

【三】事件处理

【1】详解

事件 释义
input 当输入框进行输入的时候 触发的事件
change 当元素的值发生改变时 触发的事件
blur 当输入框失去焦点的时候 触发的事件

change 和 blur 最本质的区别：

  • 如果输入框为空，失去焦点后，change不会触发，但是blur会触发

(1)input 事件：当输入框进行输入时触发的事件。

  • 含义：input 事件是在用户对输入框进行输入(包括键盘输入和粘贴操作)时触发的。它可以实时地监听输入框的变化，并且在每次输入时都会触发。
  • 使用场景：input 事件通常被用于实时校验用户的输入或者对输入内容进行实时的反馈或处理。比如，当用户在搜索框中输入关键词时，页面可以根据输入的内容实时展示搜索结果。又或者在密码输入框中，可以使用 input 事件监听输入内容的合法性，比如实时检测密码强度等。

(2)change 事件：当元素的值发生改变时触发的事件。

  • 含义：change 事件是在元素的值经过用户交互或脚本操作而发生改变时触发的。通常，在用户停止更改元素值时(比如鼠标点击其他地方或按下回车键)才会触发该事件。
  • 使用场景：change 事件适用于需要监听元素值变化并进行相应处理的场景。例如，当用户选择下拉选项、勾选复选框或单选按钮时，可以通过 change 事件来捕捉并触发相应的逻辑，比如更新页面内容、提交表单等。

(3)blur 事件：当输入框失去焦点时触发的事件。

  • 含义：blur 事件是在输入框(或其他可获取焦点的元素)被用户操作后且失去焦点时触发的。焦点失去可以由用户点击其他区域、按下 Tab 键或在移动设备上点击其他部分等方式来实现。
  • 使用场景：blur 事件常用于验证用户输入或进行输入数据的收集和处理。例如，在一个表单中，当用户填写完一个输入框后离开焦点时，可以使用 blur 事件对输入内容进行验证，并给出相应的提示或错误信息。另外，在一些网页应用中，当用户在输入框中输入特定内容后离开焦点时，可以触发自动保存操作。

(4)总结：

  • 通过 input、change 和 blur 这三个事件，我们可以根据用户的输入状态和元素值的变化情况来实现实时检验、实时反馈和处理用户输入内容等操作。
  • 这些事件可以提供更好的用户体验和交互效果。

【2】过滤案例




    
    过滤案例
    




    



    
    
        
  • {{data}}
    •

【二】Vue之基础_第4张图片

【3】事件修饰符

事件修饰符 释义
.stop 只处理自己的事件，父控件冒泡的事件不处理(阻止事件冒泡)
.self 只处理自己的事件，子控件冒泡的事件不处理
.prevent 阻止a链接的跳转
.once 事件只会触发一次(适用于抽奖页面)

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生

  • 用 v-on:click.prevent.self 会阻止所有的点击
  • 而 v-on:click.self.prevent 只会阻止对元素自身的点击

(1).stop: 只处理自己的事件，父控件冒泡的事件不处理(阻止事件冒泡)。

  • 含义：.stop 修饰符用于阻止事件冒泡，即在事件触发后，阻止其向上级元素传递和触发相同类型的事件。
  • 使用场景：当一个父元素包含多个子元素，并且这些子元素都有一个相同类型的事件监听器时，可以使用 .stop 修饰符来限制只触发当前元素的事件，而不会触发父级元素的同类型事件。这样可以避免多次触发相同事件导致的重复操作或冲突。

(2).self: 只处理自己的事件，子控件冒泡的事件不处理。

  • 含义：.self 修饰符用于指定仅处理当前元素的事件，不处理其子元素冒泡上来的相同类型事件。
  • 使用场景：当一个元素内包含其他子元素，并且子元素也具有相同类型的事件监听器时，可以使用 .self 修饰符来仅触发当前元素的事件，而不受其子元素冒泡带来的影响。这样可以避免在处理当前元素事件时，无意中触发了其他子元素的事件。

(3).prevent: 阻止 链接的跳转。

(4).once: 事件只会触发一次(适用于抽奖页面)。

  • 含义：.once 修饰符用于指定事件只会触发一次，之后再次触发相同类型的事件将不再生效。
  • 使用场景：当需要某个事件只触发一次时，比如在抽奖页面中点击“开始抽奖”按钮后，只希望触发一次相关的处理函数，之后按钮点击将不再有响应，可以使用 .once 修饰符。

(5)总结：

  • 通过使用 .stop、.self、.prevent 和 .once 这些事件修饰符，我们可以对事件的传播和触发进行更加精确和灵活的控制。
  • 这些修饰符可以解决一些常见的交互问题，提升用户体验并简化开发过程。

(6)案例




    
    事件修饰符

【二】Vue之基础_第5张图片

  • 事件冒泡

【二】Vue之基础_第6张图片

  • 阻止事件冒泡

【二】Vue之基础_第7张图片

【3】按键修饰符

  • 按键修饰符是用于处理键盘事件的修饰符。通过按键修饰符，可以提供更灵活的键盘操作控制。

(1).ctrl：需要同时按下 Ctrl 键。

  • 例如：@keydown.ctrl 会在按下某个键的同时按下 Ctrl 键时触发。

(2).alt：需要同时按下 Alt 键。

  • 例如：@keydown.alt 会在按下某个键的同时按下 Alt 键时触发。

(3).shift：需要同时按下 Shift 键。

  • 例如：@keydown.shift 会在按下某个键的同时按下 Shift 键时触发。

(4).meta：需要同时按下特定的 Meta 键(如 Command 键、Windows 键等)。

  • 例如：@keydown.meta 会在按下某个键的同时按下 Meta 键时触发。

(5).exact：需要精确匹配按键组合，除了指定的按键，其他同时按下的按键无效。

  • 例如：@keydown.ctrl.exact 会在只按下 Ctrl 键时触发，而不会在同时按下其他键时触发。

(6).keyCode：指定特定的键码，只有按下对应的键码时才会触发事件。

  • 例如：@keydown.13 会在按下 Enter 键时触发，其中 13 是 Enter 键的键码。()

(7)小结

  • 这些按键修饰符可以和其他事件修饰符结合使用，以实现更精确的键盘操作。
  • 例如，@keydown.ctrl.enter 可以用来检测同时按下 Ctrl 键和 Enter 键的组合操作。
  • 使用按键修饰符能够增强用户与应用程序之间的交互体验，并提供更多的功能和快捷操作。

(8)案例




    
    按键修饰符

【二】Vue之基础_第8张图片

【四】数据双向绑定

【1】详解

  • 在Vue中，数据双向绑定是一个核心特性，它允许将数据模型与视图之间建立起实时的同步关系。
    • 通过数据双向绑定，当数据模型发生变化时，视图会自动更新；
    • 反之，当视图中的数据发生变化时，数据模型也会随之更新。
  • Vue实现数据双向绑定的方式主要是使用了指令 v-model。
    • v-model 指令可以用在表单元素(如 、