简介vue

 

目录

一、介绍

渐进式框架​

单文件组件​

选项式 API (Options API)​

组合式 API (Composition API)​

该选哪一个?​

创建一个 Vue 应用

应用实例​

根组件​

DOM 中的根组件模板

应用配置​

多个应用实例​


一、介绍

Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。

简单案例:

import { createApp } from 'vue'createApp({data() {return {count: 0}}
}).mount('#app')
<div id="app"><button @click="count++">Count is: {{ count }}</button>
</div>

上面的示例展示了 Vue 的两个核心功能:

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

  • 响应性:Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

渐进式框架​

Vue 是一个框架,也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的,不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点,Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景,你可以用不同的方式使用 Vue:

  • 无需构建步骤,渐进式增强静态的 HTML
  • 在任何页面中作为 Web Components 嵌入
  • 单页应用 (SPA)
  • 全栈 / 服务端渲染 (SSR)
  • Jamstack / 静态站点生成 (SSG)
  • 开发桌面端、移动端、WebGL,甚至是命令行终端中的界面

单文件组件​

在大多数启用了构建工具的 Vue 项目中,我们可以使用一种类似 HTML 格式的文件来书写 Vue 组件,它被称为单文件组件 (也被称为 *.vue 文件,英文 Single-File Components,缩写为 SFC)。顾名思义,Vue 的单文件组件会将一个组件的逻辑 (JavaScript),模板 (HTML) 和样式 (CSS) 封装在同一个文件里。下面我们将用单文件组件的格式重写上面的计数器示例:

<script>
export default {data() {return {count: 0}}
}
</script><template><button @click="count++">Count is: {{ count }}</button>
</template><style scoped>
button {font-weight: bold;
}
</style>

选项式 API (Options API)​

使用选项式 API,我们可以用包含多个选项的对象来描述组件的逻辑,例如 datamethods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上,它会指向当前的组件实例。

<script>
export default {// data() 返回的属性将会成为响应式的状态// 并且暴露在 `this` 上data() {return {count: 0}},// methods 是一些用来更改状态与触发更新的函数// 它们可以在模板中作为事件处理器绑定methods: {increment() {this.count++}},// 生命周期钩子会在组件生命周期的各个不同阶段被调用// 例如这个函数就会在组件挂载完成后被调用mounted() {console.log(`The initial count is ${this.count}.`)}
}
</script><template><button @click="increment">Count is: {{ count }}</button>
</template>

组合式 API (Composition API)​

通过组合式 API,我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中,组合式 API 通常会与 <script setup> 搭配使用。这个 setup attribute 是一个标识,告诉 Vue 需要在编译时进行一些处理,让我们可以更简洁地使用组合式 API。比如,<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

下面是使用了组合式 API 与 <script setup> 改造后和上面的模板完全一样的组件:

<script setup>
import { ref, onMounted } from 'vue'// 响应式状态
const count = ref(0)// 用来修改状态、触发更新的函数
function increment() {count.value++
}// 生命周期钩子
onMounted(() => {console.log(`The initial count is ${count.value}.`)
})
</script><template><button @click="increment">Count is: {{ count }}</button>
</template>

该选哪一个?​

两种 API 风格都能够覆盖大部分的应用场景。它们只是同一个底层系统所提供的两套不同的接口。实际上,选项式 API 是在组合式 API 的基础上实现的!关于 Vue 的基础概念和知识在它们之间都是通用的。

选项式 API 以“组件实例”的概念为中心 (即上述例子中的 this),对于有面向对象语言背景的用户来说,这通常与基于类的心智模型更为一致。同时,它将响应性相关的细节抽象出来,并强制按照选项来组织代码,从而对初学者而言更为友好。

组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量,并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由,也需要你对 Vue 的响应式系统有更深的理解才能高效使用。相应的,它的灵活性也使得组织和重用逻辑的模式变得更加强大。

在组合式 API FAQ 章节中,你可以了解更多关于这两种 API 风格的对比以及组合式 API 所带来的潜在收益。

如果你是使用 Vue 的新手,这里是我们的大致建议:

  • 在学习的过程中,推荐采用更易于自己理解的风格。再强调一下,大部分的核心概念在这两种风格之间都是通用的。熟悉了一种风格以后,你也能够很快地理解另一种风格。

  • 在生产项目中:

    • 当你不需要使用构建工具,或者打算主要在低复杂度的场景中使用 Vue,例如渐进增强的应用场景,推荐采用选项式 API。

    • 当你打算用 Vue 构建完整的单页应用,推荐采用组合式 API + 单文件组件。

在学习阶段,你不必只固守一种风格。在接下来的文档中我们会为你提供一系列两种风格的代码供你参考,你可以随时通过左上角的 API 风格偏好来做切换。

创建一个 Vue 应用

应用实例​

每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例

import { createApp } from 'vue'const app = createApp({/* 根组件选项 */
})

根组件​

我们传入 createApp 的对象实际上是一个组件,每个应用都需要一个“根组件”,其他组件将作为其子组件。

如果你使用的是单文件组件,我们可以直接从另一个文件中导入根组件。

import { createApp } from 'vue'
// 从一个单文件组件中导入根组件
import App from './App.vue'const app = createApp(App)

DOM 中的根组件模板

<div id="app"><button @click="count++">{{ count }}</button>
</div>
import { createApp } from 'vue'const app = createApp({data() {return {count: 0}}
})app.mount('#app')

应用配置​

应用实例会暴露一个 .config 对象允许我们配置一些应用级的选项,例如定义一个应用级的错误处理器,用来捕获所有子组件上的错误:

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.js 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/179321.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

.NET生成微信小程序推广二维码

前言 对于小程序大家可能都非常熟悉了&#xff0c;随着小程序的不断普及越来越多的公司都开始推广使用起来了。今天接到一个需求就是生成小程序码&#xff0c;并且与运营给的推广图片合并在一起做成一张漂亮美观的推广二维码&#xff0c;扫码这种二维码就可以进入小程序。为了…

【开源】基于Vue.js的大学计算机课程管理平台的设计和实现

项目编号&#xff1a; S 028 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S028&#xff0c;文末获取源码。} 项目编号&#xff1a;S028&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 实验课程档案模块2.2 实验资源模块2…

vue项目实现生成一个简单二维码

vue项目中实现的 一个简单的二维码生成例子 首先安装一下插件 npm install qrcodejs2 --save然后尝试走通下面的业务 <template><div class"qrcode"><h1>生成二维码</h1><label for"text">请输入要转换为二维码的内容&…

前端环境变量释义process.env与import.meta.env

视频教程 彻底搞懂前端环境变量使用和原理&#xff0c;超清楚_哔哩哔哩_bilibili 添加命令行参数 --modexxxxx 新建.env.xxxx文件,其中.env文件会在所有环境下生效 以VITE_开头&#xff0c;字符串无需加双引号 使用import.meta.env.VITE_xxxxx进行调用

C++Primer(中文版)(第五版)【读书笔记 + 思考总结】

CPrimer&#xff08;中文版&#xff09;&#xff08;第五版&#xff09;【读书笔记 思考总结】 第7章 类什么是数据抽象&#xff1f;什么是封装&#xff1f;什么是抽象数据类型&#xff1f;一个设计良好的类应该提供什么&#xff1f;什么是inline函数&#xff1f;inline函数有…

【数据结构】树与二叉树(廿四):树搜索指定数据域的结点(算法FindTarget)

文章目录 5.3.1 树的存储结构5. 左儿子右兄弟链接结构 5.3.2 获取结点的算法1. 获取大儿子、大兄弟结点2. 搜索给定结点的父亲3. 搜索指定数据域的结点a. 算法FindTargetb. 算法解析c. 代码实现a. 使用指向指针的指针b. 直接返回找到的节点 4. 代码整合 5.3.1 树的存储结构 5.…

C++之模版初阶(简单使用模版)

前言 在学习C的模版之前&#xff0c;咱们先来说一说模版的概念&#xff0c;模版在我们的日常生活中非常常见&#xff0c;比如我们要做一个ppt&#xff0c;我们会去在WPS找个ppt的模版&#xff0c;我们只需要写入内容即可&#xff1b;比如我们的数学公式&#xff0c;给公式套值&…

计算机人机界面

人机界面是指入与机器之间相互交流和影响的区域。人机界面包括对数据和信息的输入和输出方法&#xff0c;以及人们对机器的操作和控制。早期&#xff0c;人机交互界面是控制合&#xff0c;随后通过键盘进行操作&#xff0c;目前为鼠标和键盘操作&#xff0c;而智能手机采用触摸…

【Linux】基本指令(二)

本文续接上文基本指令&#xff08;一&#xff09; 目录 cpmvcatmore && less cp 语法&#xff1a;cp [选项] 源文件或目录 目标文件或目录 功能: 复制文件或目录 说明: cp指令用于复制文件或目录&#xff0c;如同时指定两个以上的文件或目录&#xff0c;且最后的目的地…

第一节HarmonyOS DevEcoStudio工具下载以及环境搭建

一、下载与安装DevEco Studio 在HarmonyOS应用开发学习之前&#xff0c;需要进行一些准备工作&#xff0c;首先需要完成开发工具DevEco Studio的下载与安装以及环境配置。 进入DevEco Studio 工具下载官网&#xff1a;https://developer.harmonyos.com/cn/develop/deveco-stu…

经典滑动窗口试题(二)

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、水果成篮1、题目讲解2、讲解算法思路3、代码实现 二、找到字符串中所有字母异位词1、题目…

距离向量路由协议——IGRP和EIGRP

IGRP-内部网关路由协议 IGRP&#xff08;Interior Gateway Routing Protocol&#xff0c;内部网关路由协议&#xff09;是一种动态距离向量路由协议&#xff0c;它是Cisco公司在20世纪80年代中期设计的&#xff0c;是Cisco专用路由协议。目前在Cisco高版本的IOS已经对IGRP不提…

免费查找文献期刊数据论文网站

文章目录&#xff1a; 一&#xff1a;文献期刊 1.网站 2.镜像 3.搜索 4.检索 5.图书馆 6.学校 7.论文 8.导航 9.模板格式 10.翻译 二&#xff1a;数据 一&#xff1a;文献期刊 1.网站 中国知网 维普 IData sci-hub&#xff1a;Sci-Hub: 将知识带给每个人、S…

交叉编译

1. 交叉开发 交叉编译&#xff1a; 在电脑把程序编写 编译 调试好 再下载到嵌入式产品中运行 编译&#xff1a; gcc 之前编译环境和运行环境是一样的 交叉编译&#xff1a; 编译 把编译代码和运行分开 编译代码在虚拟机中 运行…

BGP基础配置

EBGP是AS之间 IBGP是AS内 R1-R2是EBGP,R4-R5是EBGP R2-R3-R4是IBGP 第一步基础配置&#xff1a;IP地址 [r1-GigabitEthernet0/0/0]ip ad 12.0.0.1 24 [r1-LoopBack0]ip ad 1.1.1.1 32 [r2-GigabitEthernet0/0/0]ip ad 12.0.0.2 24 [r2-LoopBack0]ip ad 2.2.2.2 32 [r2-Loop…

Java中的mysql——面试题+答案(数据库连接池,批处理操作)——第22期

当涉及Java中的MySQL时&#xff0c;面试题的范围可以涵盖更多方面&#xff0c;包括高级主题和实践经验。 什么是Hibernate&#xff1f;它与JDBC有什么区别&#xff1f; 答案&#xff1a; Hibernate是一个开源的对象关系映射&#xff08;ORM&#xff09;框架&#xff0c;它允许J…

【论文解读】在上下文中学习创建任务向量

一、简要介绍 大型语言模型&#xff08;LLMs&#xff09;中的上下文学习&#xff08;ICL&#xff09;已经成为一种强大的新的学习范式。然而&#xff0c;其潜在的机制仍未被很好地了解。特别是&#xff0c;将其映射到“标准”机器学习框架是具有挑战性的&#xff0c;在该框架中…

成功解决:AssertionError: Torch not compiled with CUDA enabled

在运行pycharm项目的时候&#xff0c;出现了以上的报错&#xff0c;主要可以归结于以下两个个方面&#xff1a; 1、没有安装GPU版本的pytorch&#xff0c;只是使用清华的镜像地址下载了CPU版本的pytorch 2、安装的CUDA和安装的pytorch的版本不相互对应 我使用 pip list 来…

关于tryit-jssip的点点滴滴---续集

如果文章太长&#xff0c;估计读者没有耐心看完&#xff0c;因此才有了续集 getUserMedia 如果每次都提示是否允许访问本机音频和视频设备&#xff0c;估计大家很烦&#xff0c;解决的办法是用https&#xff0c;只提示一次&#xff08;后面免打扰&#xff09;&#xff0c;可参…

Python超级详细的变量命名规则

Python 需要使用标识符给变量命名&#xff0c;其实标识符就是用于给程序中变量、类、方法命名的符号&#xff08;简单来说&#xff0c;标识符就是合法的名字&#xff09;。 Python 语言的标识符必须以字母、下画线&#xff08;_&#xff09;开头&#xff0c;后面可以跟任意数目…