Vue笔记:基础入门(后篇)

文章目录

  • 目的
  • API概览
  • 应用实例(全局API)
  • 组合式API
  • 选项式API
  • 单文件组件
  • 内置内容(指令)
    • 基础说明
    • 模板语法
    • 属性绑定
    • 条件渲染
    • 列表渲染
    • 事件处理
    • 表单输入绑定
  • 内置内容(其它)
  • 总结

目的

在前面的文章 《Vue笔记:基础入门(前篇)》https://blog.csdn.net/Naisu_kun/article/details/126760242 中已经介绍了Vue的基础概念与在前端开发中的使用方式等内容。这篇文章将接着简单介绍Vue提供的API的一些使用方法。(基于 Vue3 ,当前版本为 3.2.45

API概览

Vue提供的各种API可以在官方页面进行查看:
https://cn.vuejs.org/api/ 或 https://vuejs.org/api/

可以看到Vue提供的API官方将它分为下面一些:

  • 全局 API
  • 组合式 API & 选项式 API
  • 内置内容
  • 单文件组件
  • 进阶 API

虽然从功能和适用范围上可以进行分类,但是实际使用时是没办法分的那么开的,往往各种类型的都需要使用到,本文将以基础入门过程为切入点对涉及的各类API的部分内容进行介绍,完整详细的信息可以参考官方文档。

基础准备:使用 npm init vue@latest 初始化项目,进行项目文件夹后使用 npm install 安装相关依赖。

应用实例(全局API)

Vue工作的时候会全权接管它所控制的数据、组件等,可以看作是一个独立的应用实例或者说应用程序,即一个App。使用 createApp() 方法可以创建Vue App,Vue App需要挂载到页面上的某个组件上才会渲染出来,使用 mount() 方法进行挂载:
Vue笔记:基础入门(后篇)_第1张图片
这里的 .vue 文件就是Vue的单文件组件功能了,其内部有一些属于单文件组件的语法,会在后面进行介绍。单文件组件可以更好的体现Vue的特性,下面将主要以单文件组件形式进行介绍。如无其它更改下文将保持当前index.html和main.js不变,所以配图中可能就不再展示它俩。

应用实例除了挂载外还可以进行一些操作与设置,比如使用 app.unmount() 来卸载组件,使用 app.use() 来安装插件,使用下面方式可以捕获Vue实例的错误:

app.config.errorHandler = (err, instance, info) => {
  // 处理错误
}

可以使用 app.config.globalProperties 来挂载能够被应用内所有组件实例访问到的全局属性的对象,就好比window对象,挂在其上面的对象可以被全局访问到。

一个页面中可以有多个Vue App。

组合式API

下面是个组合式API使用的例子:
下面的 {{ message }} 是一种常见的模板语法,再实际渲染时它会被替换成 message 变量内容。
Vue笔记:基础入门(后篇)_第2张图片
上面例子中 setup() 钩子是在组件中使用组合式API的入口,当然很多时候都会使用单文件组件的

你可能感兴趣的:(Web与JS相关,vue.js,javascript,前端,vue3,api)