Vue 基础笔记 02

---

列表渲染

1. v-for

• 分隔符有 in 和 of ,两者没有区别。

<li v-for="item in list">
    {{ item }}
</li>
// 两者等价
<li v-for="item of list">
    {{ item }}
</li>

• v-for还有第二个参数 index，是当前项的索引，从0开始

<ul id="box">
  <li v-for="(item, index) in list">
   {{ index }} - {{ item.message }}
  </li>
</ul>

• v-for中的key值

  • 使用v-for的时候，都必须会加上一个必要的 key 值。key 的作用主要是为了高效的更新虚拟 DOM。

  • 跟踪每个节点的身份，从而重用和重新排列现有元素。

  • 理想的 key 值是每项都有一个唯一的 id。

2. v-for用于数组循环

v-for 指令需要使用 item in list 形式的特殊语法，list 是源数据数组名， item 是数组元素迭代的别名（为当前遍历的元素提供别名，可以任意起名）。

// html代码
<ul id="box">
  <li v-for="item in list">
    {{ item.message }}
  </li>
</ul>

// js代码
new Vue({
  el: '#box',
  data: {
    list: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

3. v-for用于对象循环

// html代码
<ul id="box">
  <li v-for="item in object">
    {{ item }}
  </li>
</ul>

// 用于对象循环时 index 和 key 的写法
<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

// js代码
new Vue({
  el: '#box',
  data: {
    object: {
          firstName: 'John',
          lastName: 'Doe',
          age: 30
        }
  }
})

4. 数组的更新与检测

• 使用下面的方法可以操作数组。检测数组的变动

  • push() // 向数组的末尾添加一个或多个元素，并返回新的长度
  • pop() // 方法用于删除数组的最后一个元素并返回删除的元素
  • shift() // 用于把数组的第一个元素从其中删除，并返回第一个元素的值
  • unshift() // 向数组的开头添加一个或更多元素，并返回新的长度
  • splice() // 用于添加或删除数组中的元素
  • sort() // 用于对数组的元素进行排序
  • reverse() // 用于颠倒数组中元素的顺序

• 使用下面方法可以让新素组替换旧数组

  • filter() // 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
  • concat() // 用于连接两个或多个字符串
  • slice() // 可从已有的数组中返回选定的元素
  • map() // 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

• 不能检测到数组变动

//这种方式不可以检测到数组变化
vm.item[index] = newValue

// 解决方法 1.使用 Vue.set() 2.使用 splice
Vue.set(item,index,newValue)

---

事件处理器

1. 方法事件处理器(写函数名称)

// html 代码
<div id="box">
    <botton @click="handle">点击</botton>
</div>

// js 代码
new Vue({
    el:'#box'
    data:{
    
    },
    methods:{
        handle(event){
            // 当方法不传参数时，可以接收一个形参获取当前节点所有属性
            console.log('点击事件',event)
        }
    }
})

2. 内联处理器方法(执行函数表达式，带有 $event 对象)

// html 代码
<div id="box">
    <botton @click="handle($event,1)">点击</botton>
</div>

// js 代码
new Vue({
    el:'#box'
    data:{
    
    },
    methods:{
        handle(event,number){
            // 当方法传参数时，传入的 $event 这个参数可以获取当前节点所有属性
            console.log('点击事件',event, number)
        }
    }
})

3. 监听事件(直接触发代码)

// html 代码
<div id="box">
    <span>{{number}}</span>
    <--! 这种写法只能处理简单的逻辑，复杂的逻辑不建议这样写 -->
    <botton @click="number++">点击</botton>
</div>

// js 代码
new Vue({
    el:'#box'
    data:{
        number:0
    }
})

4. 事件修饰符

• stop() // 阻止事件冒泡
• prevent() // 取消事件默认行为
• capture() // 冒泡顺序
• self() // 只能在自身上面触发
• once() // 事件触发一次
• passive() // 不阻止默认行为

5. 按键修饰符

在监听键盘事件时，我们经常需要查找常用按键对应的 code 值。Vue 可以在 v-on 上添加按键修饰符，用于监听按键事件

按键修饰符别名：

• .enter // enter键
• .tab // tab键
• .delete // (捕获“删除”和“退格”按键) 删除键
• .esc // 取消键 .space => // 空格键
• .up // 上
• .down // 下
• .left // 左
• .right // 右

例如 enter建：

<!-- 也可用于简写语法 -->
<input @keyup.enter="submit">

---

• @Title: Vue基础学习笔记02
• @Content: Vue
• @Autor: ling.wang
• @StudyDate: 2022-02-10
• @WritingDate: 2022-02-11