vue 学习

目录

前言 

0、创建一个 vue 应用

方式一：使用 vue 官方提供的方式创建

方式二：使用 vite 官方提供的方式创建：

一、vue 的指令

二、vue 动态样式

三、vue 的组件

四、vue 的计算属性（computed）和侦听器（watch）

五、vue 过滤器

六、虚拟 DOM（VDOM）

七、vue 插件

八、vue 渲染函数 以及 JSX

九、vue API

十、vue3

---

前言 

• 将 h 作为 createElement 函数的别名是 Vue 生态系统中的一个通用惯例。
• vue 源码官方解析：

vue 源码官方解析https://vue-js.com/learn-vue/start/#_1-%E5%89%8D%E8%A8%80

 

0、创建一个 vue 应用

方式一：使用 vue 官方提供的方式创建

执行命令：npm init vue@latest，然后依次选择是否需要 TypeScript、JSX、Vue Router、Pinia、Vitest（基于vite的单元测试框架）、Cypress（前端测试工具）、ESLint、Prettier。

方式二：使用 vite 官方提供的方式创建：

执行命令：npm create vite@latest vite-vue-ts，然后依次选择 Vue–>TypeScript 即可。

目录结构：

方式一创建的项目

方式二创建的项目

【注意】这两种方式，默认创建的 vue 应用都是 vite 的。 

 

一、vue 的指令

vue 的指令

二、vue 动态样式

vue 动态样式 class 和 style

三、vue 的组件

vue 组件

vue 插槽

四、vue 的计算属性（computed）和侦听器（watch）

vue 的计算属性（computed）和侦听器（watch）

五、vue 过滤器

vue 过滤器

六、虚拟 DOM（VDOM）

vue 虚拟 DOM 与 key 属性

七、vue 插件

vue 插件

八、vue 渲染函数 以及 JSX

vue 渲染函数 与 JSX

九、vue API

vue2 APIhttps://cn.vuejs.org/v2/api/

vue3 APIhttps://v3.cn.vuejs.org/api/

十、vue3

vue3 取经

【拓展】

使用 HBuilderX + uni-app 来实现 **免终端开发 vue 应用** 的入门教程