vue3系列学习并实战之基础（一）

目录

1.创建项目

1.1前提条件

1.2安装

1.3不使用构建工具

2.运行

vu3官网生态系统

暴露异常和注册组件

多个应用实例

模版语法

 指令

动态绑定多个值：

调用函数

动态参数

 修饰符

总结 

---

 

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 dev

1.3不使用构建工具

若不想经过构建流程就可以使用 Vue，请直接复制下面的代码到一个 HTML 文件中，并在浏览器中打开它：

{{ message }}

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 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。简写形式为:id

动态绑定多个值：

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

调用函数

  {{ formatDate(date) }}

绑定在表达式中的方法在组件每次更新时都会被重新调用，因此不应该产生任何副作用，比如改变数据或触发异步操作。

动态参数

 ... 
-->

 ... 


 ... 

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

 ... 

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

 修饰符

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

 

3.总结 

本文是基础教程，后续会推出响应式基础，计算属性，类和样式绑定等基础知识，本人k，谢谢各位看官支持，一起继续努力加油吧