Vue3 学习笔记

Vue3 简介：

1. 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王）
2. github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0

1. Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

2. Vue 只关注视图层， 采用自底向上增量开发的设计。

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

4. 无论是简单还是复杂的界面，Vue 都可以胜任。

Vue 有两个核心功能：声明式渲染和响应式。

      声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。

      响应式：Vue 会自动跟踪 JavaScript 状态变化并在改变发生时响应式地更新 DOM（Document Object Model）。

    首先从简单示例开始讲：我们第一步：安装应用 Vue.js。第二步：通过 Vue.createApp({...}) 创建 Vue应用实例。第三步：创建 HTML 模板。第四步：在根元素上挂载应用实例，返回根组件实例对象。注意的一点就是要应用实例必须在调用了.mount()方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的DOM元素或是一个CSS选择器字符串,我们可以在DOM中创建根组件模板并与Vue的根组件对象进行挂载。

页面展示为：

第二阶段我们学了模板语法也就是声明式渲染，在底层机制中，Vue会将模板编译成高度优化的JavaScript代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的DOM操作。这一切都基于虚拟DOM。

文本插值：它使用了基本的数据绑定形式，使用了双大括号的语法（{ {}}），双大括号标签会被替换为相应组件实例中msg属性的值。同时每次 msg 属性更改时它也会同步更新。

1. 功能: 用于解析标签体内容

2. 语法: { {xxx}} ，xxxx

原始HTML：如果想插入HTML，我们需要使用v-html指令。

属性绑定：除了插值，我们还可以使用vue为DOM动态，响应式的绑定属性。我们在这里需要借助v-bind指令。v-bind指令指示Vue将元素的id属性与组件的dynamicId属性保持一致。如果绑定的值是null或者undefined，那么该 属性将会从渲染的元素上移除。

1. 功能: 解析标签属性、解析标签体内容、绑定事件

2. 举例：v-bind:href = 'xxxx' ，xxxx 会作为 js 表达式被解析

3. 说明：Vue 中有有很多的指令，此处只是用 v-bind 举个例子

布尔型属性：属性依据true / false值来决定属性是否应该存在于该元素上。 disabled就是最常见的例子之一。当isButtonDisabled为真值或一个空字符串时，元素会包含这个disabled attribute。而当其为其他假值时attribute将被忽略。

使用JavaScript表达式：

指令：指令是带有v-前缀的特殊属性。Vue提供了许多内置指令，包括上面我们所介绍的v-bind和v-html。一个指令的任务是在其表达式的值变化时响应式地更新DOM。

动态参数：除了指令参数的值是动态的以外，我们还可以动态的设置指令的参数，需要包含在一对方括号[]中。

页面展示：

<