vue3学习笔记

vue3学习笔记

数据绑定 ‘v-bind’ 简写为’:'，语法v-bind:id=‘变量’

v-on 指令通过 v-on:event=“method” 语法工作，简写语法：@event=“method”

<form @submit="onSubmit"></form>

v-model 绑定到你在其上设置的数据属性，并使其与 <input> 保持同步

v-model 适用于所有不同的输入类型，包括复选框、单选框和选择输入.

<input
  type="text"
  id="new-todo-input"
  name="new-todo"
  autocomplete="off"
  v-model="label"
/>

v-model修饰符.trim，将删除输入之前或之后的空格；.lazy 修饰符导致 v-model 使用 change 事件代替

当 v-model 同步文本输入的值时，此修饰符会发生变化。如前所述，v-model 同步通过使用事件更新变量来工作。对于文本输入，此同步使用 input 事件进行。通常，这意味着 Vue 在每次击键后都会同步数据。.lazy 修饰符导致 v-model 使用 change 事件代替。这意味着 Vue 只会在输入失去焦点或提交表单时同步数据。
要同时使用 .lazy 修饰符和 .trim 修饰符，我们可以将它们链接起来，例如 v-model.lazy.trim=“label”。

使用自定义事件将数据传递给父级

1. 自定义事件发射

this.$emit("todo-added",参数);

2. v-on监听事件

<to-do-form @todo-added="addToDo"></to-do-form>

3. 触发函数读取事件参数

 addToDo(toDoLabel) {
    console.log('To-do added:', toDoLabel);
  }

当 Vue 组件的 data 属性中的数据发生变化时，Vue 会自动重新渲染与这些数据相关的部分。

示例

<template>
  <div>
    <ul>
      <li v-for="item in ToNotDoItems" :key="item.id">
        {{ item.label }}
      </li>
    </ul>
    <button @click="addItem">Add Item</button>
  </div>
</template>

<script lang="ts">
import uniqueId from "lodash.uniqueid";

export default {
  methods: {
    addItem() {
      this.ToNotDoItems.push({
        id: uniqueId("todo-"),
        label: "New item",
        done: false,
      });
    },
  },
  data() {
    return {
      ToNotDoItems: [
        { id: uniqueId("todo-"), label: "Learn Vue", done: false },
        {
          id: uniqueId("todo-"),
          label: "Create a Vue project with the CLI",
          done: true,
        },
        { id: uniqueId("todo-"), label: "Have fun", done: true },
        { id: uniqueId("todo-"), label: "Create a to-do list", done: false },
      ],
    };
  },
};
</script>

在这个示例中，我们添加了一个 addItem 方法，该方法会在点击按钮时被调用，并向 ToNotDoItems 数组中添加一个新的待办事项。

当 ToNotDoItems 数组的内容发生变化时，Vue 会自动重新渲染与 ToNotDoItems 相关的部分，以反映这些变化。

使用计算属性（在其他事情中）当模板发生变化时，保存属性的状态。

data()中的属性在templates重新渲染时不会保存当前的值。computed可以避免这个问题。

虚拟 DOM 和模板引用，你往往不应该直接通过原生浏览器 API（如 Document.getElementById）来编辑你的 HTML 元素，因为这会导致 VDOM 和真实 DOM 不同步。

Vue 和其他一些框架一样，使用一个虚拟 DOM（VDOM）来管理元素。这意味着 Vue 在内存中保留了我们应用程序中所有节点的表示。任何更新首先在内存中的节点上执行，然后所有需要对页面上的实际节点进行的更改都会被批量同步。

由于读写实际的 DOM 节点通常比虚拟节点开销更大，虚拟 DOM 可以带来更好的性能。然而，这也意味着在使用框架时，你往往不应该直接通过原生浏览器 API（如 Document.getElementById）来编辑你的 HTML 元素，因为这会导致 VDOM 和真实 DOM 不同步。

相反，如果你需要访问底层 DOM 节点（比如设置焦点时），你可以使用 Vue 模板引用。对于自定义的 Vue 组件，你也可以使用 refs 来直接访问子组件的内部结构，然而这样做应该是谨慎的，因为这会使代码更难推理和理解。

要在一个组件中使用模板引用，你需要在你想访问的元素上添加一个 ref 属性，并为该属性的值添加一个字符串标识符。值得注意的是，在一个组件中，引用必须是唯一的。在同一时间呈现的两个元素不应该有相同的引用。

关于html元素聚焦，前提是该元素能被聚焦

哪些元素支持聚焦

a[href] a标签必须带有href，不带href的a不能聚焦
area[href]
input:not([disabled]) 表单元素，disabled的不能聚焦
select:not([disabled])
textarea:not([disabled])
button:not([disabled]) 按钮同样是不能disabled
iframe
[tabindex] 带有tabindex的元素
[contentEditable=true] 带有contentEditable的元素

例如，我们需要给我们的列表标题添加一个引用。我们还需要给它添加一个 tabindex=“-1”，这使得该元素可以通过程序聚焦（即可以通过 JavaScript 聚焦），而默认情况下它是不可以的。

<h2 id="list-summary" ref="listSummary" tabindex="-1">{{listSummary}}</h2>

tabindex 用法
https://blog.youkuaiyun.com/xrk_ffgg/article/details/103670984

vue-router路由设置

1. 安装

npm install vue-router@4

2. src目录下增加router文件夹，新建router.ts