目录
1.创建项目
1.1前提条件
- 熟悉命令行
- 已安装 15.0 或更高版本的 Node.js
1.2安装
npm init vue@latest
需要的可以选择Yes，不需要的选择No
出现npm notice提示，直接升级npm版本即可
依次执行一下命令：
cd vue3
npm install
npm run lint
npm run dev1.3不使用构建工具
若不想经过构建流程就可以使用 Vue，请直接复制下面的代码到一个 HTML 文件中，并在浏览器中打开它：
<script src="https://unpkg.com/vue@3"></script>
<div id="app">{
{ message }}</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>2.运行
安装好node_moudles包，启动npm run dev，你可以看到启动界面如下：
启动之前：运行npm run lint检查是否有不符合规则的代码，然后再运行npm run dev。
vu3官网生态系统
生态系统为：Pinia（状态管理）, Vue Router（路由）， Vue Test Utils（单元测试）, Vue Dev Tools（vue调试工具），官方社区：Vue Land
暴露异常和注册组件
app.config.errorHandler = (err) => {
/* 处理错误 */
}
// 注册组件
app.component('TodoDeleteButton', TodoDeleteButton)多个应用实例
应用实例并不只限于一个。createApp API 允许你在同一个页面中创建多个共存的 Vue 应用，而且每个应用都拥有自己的用于配置和全局资源的作用域。
const app1 = createApp({
/* ... */
})
app1.mount('#container-1')
const app2 = createApp({
/* ... */
})
app2.mount('#container-2')模版语法
在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。
如果你对虚拟 DOM 的概念比较熟悉，并且偏好直接使用 JavaScript，你也可以结合可选的 JSX 支持直接手写渲染函数而不采用模板。但请注意，这将不会享受到和模板同等级别的编译时优化。
指令
v-html渲染dom元素
v-bind:attribute 绑定指令的属性，
v-bind指令指示 Vue 将元素的idattribute 与组件的dynamicId属性保持一致。如果绑定的值是null或者undefined，那么该 attribute 将会从渲染的元素上移除。简写形式为:id
动态绑定多个值：
const objectOfAttrs = {
id: 'container',
class: 'wrapper'
}
<div v-bind="objectOfAttrs"></div>调用函数
<span :title="toTitleDate(date)">
{
{ formatDate(date) }}
</span>绑定在表达式中的方法在组件每次更新时都会被重新调用，因此不应该产生任何副作用，比如改变数据或触发异步操作。
动态参数
<!--
注意，参数表达式有一些约束，
动态参数中表达式的值应当是一个字符串，或者是 null。特殊值 null 意为显式移除该绑定。其他非字符串的值会触发警告。
<!-- 这会触发一个编译器警告 -->
<a :['foo' + bar]="value"> ... </a>
-->
<a v-bind:[attributeName]="url"> ... </a>
<!-- 简写 -->
<a :[attributeName]="url"> ... </a>当使用 DOM 内嵌模板 (直接写在 HTML 文件里的模板) 时，我们需要避免在名称中使用大写字母，因为浏览器会强制将其转换为小写：
<a :[someAttr]="value"> ... </a>上面的例子将会在 DOM 内嵌模板中被转换为 :[someattr]。如果你的组件拥有 “someAttr” 属性而非 “someattr”，这段代码将不会工作。单文件组件内的模板不受此限制。
修饰符
修饰符是以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定。例如 .prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()：
3.总结
本文是基础教程，后续会推出响应式基础，计算属性，类和样式绑定等基础知识，本人k，谢谢各位看官支持，一起继续努力加油吧