一、模板语法

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。

在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。

如果你对虚拟 DOM 的概念比较熟悉，并且偏好直接使用 JavaScript，你也可以结合可选的 JSX 支持直接手写渲染函数而不采用模板。但请注意，这将不会享受到和模板同等级别的编译时优化。

1.1、文本插值

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：

<span>Message: {{ msg }}</span>

双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。

1.2、原始 HTML

双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令：

<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

Using text interpolation: <span style="color: red">This should be red.</span>

Using v-html directive: This should be red.

<template>
  <h2>
    {{ msg }}
  </h2>
  <h2 v-text="msg"></h2>
  <h2 v-html="msg"></h2>
</template>

<script lang="ts">
import { ref, getCurrentInstance } from "vue";
export default {
  setup() {
    let msg = "<p style='color:blue'>Hello, world!</p>";
    return { msg };
  },
};
</script>

这里我们遇到了一个新的概念。这里看到的 v-html attribute 被称为一个指令。指令由 v- 作为前缀，表明它们是一些由 Vue 提供的特殊 attribute，你可能已经猜到了，它们将为渲染的 DOM 应用特殊的响应式行为。这里我们做的事情简单来说就是：在当前组件实例上，将此元素的 innerHTML 与 rawHtml 属性保持同步。

span 的内容将会被替换为 rawHtml 属性的值，插值为纯 HTML——数据绑定将会被忽略。注意，你不能使用 v-html 来拼接组合模板，因为 Vue 不是一个基于字符串的模板引擎。在使用 Vue 时，应当使用组件作为 UI 重用和组合的基本单元。

<template>
  <h2>
    {{ msg }}
  </h2>
  <h2 v-text="msg"></h2>
  <div v-html="msg"></div>
  <textarea v-model="msg" style="width: 100%; height: 300px"></textarea>
</template>

<script lang="ts">
import { ref, getCurrentInstance } from "vue";
export default {
  setup() {
    let msg = ref("<p style='color:blue'>Hello, world!</p>");
    return { msg };
  },
};
</script>

1.3、属性绑定

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。

1.3.1、简写

因为 v-bind 非常常用，我们提供了特定的简写语法：

<div :id="dynamicId"></div>

开头为 : 的 attribute 可能和一般的 HTML attribute 看起来不太一样，但它的确是合法的 attribute 名称字符，并且所有支持 Vue 的浏览器都能正确解析它。此外，他们不会出现在最终渲染的 DOM 中。简写语法是可选的，但相信在你了解了它更多的用处后，你应该会更喜欢它。

接下来的指引中，我们都将在示例中使用简写语法，因为这是在实际开发中更常见的用法。

1.3.2、布尔型属性

布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上。disabled 就是最常见的例子之一。

v-bind 在这种场景下的行为略有不同：

<button :disabled="isButtonDisabled">Button</button>

当 isButtonDisabled 为真值或一个空字符串 (即 <button disabled="">) 时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。

1.3.3、动态绑定多个值

如果你有像这样的一个包含多个 attribute 的 JavaScript 对象：

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}

通过不带参数的 v-bind，你可以将它们绑定到单个元素上：

<div v-bind="objectOfAttrs"></div>

<template>
  <button :title="msg + '!!!'">冒号绑定</button>
  <button v-bind:title="msg + '!!!'">v-bind绑定</button>
  <button :disabled="isDisalbed">被禁用的按钮</button>
  <button v-bind="attrs">登录按钮</button>
</template>

<script lang="ts">
import { ref, getCurrentInstance } from "vue";
export default {
  setup() {
    let msg = "这是一个按钮";
    let isDisalbed = ref(true);
    let attrs = {
      class: "cls1",
      style: "color:red",
      id: "btnLogin",
    };
    return { msg, isDisalbed, attrs };
  },
};
</script>

1.4、使用 JavaScript 表达式

至此，我们仅在模板中绑定了一些简单的属性名。但是 Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式：

{{ number + 1 }}

		{{ ok ? 'YES' : 'NO' }}

		{{ message.split('').reverse().join('') }}

		<div :id="`list-${id}`"></div>
		

这些表达式都会被作为 JavaScript ，以组件为作用域解析执行。

在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：

• 在文本插值中 (双大括号)
• 在任何 Vue 指令 (以 v- 开头的特殊属性) 属性的值中

1.4.1、仅支持表达式

每个绑定仅支持单一表达式，也就是一段能够被求值的 JavaScript 代码。一个简单的判断方法是是否可以合法地写在 return 后面。

因此，下面的例子都是无效的：

<!-- 这是一个语句，而非表达式 -->
{{ var a = 1 }}

<!-- 条件控制也不支持，请使用三元表达式 -->
{{ if (ok) { return message } }}

1.4.2、调用函数

可以在绑定的表达式中使用一个组件暴露的方法：

<span :title="toTitleDate(date)">
  {{ formatDate(date) }}
</span>

<template>
  {{ show() }}
  <hr />
  <input v-model="msg" />
</template>
<script lang="ts" setup>
import { ref } from "vue";
function show() {
  console.log("show被调用了");
}
let msg = ref("Hello");
</script>

<template>
  <button @click="msg = msg ? 'ok' : 'no'">
    {{ (msg + "!!!").split("").reverse().join("") }}
  </button>

  <h2>
    {{ `消息内容是:${msg}` }}
  </h2>

  <input v-model="msg" />

  <h2>
    {{ showInfo() }}
  </h2>

  <h2>
    {{ showInfoComputed }}
  </h2>
</template>

<script lang="ts">
import { computed } from "@vue/reactivity";
import { ref, getCurrentInstance } from "vue";
export default {
  setup() {
    let msg = ref("这是一个按钮");
    function showInfo() {
      console.log("showInfo被调用了");
      return "showinfo的返回值";
    }
    let showInfoComputed = computed(() => {
      console.log("showInfoComputed被调用了");
      return "showInfoComputed的返回值";
    });
    return { msg, showInfo, showInfoComputed };
  },
};
</script>

1.4.3、受限的全局访问

模板中的表达式将被沙盒化，仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象，比如 Math 和 Date。

没有显式包含在列表中的全局对象将不能在模板内表达式中访问，例如用户附加在 window 上的属性。然而，你也可以自行在 app.config.globalProperties 上显式地添加它们，供所有的 Vue 表达式使用。

1.4.4、vue3.0之全局变量app.config.globalProperties的使用

globalProperties

类型：[key: string]: any
默认：undefined
用法
添加一个可以在应用的任何组件实例中访问的全局 property。组件的 property 在命名冲突具有优先权。

这可以代替 Vue 2.x Vue.prototype 扩展：

// 之前(Vue 2.x)
Vue.prototype.$http = () => {}

Vue3挂载前添加全局对象,main.ts：

import { createApp } from 'vue'
import App from './App.vue'
import HelloWorld from './components/HelloWorld.vue'
import router from './router'

let app=createApp(App);

app.config.globalProperties.msg="abc";

app.use(router).mount('#app');

取值：

<template>
  <input v-model="info" />
  <button @click="info += '1'">加1</button>
</template>
<script lang="ts">
import { ref, getCurrentInstance } from "vue";
export default {
  setup() {
    let msg = getCurrentInstance()?.appContext.config.globalProperties.msg;
    let info = ref(msg);

    return { info };
  },
  mounted(this: any) {
    console.log(this.msg);
  },
};
</script>

注意：vue3推荐使用依赖注入：provide和inject。原因：vue/rfcs.

1.5、指令 Directives

指令是带有 v- 前缀的特殊 attribute。Vue 提供了许多内置指令，包括上面我们所介绍的 v-bind 和 v-html。

• v-text
• v-html
• v-show
• v-if
• v-else
• v-else-if
• v-for
• v-on
• v-bind
• v-model
• v-slot
• v-pre
• v-once
• v-memo
• v-cloak

指令 attribute 的期望值为一个 JavaScript 表达式 (除了少数几个例外，即之后要讨论到的 v-for、v-on 和 v-slot)。一个指令的任务是在其表达式的值变化时响应式地更新 DOM。以 v-if 为例：

<p v-if="seen">Now you see me</p>

这里，v-if 指令会基于表达式 seen 的值的真假来移除/插入该 <p> 元素。

1.5.1、参数 Arguments

某些指令会需要一个“参数”，在指令名后通过一个冒号隔开做标识。例如用 v-bind 指令来响应式地更新一个 HTML attribute：

<a v-bind:href="url"> ... </a>

<!-- 简写 -->
<a :href="url"> ... </a>

这里 href 就是一个参数，它告诉 v-bind 指令将表达式 url 的值绑定到元素的 href attribute 上。在简写中，参数前的一切 (例如 v-bind:) 都会被缩略为一个 : 字符。

另一个例子是 v-on 指令，它将监听 DOM 事件：

<a v-on:click="doSomething"> ... </a>

<!-- 简写 -->
<a @click="doSomething"> ... </a>

这里的参数是要监听的事件名称：click。v-on 有一个相应的缩写，即 @ 字符。我们之后也会讨论关于事件处理的更多细节。

1.5.2、动态参数

同样在指令参数上也可以使用一个 JavaScript 表达式，需要包含在一对方括号内：

<!--
注意，参数表达式有一些约束，
参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释
-->
<a v-bind:[attributeName]="url"> ... </a>

<!-- 简写 -->
<a :[attributeName]="url"> ... </a>

这里的 attributeName 会作为一个 JavaScript 表达式被动态执行，计算得到的值会被用作最终的参数。举例来说，如果你的组件实例有一个数据属性 attributeName，其值为 "href"，那么这个绑定就等价于 v-bind:href。

相似地，你还可以将一个函数绑定到动态的事件名称上：

<a v-on:[eventName]="doSomething"> ... </a>

<!-- 简写 -->
<a @[eventName]="doSomething">

在此示例中，当 eventName 的值是 "focus" 时，v-on:[eventName] 就等价于 v-on:focus。

动态参数值的限制

动态参数中表达式的值应当是一个字符串，或者是 null。特殊值 null 意为显式移除该绑定。其他非字符串的值会触发警告。

动态参数语法的限制

动态参数表达式因为某些字符的缘故有一些语法限制，比如空格和引号，在 HTML attribute 名称中都是不合法的。例如下面的示例：

<!-- 这会触发一个编译器警告 -->
<a :['foo' + bar]="value"> ... </a>

如果你需要传入一个复杂的动态参数，我们推荐使用计算属性替换复杂的表达式，也是 Vue 最基础的概念之一，我们很快就会讲到。

当使用 DOM 内嵌模板 (直接写在 HTML 文件里的模板) 时，我们需要避免在名称中使用大写字母，因为浏览器会强制将其转换为小写：

<a :[someAttr]="value"> ... </a>

上面的例子将会在 DOM 内嵌模板中被转换为 :[someattr]。如果你的组件拥有 “someAttr” 属性而非 “someattr”，这段代码将不会工作。单文件组件内的模板不受此限制。

<template>
  <button :[attrName]="'button'">这是一个按钮</button>
  要绑定的属性名称：<input v-model="attrName" />

  <hr />

  <button @[eventName]="show">这是一个按钮</button>
  要绑定的事件名称：<input v-model="eventName" />
</template>

<script lang="ts">
import { ref } from "vue";
export default {
  setup() {
    let attrName = ref("title");
    let eventName = ref("click");
    let show = (e) => {
      console.log(eventName.value);
    };
    return { attrName, eventName, show };
  },
};
</script>
<style scoped></style>

1.5.3、修饰符 Modifiers

修饰符是以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定。例如 .prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()：

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

之后在讲到 v-on 和 v-model 的功能时，你将会看到其他修饰符的例子。

最后，在这里你可以直观地看到完整的指令语法：

1.5.4、v-text

更新元素的文本内容。

• 期望的绑定值类型：string

• 详细信息

  v-text 通过设置元素的 textContent 属性来工作，因此它将覆盖元素中所有现有的内容。如果你需要更新 textContent 的部分，应该使用 mustache interpolations 代替。

• 示例

• <span v-text="msg"></span>
  <!-- 等同于 -->
  <span>{{msg}}</span>

• 参考：模板语法 - 文本插值

1.5.5、v-html

更新元素的 innerHTML。

• 期望的绑定值类型：string

• 详细信息

v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。如果你发现自己正打算用 v-html 来编写模板，不如重新想想怎么使用组件来代替。

在单文件组件，scoped 样式将不会作用于 v-html 里的内容，因为 HTML 内容不会被 Vue 的模板编译器解析。如果你想让 v-html 的内容也支持 scoped CSS，你可以使用 CSS modules 或使用一个额外的全局 <style> 元素，手动设置类似 BEM 的作用域策略。

• 示例：

• <div v-html="html"></div>

• 参考：模板语法 - 原始 HTML

<template>
  <h2 v-html="msg"></h2>
  <p>这是一个P标签</p>
</template>

<script lang="ts">
import { computed } from "@vue/reactivity";
import { ref, getCurrentInstance } from "vue";
export default {
  setup() {
    let msg = ref("<p>这是一个按钮</p>");
    return { msg };
  },
};
</script>
<style scoped>
p {
  color: red;
}
</style>

1.5.6、v-show

基于表达式值的真假性，来改变元素的可见性。

• 期望的绑定值类型：any

• 详细信息

  v-show 通过设置内联样式的 display CSS 属性来工作，当元素可见时将使用初始 display 值。当条件改变时，也会触发过渡效果。

• 参考：条件渲染 - v-show

1.5.7、v-if

基于表达式值的真假性，来条件性地渲染元素或者模板片段。

• 期望的绑定值类型：any

• 详细信息

  当 v-if 元素被触发，元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假，那么其内部的内容根本都不会被渲染。

  可用于 <template> 表示仅包含文本或多个元素的条件块。

  当条件改变时会触发过渡效果。

  当同时使用时，v-if 比 v-for 优先级更高。我们并不推荐在一元素上同时使用这两个指令 — 查看列表渲染指南详情。

• 参考：条件渲染 - v-if

• 因为 v-if 是一个指令，他必须依附于某个元素。但如果我们想要切换不止一个元素呢？在这种情况下我们可以在一个 <template> 元素上使用 v-if，这只是一个不可见的包装器元素，最后渲染的结果并不会包含这个 <template> 元素。

  <template v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </template>

  v-else 和 v-else-if 也可以在 <template> 上使用。

• <template>
    <button @click="isShow = !isShow">{{ isShow ? "隐藏" : "显示" }}</button>
  
    <div v-if="isShow">
      <h2>这段文字的显示与隐藏完全是由isShow控制的,DOM控制的</h2>
      <textarea>textarea</textarea>
      <textarea>textarea</textarea>
    </div>
  
    <template v-if="isShow">
      <h2>这段文字的显示与隐藏完全是由isShow控制的,DOM控制的</h2>
      <textarea>textarea</textarea>
      <textarea>textarea</textarea>
    </template>
  </template>
  
  <script lang="ts">
  import { ref } from "vue";
  export default {
    setup() {
      let isShow = ref(true);
      return { isShow };
    },
  };
  </script>
  <style scoped></style>

  

1.5.8、v-if vs v-show

• v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。
• v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。
• 相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。
• 总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

1.5.9、v-else

表示 v-if 或 v-if / v-else-if 链式调用的“else 块”。

• 无需传入表达式

• 详细信息

  • 限定：上一个兄弟元素必须有 v-if 或 v-else-if。

  • 可用于 <template> 表示仅包含文本或多个元素的条件块。

• 示例

• <div v-if="Math.random() > 0.5">
    Now you see me
  </div>
  <div v-else>
    Now you don't
  </div>

• 参考：条件渲染 - v-else

1.5.10、v-else-if

表示 v-if 的“else if 块”。可以进行链式调用。

• 期望的绑定值类型：any

• 详细信息

  • 限定：上一个兄弟元素必须有 v-if 或 v-else-if。

  • 可用于 <template> 表示仅包含文本或多个元素的条件块。

• 示例

• <div v-if="type === 'A'">
    A
  </div>
  <div v-else-if="type === 'B'">
    B
  </div>
  <div v-else-if="type === 'C'">
    C
  </div>
  <div v-else>
    Not A/B/C
  </div>

• 参考：条件渲染 - v-else-if

示例：

<template>
  <h2 v-html="msg"></h2>
  <template v-if="isShow">
    <p>这是一个P标签</p>
    <button>abc</button>
  </template>
  <button @click="isShow = !isShow">{{ `isShow=${isShow}` }}</button>

  <div v-if="Math.random() > 0.5">Math.random()&gt;0.5</div>
  <div v-else>Math.random()&lt;=0.5</div>

  <hr />
  <input v-model="type" />
  <p v-if="type === 'A'">优秀</p>
  <p v-else-if="type === 'B'">良好</p>
  <p v-else-if="type === 'C'">达标</p>
  <p v-else>不达标</p>
</template>

<script lang="ts">
import { computed } from "@vue/reactivity";
import { ref, getCurrentInstance } from "vue";
export default {
  setup() {
    let msg = ref("<p>这是一个按钮</p>");
    let isShow = ref(true);
    let type = ref("A");
    return { msg, isShow, type };
  },
};
</script>
<style scoped>
p {
  color: red;
}
</style>

结果：

修改：

1.5.11、v-for

基于原始数据多次渲染元素或模板块。

• 期望的绑定值类型：Array | Object | number | string | Iterable

• 详细信息

  指令值必须使用特殊语法 alias in expression 为正在迭代的元素提供一个别名：

• <div v-for="item in items">
    {{ item.text }}
  </div>

• 或者，你也可以为索引指定别名 (如果用在对象，则是键值)：

• <div v-for="(item, index) in items"></div>
  <div v-for="(value, key) in object"></div>
  <div v-for="(value, name, index) in object"></div>

•  

  v-for 的默认方式是尝试就地更新元素而不移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示：

• <div v-for="item in items" :key="item.id">
    {{ item.text }}
  </div>

•  

  v-for 也可以用于 Iterable Protocol 的实现，包括原生 Map 和 Set。

• <template>
    <ul>
      <li v-for="(item, index) in users" :key="item.id">
        {{ index }} - {{ item.id }} - {{ item.name }}
        <hr />
        <ul>
          <li v-for="(value, key, index) in item">
            {{ index }} - {{ key }}:{{ value }}
          </li>
        </ul>
      </li>
    </ul>
    <hr />
    <ul>
      <li v-for="(value, key, index) in user">
        {{ index }} - {{ key }}:{{ value }}
      </li>
    </ul>
  </template>
  
  <script lang="ts">
  import { reactive, ref } from "vue";
  export default {
    setup() {
      let users = reactive([
        { id: 201, name: "mark" },
        { id: 202, name: "rose" },
        { id: 203, name: "jack" },
      ]);
  
      let user = { name: "张三", age: 19 };
  
      return { users, user };
    },
  };
  </script>
  <style scoped>
  .div1 {
    height: 200px;
    overflow: auto;
    width: 300px;
    background-color: lightgoldenrodyellow;
  }
  .div1 ul li {
    height: 300px;
    line-height: 300px;
  }
  </style>

  

• 参考：

  • 列表渲染

1.5.12、v-on

给元素绑定事件监听器。

• 缩写：@

• 期望的绑定值类型：Function | Inline Statement | Object (不带参数)

• 参数：event (使用对象语法则为可选项)

• 修饰符：

  • .stop ——调用 event.stopPropagation()。

  • <template>
      <div id="div1" @click="showInfo">
        <button @click.stop="showInfo">stop示例</button>
      </div>
    </template>
    
    <script lang="ts">
    import { reactive, ref } from "vue";
    export default {
      setup() {
        function showInfo() {
          console.log("事件被触发了");
        }
        return { showInfo };
      },
    };
    </script>
    <style scoped>
    #div1 {
      height: 100px;
      line-height: 100px;
      text-align: center;
      width: 200px;
      background: yellow;
    }
    </style>

    

  • .prevent ——调用 event.preventDefault()。

  • <template>
      <div id="div1" @click="showInfo">
        <button @click.stop="showInfo">stop示例</button>
        <a href="http://best.cnblogs.com" @click.stop.prevent="showInfo">博客2</a>
      </div>
    
      <hr />
    
      <a href="http://best.cnblogs.com" @click.prevent="showInfo">博客1</a>
    </template>
    
    <script lang="ts">
    import { reactive, ref } from "vue";
    export default {
      setup() {
        function showInfo() {
          console.log("事件被触发了");
        }
        return { showInfo };
      },
    };
    </script>
    <style scoped>
    #div1 {
      height: 100px;
      line-height: 100px;
      text-align: center;
      width: 200px;
      background: yellow;
    }
    </style>

    

  • .capture ——在捕获模式添加事件监听器。

  • <template>
      <div id="div1" @click.capture="showInfo('2、父元素', $event)">
        <button @click="showInfo('1、子元素', $event)">capture示例</button>
      </div>
    </template>
    
    <script lang="ts">
    import { reactive, ref } from "vue";
    export default {
      setup() {
        function showInfo(msg, event) {
          console.log(msg, event);
        }
        return { showInfo };
      },
    };
    </script>
    <style scoped>
    #div1 {
      height: 100px;
      line-height: 100px;
      text-align: center;
      width: 200px;
      background: yellow;
    }
    </style>

    

  • .self ——只有事件从元素本身发出才触发处理函数。

  • <template>
      <div id="div1" @click.self="showInfo('2、父元素', $event)">
        <button @click="showInfo('1、子元素', $event)">self示例</button>
      </div>
    </template>
    
    <script lang="ts">
    import { reactive, ref } from "vue";
    export default {
      setup() {
        function showInfo(msg, event) {
          console.log(msg, event.target);
        }
        return { showInfo };
      },
    };
    </script>
    <style scoped>
    #div1 {
      height: 100px;
      line-height: 100px;
      text-align: center;
      width: 200px;
      background: yellow;
    }
    </style>

    

  • .{keyAlias} ——只在某些按键下触发处理函数。
    • 常用别名如下：　　

      Vue中常用的按键别名:

    • 回车 => enter

      删除 => delete (捕获"删除”和“退格”键)

      退出 => esc

      空格 => space

      换行 => tab （不适合用keyup事件 适合用于keydown事件）

      上 => up

      下 => down

      左 => left

      右 => right

      <template>
        <input @keyup.enter="keyEvent" />
      </template>
      
      <script lang="ts">
      import { reactive, ref } from "vue";
      export default {
        setup() {
          function keyEvent(e) {
            console.log("key:" + e.key, "code:" + e.code, "keyCode:" + e.keyCode);
          }
      
          return { keyEvent };
        },
      };
      </script>
      <style scoped>
      .div1 {
        height: 200px;
        overflow: auto;
        width: 300px;
        background-color: lightgoldenrodyellow;
      }
      .div1 ul li {
        height: 300px;
        line-height: 300px;
      }
      </style>

      

  • .once ——最多触发一次处理函数。
  • .left ——只在鼠标左键事件触发处理函数。
  • .right ——只在鼠标右键事件触发处理函数。
  • .middle ——只在鼠标中键事件触发处理函数。

  • <template>
      <input @keyup.ctrl.alt.s="keyEvent" />
      <button @click.right.prevent="rightClickEvent">只有按右键才触发事件</button>
      <button @mousedown.middle="rightClickEvent">只有按中键才触发事件</button>
      <button @mouseup.left="rightClickEvent">只有按左键才触发事件</button>
    </template>
    
    <script lang="ts">
    import { reactive, ref } from "vue";
    export default {
      setup() {
        function keyEvent(e) {
          console.log("key:" + e.key, "code:" + e.code, "keyCode:" + e.keyCode);
          return false;
        }
    
        function rightClickEvent(e) {
          console.log("您点击了", e);
          console.log(["左", "中", "右"][e.button] + "键被点击");
        }
    
        return { keyEvent, rightClickEvent };
      },
    };
    </script>
    <style scoped></style>

    

  • 模拟同步延时

  • <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <button id="btnLogin">登录</button>
        <script>
          //异步的,异步IO
          // setTimeout(() => {
          //   console.log("A、2000毫秒后你可以看到控制台输出该消息");
          // }, 2000);
    
          // console.log("B、2000毫秒后你可以看到控制台输出该消息");
    
          function sleep(millSeconds) {
            let time = new Date().getTime();
            while (new Date().getTime() <= time + millSeconds);
          }
    
          for (var i = 0; i < 10; i++) {
            console.log(i);
            sleep(2000);
          }
        </script>
      </body>
    </html>

    

  • .passive ——通过 { passive: true } 附加一个 DOM 事件。 positive正面的
    • 　　

      <!-- 滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成 -->
      <!-- 以防其中包含 `event.preventDefault()` -->
      <div @scroll.passive="onScroll">...</div>

• <template>
    <!--wheel是中间的滚轮-->
    <!--scroll是滚动事件-->
    <div id="div1" @wheel.passive="eventMethod">
      <ul>
        <li>rose</li>
        <li>mark</li>
        <li>jack</li>
        <li>lucy</li>
        <li>lili</li>
      </ul>
    </div>
  </template>
  
  <script lang="ts">
  import { reactive, ref } from "vue";
  export default {
    setup() {
      //延时
      let sleep = (millSeconds) => {
        let time = new Date().getTime();
        while (new Date().getTime() <= time + millSeconds);
      };
  
      let eventMethod = (e) => {
        sleep(2000);
        console.log(e);
      };
      return { eventMethod };
    },
  };
  </script>
  <style scoped>
  #div1 {
    width: 300px;
    height: 100px;
    background: lightgoldenrodyellow;
    overflow: auto;
  }
  
  #div1 li {
    margin: 20px;
    background-color: aquamarine;
    height: 100px;
    width: 200px;
  }
  </style>

  

• 详细信息

  事件类型由参数来指定。表达式可以是一个方法名，一个内联声明，如果有修饰符则可省略。

  当用于普通元素，只监听原生 DOM 事件。当用于自定义元素组件，则监听子组件触发的自定义事件。

  当监听原生 DOM 事件时，方法接收原生事件作为唯一参数。如果使用内联声明，声明可以访问一个特殊的 $event 变量：v-on:click="handle('ok', $event)"。

  v-on 还支持绑定不带参数的事件/监听器对的对象。请注意，当使用对象语法时，不支持任何修饰符。

• 示例：

• <!-- 方法处理函数 -->
  <button v-on:click="doThis"></button>
  
  <!-- 动态事件 -->
  <button v-on:[event]="doThis"></button>
  
  <!-- 内联声明 -->
  <button v-on:click="doThat('hello', $event)"></button>
  
  <!-- 缩写 -->
  <button @click="doThis"></button>
  
  <!-- 使用缩写的动态事件 -->
  <button @[event]="doThis"></button>
  
  <!-- 停止传播 -->
  <button @click.stop="doThis"></button>
  
  <!-- 阻止默认事件 -->
  <button @click.prevent="doThis"></button>
  
  <!-- 不带表达式地阻止默认事件 -->
  <form @submit.prevent></form>
  
  <!-- 链式调用修饰符 -->
  <button @click.stop.prevent="doThis"></button>
  
  <!-- 按键用于 keyAlias 修饰符-->
  <input @keyup.enter="onEnter" />
  
  <!-- 点击事件将最多触发一次 -->
  <button v-on:click.once="doThis"></button>
  
  <!-- 对象语法 -->
  <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

•  

  监听子组件的自定义事件 (当子组件的“my-event”事件被触发，处理函数将被调用)：

• <MyComponent @my-event="handleThis" />
  
  <!-- 内联声明 -->
  <MyComponent @my-event="handleThis(123, $event)" />

• 参考：

  • 事件处理
  • 组件 - 自定义事件

1.5.13、v-bind

动态的绑定一个或多个 attribute，也可以是组件的 prop。

• 缩写：: 或者 . (当使用 .prop 修饰符)

• 期望：any (带参数) | Object (不带参数)

• 参数：attrOrProp (可选的)

• 修饰符：

  • .camel ——将短横线命名的 attribute 转变为驼峰式命名。
  • .prop ——强制绑定为 DOM property。3.2+
  • .attr ——强制绑定为 DOM attribute。3.2+

• 用途：

  当用于绑定 class 或 style attribute，v-bind 支持额外的值类型如数组或对象。详见下方的指南链接。

  在处理绑定时，Vue 默认会利用 in 操作符来检查该元素上是否定义了和绑定的 key 同名的 DOM property。如果存在同名的 property，则 Vue 会把作为 DOM property 赋值，而不是作为 attribute 设置。这个行为在大多数情况都符合期望的绑定值类型，但是你也可以显式用 .prop 和 .attr 修饰符来强制绑定方式。有时这是必要的，特别是在和自定义元素打交道时。

  当用于组件 props 绑定时，所绑定的 props 必须在子组件中已被正确声明。

  当不带参数使用时，可以用于绑定一个包含了多个 attribute 名称-绑定值对的对象。

• 示例：

• <!-- 绑定 attribute -->
  <img v-bind:src="imageSrc" />
  
  <!-- 动态 attribute 名 -->
  <button v-bind:[key]="value"></button>
  
  <!-- 缩写 -->
  <img :src="imageSrc" />
  
  <!-- 缩写形式的动态 attribute 名 -->
  <button :[key]="value"></button>
  
  <!-- 内联字符串拼接 -->
  <img :src="'/path/to/images/' + fileName" />
  
  <!-- class 绑定 -->
  <div :class="{ red: isRed }"></div>
  <div :class="[classA, classB]"></div>
  <div :class="[classA, { classB: isB, classC: isC }]"></div>
  
  <!-- style 绑定 -->
  <div :style="{ fontSize: size + 'px' }"></div>
  <div :style="[styleObjectA, styleObjectB]"></div>
  
  <!-- 绑定对象形式的 attribute -->
  <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
  
  <!-- prop 绑定。“prop” 必须在子组件中已声明。 -->
  <MyComponent :prop="someThing" />
  
  <!-- 传递子父组件共有的 prop -->
  <MyComponent v-bind="$props" />
  
  <!-- XLink -->
  <svg><a :xlink:special="foo"></a></svg>

•  

  .prop 修饰符也有专门的缩写，.：

• <div :someProperty.prop="someObject"></div>
  
  <!-- 等同于 -->
  <div .someProperty="someObject"></div>

•  

  当在 DOM 内模板使用 .camel 修饰符，可以驼峰化 v-bind attribute 的名称，例如 SVG viewBox attribute：

• <svg :view-box.camel="viewBox"></svg>

•  

  如果使用字符串模板或使用构建步骤预编译模板，则不需要 .camel。

• 参考：

  • Class 与 Style 绑定
  • 组件 - Prop 传递细节

1.5.14、v-model

在表单输入元素或组件上创建双向绑定。

• 期望的绑定值类型：根据表单输入元素或组件输出的值而变化

• 仅限：

  • <input>
  • <select>
  • <textarea>
  • components

• 修饰符：

• .lazy ——监听 change 事件而不是 input
• .number ——将输入的合法符串转为数字
• .trim ——移除输入内容两端空格

• <template>
    <p>
      <input v-model.lazy="msg" />
    </p>
    <p>
      <select v-model="msg">
        <option value="apple">苹果</option>
        <option value="orange">橙子</option>
      </select>
    </p>
    <p>
      <textarea v-model="msg" />
    </p>
    <h2>
      {{ msg }}
    </h2>
    <p>
      <input v-model.number.trim="cardno" @keyup="show" />
    </p>
    <h2>卡号:{{ cardno }}</h2>
  </template>
  
  <script lang="ts">
  import { reactive, ref } from "vue";
  export default {
    setup() {
      let msg = ref("");
      let cardno = ref("");
      function show() {
        console.log(typeof cardno.value, cardno);
      }
      return { msg, cardno, show };
    },
  };
  </script>
  <style scoped>
  #div1 {
    width: 300px;
    height: 100px;
    background: lightgoldenrodyellow;
    overflow: auto;
  }
  
  #div1 li {
    margin: 20px;
    background-color: aquamarine;
    height: 100px;
    width: 200px;
  }
  </style>

  

• 参考：

  • 表单输入绑定
  • 组件事件 - 配合 v-model 使用

1.5.15、v-slot

用于声明具名插槽或是期望接收 props 的作用域插槽。

• 缩写：#

• 期望的绑定值类型：能够合法在函数参数位置使用的 JavaScript 表达式。支持解构语法。绑定值是可选的——只有在给作用域插槽传递 props 才需要。

• 参数：插槽名 (可选，默认是 default)

• 仅限：

  • <template>
  • components (用于带有 prop 的单个默认插槽)

• 示例：

• <!-- 具名插槽 -->
  <BaseLayout>
    <template v-slot:header>
      Header content
    </template>
  
    <template v-slot:default>
      Default slot content
    </template>
  
    <template v-slot:footer>
      Footer content
    </template>
  </BaseLayout>
  
  <!-- 接收 prop 的具名插槽 -->
  <InfiniteScroll>
    <template v-slot:item="slotProps">
      <div class="item">
        {{ slotProps.item.text }}
      </div>
    </template>
  </InfiniteScroll>
  
  <!-- 接收 prop 的默认插槽，并解构 -->
  <Mouse v-slot="{ x, y }">
    Mouse position: {{ x }}, {{ y }}
  </Mouse>

• 参考：

  • 组件 - 插槽

1.5.16、v-pre

跳过该元素及其所有子元素的编译。

• 无需传入

• 详细信息

  元素内具有 v-pre，所有 Vue 模板语法都会被保留并按原样渲染。最常见的用例就是显示原始双大括号标签及内容。

• <template>
    <div v-pre>
      <h2>
        {{ msg }}
      </h2>
    </div>
  </template>
  
  <script lang="ts">
  import { reactive, ref } from "vue";
  export default {
    setup() {
      let msg = ref("apple");
      return { msg };
    },
  };
  </script>
  <style scoped>
  </style>

  

   

   

   

• 示例：

• <span v-pre>{{ this will not be compiled }}</span>

1.5.17、v-once

仅渲染元素和组件一次，并跳过之后的更新。

• 无需传入

• 详细信息

  在随后的重新渲染，元素/组件及其所有子项将被当作静态内容并跳过渲染。这可以用来优化更新时的性能。

• <!-- 单个元素 -->
  <span v-once>This will never change: {{msg}}</span>
  <!-- 带有子元素的元素 -->
  <div v-once>
    <h1>comment</h1>
    <p>{{msg}}</p>
  </div>
  <!-- 组件 -->
  <MyComponent v-once :comment="msg" />
  <!-- `v-for` 指令 -->
  <ul>
    <li v-for="i in list" v-once>{{i}}</li>
  </ul>

•  

  从 3.2 起，你也可以搭配 v-memo 的无效条件来缓存部分模板。

• 参考：

  • 数据绑定语法 - 插值
  • v-memo

1.5.18、v-memo

• 期望的绑定值类型：any[]

• 详细信息

  缓存一个模板的子树。在元素和组件上都可以使用。为了实现缓存，该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过。举例来说：

• <div v-memo="[valueA, valueB]">
    ...
  </div>

•  

  <template>
    valueA:<input v-model="valueA" /> msg:<input v-model="msg" />
    <div v-memo="[valueA]">
      <h2>msg:{{ msg }} {{ show() }}</h2>
    </div>
  </template>
  
  <script lang="ts">
  import { reactive, ref } from "vue";
  export default {
    setup() {
      let msg = ref("apple");
      let valueA = ref("ok");
      function show() {
        console.log("msg被渲染了");
      }
      return { msg, valueA, show };
    },
  };
  </script>
  <style scoped></style>

  

  当组件重新渲染，如果 valueA 和 valueB 都保持不变，这个 <div> 及其子项的所有更新都将被跳过。实际上，甚至虚拟 DOM 的 vnode 创建也将被跳过，因为缓存的子树副本可以被重新使用。

  正确指定缓存数组很重要，否则应该生效的更新可能被跳过。v-memo 传入空依赖数组 (v-memo="[]") 将与 v-once 效果相同。

  与 v-for 一起使用

  v-memo 仅用于性能至上场景中的微小优化，应该很少需要。最常见的情况可能是有助于渲染海量 v-for 列表 (长度超过 1000 的情况)：

• <div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
    <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>
    <p>...more child nodes</p>
  </div>

•  

  当组件的 selected 状态改变，默认会重新创建大量的 vnode，尽管绝大部分都跟之前是一模一样的。v-memo 用在这里本质上是在说“只有当该项的被选中状态改变时才需要更新”。这使得每个选中状态没有变的项能完全重用之前的 vnode 并跳过差异比较。注意这里 memo 依赖数组中并不需要包含 item.id，因为 Vue 也会根据 item 的 :key 进行判断。

  警告

  当搭配 v-for 使用 v-memo，确保两者都绑定在同一个元素上。v-memo 不能用在 v-for 内部。

  v-memo 也能被用于在一些默认优化失败的边际情况下，手动避免子组件出现不需要的更新。但是一样的，开发者需要负责指定正确的依赖数组以免跳过必要的更新。

• <template>
    <ul
      v-for="(item, index) in users"
      :key="item.id"
      v-memo="[selected == item.id]"
    >
      <input
        name="user"
        type="radio"
        :value="item.id"
        v-on:change="selected = item.id"
        :checked="selected === item.id"
      />
      {{
        item.id
      }}
      -
      {{
        item.name
      }}
      -
      {{
        showMsg(item)
      }}
      - selected:
      {{
        item.id === selected
      }}
    </ul>
    选择编号：{{ selected }}
    <input v-model="selected" />
  
    <input v-model="key" />
  </template>
  
  <script lang="ts">
  import { reactive, ref } from "vue";
  export default {
    setup() {
      let users = reactive([
        { id: 201, name: "mark" },
        { id: 202, name: "rose" },
        { id: 203, name: "jack" },
        { id: 204, name: "lucy" },
      ]);
      let selected = ref(0);
      function showMsg(item) {
        console.log("渲染了", item);
      }
      let key = ref("100");
      return { users, selected, showMsg, key };
    },
  };
  </script>
  <style scoped>
  .div1 {
    height: 200px;
    overflow: auto;
    width: 300px;
    background-color: lightgoldenrodyellow;
  }
  .div1 ul li {
    height: 300px;
    line-height: 300px;
  }
  </style>

  

• 参考：

  • v-once

1.5.19、v-cloak

用于隐藏尚未完成编译的 DOM 模板。

• 无需传入

• 详细信息

  该指令只在没有构建步骤的环境下需要使用。

  当使用直接在 DOM 中书写的模板时，可能会出现一种叫做“未编译模板闪现”的情况：用户可能先看到的是还没编译完成的双大括号标签，直到挂载的组件将它们替换为实际渲染的内容。

  v-cloak 会保留在所绑定的元素上，直到相关组件实例被挂载后才移除。配合像 [v-cloak] { display: none } 这样的 CSS 规则，它可以在组件编译完毕前隐藏原始模板。

• 示例：

  [v-cloak] {
    display: none;
  }
  

  <div v-cloak>
    {{ message }}
  </div>

  直到编译完成前，<div> 将不可见。

1.6、重要的v-for指令

1.6.1、v-for

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：

const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
<li v-for="item in items">
  {{ item.message }}
</li>

在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。

const parentMessage = ref('Parent')
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
<li v-for="(item, index) in items">
  {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

v-for 变量的作用域和下面的 JavaScript 代码很类似：

const parentMessage = 'Parent'
const items = [
  /* ... */
]

items.forEach((item, index) => {
  // 可以访问外层的 `parentMessage`
  // 而 `item` 和 `index` 只在这个作用域可用
  console.log(parentMessage, item.message, index)
})

注意 v-for 是如何对应 forEach 回调的函数签名的。实际上，你也可以在定义 v-for 的变量别名时使用解构，和解构函数参数类似：

<li v-for="{ message } in items">
  {{ message }}
</li>

<!-- 有 index 索引时 -->
<li v-for="({ message }, index) in items">
  {{ message }} {{ index }}
</li>

对于多层嵌套的 v-for，作用域的工作方式和函数的作用域很类似。每个 v-for 作用域都可以访问到父级作用域：

<li v-for="item in items">
  <span v-for="childItem in item.children">
    {{ item.message }} {{ childItem }}
  </span>
</li>

你也可以使用 of 作为分隔符来替代 in，这更接近 JavaScript 的迭代器语法：

<div v-for="item of items"></div>

1.6.2、v-for 与对象

你也可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。

const myObject = reactive({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
})
<ul>
  <li v-for="value in myObject">
    {{ value }}
  </li>
</ul>

可以通过提供第二个参数表示属性名 (例如 key)：

<li v-for="(value, key) in myObject">
  {{ key }}: {{ value }}
</li>

第三个参数表示位置索引：

<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

1.6.3、在 v-for 里使用范围值

v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于 1...n 的取值范围重复多次。

<span v-for="n in 10">{{ n }}</span>

注意此处 n 的初值是从 1 开始而非 0。

1.6.4、template 上的v-for

与模板上的 v-if 类似，你也可以在 <template> 标签上使用 v-for 来渲染一个包含多个元素的块。例如：

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

1.6.3、v-for 与 v-if

当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名：

<!--
 这会抛出一个错误，因为属性 todo 此时
 没有在该实例上定义
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

在外新包装一层 <template> 再在其上使用 v-for 可以解决这个问题 (这也更加明显易读)：

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

1.6.4、通过 key 管理状态

Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。

默认模式是高效的，但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态 (例如表单输入值) 的情况。

为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key attribute：

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

当你使用 <template v-for> 时，key 应该被放置在这个 <template> 容器上：

<template v-for="todo in todos" :key="todo.name">
  <li>{{ todo.name }}</li>
</template>

推荐在任何可行的时候为 v-for 提供一个 key attribute，除非所迭代的 DOM 内容非常简单 (例如：不包含组件或有状态的 DOM 元素)，或者你想有意采用默认行为来提高性能。

key 绑定的值期望是一个基础类型的值，例如字符串或 number 类型。不要用对象作为 v-for 的 key。关于 key attribute 的更多用途细节，请参阅 key API 文档。

示例：

<template>
  id:<input type="text" v-model="id" />,name:<input
    type="text"
    v-model="name"
  /><button @click="add1">在末尾添加新人物</button>
  <button @click="add2">在前部添加新人物</button>
  <div v-for="item in list">
    <input type="checkbox" />
    {{ item.id }}.{{ item.name }}
  </div>
</template>

<script lang="ts">
import { reactive, ref } from "vue";
export default {
  setup() {
    let list = reactive([
      {
        id: 1,
        name: "刘备",
      },
      {
        id: 2,
        name: "孙权",
      },
      {
        id: 3,
        name: "曹操",
      },
      {
        id: 4,
        name: "诸葛亮",
      },
    ]);
    let id = ref(0);
    let name = ref("");

    function add1() {
      list.push({
        id: id.value,
        name: name.value,
      });
    }
    function add2() {
      list.unshift({
        id: id.value,
        name: name.value,
      });
    }

    return { list, id, name, add1, add2 };
  },
};
</script>
<style scoped></style>

事先勾选3.曹操，使用push方法王数组中添加对象并没有什么问题

但是，如果将push修改unshift方式添加对象，

v就会发现执行同样的操作时，原先勾选曹操变成了勾选孙权

这是因为勾选是和索引绑定的，当使用unshift方法时，原先的数组对象索引都加1，所以勾选的位置就往回退了一个对象，但是索引仍然不变。因此，就需要将checkbox的勾选和对象本身绑定，而非其索引，这里就需要使用到key。

前面说到需要将checkbox和对象数组中的对象绑定，但是当我们输入如下代码却发现页面报错

<div v-for="item in list" :key="item">
<input type="checkbox">
{{item.id}}.{{item.name}}
</div>

所以可以得出v-for循环时，key属性只能使用number或者string，而不是整个对象，修改代码

key的作用主要是为了高效的更新虚拟DOM

1、在组件中使用v-for循环的时候，如果v-for出现了问题，就必须同时指定唯一的字符串/数字类型的:key值。

2、v-for循环时，key属性只能用number或者string类型。

3、key使用时，必须使用bind属性绑定的形式，指定key的值。

6.5、组件上使用 v-for

这一小节假设你已了解组件的相关知识，或者你也可以先跳过这里，之后再回来看。

我们可以直接在组件上使用 v-for，和在一般的元素上使用没有区别 (别忘记提供一个 key)：

<MyComponent v-for="item in items" :key="item.id" />

但是，这不会自动将任何数据传递给组件，因为组件有自己独立的作用域。为了将迭代后的数据传递到组件中，我们还需要传递 props：

<MyComponent
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
/>

不自动将 item 注入组件的原因是，这会使组件与 v-for 的工作方式紧密耦合。明确其数据的来源可以使组件在其他情况下重用。

<my-component v-for="item in items"></my-component>

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index">
</my-component>

<div id="todo-list-example">
  <input
    v-model="newTodoText"
    v-on:keyup.enter="addNewTodo"
    placeholder="Add a todo"
  >
  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:title="todo"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>
</div>

Vue.component('todo-item', {
  template: '
    <li>
      {{ title }}
      <button v-on:click="$emit(\'remove\')">X</button>
    </li>',
  props: ['title']
})
new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      'Do the dishes',
      'Take out the trash',
      'Mow the lawn'
    ]
  },
  methods: {
    addNewTodo: function () {
      this.todos.push(this.newTodoText)
      this.newTodoText = ''
    }
  }
})

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>列表渲染</title>
    </head>
    <body>
        <div id="app1">
            任务：<input v-model="newTask" @keyup.enter="addNew" placeholder="请输入您要完成的任务" />
            <ul>
                <li is="todoitem" v-for="(task,index) in tasks" :title="task" @remove="removeItem(index)"></li>
            </ul>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            Vue.component("todoitem", {
                template: "<li>{{title}} <button @click='$emit(\"remove\")'>X</button></li>",
                props: ['title']
            });

            var app1 = new Vue({
                el: "#app1",
                data: {
                    newTask: '',
                    tasks: ["买一本书", "给爸妈打电话", "整理自己的硬盘"]
                },
                methods: {
                    addNew: function() {
                        this.tasks.unshift(this.newTask);
                        this.newTask = '';
                    },
                    removeItem: function(index) {
                        if(confirm('确定要移除吗？')) {
                            this.tasks.splice(index, 1);
                        }
                    }
                }
            });
        </script>
    </body>
</html>

1.7、数组变化侦测

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

1. push () 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

2. pop () 方法数组最后一位元素删除并返回数组的最后一个元素。

3. shift () 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

4. unshift () 方法可向数组的开头添加一个或更多元素，并返回新的长度。

5.splice (index,howmany,item1, …, itemX) 方法向 / 从数组中添加 / 删除项目，然后返回被删除的项目
第一个参数：表示从哪个索引位置（index）添加 / 删除元素
第二个参数：要删除的项目数量。如果设置为 0，则不会删除项目。
第三个参数：可选。向数组添加的新项目。

6. sort () 方法对原列表进行排序，如果指定参数，则使用比较函数指定的比较函数。
arr.sort (sortby) 可选。规定排序顺序。必须是函数。

7. 例：大小排序

function sortNumber (a, b) {
  return a - b
}
let arr = [10,5,40,25,1000,1]
arr.sort(sortNumber)
console.log(arr) // [1, 5, 10, 25, 40, 1000]
8. reverse () 方法颠倒数组中元素的顺序。

9. 替换数组

它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

10.filter () 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

11.concat () 方法用于连接两个或多个数组。

12.slice () 方法可从已有的数组中返回选定的元素。

// `items` 是一个数组的 ref
items.value = items.value.filter((item) => item.message.match(/Foo/))

<template>
  {{ arr1 }}

  <button @click="changeArray">修改数组</button>
</template>

<script lang="ts">
import { reactive, ref } from "vue";
export default {
  setup() {
    let arr1 = ref([1, 2, 3, 4, 5, 6]);

    function changeArray() {
      arr1.value = arr1.value.filter((a) => a % 2 == 0);
    }
    return { arr1, changeArray };
  },
};
</script>
<style scoped></style>

const numbers = ref([1, 2, 3, 4, 5])

const evenNumbers = computed(() => {
  return numbers.value.filter((n) => n % 2 === 0)
})
<li v-for="n in evenNumbers">{{ n }}</li>

const sets = ref([
  [1, 2, 3, 4, 5],
  [6, 7, 8, 9, 10]
])

function even(numbers) {
  return numbers.filter((number) => number % 2 === 0)
}
<ul v-for="numbers in sets">
  <li v-for="n in even(numbers)">{{ n }}</li>
</ul>

- return numbers.reverse()
+ return [...numbers].reverse()

二、Class 与 Style 绑定

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性 ，我们可以用v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时， Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

2.1、绑定 HTML Class

2.1.1、对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class 。

<div v-bind:class="{ active: isActive }"></div>

上面的语法表示 classactive 的更新将取决于数据属性 isActive 是否为 真值 。

<template>
  <h2 :class="{ active: isActive }">{{ isActive ? "激活" : "未激活" }}</h2>
  <button @click="isActive = !isActive">isActive:{{ isActive }}</button>
</template>

<script lang="ts" setup>
import { computed } from "@vue/reactivity";
import { reactive, ref, toRefs } from "vue";

let isActive = ref(false);
</script>
<style scoped>
.active {
  background: #9f9;
}
</style>

我们也可以在对象中传入更多属性用来动态切换多个 class 。此外， v-bind:class 指令可以与普通的 class 属性共存。如下模板:

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

如下 data:

data: {
  isActive: true,
  hasError: false
}

渲染为:

<div class="static active"></div>

当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError的值为 true ， class列表将变为 "static active text-danger"。

你也可以直接绑定数据里的一个对象：

<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

渲染的结果和上面一样。我们也可以在这里绑定返回对象的 计算属性。这是一个常用且强大的模式：

<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal',
    }
  }
}

示例：

<template>
  <h2 :class="{ active: isActive, 'text-danger': true }">
    {{ isActive ? "激活" : "未激活" }}
  </h2>
  <button @click="isActive = !isActive">isActive:{{ isActive }}</button>

  <p>
    <label>价格：</label>
    <input v-model="price" />
    <span class="valid" :class="{ requiredPrice }">请输入价格</span>
    <span class="valid" :class="{ rangePrice }">价格只能是0-10000之间</span>
  </p>
</template>

<script lang="ts" setup>
import { computed } from "@vue/reactivity";
import { reactive, ref, toRefs } from "vue";

let isActive = ref(false);
let price = ref();
let requiredPrice = computed(() => {
  return price + "" === "" || isNaN(price.value);
});
let rangePrice = computed(() => {
  return price.value < 0 || price.value > 10000;
});
</script>
<style scoped>
.active {
  background: #9f9;
}
.text-danger {
  color: orangered;
}
.valid {
  color: orangered;
  display: none;
}
.requiredPrice,
.rangePrice {
  display: inline;
}
</style>

结果：

2.1.2、数组语法

我们可以把一个数组传给 v-bind:class ，以应用一个 class 列表：

<div v-bind:class="[activeClass, errorClass]">

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为:

<div class="active text-danger"></div>

如果你也想根据条件切换列表中的 class ，可以用三元表达式：

<div v-bind:class="[isActive ? activeClass : '', errorClass]">

此例始终添加 errorClass ，但是只有在 isActive 是 true 时添加 activeClass 。

不过，当有多个条件 class 时这样写有些繁琐。可以在数组语法中使用对象语法：

<div v-bind:class="[{ active: isActive }, errorClass]">

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Class 与 Style 绑定</title>
    </head>

    <body>
        <div id="app1">
            <span class="bgGreen" v-bind:class="[isHide,isRight]">span3</span>
            <span class="bgGreen" v-bind:class="[(isShow?'bg3':''),isRight,bg4]">span4</span>
            <span class="bgGreen" v-bind:class="[{bg3:isShow},isRight,bg4]">span5</span>
        </div>

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app1 = new Vue({
                el: "#app1",
                data: {
                    isShow: true,
                    isHide: 'bg1',
                    isRight: 'bg2',
                    price: 0
                }

            });
        </script>
    </body>

</html>

结果：

2.1.3、With Components

This section assumes knowledge of  Vue Components. Feel free to skip it and come back later.

When you use the class attribute on a custom component, those classes will be added to the component’s root element. Existing classes on this element will not be overwritten.

For example, if you declare this component:

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

Then add some classes when using it:

<my-component class="baz boo"></my-component>

The rendered HTML will be:

<p class="foo bar baz boo">Hi</p>

The same is true for class bindings:

<my-component v-bind:class="{ active: isActive }"></my-component>

When isActive is truthy, the rendered HTML will be:

<div class="foo bar active"></div>

2.2、绑定内联样式

2.2.1、对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS ，其实它是一个 JavaScript 对象。 CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）：

<template>
  <h2 :style="{ background: background, fontSize: fontSize + 'px' }">样式表</h2>
</template>

<script lang="ts" setup>
import { computed } from "@vue/reactivity";
import { reactive, ref, toRefs } from "vue";
let background = ref("red");
let fontSize = ref(30);
</script>
<style scoped>
</style>

直接绑定到一个样式对象通常更好，让模板更清晰：

<template>
  <h2 :style="objStyle">样式表</h2>
</template>

<script lang="ts" setup>
let objStyle = {
  color: "blue",
  textDecoration: "underline",
};
</script>
<style scoped></style>

同样的，对象语法常常结合返回对象的计算属性使用。

2.2.2、数组语法

v-bind:style 的数组语法可以将多个样式对象应用到一个元素上：

<div v-bind:style="[baseStyles, overridingStyles]">

<template>
  <h2 :style="[objStyle, borderStyle]">样式表</h2>
</template>

<script lang="ts" setup>
let borderStyle = {
  border: "1px solid #666",
};
let objStyle = {
  color: "blue",
  textDecoration: "underline",
};
</script>
<style scoped></style>

2.2.3、自动添加前缀

当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。

官方帮助： http://vuejs.org/guide/class-and-style.html

三、ES6新增数组方法

ECMAScript2015中新增了9个方法，分别是：

1. Array.prototype.indexOf
2. Array.prototype.lastIndexOf
3. Array.prototype.every
4. Array.prototype.some
5. Array.prototype.forEach
6. Array.prototype.map
7. Array.prototype.filter
8. Array.prototype.reduce
9. Array.prototype.reduceRight

3.1、indexOf()找到的元素位置

indexOf()方法返回在该数组中第一个找到的元素位置，如果它不存在则返回-1。
不使用indexOf时：

var arr = ['apple','orange','pear'],
found = false;
for(var i= 0, l = arr.length; i< l; i++){
if(arr[i] === 'orange'){
found = true;
}
}
console.log("found:",found);

使用后：

var arr = ['apple','orange','pear'];
console.log("found:", arr.indexOf("orange") != -1);

3.2、filter()过滤

该filter()方法创建一个新的匹配过滤条件的数组。
不用 filter() 时

var arr = [
{"name":"apple", "count": 2},
{"name":"orange", "count": 5},
{"name":"pear", "count": 3},
{"name":"orange", "count": 16},
];
var newArr = [];
for(var i= 0, l = arr.length; i< l; i++){
if(arr[i].name === "orange" ){
newArr.push(arr[i]);
}
}
console.log("Filter results:",newArr);

用了 filter():

var arr = [
{"name":"apple", "count": 2},
{"name":"orange", "count": 5},
{"name":"pear", "count": 3},
{"name":"orange", "count": 16},
];

var newArr = arr.filter(function(item){
return item.name === "orange";
});
console.log("Filter results:",newArr);

3.3、forEach()迭代

forEach为每个元素执行对应的方法

var arr = [1,2,3,4,5,6,7,8];

// Uses the usual "for" loop to iterate
for(var i= 0, l = arr.length; i< l; i++){
console.log(arr[i]);
}

console.log("========================");

//Uses forEach to iterate
arr.forEach(function(item,index){
console.log(item);
});

forEach是用来替换for循环的

3.4、map()映射

map()对数组的每个元素进行一定操作（映射）后，会返回一个新的数组

不使用map：

var oldArr = [{first_name:"Colin",last_name:"Toh"},{first_name:"Addy",last_name:"Osmani"},{first_name:"Yehuda",last_name:"Katz"}];

function getNewArr(){

var newArr = [];

for(var i= 0, l = oldArr.length; i< l; i++){
var item = oldArr[i];
item.full_name = [item.first_name,item.last_name].join(" ");
newArr[i] = item;
}

return newArr;
}

console.log(getNewArr());

使用map后：

var oldArr = [{first_name:"Colin",last_name:"Toh"},{first_name:"Addy",last_name:"Osmani"},{first_name:"Yehuda",last_name:"Katz"}];

function getNewArr(){

return oldArr.map(function(item,index){
item.full_name = [item.first_name,item.last_name].join(" ");
return item;
});

}

console.log(getNewArr());

map()是处理服务器返回数据时是一个非常实用的函数。

3.5、reduce()累加器

reduce()可以实现一个累加器的功能，将数组的每个值（从左到右）将其降低到一个值。
说实话刚开始理解这句话有点难度，它太抽象了。
场景： 统计一个数组中有多少个不重复的单词
不使用reduce时：

var arr = ["apple","orange","apple","orange","pear","orange"];

function getWordCnt(){
var obj = {};

for(var i= 0, l = arr.length; i< l; i++){
var item = arr[i];
obj[item] = (obj[item] +1 ) || 1;
}

return obj;
}

console.log(getWordCnt());

使用reduce()后

var arr = ["apple","orange","apple","orange","pear","orange"];

function getWordCnt(){
return arr.reduce(function(prev,next){
prev[next] = (prev[next] + 1) || 1;
return prev;
},{});
}

console.log(getWordCnt());

让我先解释一下我自己对reduce的理解。reduce(callback, initialValue)会传入两个变量。回调函数(callback)和初始值(initialValue)。假设函数它有个传入参数，prev和next,index和array。prev和next你是必须要了解的。
一般来讲prev是从数组中第一个元素开始的，next是第二个元素。但是当你传入初始值(initialValue)后，第一个prev将是initivalValue，next将是数组中的第一个元素。
比如：

/*
* 二者的区别，在console中运行一下即可知晓
*/

var arr = ["apple","orange"];

function noPassValue(){
return arr.reduce(function(prev,next){
console.log("prev:",prev);
console.log("next:",next);

return prev + " " +next;
});
}
function passValue(){
return arr.reduce(function(prev,next){
console.log("prev:",prev);
console.log("next:",next);

prev[next] = 1;
return prev;
},{});
}

console.log("No Additional parameter:",noPassValue());
console.log("----------------");
console.log("With {} as an additional parameter:",passValue());

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>列表渲染</title>
    </head>

    <body>
        <div id="app1">
            <span v-for="n in items">
                    {{n}} 
                </span>
            <button @click="indexOfMethod">indexOf()找到的元素位置</button>
            <button @click="filterMethod">filter()过滤</button>
            <button @click="forEachMethod">forEach()迭代</button>
            <button @click="mapMethod">map()映射</button>
            <button @click="reduceMethod">reduce()累加器</button>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app1 = new Vue({
                el: "#app1",
                data: {
                    items: [1, 3, 7, 9, 2, 4, 6, 8, 3],
                    fruits: [{
                            "name": "apple",
                            "count": 2
                        },
                        {
                            "name": "orange",
                            "count": 5
                        },
                        {
                            "name": "pear",
                            "count": 3
                        },
                        {
                            "name": "orange",
                            "count": 16
                        }
                    ],
                    words: ["apple", "orange", "apple", "orange", "pear", "orange"]
                },
                methods: {
                    indexOfMethod: function() {
                        console.log("数字3第一次出现的位置是：" + this.items.indexOf(3));
                        console.log("数字5第一次出现的位置是：" + this.items.indexOf(5));
                    },
                    filterMethod: function() {
                        //获得数量不小于5的水果
                        var arr1 = this.fruits.filter(function(f) {
                            return f.count >= 5;
                        });
                        console.log(JSON.stringify(arr1));
                        //获得名称中含有r的水果
                        var arr2 = this.fruits.filter(function(f) {
                            return f.name.match(/r/igm);
                        });
                        console.log(JSON.stringify(arr2));
                    },
                    forEachMethod: function() {
                        this.fruits.forEach(function(obj, index) {
                            console.log(index + "-" + obj.name + "-" + obj.count);
                        });
                    },
                    mapMethod: function() {
                        var arr3 = this.fruits.map(function(obj, index) {
                            obj.showInfo = index + "->水果：" + obj.name + "，数量：" + obj.count;
                            return obj;
                        });
                        console.log(JSON.stringify(arr3));
                    },
                    reduceMethod: function() {
                        var objs = {};
                        for(var i = 0, l = this.words.length; i < l; i++) {
                            var item = this.words[i];
                            objs[item] = (objs[item] + 1) || 1;
                        }
                        console.log(JSON.stringify(objs));

                        var objs2 = this.words.reduce(function(prev, next) {
                            console.log("prev:", JSON.stringify(prev));
                            console.log("next:", JSON.stringify(next));
                            prev[next] = (prev[next] + 1) || 1;
                            return prev;
                        }, {});
                        console.log(JSON.stringify(objs2));
                    }
                }
            });
        </script>
    </body>

</html>

结果：

结果

四、VUE UI框架

4.1、PC端UI库

4.1.1、 element-plus(PC端) 

饿了么UI库

文档地址：https://element-plus.org/zh-CN/

npm install element-plus --save

4.1.2、完整引入

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

4.1.3、Volar 支持

如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

4.1.4、按需导入

您需要使用额外的插件来导入要使用的组件。

自动导入推荐

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

// webpack.config.js

const { defineConfig } = require('@vue/cli-service')

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack:{
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  }
})

想了解更多打包 (Rollup, Vue CLI) 和配置工具，请参考 unplugin-vue-components 和 unplugin-auto-import。

4.1.5、手动导入

Element Plus 提供了基于 ES Module 开箱即用的 Tree Shaking 功能。

但是你需要安装 unplugin-element-plus 来导入样式。 请参考 文档 了解如何配置它。

App.vue

<template>
  <el-button>I am ElButton</el-button>
</template>
<script>
  import { ElButton } from 'element-plus'
  export default {
    components: { ElButton },
  }
</script>

// vite.config.ts
import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  // ...
  plugins: [ElementPlus()],
})

import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'

4.1.6、快捷搭建项目模板

我们提供了 Vite 模板。 对于 Laravel 用户，我们也准备了相应的模板，同样可以直接下载使用。

4.1.7、全局配置

在引入 Element Plus 时，可以传入一个包含 size 和 zIndex 属性的全局配置对象。 size 用于设置表单组件的默认尺寸，zIndex 用于设置弹出组件的层级，zIndex 的默认值为 2000。

完整引入：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 })

按需引入：

<template>
  <el-config-provider :size="size" :z-index="zIndex">
    <app />
  </el-config-provider>
</template>

<script>
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'

export default defineComponent({
  components: {
    ElConfigProvider,
  },
  setup() {
    return {
      zIndex: 3000,
      size: 'small',
    }
  },
})
</script>

4.1.18、CDN引入在HTML中直接使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- Import style -->
    <link
      rel="stylesheet"
      href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"
    />
    <!-- Import Vue 3 -->
    <script src="//cdn.jsdelivr.net/npm/vue@3"></script>
    <!-- Import component library -->
    <script src="//cdn.jsdelivr.net/npm/element-plus"></script>
  </head>
  <body>
    <div id="app">
      <el-button @click="messageHandle">{{message}}</el-button>
    </div>
    <script>
      const { ElMessage } = ElementPlus;
      let app = Vue.createApp({
        data() {
          return {
            message: "Hello Element Plus!",
          };
        },
        setup() {
          function messageHandle() {
            ElMessage({
              message: "操作成功了！",
              type: "success",
              "show-close": true,
            });
          }
          return { messageHandle };
        },
      })
        .use(ElementPlus)
        .mount("#app");
    </script>
  </body>
</html>

2. tdesign-vue-next(PC端)
腾讯优质 UI 组件，配套工具完满，设计工整，文档清晰
文档地址：https://tdesign.tencent.com/vue-next/overview

3. arco-design-vue(PC端)
字节跳动 UI 组件库开源，大厂逻辑，设计文档完美
文档地址：https://arco.design/vue/docs/start

4. ant-design-vue(PC端)
蚂蚁前端 UI 库，面向企业级中后台
文档地址：https://www.antdv.com/components/overview-cn

5. naive-ui(PC端)
宝藏 Vue UI 库，Vue UI 新星，从 Vue 3 起步
文档地址：https://www.naiveui.com/zh-CN/os-theme/docs/introduction

6. Buefy(PC端)
为基于 Bulma 的 Vue.js 提供了轻量级的 UI 组件
文档地址：https://buefy.org/documentation

7. Vue Material(PC端)
简单、轻巧，并且完全按照 Google Material Design 规范构建
文档地址：https://www.creative-tim.com/vuematerial/components/app

8. Vuesax(PC端)
一个用Vuesax创建的UI组件框架，具有独特和愉快的风格
文档地址：https://vuesax.com/docs/guide/

9. Vuestic(PC端)
完全兼容Vue.js 3，包含50多个功能丰富的组件，可用于任何设计解决方案，允许通过配置和CSS变量全局配置组件，完全响应和支持现代浏览器(除IE11)，与i18n无缝集成
文档地址：https://vuestic.dev/zh/introduction/overview

10. View UI Plus(PC端)
View UI Plus 是 View Design 设计体系中基于 Vue.js 3 的一套 UI 组件库，主要用于企业级中后台系统。
文档地址：https://www.iviewui.com/view-ui-plus/guide/introduce

https://github.com/iview/iview
https://iviewui.com/

4.2、移动端UI库

4.2.1. vant-ui(移动端)

有赞团队开源移动 UI 组件库，全面支持 Vue 3，针对移动端
文档地址：https://vant-contrib.gitee.io/vant/#/zh-CN

4.2.2、在HTML中直接使用vant,CDN依赖

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入样式文件 -->
    <link
      rel="stylesheet"
      href="https://fastly.jsdelivr.net/npm/vant@3/lib/index.css"
    />
  </head>
  <body>
    <div id="app">
      <van-button @click="showInfo">按钮</van-button>
    </div>
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
    <script src="https://fastly.jsdelivr.net/npm/vant@3/lib/vant.min.js"></script>

    <script>
      // 在 #app 标签下渲染一个按钮组件
      const app = Vue.createApp({
        setup() {
          function showInfo() {
            vant.Toast("提示");
          }
          return { showInfo };
        },
      });
      app.use(vant);

      // 通过 CDN 引入时不会自动注册 Lazyload 组件
      // 可以通过下面的方式手动注册
      app.use(vant.Lazyload);

      app.mount("#app");
    </script>
  </body>
</html>

2. nutui(移动端)
京东出品，移动端友好，面向电商业务场景
文档地址：https://nutui.jd.com/#/guide/intro

3. vuetify(移动端)
老牌 Vue UI ，基于谷歌的 Material Design 样式开发
文档地址：https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides

4. varlet(移动端)
Varlet 是一个基于 Vue3 开发的 Material 风格移动端组件库，全面拥抱 Vue3 生态，由社区建立起来的组件库团队进行维护。
文档地址：https://varlet.gitee.io/varlet-ui/#/zh-CN/home

5. tdesign-mobile-vue(移动端)
tdesign的移动端版本UI库，面向vue3
文档地址：https://tdesign.tencent.com/mobile-vue/getting-started

4.3、PC端后台管理

4.3.1、打不开github的方法

vue-admin-better

vue-pure-admin

Geeker-Admin

五、数制转换

JS中，通过利用js方法，可以很方便的实现2,8,10,16进制之间的相互转换

1、2,8,16进制格式的数据转换到10进制数据

var num=parseInt(arg1,arg2);

第一个参数就是需要转换为10进制的数，arg2就是被转换数据的进制值，可以是2,8,16等。

如：将十六进制的数‘d9’转为十进制数：

var num=parseInt(d9,16);//num=217

2、将10进制格式的数据转为2,8,16进制格式数据

var num=parseInt(“217”);//如果这个数是字符串格式的，需要执行这一步
var oxNum=num.toString(16);//参数可以是2,8,16.设置转换10进制数据到对应进制格式，本例是将num转成16进制数据 oxNum=d9

3、2,8,10,16任意进制之间转化

通过10进制作为媒介，便可以实现任意进制之间相互转化了

六、示例下载

https://gitee.com/zhangguo5/vue3_-chapter1.git

小红书项目要求：

http://www.cnblogs.com/xsblog/p/8144290.html

七、作业

7.1、完成一个简单的南方打游戏，页面随机出现字符（1级出现5个，2级10个，一直增加；打完50个没有错则升级到下一级；第n关打错n个就结束），字符可以下落，可以有动画效果；

7.2、可以滚动的“回顶端”

 不允许使用fixed布局，要求使用鼠标滚动事件，要有动画效果，延迟下移

7.3、请完成一个只能输入数字与-的文本框

7.4、完成一个不能输入空格的文本框

7.5、完成上课的每一个示例

7.6、请完成一个商品管理模块，要求如下：

• 使用Element+vue技术实现
• 添加与修改功能使用模式窗口
• 支持全选与反选，隔行换色与光棒效果
• 详细是点击时在弹出层中显示当前商品的所有信息
• 尝试分页（选做）

7.7、增强商品管理

• 数据从后台加载，请注意跨域（axios）
• 实现搜索功能（Lodash）
• 有验证、有错误提示
• 增加删除与添加时的动画效果（选作）
• 了解UIKit（选作）

7.8、请完成一个智能机器人，重点练习使用vue-cli+app界面（任意框架）

接口：http://www.itpk.cn/robot.php、http://www.haoservice.com/docs/119

打包后在手机端根据提问给出答案，app界面

7.9、请随机生成100个字母，放入数组中，统计每个字母出现的次数，使用两种方法使用：a不使用reduce，b使用reduce

八、视频

【Vue3 + Vuex + Pinia + TypeScript + Router】 https://www.bilibili.com/video/BV1at4y1F75D?share_source=copy_web&vd_source=475a31f3c5d6353a782007cd4c638a8a