菜鸟教程 --- Vue3 教程

擒贼先擒王

已于 2024-08-06 23:43:24 修改

阅读量8.4k

点赞数 12

分类专栏： Javascript 文章标签： vue.js 前端

于 2022-07-17 01:05:00 首次发布

本文链接：https://blog.csdn.net/freeking101/article/details/125810440

版权

Javascript 专栏收录该内容

14 篇文章 5 订阅

订阅专栏

runoob vue3 教程：https://www.runoob.com/vue3/vue3-install.html
VUE 超级详细教程：https://blog.csdn.net/weixin_42371679/article/details/112408800
vue 爱好者：https://vue3js.cn/
vue 官网、文档、指南、教程：https://staging-cn.vuejs.org/
IDEA版 (vue前后端分离项目)：https://code100.blog.csdn.net/article/details/118926442
在线工具 ( RUNOOB.com 在线工具 )：https://www.runoob.com/

4个小时带你快速入门vue：https://www.bilibili.com/video/BV12J411m7MG

Vue 基础
本地应用 --- 记事本
网络应用 --- 查询天气(网络请求库axios + vue) ( axios介绍和使用：https://blog.csdn.net/qq_40837310/article/details/123028044 )
综合应用 --- 播放器

黑马程序员Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程

：https://search.bilibili.com/all?keyword=Vue+3+%E5%85%A8%E5%AE%B6%E6%A1%B6

：https://www.bilibili.com/video/BV1zq4y1p7ga

vue 源码阅读解析：https://zhuanlan.zhihu.com/p/419896443
深入理解vue底层原理：https://blog.csdn.net/dream2222222222/article/details/103256281
Vue 源码解读 ( 系列)：https://juejin.cn/user/1028798616461326/posts
视频：https://search.bilibili.com/all?keyword=Vue.js源码全方位深入解析

1、Vue 简介、安装、创建项目

Vue 简介

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。
Vue 只关注视图层，采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 学习起来非常简单。

提示：学习 vue 时，默认你已经具有 HTML、CSS 和 JavaScript 的中级知识。

Vue 特点 (响应的数据绑定)

Vue 是一个前端框架，具有如下特点：

响应的数据绑定 ：数据发生变化时，可以立即感知到。就是 实时(双向)更新数据。比如你改变一个输入框 Input 标签的值，会自动同步更新到页面上其他绑定该输入框的组件的值。
组件化：页面上小到一个按钮都可以是一个单独的文件.vue，这些小组件直接可以像乐高积木一样通过互相引用而组装起来

基于 vue 的 web 开发

早期 web 开发是基于DOM的，通过 JavaScript 获取网页 DOM 元素，然后操作 DOM 元素
基于 vue 的 web 开发：vue 本身是使用 JavaScript 编写，只是封装了一些以 v- 开头的一系列指令，可以通过这些指令直接操作 DOM 元素，不用再通过 JavaScript 直接操作。
vue 作用就是把 Javascript 对象数据绑定到 HTML 的 dom 节点上。
vue 开发特点：页面由数据生成 ( 根据数据生成页面)，数据改变时，页面会同步改变。

响应的数据绑定

响应式就是直接在控制台上对数组中的元素进行增删改查时，页面中的展示会跟着变化。

Vue.js 的目标：通过尽可能简单的 API 实现 响应的数据绑定 和 组合的视图组件。

MVVM 模式

M：即Model，模型，包括数据和一些基本操作
V：即View，视图，页面渲染结果
VM：即 View-Model，模型与视图间的双向操作（无需开发人员干涉)

不使用 MVVM 和使用 MVVM 的区别

不使用 MVVM 时，开发人员从后端获取需要的数据模型，然后要通过 DOM 操作 Model 并渲染到View中。而后当用户操作视图，还需要通过 DOM 获取 View 中的数据，然后同步到 Model 中。
使用 MVVM 后，MVVM 中的 VM 要做的事情就是把 DOM 操作完全封装起来，开发人员不用再关心 Model 和 View 之间是如何互相影响的。只要 Model 发生了改变，View上自然就会表现出来。当用户修改了 View，Model 中的数据也会跟着改变。这样就把开发人员从繁琐的DOM 操作中解放出来，把关注点放在如何操作 Model 上。

示例：单文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 </title>
<script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="hello-vue" class="demo">
  {{ message }}
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>

JavaScript 高阶函数

filter：对数组中的数据进行过滤，满足条件的则放到新数组中

const nums=[20,40,80,100,111,212,212]
//filter
const newNum1=nums.filter(function (n) {
    return n<100
})

map：对数组中的数据进行处理后放到新数组里面

const nums=[20,40,80,100,111,212,212]
//2、map
const newNum2=newNum1.map(function (n) {
    return n*2
})

reduce：对数组中的数据进行累加

const nums=[20,40,80,100,111,212,212]
//3、reduce
const newNum3=nums.reduce(function (previousValue,n) {
   return previousValue+n
},0)  //初始值是0

箭头函数

两个参数写法：
const sum=(num1,num2)=>{ return num1+num2; }
console.log(sum(2,3));
一个参数写法：const power2 = num => { num*num;}
没有参数写法：const demo = ()=> {console.log("没有参数");}

this 指向的问题。在箭头函数中，this是向外层作用域中，一层一层向外找，直到有this

const obj={
    aaa(){
        setTimeout(function () {
            console.log(this);
        },1000);

        setTimeout(()=>console.log(this),1000);
    }
};
obj.aaa();

 const obj={
   aaa(){
       setTimeout(function () {
           setTimeout(function () {
               console.log(this);
           });
           setTimeout(()=>{
               console.log(this);
           });
       });
       setTimeout(()=>{
            setTimeout(function () {
                console.log(this);
            });
            setTimeout(()=>{
                console.log(this);
            });
       });
   }
};
obj.aaa();

导入 vue 框架

快速开始：https://cn.vuejs.org/guide/quick-start.html

方法 1：CDN 包的形式导入。示例：<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> 。通过 CDN 使用 Vue 时，不涉及“构建步骤”。这使得设置更加简单，并且可以用于增强静态的 HTML 或与后端框架集成。但是，你将无法使用单文件组件 (SFC) 语法。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue
  
  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

方法 2：在Vue.js官网下载最新版本，然后使用 <script> 标签引入。与 CDN 方法类似。

方法 3：使用 ES 模块构建版本。现代浏览器大多都已原生支持 ES 模块。因此可以像下面一样通过 CDN 以及原生 ES 模块使用 Vue：

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  
  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

方法 4：使用导入映射表 (Import Maps) 来告诉浏览器如何定位到导入的 vue：

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

方法 5：拆分模块。可能需要将代码分割成单独的 JavaScript 文件，以便更容易管理。例如：

<!-- index.html -->
<div id="app"></div>

<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>

// my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>Count is: {{ count }}</div>`
}

如果直接在浏览器中打开了上面的 index.html，你会发现它抛出了一个错误，因为 ES 模块不能通过 file:// 协议工作，也即是当你打开一个本地文件时浏览器使用的协议。

由于安全原因，ES 模块只能通过 http:// 协议工作，也即是浏览器在打开网页时使用的协议。为了使 ES 模块在我们的本地机器上工作，我们需要使用本地的 HTTP 服务器，通过 http:// 协议来提供 index.html。

要启动一个本地的 HTTP 服务器，请先安装 Node.js，然后通过命令行在 HTML 文件所在文件夹下运行 npx serve。你也可以使用其他任何可以基于正确的 MIME 类型服务静态文件的 HTTP 服务器。

可能你也注意到了，这里导入的组件模板是内联的 JavaScript 字符串。如果你正在使用 VS Code，你可以安装 es6-string-html 扩展，然后在字符串前加上一个前缀注释 /*html*/ 以高亮语法。

Vue3 创建项目

项目脚手架：https://cn.vuejs.org/guide/scaling-up/tooling.html

安装 cnpm

由于国内 npm 安装速度慢，可以使用淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
npm -v # 查看版本
cnpm install npm -g # 升级 npm
npm install cnpm -g # 升级或安装 cnpm
npm、cnpm 能很好地和诸如 webpack 或 Rollup 模块打包器配合使用。

方法 1： npm init vue@latest

执行命令：npm init vue@latest # 安装最新稳定版。同时将会安装并执行 create-vue，它是 Vue 官方的脚手架工具。如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：
$ cd runoob-vue3-test
$ npm install
$ npm run dev

直接访问：http://localhost:5173/ 显示如下。在使用 Vue 时，推荐安装浏览器插件 Vue Devtools，它允许你在一个更友好的界面中审查和调试 Vue 应用。

方法 2 (推荐)：npm create vue@latest

命令执行成功后，会安装和执行 create-vue，它是 Vue 提供的官方脚手架工具。跟随命令行的提示继续操作即可。

要学习更多关于 Vite 的知识，请查看 Vite 官方文档。
若要了解如何为一个 Vite 项目配置 Vue 相关的特殊行为，比如向 Vue 编译器传递相关选项，请查看 @vitejs/plugin-vue 的文档。

目录结构

目录说明

方法 3 (推荐)：npm init vite

Vite 是一个轻量级的、速度极快的构建工具，可以快速构建 Vue 项目。对 Vue SFC 提供第一优先级支持。老方法：npm init @vitejs/app <project-name> ( 注意：@vitejs/create-app 已经废弃, 使用 npm init vite 代替 )

创建 vue 项目，依次执行下面命令

npm init vite <project-name>
cd vite-project
npm install
npm run dev

打开 http://localhost:3000/，显示如下：

方法 4：Vue CLI

Vue CLI 是官方提供的基于 Webpack 的 Vue 工具链，是一个命令行工具，可用于快速搭建大型单页应用。它现在处于维护模式。建议使用 Vite 开始新的项目，除非你依赖特定的 Webpack 的特性。在大多数情况下，Vite 将提供更优秀的开发体验。

关于从 Vue CLI 迁移到 Vite 的资源：

VueSchool.io 的 Vue CLI -> Vite 迁移指南
迁移支持工具 / 插件

全局安装：npm install -g @vue/cli 或 cnpm install -g @vue/cli 或 yarn global add @vue/cli

安装完后查看版本：vue --version
然后在 Vue 项目中运行：vue upgrade --next

创建一个项目：vue create my-project 或者 vue ui

执行 vue ui 命令成功后，在浏览器中会打开一个图形化界面，可以用来创建和管理项目：

方法 5 (推荐)：使用 IDE 创建

推荐的 IDE 配置是 Visual Studio Code + Vue - Official 扩展。如果使用其他编辑器，参考 IDE 支持章节。

Vue3 项目打包

当准备将应用发布到生产环境时，就需要打包 Vue 项目。

打包 Vue 项目使用以下命令：npm run build

执行完成后，会在 Vue 项目下会生成一个 dist 目录，该目录一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 images（如果有图片的话）。

如果直接双击打开 index.html，在浏览器中页面可能是空白了，要正常显示则需要修改下 index.html 文件中 js、css 文件路径。

例如我们打开 dist/index.html 文件看到 css 和 js 文件路径是绝对路径：

<link href=/static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=/static/js/app.717bb358ddc19e181140.js></script>
...

我们把 js、css 文件路径修改为相对路径：

<link href=static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=static/js/app.717bb358ddc19e181140.js></script>
...

这样直接双击 dist/index.html 文件就可以在浏览器中看到效果了。

2、vue2 教程、vue3 教程

vue2 教程

Vue.js 2.0 教程：https://www.w3cschool.cn/vuejs2/

Vue.js 基础教程

Vue.js 2.0 安装
Vue.js 2.0 介绍
Vue.js 2.0 实例
Vue.js 2.0 模板语法
Vue.js 2.0 计算属性
Vue.js 2.0 Class 与 Style 绑定
Vue.js 2.0 条件渲染
Vue.js 2.0 列表渲染
Vue.js 2.0 事件处理器
Vue.js 2.0 表单控件绑定
Vue.js 2.0 组件

Vue.js 2.0 进阶教程

Vue.js 2.0 深入响应式原理
Vue.js 2.0 过渡效果
Vue.js 2.0 过渡状态
Vue.js 2.0 Render 函数
Vue.js 2.0 自定义指令
Vue.js 2.0 混合
Vue.js 2.0 插件
Vue.js 2.0 单文件组件
Vue.js 2.0 生产环境部署
Vue.js 2.0 路由
Vue.js 2.0 状态管理
Vue.js 2.0 单元测试
Vue.js 2.0 服务端渲染
Vue.js 2.0 对比其他框架

vue3 教程

VUE3 教程：https://www.w3cschool.cn/vuejs3/

Vue.js 3.0 教程基础

Vue 3.0 安装
Vue 3.0 介绍
Vue 3.0 应用&组件实例
Vue 3.0 模板语法
Vue 3.0 Data Property和方法
Vue 3.0 计算属性和侦听器
Vue 3.0 Class与Style绑定
Vue 3.0 条件渲染
Vue 3.0 列表渲染
Vue 3.0 事件处理
Vue 3.0 表单输入绑定
Vue 3.0 组件基础

Vue.js 3.0 深入组件

Vue 3.0 组件注册
Vue 3.0 Props
Vue 3.0 非Prop的Attribute
Vue 3.0 自定义事件
Vue 3.0 插槽
Vue 3.0 提供/注入
Vue 3.0 动态组件&异步组件
Vue 3.0 模板引用
Vue 3.0 处理边界情况

Vue.js 3.0 过渡&动画

Vue 3.0 过渡&动画概述
Vue 3.0 进入过渡&离开过渡
Vue 3.0 列表过渡
Vue 3.0 状态过渡

Vue.js 3.0 可复用&组合

Vue 3.0 混入
Vue 3.0 自定义指令
Vue 3.0 Teleport
Vue 3.0 渲染函数
Vue 3.0 插件
Vue3 组合式函数

Vue.js 3.0 高阶指南

Vue 3.0 响应性深入响应性原理
Vue 3.0 响应性基础
Vue 3.0 响应式计算和侦听
Vue 3.0 组合式API 介绍
Vue 3.0 组合式API Setup
Vue 3.0 组合式API 生命周期钩子
Vue 3.0 组合式API 提供/注入
Vue 3.0 组合式API 模板引用
Vue 3.0 渲染机制和优化
Vue2中的更改检测警告

Vue.js 3.0 工具

Vue 3.0 单文件组件
Vue 3.0 测试
Vue 3.0 TypeScript支持
Vue 3.0 Mobile

Vue.js 3.0 规模化

Vue 3.0 路由
Vue 3.0 状态管理
Vue 3.0 服务端渲染

Vue.js 3.0 无障碍

Vue 3.0 基础
Vue 3.0 语义学
Vue 3.0 标准
Vue 3.0 资源

Vue.js 3.0 从Vue2迁移

Vue 3.0 介绍
Vue 3.0 v-for中的Ref数组
Vue 3.0 异步组件
Vue 3.0 attribute强制行为
Vue 3.0 自定义指令
Vue 3.0 自定义元素交互
Vue 3.0 Data选项
Vue 3.0 事件API
Vue 3.0 过滤器
Vue 3.0 片段
Vue 3.0 函数式组件
Vue 3.0 全局API
Vue 3.0 全局API Treeshaking
Vue 3.0 内联模板 Attribute
Vue 3.0 key attribute
Vue 3.0 按键修饰符
Vue 3.0 在prop的默认函数中访问this
Vue 3.0 渲染函数API
Vue 3.0 Slot统一
Vue 3.0 过渡的class名更改
Vue 3.0 v-model
Vue 3.0 v-if与v-for的优先级对比
Vue 3.0 v-bind合并行为

Vue.js 3.0 贡献文档

Vue 3.0文档编写指南
Vue 3.0文档风格指南
Vue 3.0 翻译

Vue.js 3.0 API参考

Vue 3.0 应用配置
Vue 3.0 应用API
Vue 3.0 全局API
Vue 3.0 选项 Data
Vue 3.0 选项 DOM
Vue 3.0 选项生命周期钩子
Vue 3.0 选项/资源
Vue 3.0 选项组合
Vue 3.0 选项杂项
Vue 3.0 实例property
Vue 3.0 实例方法
Vue 3.0 指令
Vue 3.0 特殊指令
Vue 3.0 内置组件
Vue 3.0 响应性基础 API
Vue 3.0 响应性API Refs
Vue 3.0 响应性API Computed与watch
Vue 3.0 组合式API

Vue.js 3.0 风格指南

Vue 3.0 风格指南

vue2、vue3 区别

盘点 Vue3 与 Vue2 的区别：https://juejin.cn/post/7067413380922867725

Vue 2.0 和 Vue 3.0 的区别：https://developer.aliyun.com/article/891519

创建方式不同

vue2 通过构造函数 Vue 创建一个 Vue 的根实例 启动
vue3 通过 Vue.createApp 创建一个 Vue 的根实例 启动

声明周期不同

生命周期方面（大多生命周期前加on）

3、vue3 使用教程

学 vue，主要从以下几个方面学习：

模板语法（怎么写）
指令
选项、生命周期（写在哪儿）
vuejs-devtools（怎么调试）

Vue3 基础语法

创建 Vue 实例是开始使用 Vue.js 的第一步，通常你是在一个 HTML 文件中创建一个 Vue 实例并将其挂载到一个 DOM 元素上。

创建 html 文件并执行vue

Vue3 中应用是通过 createApp 函数来创建。语法格式：const app = Vue.createApp({ /* 选项 */ })

注意：被挂载的 div 要放在 vue 的上面，否则 vue 管不到

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="hello-vue" class="demo">
    {{ message }}
</div>

<script>
    const HelloVueApp = {
        data() {
            return {
                message: 'Hello Vue!!'
            }
        }
    }

    Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>

HTML 部分说明：

<div id="hello-vue" class="demo">：这是一个 <div> 元素，它具有 id 为 hello-vue 和 class 为 demo。在 Vue 应用中，这个 <div> 将会被 Vue 实例管理，并且会在数据发生变化时更新内容。
{{ message }}：这是 Vue.js 的模板语法，用于将 Vue 实例中的 message 数据绑定到页面上。当 Vue 实例中的 message 数据变化时，页面上的内容也会随之更新。

Vue 实例定义：

const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

HelloVueApp 是一个普通的 JavaScript 对象，包含了 Vue 组件选项。
data() 方法返回一个包含 message 属性的对象，这个属性的初始值是 'Hello Vue!!'。

创建并挂载 Vue 应用：

Vue.createApp() 方法用于创建一个 Vue 应用实例，参数是一个包含组件选项的对象（这里是 HelloVueApp）。
.mount('#hello-vue') 方法将 Vue 应用实例挂载到页面中具有 id="hello-vue" 的 DOM 元素上。

执行过程

页面加载时，浏览器解析 HTML 和 JavaScript。
Vue.js 脚本执行时，创建了一个 Vue 应用实例，并将其绑定到 <div id="hello-vue"> 元素上。
Vue 应用实例根据 data() 中的初始数据，将 message 的值渲染到页面上的 {{ message }} 处。
当 message 数据发生变化时（例如通过用户交互或异步操作），页面会自动更新以反映这些变化。

示例：Hello Vue

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 </title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="hello-vue" class="demo">
  {{ message }}
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>

说明：上面代码使用 mount('#hello-vue') 将 Vue 的 HelloVueApp(根组件) 挂载到 dom 节点 <div id="hello-vue"></div> 中。

createApp 的参数是 根组件(这里是 HelloVueApp)。在挂载应用时，该组件是渲染的起点。
createApp 创建一个应用。
使用 mount() 挂载应用到 dom 中 (应用必须挂载到一个 DOM 元素中)。
{{ }} 用于输出对象属性和函数返回值。{{ message }} 对应应用中message的值。

简单示例：一个计数器(v-on:click)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 </title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="hello-vue" class="demo">
    <div>{{ message }}</div>

    <div>
        <h2>当前计数: {{ count }}</h2>
        <button v-on:click="count++">+</button>
        <button v-on:click="count--">-</button>
    </div>
</div>

<script>
    const HelloVueApp = {
        data() {
            return {
                count: 0,
                message: 'Hello Vue!!'
            }
        }
    }

    Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>

采用函数（如果代码太多的话）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 </title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="hello-vue" class="demo">
    <div>{{ message }}</div>

    <div>
        <h2>当前计数: {{ count }}</h2>
        <button v-on:click="add">+</button>
        <button v-on:click="mid">-</button>
    </div>
</div>

<script>
    const HelloVueApp = {
        data() {
            return {
                count: 0,
                message: 'Hello Vue!!'
            }
        },
        methods: {
            add: function () {
                this.count++;
            },
            mid: function () {
                this.count--;
            }
        }
    }

    Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>

声明式渲染

1. 首先 声明 dom 节点
2. 然后 再把数据渲染到 dom 节点。就是vue内部用JavaScript 把数据渲染同步到dom节点

"单向、双向" 数据同步

单向数据同步：dom 节点中可以使用 vue 的指令来实时同步 JavaScript 的数据。这个是单向数据同步 。如果需要双向数据同步，即从 dom 同步数据到 JavaScript 中，可以使用 Vue 的 v-model 指令。v-model是做双向数据绑定的。
双向数据同步：又叫 双向绑定，就是对属性值进行改变时，页面中展示的值跟着改变，对页面展示的值进行改变时，属性值也跟着改变。也就是：数据变化更新视图，视图变化更新数据。v-model 双向数据绑定原理：v-model 其实就是一个语法糖，它的背后本质上是包含两个操作：v-bind 绑定一个value属性； v-on 指令给当前元素绑定input事件

刚开始学习 Vue 时，推荐直接在页面引入 vue.global.js 文件来测试学习。Vue 鼓励开发者沿着数据驱动的思路，尽量避免直接接触并操作 DOM

选项式、组合式

在 Vue 中，选项式 API 和组合式 API 是两种不同的编写组件逻辑的方式。

选项式：这是 Vue 2 中主要使用的方式，在 Vue 3 中仍然支持。它将组件的不同方面（数据、方法、计算属性、监听等）分别定义在不同的选项中。

export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    }
  },
  watch: {
    count(newValue, oldValue) {
      // 监听 count 的变化
    }
  }
};

组合式 API：这是 Vue 3 引入的新特性，它使用 setup 函数来集中组织组件的逻辑。

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    const doubleCount = computed(() => count.value * 2);

    return {
      count,
      increment,
      doubleCount
    };
  }
};

插值：文本、html、属性、表达式

文本：数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：<div>{{ message }}</div>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="hello-vue" class="demo">
    {{ message }}
</div>
 
<script>
    const HelloVueApp = {
        data() {
            return {
                message: 'Hello Vue!!'
            }
        }
    }
 
    Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>

{{...}} 标签的内容将会被替代为对应组件实例中 message 属性的值，如果 message 属性的值发生了改变，{{...}} 标签内容也会更新。如果不想改变标签的内容，可以使用 v-once 指令执行一次性插值，当数据改变时插值处的内容不会更新：<span v-once>这个将不会改变: {{ message }}</span>

html：使用 v-html 指令用于输出 html 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="example1" class="demo">
    <p>使用双大括号的文本插值: {{ rawHtml }}</p>
    <p>使用 v-html 指令: <span v-html="rawHtml"></span></p>
</div>
 
<script>
    const RenderHtmlApp = {
        data() {
            return {
                rawHtml: '<span style="color: red">这里会显示红色！</span>'
            }
        }
    }
 
    Vue.createApp(RenderHtmlApp).mount('#example1')
</script>
</body>
</html>

分析：

属性：HTML 标签的属性值，应使用 v-bind 指令。示例：<div v-bind:id="dynamicId"></div>

布尔属性是 true 或 false，如果属性值为 null 或 undefined，则该属性不会显示出来。

<button v-bind:disabled="isButtonDisabled">按钮</button>

以上代码中如果 isButtonDisabled 的值是 null 或 undefined，则 disabled 属性甚至不会被包含在渲染出来的 <button> 元素中。

以下实例判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
    <style>
        .class1 {
            background: #444;
            color: #eee;
        }
    </style>
</head>
<body>
<div id="app">
    <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
    <br><br>
    <div v-bind:class="{'class1': use}">
        v-bind:class 指令
    </div>
</div>
 
<script>
    const app = {
        data() {
            return {
                use: false
            }
        }
    }
 
    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

表达式：Vue.js 都提供了完全的 JavaScript 表达式支持。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app">
    {{ 5 + 5 }}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
 
<script>
    const app = {
        data() {
            return {
                ok: true,
                message: 'RUNOOB!!',
                id: 1
            }
        }
    }
 
    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

表达式会在当前活动实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效：

<!--  这是语句，不是表达式：-->
{{ var a = 1 }}
 
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

调用单值数据

<template>
  <div class="home">
    <!-- 调用变量 -->
    {{msg}}  <br/>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      msg: 'hello world'
    }
  }
}
</script>

调用数组数据

<template>
  <div class="home">
    <!-- 调用数组 -->
    {{fav[0]}}--{{fav[1]}}<br/>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      fav: ['java','vue']
    }
  }
}
</script>

调用对象数据

<template>
  <div class="home">
    <!-- 调用对象 -->
    {{student.name}} -- {{student.age}}
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      student:{'name':'xm','age':234}
    }
  }
}
</script>

组件实例属性：data对象、$符、$data、$props、$refs、$el、$attrs、$listeners

<script>
    const root_zu_jian = {
        data() {
            return {
                ok: true,
                message: 'RUNOOB!!',
                id: 1
            }
        }
    }
 
    Vue.createApp(root_zu_jian).mount('#app')
</script>

这段代码是使用 vue 的常用格式，

root_zu_jian 就是一个组件。因为 root_zu_jian 是用在 Vue.createApp(root_zu_jian) 创建应用的，所以 root_zu_jian 称为 "根组件"。
组件(根组件、非根组件) 就是一个 JavaScript 对象，都会有自己的属性和方法。

data 只能是函数，并且返回一个对象。因为一个组件一般都是被使用多次的，而使用函数的话它是会返回一个对象的，然后不同函数返回的对象就是不一样的，就不会导致每个组件都是在操作同一个数据，避免了数据的错误。如果它是用对象的话，那么多个组件就是在操作同一个数据，造成数据的错误。

每个 Vue 实例都会代理其 data函数返回的对象 里所有的属性。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。注意：只有这些被代理的属性是 响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

除了 data 属性， Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分。( 带 $ 的是 VUE 框架（或插件）定义的属性方法 )。

注意：不要在实例属性或者回调函数中（如 vm.$watch('a', newVal => this.myMethod())）使用箭头函数。因为箭头函数绑定父上下文，所以 this 不会像预想的一样是 Vue 实例，而是 this.myMethod 未被定义。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> Vue 测试实例 </title>
    <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app" class="demo"></div>

<script>
    const app = Vue.createApp({
        data() {
            return {count: 4}
        }
    })

    const vm = app.mount('#app')

    document.write(vm.$data.count) // => 4
    document.write("<br>")
    document.write(vm.count)       // => 4
    document.write("<br>")
    // 修改 vm.count 的值也会更新 $data.count
    vm.count = 5
    document.write(vm.$data.count) // => 5
    document.write("<br>")
    // 反之亦然
    vm.$data.count = 6
    document.write(vm.count) // => 6
</script>
</body>
</html>

以上实例属性仅在实例首次创建时被添加，所以你需要确保它们都在 data 函数返回的对象中。

$data 属性包含组件实例的所有数据属性。它是响应式的，即当数据发生变化时，相关的视图会自动更新。

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
});

const vm = app.mount('#app');
console.log(vm.$data); // { message: 'Hello, Vue!' }

$props 属性包含当前组件接收的所有父组件传递的属性（props）。它是只读的。

<!-- ParentComponent.vue -->
<template>
  <child-component :message="parentMessage"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Message from parent'
    };
  }
};
</script>

// ChildComponent.vue
export default {
  props: ['message'],
  mounted() {
    console.log(this.$props.message); // 'Message from parent'
  }
};

$refs 包含了组件内所有拥有 ref 特性的 DOM 元素或子组件实例。可以通过 $refs 来访问这些元素或组件实例。

<template>
  <div>
    <input type="text" ref="inputField">
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.inputField); // 访问 DOM 元素
    this.$refs.inputField.focus(); // 调用 DOM 元素方法
  }
}
</script>

$el 属性表示当前组件实例的根 DOM 元素。在组件被挂载后才能访问到该属性。

const app = Vue.createApp({
  template: '<div>Hello, Vue!</div>'
});

const vm = app.mount('#app');
console.log(vm.$el); // <div id="app">Hello, Vue!</div>

$attrs 包含了父组件传递给当前组件但未在子组件声明的所有属性。这些属性可以用于向子组件传递额外的非 prop 特性。

<!-- ParentComponent.vue -->
<template>
  <child-component custom-attr="value"></child-component>
</template>

<!-- ChildComponent.vue -->
<script>
export default {
  mounted() {
    console.log(this.$attrs); // { custom-attr: 'value' }
  }
};
</script>

$listeners 包含了父组件传递给当前组件的所有监听器（事件处理函数），可以直接绑定到组件的根元素或其他元素上。

<!-- ChildComponent.vue -->
<template>
  <button v-on="$listeners">Click me</button>
</template>

<script>
export default {
  mounted() {
    console.log(this.$listeners); // { click: handleClick }
  },
  methods: {
    handleClick() {
      console.log('Button clicked');
    }
  }
};
</script>

Vue3 内置属性

Vue.js 中，is、key 和 ref 是三个常用的内置属性

is 属性

通常用于动态组件的实现，特别是当你希望在运行时动态地切换不同的组件时非常有用。

类型: String 或 Object
作用: is 属性用于动态地指定当前 <component> 组件应该渲染哪一个子组件。通常结合 <component> 元素和动态组件的特性一起使用，允许你在运行时基于数据来切换不同的组件。

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="toggleComponent">Toggle Component</button>
  </div>
</template>

<script>
import FirstComponent from './FirstComponent.vue';
import SecondComponent from './SecondComponent.vue';

export default {
  data() {
    return {
      currentComponent: 'FirstComponent'
    };
  },
  components: {
    FirstComponent,
    SecondComponent
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'FirstComponent' ? 'SecondComponent' : 'FirstComponent';
    }
  }
};
</script>

以上代码中，currentComponent 是一个数据属性，它决定了 <component> 元素要渲染的具体组件。当点击按钮时，调用 toggleComponent 方法会切换 currentComponent 的值，从而动态改变渲染的组件。

注意事项：

is 属性的值可以是组件的名称字符串，也可以是组件对象。
当使用字符串时，组件名称应该与注册的组件名一致。
如果使用对象，可以直接引用组件对象或者使用动态计算属性返回组件对象。

key 属性

类型: String 或 Number
作用: 在 Vue.js 的列表渲染中，每个 v-for 循环中的元素需要有一个唯一的 key 属性。key 的作用是帮助 Vue 识别每个节点的唯一性，从而高效地更新虚拟 DOM。当 Vue 重新渲染列表时，会根据 key 来决定是否重新使用现有 DOM 元素或者重新创建。

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

以上代码中，item.id 作为 key 属性，确保了每个列表项在数据更新时可以正确地被 Vue 辨识和处理。

注意事项：

key 应该是唯一且稳定的。稳定的意思是，key 不应该随着数据的变化而变化，否则会影响 Vue 的性能和虚拟 DOM 的复用策略。
避免使用索引作为 key，除非你明确知道列表项的顺序不会改变。

ref 属性

类型: String 或 Object
作用: ref 是用来给元素或子组件注册引用信息的。在实际开发中，可以使用 ref 来访问具体的 DOM 元素或子组件实例，从而进行一些操作，如调用方法、访问属性等。

在 Vue 中，ref 主要有以下作用：

引用 DOM 元素。通过给 DOM 元素添加 ref 属性，可以在组件的方法中直接访问和操作该 DOM 元素。

<template>
  <div>
    <input type="text" ref="inputField">
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.inputField); // 访问 DOM 元素
    this.$refs.inputField.focus(); // 调用 DOM 元素方法
  }
}
</script>

<template>
  <div>
    <input ref="myInput" type="text" />
    <button @click="focusInput">聚焦输入框</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const myInput = ref(null);

function focusInput() {
  if (myInput.value) {
    myInput.value.focus();
  }
}
</script>

引用子组件实例。当给子组件添加 ref 属性时，可以获取到子组件的实例，从而调用子组件暴露的方法或访问子组件的属性。$refs 包含了组件内所有拥有 ref 特性的 DOM 元素或子组件实例。可以通过 $refs 来访问这些元素或组件实例。

<template>
  <div>
    <child-component ref="childRef"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  mounted() {
    console.log(this.$refs.childRef); // 访问子组件实例
    this.$refs.childRef.doSomething(); // 调用子组件方法
  }
}
</script>

<template>
  <div>
    <ChildComponent ref="child" />
    <button @click="invokeChildMethod">调用子组件方法</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const child = ref(null);

function invokeChildMethod() {
  if (child.value) {
    child.value.someMethodInChild(); 
  }
}
</script>

配合 template 中的 v-for 使用。在 v-for 循环中使用 ref 可以获取到一组 DOM 元素或组件实例的数组。

<template>
  <div>
    <div v-for="item in list" :key="item.id" ref="divRefs">
      {{ item.name }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const list = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
];

const divRefs = ref([]);
</script>

响应式数据。当 ref 用于普通数据时，它会被 Vue 转换为一个具有响应式特性的对象，通过 ref.value 来访问和修改其值。

<template>
  <div>
    <button @click="increment">增加</button>
    {{ counter }}
  </div>
</template>

<script setup>
import { ref } from 'vue';

const counter = ref(0);

function increment() {
  counter.value++;
}
</script>

总的来说，ref 提供了一种在 Vue 中方便地获取和操作 DOM 元素、子组件实例以及实现响应式数据的方式。

注意事项:

在模板中使用 ref 时，Vue 将会提供一个对应的 $refs 对象，通过该对象可以访问到注册的 DOM 元素或子组件实例。
避免滥用 ref，尽可能通过数据驱动和事件处理来操作 DOM 和子组件，保持代码的可维护性和清晰性。

在 Vue 中，ref 主要用于创建一个响应式的数据引用。通过 ref 创建的响应式引用，可以在组件的逻辑中方便地操作和跟踪这个值的变化。视图可以实时更新。ref 通常用于基本数据类型（如数字、字符串、布尔值等），使其具有响应式特性。示例：

import { ref } from 'vue';

// 创建一个初始值为 0 的 ref
const count = ref(0);

// 可以通过 count.value 来修改其值
count.value = 1;

<script setup>
import { ref } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

组件实例方法

使用 methods 选项，可以在组件中添加方法。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app" class="demo"></div>

<script>
    const app = Vue.createApp({
        data() {
            return {count: 4}
        },
        methods: {
            increment() {
                // `this` 指向该组件实例
                this.count++
            }
        }
    })

    const vm = app.mount('#app')

    document.write(vm.count) // => 4
    document.write("<br>")
    vm.increment()

    document.write(vm.count) // => 5
</script>
</body>
</html>

$mount() 方法手动将 Vue 组件挂载到 DOM 元素上。在 Vue 3 中，通常通过 createApp().mount() 自动挂载，少数情况下需要手动挂载。

const app = Vue.createApp({
  template: '<div>Hello, Vue!</div>'
});

const vm = app.mount('#app');

$destroy() 方法销毁当前组件实例，解绑其所有的事件监听器并释放其占用的资源。在一些特定的场景，如动态创建和销毁组件时很有用。vm.$destroy();
$emit() 方法用于触发当前组件实例上的自定义事件，并传递数据给父组件。通常与 v-on 指令结合使用。<button @click="$emit('custom-event', eventData)">Click me</button>
$nextTick() 方法在下次 DOM 更新循环结束之后执行指定的回调函数。用于在 DOM 更新之后执行一些操作。

vm.$nextTick(() => {
  // DOM 更新完成后执行的操作
});

$watch() 方法用于监听组件实例上的数据变化，并在数据变化时执行指定的回调函数。

vm.$watch('message', (newValue, oldValue) => {
  console.log(`Message changed from ${oldValue} to ${newValue}`);
});

这些属性和方法使得 Vue 组件实例具有丰富的功能和灵活性，能够满足开发者在构建复杂应用时的各种需求，从数据管理到事件处理，再到动态组件的操作，都能够通过组件实例来进行管理和控制。

Vue 实例选项

Vue 中的选项是使用 Options API 时在 Vue 实例上可用的不同选项。Vue 实例的一些常见选项：https://www.runoob.com/vue3/vue-ref-options.html

el - 挂载点，用于指定 Vue 实例挂载的 DOM 元素。如果不提供则 Vue 实例不会自动挂载。

const app = Vue.createApp({
  // options
});
app.mount('#app');

data - 类型是 "函数或对象"。作用: data 是 Vue 实例中用来存储组件数据的地方。你可以在 data 中定义各种数据属性，并通过模板语法在页面上使用它们。data 中的数据会响应式地更新，即当数据发生变化时，相关的页面内容会自动更新。

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
});

computed - 类型是对象。作用: computed 属性允许你声明基于响应式依赖的计算属性。计算属性只有在相关依赖发生改变时才会重新求值，并且会缓存计算结果，避免不必要的重复计算。

const app = Vue.createApp({
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
});

methods - 定义了 Vue 实例的方法，可以在模板中通过事件监听器调用。类型是对象。作用: methods 属性用于存放 Vue 实例中的方法。这些方法可以在模板中调用，也可以在实例的其他方法中使用。与计算属性不同，每次调用方法时都会重新执行，适合用于响应事件或执行异步操作。

const app = Vue.createApp({
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
});

watch - 包含一个或多个观察者，用于观察和响应 Vue 实例中数据的变化。类型是对象或函数。作用: watch 属性用于观察和响应 Vue 实例中数据的变化。当监视的数据发生变化时，执行指定的回调函数。适合处理异步或复杂的数据变化逻辑。

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`Message changed from ${oldValue} to ${newValue}`);
    }
  }
});

props - 定义了组件可以接收的外部数据。类型是数组或对象。作用: props 属性用于接收父组件传递给子组件的数据。子组件通过 props 接收父组件传递的数据，并可以在组件内部使用。

// MyComponent 接收一个 title 属性，并在模板中使用它：
const MyComponent = {
  props: ['title'],
  template: '<h1>{{ title }}</h1>'
};

const app = Vue.createApp({
  components: {
    'my-component': MyComponent
  },
  template: '<my-component title="Hello Vue 3!"></my-component>'
});

app.mount('#app');

template - 定义 Vue 实例的 HTML 模板。类型是字符串。作用: template 属性定义了 Vue 组件的模板结构。模板中可以使用 Vue 的模板语法，包括插值、指令、计算属性等。模板最终会被编译为渲染函数，用于生成组件的虚拟 DOM。

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  template: '<div>{{ message }}</div>'
});

components - 允许在 Vue 实例中注册自定义组件。components 用于注册局部组件。

const ChildComponent = {
  template: '<div>A child component</div>'
};

const app = Vue.createApp({
  components: {
    'child-component': ChildComponent
  },
  template: '<child-component></child-component>'
}).mount('#app');

directives - 允许注册全局自定义指令。
filters - 定义了过滤器，可以在模板中使用，用于文本的格式化。
model - 指定组件使用的自定义 v-model 属性和事件。
provide / inject - 提供依赖注入的能力，允许跨组件传递数据。父组件提供数据，子组件注入使用。

const ChildComponent = {
  inject: ['message'],
  template: '<div>{{ message }}</div>'
};

const app = Vue.createApp({
  provide() {
    return {
      message: 'Provided Message'
    };
  },
  components: {
    'child-component': ChildComponent
  },
  template: '<child-component></child-component>'
}).mount('#app');

lifecycle hooks - 包括 onMounted, onUpdated, onUnmounted 等生命周期钩子，用于在 Vue 实例的不同阶段执行代码。
render function - 允许使用 JavaScript 函数来渲染组件，提供了更高级的自定义能力。
errorCaptured - 用于全局捕获 Vue 实例的错误。
emits - 定义了组件可以触发的事件。
setup - Vue 3 的 Composition API 中的入口函数，用于组织组件的逻辑。

计算(computed) 属性

计算属性用于根据其他数据的变化动态计算衍生出来的属性值，而且具有缓存机制，只有相关依赖发生变化时才会重新计算。计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。

计算属性的优点：计算属性是有缓存的
使用时不需要加 ()，因为它是当做一个属性来使用的

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="app">
    <p>原始字符串: {{ message }}</p>
    <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>

<script>
    const app = {
        data() {
            return {
                message: 'RUNOOB!!'
            }
        },
        computed: {
            // 计算属性的 getter
            reversedMessage: function () {
                // `this` 指向 vm 实例
                return this.message.split('').reverse().join('')
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

上面代码声明一个计算属性 reversedMessage 。提供的函数将用作属性 vm.reversedMessage 的 getter 。vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="n in evenNumbers">{{ n }}</li>
    </ul>
</div>

<script>
    const app = {
        data() {
            return {
                numbers: [1, 2, 3, 4, 5]
            }
        },
        computed: {
            evenNumbers() {
                return this.numbers.filter(number => number % 2 === 0)
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

computed 和 methods 区别

可以使用 methods 来替代 computed，效果上两个都是一样的，

但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="app">
    <p>原始字符串: {{ message }}</p>
    <p>使用 computed 计算后反转字符串: {{ reversedMessage }}</p>
    <p>使用 methods 计算后反转字符串: {{ reversedMessage2() }}</p>
</div>

<script>
    const app = {
        data() {
            return {
                message: 'RUNOOB!!'
            }
        },
        computed: {
            // 计算属性的 getter
            reversedMessage: function () {
                // `this` 指向 vm 实例
                return this.message.split('').reverse().join('')
            }
        },
        methods: {
            reversedMessage2: function () {
                return this.message.split('').reverse().join('')
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="app">

</div>

<script>
    const app = {
        data() {
            return {
                name: 'Google',
                url: 'http://www.google.com'
            }
        },
        computed: {
            site: {
                // getter
                get: function () {
                    return this.name + ' ' + this.url
                },
                // setter
                set: function (newValue) {
                    var names = newValue.split(' ')
                    this.name = names[0]
                    this.url = names[names.length - 1]
                }
            }
        }
    }
    vm = Vue.createApp(app).mount('#app')
    document.write('name: ' + vm.name);
    document.write('<br>');
    document.write('url: ' + vm.url);
    document.write('<br>------ 更新数据 ------<br>');
    // 调用 setter， vm.name 和 vm.url 也会被对应更新
    vm.site = '菜鸟教程 https://www.runoob.com';
    document.write('name: ' + vm.name);
    document.write('<br>');
    document.write('url: ' + vm.url);
</script>
</body>
</html>

从实例运行结果看在运行 vm.site = '菜鸟教程 http://www.runoob.com'; 时，setter 会被调用， vm.name 和 vm.url 也会被对应更新。

监听(watch) 属性

watch 的作用是用于监测响应式属性的变化，并在属性发生改变时执行特定的操作，它是 Vue 中的一种响应式机制，允许你在数据发生变化时做出相应的响应，执行自定义的逻辑。

watch 使得在响应式属性变化时能够有更多的控制权和灵活性，让你的组件能够更好地响应数据的变化并执行相应的逻辑。

以下实例通过使用 watch 实现计数器：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app">
    <p style="font-size:25px;">计数器: {{ counter }}</p>
    <button @click="counter++" style="font-size:25px;">点我</button>
</div>

<script>
    const app = {
        data() {
            return {
                counter: 1
            }
        }
    }
    vm = Vue.createApp(app).mount('#app')
    vm.$watch('counter', function (nval, oval) {
        alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
    });
</script>
</body>
</html>

示例：千米与米之间的换算：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app">
    千米 : <input type="text" v-model="kilometers" @focus="currentlyActiveField = 'kilometers'">
    米 : <input type="text" v-model="meters" @focus="currentlyActiveField = 'meters'">
</div>
<p id="info"></p>
<script>
    const app = {
        data() {
            return {
                kilometers: 0,
                meters: 0
            }
        },
        watch: {
            kilometers: function (newValue, oldValue) {
                // 判断是否是当前输入框
                if (this.currentlyActiveField === 'kilometers') {
                    this.kilometers = newValue;
                    this.meters = newValue * 1000
                }
            },
            meters: function (newValue, oldValue) {
                // 判断是否是当前输入框
                if (this.currentlyActiveField === 'meters') {
                    this.kilometers = newValue / 1000;
                    this.meters = newValue;
                }
            }
        }
    }
    vm = Vue.createApp(app).mount('#app')
    vm.$watch('kilometers', function (newValue, oldValue) {
        // 这个回调将在 vm.kilometers 改变后调用
        document.getElementById("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
    })
</script>
</body>
</html>

异步数据的加载 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。

以下实例我们使用 axios 库，后面会具体介绍。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
    <!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
    <script src="https://cdn.staticfile.net/axios/0.27.2/axios.min.js"></script>
    <script src="https://cdn.staticfile.net/vue/3.2.37/vue.global.min.js"></script>
</head>
<body>
<div id="watch-example">
    <p>
        输入一个问题，以 ? 号结尾输出答案:
        <input v-model="question"/>
    </p>
    <p>{{ answer }}</p>
</div>
<script>
    const watchExampleVM = Vue.createApp({
        data() {
            return {
                question: '',
                answer: '每个问题结尾需要输入 ? 号。'
            }
        },
        watch: {
            // 每当问题改变时，此功能将运行，以 ? 号结尾，兼容中英文 ?
            question(newQuestion, oldQuestion) {
                if (newQuestion.indexOf('?') > -1 || newQuestion.indexOf('？') > -1) {
                    this.getAnswer()
                }
            }
        },
        methods: {
            getAnswer() {
                this.answer = '加载中...'
                axios
                    .get('/try/ajax/json_vuetest.php')
                    .then(response => {
                        this.answer = response.data.answer
                    })
                    .catch(error => {
                        this.answer = '错误! 无法访问 API。 ' + error
                    })
            }
        }
    }).mount('#watch-example')
</script>
</body>
</html>

样式(style) 绑定

：https://www.runoob.com/vue3/vue3-class-bind.html

class 与 style 是 HTML 元素的属性，用于设置元素的样式，可以用 v-bind 来设置样式属性。

v-bind 在处理 class 和 style 时，表达式除了可以使用字符串之外，还可以是对象或数组。

v-bind:class 可以简写为 :class。

示例：将 isActive 设置为 true 显示了一个绿色的 div 块，如果设置为 false 则不显示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.0.5/vue.global.js"></script>
    <style>
        .active {
            width: 100px;
            height: 100px;
            background: green;
        }
    </style>
</head>
<body>
<div id="app">
    <div :class="{ 'active': isActive }"></div>
</div>

<script>
    const app = {
        data() {
            return {
                isActive: true
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

上面示例 div class 渲染结果为：<div class="active"></div>

也可以在对象中传入更多属性用来动态切换多个 class 。:class 可以与普通的 class 属性共存。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.0.5/vue.global.js"></script>
    <style>
        .static {
            width: 100px;
            height: 100px;
        }

        .active {
            background: green;
        }

        .text-danger {
            background: red;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="static" :class="{ 'active': isActive, 'text-danger': hasError }">
    </div>
</div>

<script>
    const app = {
        data() {
            return {
                isActive: false,
                hasError: true
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.0.5/vue.global.js"></script>
    <style>
        .static {
            width: 100px;
            height: 100px;
        }

        .active {
            background: green;
        }

        .text-danger {
            background: red;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="static" :class="classObject"></div>
</div>

<script>
    const app = {
        data() {
            return {
                classObject: {
                    'active': false,
                    'text-danger': true
                }
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

也可以绑定一个返回对象的计算属性。这是一个常用且强大的模式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.0.5/vue.global.js"></script>
    <style>
        .static {
            width: 100px;
            height: 100px;
        }

        .active {
            background: green;
        }

        .text-danger {
            background: red;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="static" :class="classObject"></div>
</div>

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

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

可以把一个数组传给 v-bind:class ，实例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.0.5/vue.global.js"></script>
    <style>
        .static {
            width: 100px;
            height: 100px;
        }

        .active {
            background: green;
        }

        .text-danger {
            background: red;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="static" :class="[activeClass, errorClass]"></div>
</div>

<script>
    const app = {
        data() {
            return {
                activeClass: 'active',
                errorClass: 'text-danger'
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

以上实例 div class 渲染结果为：<div class="static active text-danger"></div>

还可以使用三元表达式来切换列表中的 class ：

<div id="app">
    <div class="static" :class="[isActive ? activeClass : '', errorClass]"></div>
</div>

<script>
const app = {
    data() {
        return {
            isActive: false,
			activeClass: 'active',
			errorClass: 'text-danger'
        }
    }
}

Vue.createApp(app).mount('#app')
</script>

以上实例 div class 渲染结果为：<div class="static text-danger"></div>

Vue.js style(内联样式)。可以在 v-bind:style 直接设置样式，可以简写为 :style

<div id="app">
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>

<script>
const app = {
    data() {
        return {
            activeColor: 'red',
			fontSize: 30
        }
    }
}

Vue.createApp(app).mount('#app')
</script>

以上实例 div style 渲染结果为：<div style="color: red; font-size: 30px;">菜鸟教程</div>

也可以直接绑定到一个样式对象，让模板更清晰：

<div id="app">
    <div :style="styleObject">菜鸟教程</div>
</div>

<script>
const app = {
    data() {
        return {
			styleObject: {
                color: "red",
			    fontSize: "30px"
			}
        }
    }
}

Vue.createApp(app).mount('#app')
</script>

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

<div id="app">
    <div :style="[baseStyles, overridingStyles]">菜鸟教程</div>
</div>

<script>
const app = {
    data() {
        return {
			baseStyles: {
                color: 'green',
                fontSize: '30px'
            },
	        overridingStyles: {
                'font-weight': 'bold'
            }
        }
    }
}

Vue.createApp(app).mount('#app')
</script>

多重值：可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。

组件上使用 class 属性。当你在带有单个根元素的自定义组件上使用 class 属性时，这些 class 将被添加到该元素中。此元素上的现有 class 将不会被覆盖。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="app">
    <runoob class="classC classD"></runoob>
</div>

<script>
    // 创建一个Vue 应用
    const app = Vue.createApp({})

    // 定义一个名为 runoob的新全局组件
    app.component('runoob', {
        template: '<h1 class="classA classB">I like runoob!</h1>'
    })

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

以上实例 div class 渲染结果为：<h1 class="classA classB classC classD">I like runoob!</h1>

如果组件有多个根元素，你需要定义哪些部分将接收这个类。可以使用 $attrs 组件属性执行此操作：

<div id="app">
    <runoob class="classA"></runoob>
</div>
 
<script>
const app = Vue.createApp({})
 
app.component('runoob', {
  template: `
    <p :class="$attrs.class">I like runoob!</p>
    <span>这是一个子组件</span>
  `
})
 
app.mount('#app')
</script>

注意：template 中 ` 是反引号，不是单引号 '。

以上实例 div class 渲染结果为：<div id="app" data-v-app=""><p class="classA">I like runoob!</p><span>这是一个子组件</span></div>

模板语法

Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

<template>
  <div>
    <!-- 插值 -->
    <p>{{ message }}</p>
    
    <!-- v-bind -->
    <a :href="url">Link</a>
    
    <!-- v-on -->
    <button @click="handleClick">Click me</button>
    
    <!-- v-for -->
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

vue3 的指令

Vue 指令是带有前缀 v- 的特殊 HTML 属性，它赋予 HTML 标签额外的功能。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM 。与传统的 JavaScript 方法相比，使用 Vue 创建响应式页面要容易得多，并且需要的代码更少。

Vue 指令（Directives）是 Vue.js 的一项核心功能，它们可以在 HTML 模板中以 v- 开头的特殊属性形式使用，用于将响应式数据绑定到 DOM 元素上或在 DOM 元素上进行一些操作。

v-text == {{message}}
v-html <div v-html="message2"></div>
v-show：<h1 v-show="ok">Hello!</h1>
v-if：<div v-if="type === 'A'">
v-else：<div v-else>
v-else-if：<div v-else-if="type === 'B'">
v-for：<div v-for="(item, index) in items"></div>
v-on==@：<button v-on:click="doThat('hello', $event)"></button>
v-bind==：<img v-bind:src="imageSrc"> 缩写<img :src="imageSrc">
v-model：<input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p>

v-pre

不让 {{}} 被 vue 解析

v-if、v-else-if、v-else 和 v-show

v-if 条件渲染。使用 v-if 和 v-else 指令根据表达式的值(true或false)来动态的渲染元素或组件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app" class="demo">
    <p v-if="showMessage">Hello Vue!</p>
    <p v-else>Goodbye Vue!</p>
    <button @click="change_value">改变值</button>
</div>

<script>
    const HelloVueApp = {
        data() {
            return {
                showMessage: true
            }
        },
        methods: {
            change_value () {
                if (this.showMessage){
                    this.showMessage = false;
                }else{
                    this.showMessage = true;
                }
            }
        }
    }

    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

因为 v-if 是一个指令，所以必须将它添加到一个元素上。如果是多个元素，可以包裹在 <template> 元素上，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

示例：在 <template> 元素上使用 v-if 指令：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app">
    <template v-if="seen">
        <h1>网站</h1>
        <p>Google</p>
        <p>Runoob</p>
        <p>Taobao</p>
    </template>
</div>
    
<script>
const app = {
  data() {
    return {
      seen: true /* 改为false，信息就无法显示 */
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>
</body>
</html>

示例：v-else-if

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app">
    <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>
</div>

<script>
    const app = {
        data() {
            return {
                type: "C"
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

示例：随机生成一个数字，判断是否大于 0.5，然后输出对应信息：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app">
    <div v-if="Math.random() > 0.5">
      随机数大于 0.5
    </div>
    <div v-else>
      随机数小于等于 0.5
    </div>
</div>
    
<script>
Vue.createApp(app).mount('#app')
</script>
</body>
</html>

注意：v-if 和 v-show 区别

v-if：对dom节点进行删除和增加
v-show：通过css控制节点的隐藏和显示
如果隐藏/显示位置切换不是很频繁，建议使用v-if，如果切换频繁则使用v-show

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="hello-vue" class="demo">
    <button v-on:click="showMessage = !showMessage">显示/隐藏</button>
    <p v-show="showMessage">Hello Vue!</p>
</div>

<script>
    const HelloVueApp = {
        data() {
            return {
                showMessage: true
            }
        }
    }

    Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>
    
<script>
const app = {
  data() {
    return {
      ok: true 
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>
</body>
</html>

v-bind

v-bind 动态绑定一个或多个特性，或一个组件 prop。v-bind 指令可以用于响应式地更新

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app" class="demo">
    <a v-bind:href="bing_url">{{website}}</a>
</div>

<script>
    const HelloVueApp = {
        data() {
            return {
                website: '绑定测试 (美女写真)',
                bing_url: 'https://iitang.com/favorites/meinvxiezhen'
            }
        }
    }

    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app">
    <p><a v-bind:href="url">v-bing 完整形式</a></p>
    <p><a :href="url">v-bing 缩写形式</a></p>
</div>

<script>
    const app = {
        data() {
            return {
                url: 'https://www.runoob.com'
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

v-on ( 事件处理，简写 @ )

可以使用 v-on 指令来监听 DOM 事件，从而执行 JavaScript 代码。

v-on：监听 DOM 事件，并在触发时执行一些 JavaScript 代码。
自定义事件
组件内抛出：this.$emit('myEvent')
外部监听：<my-component v-on:myEvent="doSomething"></my-component>
将原生事件绑定到组件：<base-input v-on:focus.native="onFocus"></base-input>

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="app">
    <button @click="counter += 1">增加 1</button>
    <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>

<script>
    const app = {
        data() {
            return {
                counter: 0
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

示例：v-on 可以接收一个定义的方法来调用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app">
    <button @click="greet">Greet</button>
</div>

<script>
    const HelloVueApp = {
        data() {
            return {
                message: 'Hello Vue!!'
            }
        },
        methods: {
            greet() {
                alert('Hello!');
            }
        }
    }
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

除了直接绑定到一个方法，也可以用内联 JavaScript 语句：

<div id="app">
  <button @click="say('hi')">Say hi</button>
  <button @click="say('what')">Say what</button>
</div>

<script>
const app = {
  data() {
   
  },
  methods: {
    say(message) {
      alert(message)
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

事件处理程序中可以有多个方法，这些方法由逗号运算符分隔：

<div id="app">
  <!-- 这两个 one() 和 two() 将执行按钮点击事件 -->
  <button @click="one($event), two($event)">
  点我
  </button>
</div>
 
<script>
const app = {
  data() {
  },
  methods: {
    one(event) {
      alert("第一个事件处理器逻辑...")
    },
    two(event) {
      alert("第二个事件处理器逻辑...")
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

如果函数不是写在{{}}里面或者函数没有参数，则()可以省略：<button @click="print">按钮</button>
如果函数中有参数，但是没有传入参数的话，那么就将undefined传进去：<button @click="print()">按钮</button>
如果函数中有参数，但是没有写()那么将点击事件传进去：<button @click="print">按钮</button>

如果既要传递参数，又要获得event

<body>
    <div id="app">
       <button @click="print('hello',$event)">按钮</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const bpp=new Vue({
            el: "#app",
            data : {
                count: 0,
                movices: ['one','two','three']
            },
            methods: {
                print(name,event){
                    console.log(name+'-----'+event)
                }
            }
        })
    </script>
</body>

事件修饰符

Vue.js 为 v-on 提供了 "事件修饰符" 来处理 DOM 事件细节，即只有触发事件设置的条件，事件才会发生。修饰符是由点开头的指令后缀来表示的。( https://v3.cn.vuejs.org/guide/events.html )

.stop - 阻止冒泡，停止该按钮的作用。停止某个事件的作用，如果不加 stop 修饰的话，点击按钮那某 divClick 也会起作用，这不是想要的，所以可以加上 stop 就阻止了
.prevent - 阻止默认事件，该例子阻止了表单的提交
.capture - 阻止捕获
.self - 只监听触发该元素的事件
.once - 只触发一次。让点击事件只起一次作用
.left - 左键事件
.right - 右键事件
.middle - 中间滚轮事件

<!-- 阻止单击事件冒泡 -->
<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>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

示例：事件修饰符。下面示例是只有按下 enter ，才会触发事件 sayHi

按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：

.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right

系统修饰键：

.ctrl
.alt
.shift
.meta

鼠标按钮修饰符:

.left
.right
.middle

<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

v-for

使用数组来渲染一个列表，因此被称为"列表渲染"。

key 的作用: 使用 v-for 渲染列表时，必须为每个项提供一个唯一的 key 属性，以便 Vue 能够识别每个项的唯一性，从而进行高效的 DOM 更新。
嵌套循环: 可以嵌套使用多个 v-for 来渲染多维数组或对象结构。

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app">
    <ol>
        <li v-for="site in sites">
            {{ site.text }}
        </li>
    </ol>
</div>
<script>
    const app = {
        data() {
            return {
                sites: [
                    {text: 'Google'},
                    {text: 'Runoob'},
                    {text: 'Taobao'}
                ]
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

遍历数组：v-for="(item, index) in items"

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app" class="demo">
    <ul>
        <li v-for="item in items" :key="item.id">
            {{ item.text }}
        </li>
    </ul>
</div>

<script>
    const HelloVueApp = {
        data() {
            return {
                items: [
                    {id: 1, text: 'Item 1'},
                    {id: 2, text: 'Item 2'},
                    {id: 3, text: 'Item 3'}
                ]
            }
        }
    }

    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

遍历对象：v-for="(value, key, index) in object"

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(value, key, index) in object">
            {{ index }}. {{ key }} : {{ value }}
        </li>
    </ul>
</div>

<script>
    const app = {
        data() {
            return {
                object: {
                    name: '菜鸟教程',
                    url: 'https://www.runoob.com',
                    slogan: '学的不仅是技术，更是梦想！'
                }
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

模板中使用 v-for

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app">
	<ul>
	  <template v-for="site in sites">
		<li>{{ site.text }}</li>
		<li>--------------</li>
	  </template>
	</ul>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'Google' },
        { text: 'Runoob' },
        { text: 'Taobao' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
</script>
</body>
</html>

迭代整数

<div id="app">
    <ul>
        <li v-for="n in 10">
            {{ n }}
        </li>
    </ul>
</div>

<script>
    Vue.createApp({}).mount('#app')
</script>

v-for/v-if 联合使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app">
    <select @change="changeVal($event)" v-model="selOption">
        <template v-for="(site,index) in sites" :site="site" :index="index" :key="site.id">
            <!-- 索引为 1 的设为默认值，索引值从0 开始-->
            <option v-if="index == 1" :value="site.name" selected>{{ site.name }}</option>
            <option v-else :value="site.name">{{ site.name }}</option>
        </template>
    </select>
    <div>您选中了:{{ selOption }}</div>
</div>

<script>
    const app = {
        data() {
            return {
                selOption: "Runoob",
                sites: [
                    {id: 1, name: "Google"},
                    {id: 2, name: "Runoob"},
                    {id: 3, name: "Taobao"},
                ]
            }

        },
        methods: {
            changeVal: function (event) {
                this.selOption = event.target.value;
                alert("你选中了" + this.selOption);
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

在组件上使用 v-for。

如果你还没了解组件的内容，可以先跳过这部分。在自定义组件上，你可以像在任何普通元素上一样使用 v-for：<my-component v-for="item in items" :key="item.id"></my-component>

然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 props：

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

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="todo-list-example">
    <form v-on:submit.prevent="addNewTodo">
        <label for="new-todo">添加 todo</label>
        <input
                v-model="newTodoText"
                id="new-todo"
                placeholder="例如：明天早上跑步"
        />
        <button>添加</button>
    </form>
    <ul>
        <todo-item
                v-for="(todo, index) in todos"
                :key="todo.id"
                :title="todo.title"
                @remove="todos.splice(index, 1)"
        ></todo-item>
    </ul>
</div>

<script>
    const app = Vue.createApp({
        data() {
            return {
                newTodoText: '',
                todos: [
                    {
                        id: 1,
                        title: '看电影'
                    },
                    {
                        id: 2,
                        title: '吃饭'
                    },
                    {
                        id: 3,
                        title: '上 RUNOOB 学习'
                    }
                ],
                nextTodoId: 4
            }
        },
        methods: {
            addNewTodo() {
                this.todos.push({
                    id: this.nextTodoId++,
                    title: this.newTodoText
                })
                this.newTodoText = ''
            }
        }
    })

    app.component('todo-item', {
        template: `
          <li>
            {{ title }}
            <button @click="$emit('remove')">删除</button>
          </li>
        `,
        props: ['title'],
        emits: ['remove']
    })

    app.mount('#todo-list-example')
</script>
</body>
</html>

建议：v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。所以，我们应尽可能在使用 v-for 时提供 key attribute ，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素

不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

v-model ( 表单双向数据绑定 )

双向绑定：就是对属性值进行改变时，页面中展示的值跟着改变，对页面展示的值进行改变时，属性值也跟着改变。也就是：数据变化更新视图，视图变化更新数据

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
v-model 其实就是一个语法糖，它的背后本质上是包含两个操作：
1、v-bind 绑定一个value属性
2、v-on 指令给当前元素绑定input事件
v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值，使用的是 data 选项中声明初始值。v-model 在内部为不同的输入元素使用不同的属性，并抛出不同的事件：
text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为属性并将 change 作为事件。

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

示例：输入框

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app" class="demo">
    <input type="text" v-model="message">
    <p>{{ message }}</p>
</div>

<script>
    const HelloVueApp = {
        data() {
            return {
                message: 'Hello Vue!!'
            }
        }
    }
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

示例：textarea 文本框

在文本区域 textarea 插值是不起作用，需要使用 v-model 来代替：

<!-- 错误 -->
<textarea>{{ text }}</textarea>

<!-- 正确 -->
<textarea v-model="text"></textarea>

<div id="app">
  <p>input 元素：</p>
  <input v-model="message" placeholder="编辑我……">
  <p>input 表单消息是: {{ message }}</p>
    
  <p>textarea 元素：</p>
  <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
  <p>textarea 表单消息是:</p>
  <p style="white-space: pre">{{ message2 }}</p>
  
</div>
 
<script>
const app = {
  data() {
    return {
      message: '',
      message2: '菜鸟教程\r\nhttps://www.runoob.com'
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

示例：复选框。复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：

<div id="app">
  <p>单个复选框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
    
  <p>多个复选框：</p>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <span>选择的值为: {{ checkedNames }}</span>
</div>
 
<script>
const app = {
  data() {
    return {
      checked : false,
      checkedNames: []
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

示例：单选按钮

<div id="app">
  <input type="radio" id="runoob" value="Runoob" v-model="picked">
  <label for="runoob">Runoob</label>
  <br>
  <input type="radio" id="google" value="Google" v-model="picked">
  <label for="google">Google</label>
  <br>
  <span>选中值为: {{ picked }}</span>
</div>
 
<script>
const app = {
  data() {
    return {
      picked : 'Runoob'
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

示例：select 列表

<div id="app">
  <select v-model="selected" name="site">
    <option value="">选择一个网站</option>
    <option value="www.runoob.com">Runoob</option>
    <option value="www.google.com">Google</option>
  </select>
 
  <div id="output">
      选择的网站是: {{selected}}
  </div>
</div>
 
<script>
const app = {
  data() {
    return {
      selected: '' 
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

多选时会绑定到一个数组：

<div id="app">
  <select v-model="selected" name="fruit" multiple>
    <option value="www.runoob.com">Runoob</option>
    <option value="www.google.com">Google</option>
    <option value="www.taobao.com">Taobao</option>
  </select>
 
  <div id="output">
      选择的网站是: {{selected}}
  </div>
</div>
 
<script>
const app = {
  data() {
    return {
      selected: '' 
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

使用 v-for 循环输出选项：

<div id="app" class="demo">
  <select v-model="selected">
    <option v-for="option in options" :value="option.value">
      {{ option.text }}
    </option>
  </select>
  <span>选择的是: {{ selected }}</span>
</div>
 
<script>
const app = {
  data() {
    return {
      selected: 'www.runoob.com',
      options: [
        { text: 'Runoob', value: 'www.runoob.com' },
        { text: 'Google', value: 'www.google.com' },
        { text: 'Taobao', value: 'www.taobao.com' }
      ]
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

值绑定：对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a" />

<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle" />

<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

但是有时我们可能想把值绑定到当前活动实例的一个动态属性上，这时可以用 v-bind 实现，此外，使用 v-bind 可以将输入值绑定到非字符串。

复选框 (Checkbox)：

<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />
...
// 选中时
vm.toggle === 'yes'
// 取消选中 
vm.toggle === 'no'

单选框 (Radio)：

<input type="radio" v-model="pick" v-bind:value="a" />
// 当选中时
vm.pick === vm.a

选择框选项 (Select)：

<select v-model="selected">
  <!-- 内联对象字面量 -->
  <option :value="{ number: 123 }">123</option>
</select>
// 当被选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123

修饰符

在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
```

<input v-model.lazy="msg" >
```
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以使用修饰符 number 给 v-model 来处理输入值：<input v-model.number="age" type="number">
如果要自动过滤用户输入的首尾空格，可以使用 trim 修饰符：<input v-model.trim="msg">

自定义指令

除了默认设置的核心指令( 例如：v-model 和 v-show )，Vue 也允许注册自定义指令。

示例：注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="app">
    <p>页面载入时，input 元素自动获取焦点：</p>
    <input v-focus>
</div>

<script>
    const app = Vue.createApp({})
    // 注册一个全局自定义指令 `v-focus`
    app.directive('focus', {
        // 当被绑定的元素挂载到 DOM 中时……
        mounted(el) {
            // 聚焦元素
            el.focus()
        }
    })
    app.mount('#app')
</script>
</body>
</html>

也可以在实例使用 directives 选项来注册局部指令，这样指令只能在这个实例中使用：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="app">
    <p>页面载入时，input 元素自动获取焦点：</p>
    <input v-focus>
</div>

<script>
    const app = {
        data() {
            return {}
        },
        directives: {
            focus: {
                // 指令的定义
                mounted(el) {
                    el.focus()
                }
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

内置指令（Directives）

Vue.js 内置了多个指令（Directives），用于在模板中添加特定的响应式行为或操作 DOM。以下是 Vue.js 中常用的内置指令：https://www.runoob.com/vue3/vue3-ref-directives.html

指令	用法示例	说明
v-text	`<p v-text="message"></p>`	更新元素的 `textContent`，类似于插值 `{{ }}`，但是是单向绑定。
v-html	`<div v-html="htmlContent"></div>`	更新元素的 `innerHTML`，用于输出 HTML。
v-model	`<input v-model="value">`	在表单控件元素上创建双向数据绑定，将输入字段与数据属性同步。
v-show	`<div v-show="isVisible"></div>`	根据表达式的真假切换元素的显示与隐藏，使用 CSS 的 `display` 属性。
v-if	`<p v-if="isVisible">Visible</p>`	根据表达式的真假条件性地渲染元素，当条件为假时元素将从 DOM 中移除。
v-else	`<p v-if="isVisible">Visible</p><p v-else>Not Visible</p>`	`v-if` 的补充指令，用于显示条件为假时的备用内容。
v-else-if	`<template v-if="type === 'A'"><p>Type A</p></template><template v-else-if="type === 'B'"><p>Type B</p></template>`	连续使用于 `v-if` 和 `v-else` 之后，用于多条件判断。
v-for	`<li v-for="(item, index) in items" :key="index">{{ item }}</li>`	遍历数组或对象的每个元素，生成相应数量的元素。
v-on	`<button v-on:click="handleClick">Click me</button>`	绑定事件监听器，用于监听 DOM 事件，可以简写为 `@`。
v-bind	`<img v-bind:src="imageSrc">`	动态绑定 HTML 属性，可以简写为 `:`。
v-slot	`<template v-slot:header><h2>Header</h2></template>`	用于具名插槽的语法，提供插入子组件内容的位置。
v-pre	`<div v-pre>{{ message }}</div>`	跳过这个元素和它的所有子元素的编译过程，用于显示原始 Mustache 标签。
v-cloak	`[v-cloak] { display: none; }`	在 Vue 实例编译完成前隐藏模板内容，避免显示未编译的 Mustache 标签。
v-once	`<p v-once>{{ message }}</p>`	只渲染元素和组件一次，不会随后续数据变化而更新。

vue3 的组件

vue 组件 ( 注册 (全局、局部)、导入、使用、组件之间传递数据 ) ：https://www.w3cschool.cn/vuejs3/vuejs3-pgsc3f26.html

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。可以将用户界面拆分成独立和可复用的部分。

每个 Vue 组件都是一个独立的 Vue 实例，具有自己的模板、数据、方法和生命周期钩子，使得组件可以自包含地定义和管理自己的功能和样式。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

vue 视图层是基于 HTML 的，所以 "组件" 可以看作是 HTML 的标签。可以类比 C# 中 WinForm 开发中的 "控件"。 vue 中的 "组件" 就相当于 WinForm 中的 "控件"。

Vue 组件的特性和优势

复用性: 组件可以在不同的地方多次使用，提高代码的复用性和可维护性。
封装性: 每个组件都是独立的作用域，可以封装自己的状态和逻辑，避免全局污染。
组合性: 可以通过组合多个小组件构建复杂的界面。
响应式: 组件的数据响应式地绑定到视图，数据更新时自动更新视图。
模块化: 支持模块化开发，可以使用现代前端工具链进行构建和管理。

每个 Vue 应用都是通过用 createApp 函数创建的，传递给 createApp 的选项用于配置根组件。当挂载应用时，该组件被用作渲染的起点。一个应用需要被挂载到一个 DOM 元素中。

const RootComponent = { /* 选项 */ }
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

全局组件

全局组件和局部组件区别在于注册的方式

全局注册：是注册到 const app = Vue.createApp(根组件) 创建的 app 上。可以被不同的 Vue实例中的dom 中使用
局部注册：是注册到创建应用时的 "根组件上"。只能在注册这个组件的 Vue 实例中的dom 中使用

注册一个全局组件语法格式如下

const app = Vue.createApp({...})

app.component('my-component-name', {
  /* ... */
})

my-component-name 为组件名，/* ... */ 部分为配置选项。注册后，就可以使用以下方式来调用组件：<my-component-name></my-component-name>

示例：template 中 ` 是反引号，不是单单引号 '。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app">
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
</div>

<script>
    // 创建一个Vue 应用
    const app = Vue.createApp({})

    // 定义一个名为 button-counter 的新全局组件
    app.component('button-counter', {
        data() {
            return {
                count: 0
            }
        },
        template: `
          <button @click="count++">
            点了 {{ count }} 次！
          </button>`
    })
    app.mount('#app')
</script>
</body>
</html>

局部组件

全局注册：是注册到 const app = Vue.createApp(根组件) 创建的 app 上
局部注册：是注册到创建应用时的 "根组件上"

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app">
    <runoob-a></runoob-a>
</div>
<script>

    var runoobA = {
        template: '<h1>自定义组件!</h1>'
    }

    const app = Vue.createApp({
        components: {
            'runoob-a': runoobA
        }
    })

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

编译作用域

各种标签，属性的使用都是在本模板内起作用的

插槽作用域

一般在组件中有默认的显示数据的方式。如果父组件调用了子组件，但是父组件并不想要子组件显示数据的方式，而是想要按照自己的方式显示数据，但是在父组件中是不能直接访问子组件中的数据的。所以可以采用插槽的方式来处理。

单文件组件 (.vue 文件)

Vue3 创建单文件组件(SFC)。单文件组件能够更好地组织和管理 Vue 组件，一个组件通常由三部分组成：模板、脚本和样式。

<!-- MyComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from MyComponent',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

<style scoped>
/* 组件私有样式 */
p {
  color: blue;
}
</style>

Vue 的单文件组件 (即 *.vue 文件，英文 Single-File Component，简称 SFC) 是一种特殊的文件格式，使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。

在 Vue3 中，你可以使用 .vue 文件来创建单文件组件(Single File Components, SFCs)，这个文件包含了组件的模板、JavaScript 代码以及 CSS 样式。

现在我们将删除通过 npm init vue@latest 命令创建的实例项目中的所有内容（参考 Vue3 安装），以便在 Vue 中创建自己的简单网页。

在我们开始编写代码之前，删除 <template>、<script> 和 <style> 标签内的所有内容，以及任何像 setup 或 scoped 这样的属性。

您的 App.vue 文件现在应该如下所示：

<script></script>

<template></template>

<style></style>

同时我们可以先清空 src 目录中的文件夹 assets 和 components，里面的文件我们可以后期自己添加补充。

main.js 文件代码修改为如下代码：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

现在我们就创建了一个简单的项目，在 App.vue 文件写入以下代码：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, RUNOOB!'
    }
  }
}
</script>

<style>
h1 {
  color: blue;
}
</style>

以上实例中我们定义了一个包含一个标题的简单组件。组件的模板包含一个 <h1> 元素，使用了 Vue3 的模板语法将 message 属性绑定到了这个元素的文本内容中。

JavaScript 部分包含了一个 data 函数，返回了一个包含了 message 属性的对象，我们将这个属性绑定到了模板中。

最后，CSS 样式定义了标题的颜色为蓝色。

在组件的 JavaScript 部分，我们使用了新的 export default 语法，这个语法可以让我们将组件定义导出为一个默认的对象。在 Vue3 中，我们可以使用这个语法来定义组件，而不必像 Vue2 那样使用 Vue.component 函数。

访问 http://localhost:5173/，

使用组件

当我们定义好了一个组件之后，我们可以在其他组件中使用这个组件。

使用组件，我们需要先创建组件，比如以下实例在 ./src/components/ 目录下创建 HelloRunoob.vue 组件文件，代码如下：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Runoob!'
    }
  }
}
</script>

<style>
h1 {
  color: red;
}
</style>

然后我们在 ./src/main.js 文件中引入并定义该组件：

import { createApp } from 'vue'

import App from './App.vue'
import HelloRunoob from './components/HelloRunoob.vue'

const app = createApp(App)
app.component('hello-runoob', HelloRunoob) // 自定义标签
app.mount('#app')

在父组件的模板中，我们可以使用自定义标签的方式来引入子组件，就像以下 App.vue 文件代码：

<template>
  <div>
    <hello-runoob></hello-runoob>
  </div>
</template>

访问 http://localhost:5173/，以上代码执行结果为

使用 props 传递数据

组件实例的作用域是 孤立的。但是组件之间经常协同工作

组件 A 在它的模版中使用了组件 B 。它们之间必然需要相互通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。

父子组件之间相互传递数据

父组件通过 props 向下传递数据给子组件，子组件需要显式地用 props 选项声明 "prop"
子组件通过 events 给父组件发送消息。

prop 是单向绑定的 (单向数据流)：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop 。如果你这么做了，Vue 会在控制台给出警告。

注意：在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app">
    <site-name title="Google"></site-name>
    <site-name title="Runoob"></site-name>
    <site-name title="Taobao"></site-name>
</div>

<script>
    const app = Vue.createApp({})

    app.component('site-name', {
        props: ['title'],
        template: `<h4>{{ title }}</h4>`
    })

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

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app">
    <site-info
            v-for="site in sites"
            :id="site.id"
            :title="site.title"
    ></site-info>
</div>

<script>
    const Site = {
        data() {
            return {
                sites: [
                    {id: 1, title: 'Google'},
                    {id: 2, title: 'Runoob'},
                    {id: 3, title: 'Taobao'}
                ]
            }
        }
    }

    const app = Vue.createApp(Site)

    app.component('site-info', {
        props: ['id', 'title'],
        template: `<h4>{{ id }} - {{ title }}</h4>`
    })

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

组件可以为 props 指定验证要求。为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。type 可以是下面原生构造器，type 也可以是一个自定义构造器，使用 instanceof 检测。

String
Number
Boolean
Array
Object
Date
Function
Symbol

父、子组件

事件 ( 子组件向父组件传递数据 )

父组件是使用 props 传递数据给子组件。
子组件通过 $emit 触发事件，父组件监听这些事件，并获取子组件传递的数据。父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

使用 v-on 绑定自定义事件。每个 Vue 实例都实现了事件接口(Events interface)，即：可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。用法为 v-on:click="methodName" 或使用快捷方式 @click="methodName"

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app">
    <button-counter @increment="incrementTotal"></button-counter>
    <p>Total clicks: {{ total }}</p>
</div>

<script>
    const app = Vue.createApp({
        data() {
            return {
                total: 0
            };
        },
        methods: {
            incrementTotal() {
                this.total++;
            }
        }
    });

    app.component('button-counter', {
        template: '<button @click="increment">You clicked me {{ count }} times.</button>',
        data() {
            return {
                count: 0
            };
        },
        methods: {
            increment() {
                this.count++;
                this.$emit('increment');
            }
        }
    });

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

父传子 ( 通过 props )

在 Vue 3 中，defineProps 用于定义组件接收的父组件传递过来的 props 。使用 props ：在子组件中使用 defineProps 来定义接收父组件传递过来的数据。父组件在使用子组件时，通过属性的形式传递数据。

子组件：

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  title: String,
  count: Number
})
</script>

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>Count: {{ count }}</p>
  </div>
</template>

父组件：

    <ChildComponent message="Hello from parent" title="title_test" />

通过 defineProps 定义了两个 props ：title 为字符串类型，count 为数字类型。在模板中可以直接使用这些 props 来展示数据。defineProps 是在 <script setup> 语法中使用的方式来定义组件的 props 。这种方式使得组件的逻辑更加简洁和直观。

子传父

自定义事件：子组件通过 emit 方法触发自定义事件，并携带相关数据。父组件在使用子组件时，监听该自定义事件来获取数据。

子组件：

    <script setup>
    import { defineEmits } from 'vue'
    const emits = defineEmits(['updateMessage'])
    const handleClick = () => {
      emits('updateMessage', 'New message from child')
    }
    </script>

父组件：

    <ChildComponent @updateMessage="handleUpdateMessage" />

非父子组件通信

有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的 Vue 实例作为中央事件总线：

var bus = new Vue()

// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})

在更多复杂的情况下，你应该考虑使用专门的状态管理模式.

插槽

插槽，其实就相当于打桩，占个位置。vue 中的插槽就是在组件的<template></template>标签中加入<slot></slot>标签，然后如果需要在这里面加入新的内容就可以直接添加

具名插槽

如果没有对插槽指定具体的名称，那么所有的插槽都会替换

运行结果：

加了名称，就会替换了那些加名称的

运行结果：

替换指定名称的插槽

使用 Slots 分发内容

单个 Slot

具名Slots

动态组件

多个组件可以使用同一个挂载点，然后动态地在它们之间切换。使用保留的 <component>元素，动态地绑定到它的 is 特性：

子组件索引 ( ref 属性 )

尽管有 props 和 events ，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个索引 ID 。例如：

<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>

var parent = new Vue({ el: '#parent' })
// 访问子组件
var child = parent.$refs.profile

当 ref 和 v-for 一起使用时， ref 是一个数组或对象，包含相应的子组件。

$refs 只在组件渲染完成后才填充，并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案 —— 应当避免在模版或计算属性中使用 $refs 。

异步组件

在大型应用中，我们可能需要将应用拆分为多个小模块，按需从服务器下载。为了让事情更简单， Vue.js 允许将组件定义为一个工厂函数，动态地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。例如：

Vue3 内置组件

在 Vue.js 中，有一些内置的全局组件和内置组件，它们提供了一些常用的功能和布局支持，可以帮助开发者快速构建应用界面。

以下是一些常见的 Vue 内置组件和它们的作用：

<component> 是一个抽象的组件，用于动态地渲染不同的组件或元素。通过绑定 is 属性可以实现动态组件的切换和渲染。<component :is="currentComponent"></component>
<transition> 和 <transition-group> 提供了在 Vue.js 中实现过渡和动画效果的功能。通过定义过渡的 CSS 类名，可以控制元素在进入或离开 DOM 时的动画效果。
<transition name="fade">
<div v-if="show">Hello!</div>
</transition>
<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</transition-group>
<keep-alive> 是一个抽象组件，用于保持组件状态或避免多次渲染。当组件被 <keep-alive> 包裹时，其状态将会被缓存，而不是每次切换时重新渲染。
<keep-alive>
<component :is="currentComponent"></component>
</keep-alive>
<slot> 是 Vue.js 中用于插入内容的插槽组件。它允许父组件将子组件的内容传递到特定的插槽位置，使得组件更加灵活和可复用。
<child-component>
<template #header>
<h2>Header Content</h2>
</template>
<template #default>
<p>Default Content</p>
</template>
</child-component>
<teleport> 允许你将 DOM 元素渲染到应用的任何地方，而不受当前 DOM 结构的限制。这在需要在应用中动态移动元素时非常有用，例如在模态框中渲染弹出内容。
<teleport to="body">
<modal-dialog v-if="showModal">

</modal-dialog>
</teleport>
<Suspense> 是 Vue.js 3.x 中新增的组件，用于处理异步组件的加载和状态。它可以在异步组件加载完成之前显示占位内容，并处理加载状态和错误。
<Suspense>
<template #default>
<AsyncComponent />
</template>
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>

Vue 组件实例

在 Vue.js 中，组件实例是 Vue 应用中最基本的构建块之一。每个组件实例都是一个 Vue 组件，它具有自己的模板、数据、方法和生命周期钩子，可以独立地管理自己的状态和行为。

Vue 组件实例的创建。创建一个组件实例通常通过 createApp 方法和组件选项对象来实现。

组件选项对象可以包含如下属性：

data: 数据对象，用于存储组件的响应式数据。
props: 属性数组或对象，用于接收父组件传递的数据。
computed: 计算属性对象，根据响应式依赖进行动态计算。
methods: 方法对象，包含组件内部的函数和操作。
watch: 监听器对象，用于监听数据变化并做出响应。
template: 字符串，定义组件的模板结构。
render: 函数，用于渲染组件的虚拟 DOM。
setup: 函数，用于设置组件的初始状态、数据、计算属性和监听器等（Vue 3 中）。

以下是一个简单的 Vue 组件实例的示例：

import { createApp } from 'vue';

const app = createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    greet() {
      alert(this.message);
    }
  },
  template: `
    <div>
      <p>{{ message }}</p>
      <button @click="greet">Greet</button>
    </div>
  `
});

app.mount('#app');

说明：

data 函数返回一个包含 message 属性的对象，用于存储组件的状态。
methods 对象包含了一个 greet 方法，当点击按钮时会弹出一个提示框显示 message 的内容。
template 字符串定义了组件的模板结构，使用了插值和事件绑定来实现数据展示和交互。

生命周期钩子

Vue 组件实例具有一些生命周期钩子函数，允许开发者在组件生命周期的不同阶段执行自定义逻辑。常见的生命周期钩子包括 created、mounted、updated 和 destroyed 等。

const app = createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  created() {
    console.log('Component created');
  },
  mounted() {
    console.log('Component mounted');
  },
  updated() {
    console.log('Component updated');
  },
  destroyed() {
    console.log('Component destroyed');
  },
  template: `
    <div>
      <p>{{ message }}</p>
    </div>
  `
});

组件通信

Vue 组件实例之间通过 props、events、provide/inject、$parent/$children、$attrs/$listeners 等方式进行通信，具体取决于组件的关系和需求。这些机制允许组件在不同层级之间传递数据和响应用户交互。

vue3 的插件

插件通常会为Vue添加全局功能。插件的范围没有限制，一般有下面几种：

添加全局方法或者属性，如：vue-element
添加全局资源：指令/过滤器/过渡等，如：vue-touch
通过全局 mixin方法添加一些组件选项，如：vuex
添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
一个库，提供自己的 API，同时提供上面提到的一个或多个功能，如：vue-router

vue 中使用插件：https://www.w3cschool.cn/vuejs2/plugins.html

Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象：

模块化的导出、导入

模块化有两个核心：导出和导入

模块的导出

module.exports={
    flag:true,
    test(a,b){
        return a+b
    },
    demo(a,b){
        return a*b
    }
}

模块的导入

//Commonjs的导入
let{test,demo,flag}=require('moduleA');
//等同于
let _mA=required('moduleA');
let test=_mA.test;
let demo=_mA.demo;
let flag=_mA.flag;

ES6 的导出和导入

可以通过在<script>标签中加入type="module"属性来标志这个一个模块，就不会出现模块间数据冲突的问题

变量的导出和导入

函数/类的导出和导入

export default

一个模块只能有一个 export default，使用这个东西之后在导入时就可以自定义名称

webpack

webpack是一个前端模块化打包工具，对于有些技术，浏览器是识别不了的，而通过webpack打包之后就可以转化为浏览器可以识别的东西

全局安装 webpack：npm install webpack@3.6.0 -g

局部安装 webpack，–save-dev 是开发时依赖，项目打包后不需要继续使用
cd 对应目录，执行命令：npm install webpack@3.6.0 --save-dev

Vue3 路由

Vue 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue 可以实现多视图的单页 Web 应用（single page web application，SPA）。

Vue.js 路由需要载入 vue-router 库

中文文档地址：vue-router 文档。

直接下载 / CDN：https://unpkg.com/vue-router@4
NPM 推荐使用淘宝镜像：
npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install vue-router@4

简单实例

Vue.js + vue-router 可以很简单的实现单页应用。

<router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址，即要显示的内容。

以下实例中我们将 vue-router 加进来，然后配置组件和路由映射，再告诉 vue-router 在哪里渲染它们。代码如下所示：

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
 
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

router-link

请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。我们将在后面看到如何从这些功能中获益。

router-view

router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.31/vue.global.min.js"></script>
    <script src="https://cdn.staticfile.net/vue-router/4.2.4/vue-router.global.min.js"></script>
</head>
<body>
<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!--使用 router-link 组件进行导航 -->
        <!--通过传递 `to` 来指定链接 -->
        <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
        <router-link to="/">Go to Home</router-link>
        <router-link to="/about">Go to About</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

<script>
    // 1. 定义路由组件.
    // 也可以从其他文件导入
    const Home = {template: '<div>Home</div>'}
    const About = {template: '<div>About</div>'}

    // 2. 定义一些路由
    // 每个路由都需要映射到一个组件。
    // 我们后面再讨论嵌套路由。
    const routes = [
        {path: '/', component: Home},
        {path: '/about', component: About},
    ]

    // 3. 创建路由实例并传递 `routes` 配置
    // 你可以在这里输入更多的配置，但我们在这里
    // 暂时保持简单
    const router = VueRouter.createRouter({
        // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
        history: VueRouter.createWebHashHistory(),
        routes, // `routes: routes` 的缩写
    })

    // 5. 创建并挂载根实例
    const app = Vue.createApp({})
    //确保 _use_ 路由实例使
    //整个应用支持路由。
    app.use(router)

    app.mount('#app')

    // 现在，应用已经启动了！
</script>
</body>
</html>

点击过的导航链接都会加上样式 class ="router-link-exact-active router-link-active"。

<router-link> 相关属性

接下来我们可以了解下更多关于 <router-link> 的属性。

to：表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

replace：设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。<router-link :to="{ path: '/abc'}" replace></router-link>
append：设置 append 属性后，则在当前 (相对) 路径前添加其路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b：<router-link :to="{ path: 'relative/path'}" append></router-link>
tag：有时候想要 <router-link> 渲染成某种标签，例如 <li>。于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

active-class：设置链接激活时使用的 CSS 类名。可以通过以下代码来替代。注意这里 class 使用 active-class="_active"。

<style>
   ._active{
      background-color : red;
   }
</style>
<p>
   <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

exact-active-class：配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代。

<p>
   <router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

event：声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link> 以上代码设置了 event 为 mouseover ，及在鼠标移动到 Router Link 1 上时导航的 HTML 内容会发生改变。

Vue3 混入

混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

来看一个简单的实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.31/vue.global.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
    // 定义混入对象
    const myMixin = {
        created() {
            this.hello()
        },
        methods: {
            hello() {
                document.write('欢迎来到混入实例-RUNOOB!')
            }
        }
    }

    // 定义一个应用，使用混入
    const app = Vue.createApp({
        mixins: [myMixin]
    })

    app.mount('#app') // => "欢迎来到混入实例-RUNOOB!"
</script>
</body>
</html>

选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。

比如，数据对象在内部会进行浅合并 (一层属性深度)，在和组件的数据发生冲突时以组件数据优先。以下实例中，Vue 实例与混入对象包含了相同的方法。从输出结果可以看出两个选项合并了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.31/vue.global.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
    const myMixin = {
        data() {
            return {
                message: 'hello',
                foo: 'runoob'
            }
        }
    }

    const app = Vue.createApp({
        mixins: [myMixin],
        data() {
            return {
                message: 'goodbye',
                bar: 'def'
            }
        },
        created() {
            document.write(JSON.stringify(this.$data))
        }
    })

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

输出结果为：{"message":"goodbye","foo":"runoob","bar":"def"}

同名钩子函数将合并为一个数组，因此都将被调用。另外，mixin 对象的钩子将在组件自身钩子之前调用。

const myMixin = {
  created() {
    console.log('mixin 对象的钩子被调用')
  }
}

const app = Vue.createApp({
  mixins: [myMixin],
  created() {
    console.log('组件钩子被调用')
  }
})

// => "mixin 对象的钩子被调用"
// => "组件钩子被调用"

值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

const myMixin = {
  methods: {
    foo() {
      console.log('foo')
    },
    conflicting() {
      console.log('from mixin')
    }
  }
}
 
const app = Vue.createApp({
  mixins: [myMixin],
  methods: {
    bar() {
      console.log('bar')
    },
    conflicting() {
      console.log('from self')
    }
  }
})
 
const vm = app.mount('#app')
 
vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

以上实例，我们调用了以下三个方法：
vm.foo();
vm.bar();
vm.conflicting();
从输出结果 methods 选项中如果碰到相同的函数名则 Vue 实例有更高的优先级会执行输出。

全局混入

也可以全局注册混入对象。注意使用！一旦使用全局混入对象，将会影响到所有之后创建的 Vue 实例。使用恰当时，可以为自定义对象注入处理逻辑。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.31/vue.global.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
    const app = Vue.createApp({
        myOption: 'hello!'
    })

    // 为自定义的选项 'myOption' 注入一个处理器。
    app.mixin({
        created() {
            const myOption = this.$options.myOption
            if (myOption) {
                document.write(myOption)
            }
        }
    })

    app.mount('#app') // => "hello!"
</script>
</body>
</html>

谨慎使用全局混入对象，因为会影响到每个单独创建的 Vue 实例 (包括第三方模板)。

Vue3 Ajax(axios)

Vue 版本推荐使用 axios 来完成 ajax 请求。

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

Github开源地址： https://github.com/axios/axios

使用 cdn:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
或 <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
使用 npm: $ npm install axios
使用 bower: $ bower install axios
使用 yarn:$ yarn add axios

使用方法：

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

this.axios.get(api).then((response) => {
  console.log(response.data)
})

this.$http.get(api).then((response) => {
  console.log(response.data)
})

GET 方法

我们可以简单的读取 JSON 数据：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.31/vue.global.min.js"></script>
    <script src="https://cdn.staticfile.net/axios/1.5.0/axios.min.js"></script>
</head>
<body>
<div id="app">
    {{ info }}
</div>

<script>
    const app = {
        data() {
            return {
                info: 'Ajax 测试!!'
            }
        },
        mounted() {
            axios
                .get('https://www.runoob.com/try/ajax/json_demo.json')
                .then(response => (this.info = response))
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

使用 response.data 读取 JSON 数据：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.31/vue.global.min.js"></script>
    <script src="https://cdn.staticfile.net/axios/1.5.0/axios.min.js"></script>
</head>
<body>
<div id="app">
    <h1>网站列表</h1>
    <div v-for="site in info">
        {{ site.name }}
    </div>
</div>

<script>
    const app = {
        data() {
            return {
                info: 'Ajax 测试!!'
            }
        },
        mounted() {
            axios
                .get('https://www.runoob.com/try/ajax/json_demo.json')
                .then(response => (this.info = response.data.sites))
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

GET 方法传递参数格式如下：

// 直接在 URL 上添加参数 ID=12345
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
 
// 也可以通过 params 设置参数：
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

POST 方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/vue/3.2.31/vue.global.min.js"></script>
    <script src="https://cdn.staticfile.net/axios/1.5.0/axios.min.js"></script>
</head>
<body>
<div id="app">
    {{ info }}
</div>


<script>
    const app = {
        data() {
            return {
                info: null
            }
        },
        mounted() {
            axios
                .post('https://www.runoob.com/try/ajax/demo_axios_post.php')
                .then(response => (this.info = response))
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

POST 方法传递参数格式如下：

axios.post('/user', {
    firstName: 'Fred',        // 参数 firstName
    lastName: 'Flintstone'    // 参数 lastName
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}
 
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

axios API

可以通过向 axios 传递相关配置来创建请求。

axios(config)
// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
//  GET 请求远程图片
axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
})
  .then(function(response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});
axios(url[, config])
// 发送 GET 请求（默认的方法）
axios('/user/12345');

请求方法的别名

为方便使用，官方为所有支持的请求方法提供了别名，可以直接使用别名来发起请求：

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

注意：在使用别名方法时， url、method、data 这些属性都不必在配置中指定。

并发

处理并发请求的助手函数：

axios.all(iterable)
axios.spread(callback)

创建实例

可以使用自定义配置新建一个 axios 实例：

axios.create([config])
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

实例方法

以下是可用的实例方法。指定的配置将与实例的配置合并：

axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])

请求配置项

下面是创建请求时可用的配置选项，注意只有 url 是必需的。如果没有指定 method，请求将默认使用 get 方法。

{
  // `url` 是用于请求的服务器 URL
  url: "/user",

  // `method` 是创建请求时使用的方法
  method: "get", // 默认是 get

  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: "https://some-domain.com/api/",

  // `transformRequest` 允许在向服务器发送前，修改请求数据
  // 只能用在 "PUT", "POST" 和 "PATCH" 这几个请求方法
  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  transformRequest: [function (data) {
    // 对 data 进行任意转换处理

    return data;
  }],

  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
    // 对 data 进行任意转换处理

    return data;
  }],

  // `headers` 是即将被发送的自定义请求头
  headers: {"X-Requested-With": "XMLHttpRequest"},

  // `params` 是即将与请求一起发送的 URL 参数
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  params: {
    ID: 12345
  },

  // `paramsSerializer` 是一个负责 `params` 序列化的函数
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: "brackets"})
  },

  // `data` 是作为请求主体被发送的数据
  // 只适用于这些请求方法 "PUT", "POST", 和 "PATCH"
  // 在没有设置 `transformRequest` 时，必须是以下类型之一：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属：FormData, File, Blob
  // - Node 专属： Stream
  data: {
    firstName: "Fred"
  },

  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求花费了超过 `timeout` 的时间，请求将被中断
  timeout: 1000,

  // `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: false, // 默认的

  // `adapter` 允许自定义处理请求，以使测试更轻松
  // 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
  adapter: function (config) {
    /* ... */
  },

  // `auth` 表示应该使用 HTTP 基础验证，并提供凭据
  // 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
  auth: {
    username: "janedoe",
    password: "s00pers3cret"
  },

  // `responseType` 表示服务器响应的数据类型，可以是 "arraybuffer", "blob", "document", "json", "text", "stream"
  responseType: "json", // 默认的

  // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
  xsrfCookieName: "XSRF-TOKEN", // default

  // `xsrfHeaderName` 是承载 xsrf token 的值的 HTTP 头的名称
  xsrfHeaderName: "X-XSRF-TOKEN", // 默认的

  // `onUploadProgress` 允许为上传处理进度事件
  onUploadProgress: function (progressEvent) {
    // 对原生进度事件的处理
  },

  // `onDownloadProgress` 允许为下载处理进度事件
  onDownloadProgress: function (progressEvent) {
    // 对原生进度事件的处理
  },

  // `maxContentLength` 定义允许的响应内容的最大尺寸
  maxContentLength: 2000,

  // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
  validateStatus: function (status) {
    return status &gt;= 200 &amp;&amp; status &lt; 300; // 默认的
  },

  // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
  // 如果设置为0，将不会 follow 任何重定向
  maxRedirects: 5, // 默认的

  // `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项：
  // `keepAlive` 默认没有启用
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // "proxy" 定义代理服务器的主机名称和端口
  // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
  // 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
  proxy: {
    host: "127.0.0.1",
    port: 9000,
    auth: : {
      username: "mikeymike",
      password: "rapunz3l"
    }
  },

  // `cancelToken` 指定用于取消请求的 cancel token
  // （查看后面的 Cancellation 这节了解更多）
  cancelToken: new CancelToken(function (cancel) {
  })
}

响应结构

axios请求的响应包含以下信息：

{
  // `data` 由服务器提供的响应
  data: {},

  // `status`  HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: "OK",

  // `headers` 服务器响应的头
  headers: {},

  // `config` 是为请求提供的配置信息
  config: {}
}

使用 then 时，会接收下面这样的响应：

axios.get("/user/12345")
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

在使用 catch 时，或传递 rejection callback 作为 then 的第二个参数时，响应可以通过 error 对象可被使用。

配置的默认值

你可以指定将被用在各个请求的配置默认值。

全局的 axios 默认值：

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

自定义实例默认值：

// 创建实例时设置配置的默认值
var instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 在实例已创建后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

配置的优先顺序

配置会以一个优先顺序进行合并。这个顺序是：在 lib/defaults.js 找到的库的默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后者将优先于前者。这里是一个例子：

// 使用由库提供的配置的默认值来创建实例
// 此时超时配置的默认值是 `0`
var instance = axios.create();

// 覆写库的超时默认值
// 现在，在超时前，所有请求都会等待 2.5 秒
instance.defaults.timeout = 2500;

// 为已知需要花费很长时间的请求覆写超时设置
instance.get('/longRequest', {
  timeout: 5000
});

拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

如果你想在稍后移除拦截器，可以这样：

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

可以为自定义 axios 实例添加拦截器。

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

错误处理：

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // 请求已发出，但服务器响应的状态码不在 2xx 范围内
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

可以使用 validateStatus 配置选项定义一个自定义 HTTP 状态码的错误范围。

axios.get('/user/12345', {
  validateStatus: function (status) {
    return status < 500; // 状态码在大于或等于500时才会 reject
  }
})

取消

使用 cancel token 取消请求。

Axios 的 cancel token API 基于cancelable promises proposal

可以使用 CancelToken.source 工厂方法创建 cancel token，像这样：

var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');

还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token：

var CancelToken = axios.CancelToken;
var cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// 取消请求
cancel();

注意：可以使用同一个 cancel token 取消多个请求。

请求时使用 application/x-www-form-urlencoded

axios 会默认序列化 JavaScript 对象为 JSON。如果想使用 application/x-www-form-urlencoded 格式，你可以使用下面的配置。

浏览器

在浏览器环境，你可以使用 URLSearchParams API：

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

URLSearchParams 不是所有的浏览器均支持。

除此之外，你可以使用 qs 库来编码数据:

const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

// Or in another way (ES6),

import qs from 'qs';
const data = { 'bar': 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options);

Node.js 环境

在 node.js里, 可以使用 querystring 模块:

const querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));

当然，同浏览器一样，你还可以使用 qs 库。

Promises

axios 依赖原生的 ES6 Promise 实现而被支持。

如果你的环境不支持 ES6 Promise，你可以使用 polyfill。

TypeScript支持

axios 包含 TypeScript 的定义。

import axios from "axios";
axios.get("/user?ID=12345");

Vue3 组合式 API

Vue3 组合式 API（Composition API）主要用于在大型组件中提高代码逻辑的可复用性。

传统的组件随着业务复杂度越来越高，代码量会不断的加大，整个代码逻辑都不易阅读和理解。

Vue3 使用组合式 API 的地方为 setup。

在 setup 中，我们可以按逻辑关注点对部分代码进行分组，然后提取逻辑片段并与其他组件共享代码。因此，组合式 API（Composition API）允许我们编写更有条理的代码。

setup 组件

setup() 函数在组件创建 created() 之前执行。

setup() 函数接收两个参数 props 和 context。

第一个参数 props，它是响应式的，当传入新的 prop 时，它将被更新。

第二个参数 context 是一个普通的 JavaScript 对象，它是一个上下文对象，暴露了其它可能在 setup 中有用的值。

注意：在 setup 中你应该避免使用 this，因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取。

以下实例使用组合 API 定义一个计数器：

<template>
    <div>
        <p>计数器实例: {{ count }}</p>
        <input @click="myFn" type="button" value="点我加 1">
    </div>
</template>

<script> 
import {ref, onMounted} from 'vue';

export default {
    setup(){
        //定义初始值为0的变量，要使用ref方法赋值，直接赋值的话变量改变不会更新 UI
        let count = ref(0);

        // 定义点击事件 myFn
        function myFn(){
            console.log(count);
            count.value += 1;
        }
       
       // 组件被挂载时，我们用 onMounted 钩子记录一些消息
        onMounted(() => console.log('component mounted!'));

        // 外部使用组合API中定义的变量或方法，在模板中可用。
        return {count,myFn} // 返回的函数与方法的行为相同
    }
}
</script>

在 Vue 3.0 中，我们可以通过一个新的 ref 函数使任何响应式变量在任何地方起作用，如下所示：

import { ref } from 'vue'

let count = ref(0);

ref() 函数可以根据给定的值来创建一个响应式的数据对象，返回值是一个对象，且只包含一个 .value 属性。

在 setup() 函数内，由 ref() 创建的响应式数据返回的是对象，所以需要用 .value 来访问。

import { ref } from 'vue'

const counter = ref(0)

console.log(counter) // { value: 0 }
console.log(counter.value) // 0

counter.value++
console.log(counter.value) // 1

Vue 组合式 API 生命周期钩子

在 Vue2 中，我们通过以下方式实现生命周期钩子函数：

export default {
  beforeMount() {
    console.log('V2 beforeMount!')
  },
  mounted() {
    console.log('V2 mounted!')
  }
};

在 Vue3 组合 API 中实现生命周期钩子函数可以在 setup() 函数中使用带有 on 前缀的函数

import { onBeforeMount, onMounted } from 'vue';
export default {
  setup() {
    onBeforeMount(() => {
      console.log('V3 beforeMount!');
    })
    onMounted(() => {
      console.log('V3 mounted!');
    })
  }
};

下表为 Options API 和 Composition API 之间的映射，包含如何在 setup () 内部调用生命周期钩子：

因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

这些函数接受一个回调函数，当钩子被组件调用时将会被执行:

setup() {
...
    // 组件被挂载时，我们用 onMounted 钩子记录一些消息
    onMounted(() => console.log('component mounted!'));
...
}

模板引用

在使用组合式 API 时，响应式引用和模板引用的概念是统一的。

为了获得对模板内元素或组件实例的引用，我们可以像往常一样声明 ref 并从 setup() 返回：

<template> 
  <div ref="root">This is a root element</div>
</template>

<script>
  import { ref, onMounted } from 'vue'

  export default {
    setup() {
      const root = ref(null)

      onMounted(() => {
        // DOM 元素将在初始渲染后分配给 ref
        console.log(root.value) // <div>This is a root element</div>
      })

      return {
        root
      }
    }
  }
</script>

以上实例中我们在渲染上下文中暴露 root，并通过 ref="root"，将其绑定到 div 作为其 ref。

作为模板使用的 ref 的行为与任何其他 ref 一样：它们是响应式的，可以传递到 (或从中返回) 复合函数中。

v-for 中的用法

组合式 API 模板引用在 v-for 内部使用时没有特殊处理。相反，请使用函数引用执行自定义处理：

<template>
  <div v-for="(item, i) in list" :ref="el => { if (el) divs[i] = el }">
    {{ item }}
  </div>
</template>

<script>
  import { ref, reactive, onBeforeUpdate } from 'vue'

  export default {
    setup() {
      const list = reactive([1, 2, 3])
      const divs = ref([])

      // 确保在每次更新之前重置ref
      onBeforeUpdate(() => {
        divs.value = []
      })

      return {
        list,
        divs
      }
    }
  }
</script>

侦听模板引用

侦听模板引用的变更可以替代前面例子中演示使用的生命周期钩子。

但与生命周期钩子的一个关键区别是，watch() 和 watchEffect() 在 DOM 挂载或更新之前运行会有副作用，所以当侦听器运行时，模板引用还未被更新。

<template>
  <div ref="root">This is a root element</div>
</template>

<script>
  import { ref, watchEffect } from 'vue'

  export default {
    setup() {
      const root = ref(null)

      watchEffect(() => {
        // 这个副作用在 DOM 更新之前运行，因此，模板引用还没有持有对元素的引用。
        console.log(root.value) // => null
      })

      return {
        root
      }
    }
  }
</script>

因此，使用模板引用的侦听器应该用 flush: 'post' 选项来定义，这将在 DOM 更新后运行副作用，确保模板引用与 DOM 保持同步，并引用正确的元素。

<template>
  <div ref="root">This is a root element</div>
</template>

<script>
  import { ref, watchEffect } from 'vue'

  export default {
    setup() {
      const root = ref(null)

      watchEffect(() => {
        console.log(root.value) // => <div>This is a root element</div>
      }, 
      {
        flush: 'post'
      })

      return {
        root
      }
    }
  }
</script>

vue3 的生命周期

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。

在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

onMounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码：

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`the component is now mounted.`)
})
</script>

还有其他一些钩子，会在实例生命周期的不同阶段被调用，最常用的是 onMounted、onUpdated 和 onUnmounted。所有生命周期钩子的完整参考及其用法请参考 API 索引。

当调用 onMounted 时，Vue 会自动将回调函数注册到当前正被初始化的组件实例上。这意味着这些钩子应当在组件初始化时被同步注册。例如，请不要这样做：

setTimeout(() => {
  onMounted(() => {
    // 异步注册时当前组件实例已丢失
    // 这将不会正常工作
  })
}, 100)

注意这并不意味着对 onMounted 的调用必须放在 setup() 或 <script setup> 内的词法上下文中。onMounted() 也可以在一个外部函数中调用，只要调用栈是同步的，且最终起源自 setup() 就可以。

生命周期钩子的注意事项

this 上下文：所有生命周期钩子函数中的 this 自动指向调用它的组件实例。
避免使用箭头函数：定义生命周期钩子时，不要使用箭头函数，因为这会导致无法通过 this 获取组件实例。

组合式 API：生命周期钩子

onMounted() 注册一个回调函数，在组件挂载完成后执行。

<script setup>
import { ref, onMounted } from 'vue'

const el = ref()

onMounted(() => {
  el.value // <div>
})
</script>

<template>
  <div ref="el"></div>
</template>

onUpdated() 注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。

<script setup>
import { ref, onUpdated } from 'vue'

const count = ref(0)

onUpdated(() => {
  // 文本内容应该与当前的 `count.value` 一致
  console.log(document.getElementById('count').textContent)
})
</script>

<template>
  <button id="count" @click="count++">{{ count }}</button>
</template>

onUnmounted() 注册一个回调函数，在组件实例被卸载之后调用。

<script setup>
import { onMounted, onUnmounted } from 'vue'

let intervalId
onMounted(() => {
  intervalId = setInterval(() => {
    // ...
  })
})

onUnmounted(() => clearInterval(intervalId))
</script>

onBeforeMount() 注册一个钩子，在组件被挂载之前被调用。

onBeforeUpdate() 注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。

onBeforeUnmount() 注册一个钩子，在组件实例被卸载之前调用。

onErrorCaptured() 注册一个钩子，在捕获了后代组件传递的错误时调用。

function onErrorCaptured(callback: ErrorCapturedHook): void

type ErrorCapturedHook = (
  err: unknown,
  instance: ComponentPublicInstance | null,
  info: string
) => boolean | void

示例：生命周期钩子函数的使用

一个完整的 Vue 组件示例，展示了所有生命周期钩子函数的使用：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.min.js"></script>
</head>
<body>

<div id="app">
    <lifecycle-demo></lifecycle-demo>
</div>

<script>
    const LifecycleDemo = {
        template: `
          <div>{{ message }}</div>`,
        data() {
            return {
                message: 'Hello, Vue!'
            };
        },
        beforeCreate() {
            console.log('beforeCreate: 实例刚刚被创建');
        },
        created() {
            console.log('created: 实例创建完成');
        },
        beforeMount() {
            console.log('beforeMount: 挂载开始之前');
        },
        mounted() {
            console.log('mounted: 实例已挂载');
        },
        beforeUpdate() {
            console.log('beforeUpdate: 数据更新之前');
        },
        updated() {
            console.log('updated: 数据更新完成');
        },
        beforeUnmount() {
            console.log('beforeUnmount: 实例卸载之前');
        },
        unmounted() {
            console.log('unmounted: 实例已卸载');
        }
    };

    const app = Vue.createApp({
        components: {
            LifecycleDemo
        }
    });

    app.mount('#app');
</script>

</body>
</html>

会在控制台打印出每个生命周期钩子函数的日志，帮助理解各个生命周期阶段的顺序和用途。

Vue API

关注

12
点赞
踩
60

收藏

觉得还不错? 一键收藏
2
评论
菜鸟教程 --- Vue3 教程

Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。................................................
复制链接

扫一扫