Vue3-01

Vue.js (通常简称为 Vue)是一套用于构建用户界面的渐进式框架。与其他框架不同的是,Vue采用了自底向上增量开发的设计。Vue的核心库只关注视图层,并且非常容易与现有项目集成。Vue也完全支持通过插件的方式进行扩展。Vue的设计理念是通过尽可能简单的API来实现响应的数据绑定和组合的视图组件。
Vue的核心特点包括:
响应的数据绑定: Vue可以将数据和DOM元素进行双向绑定,使数据的变化可以自动反映在视图上。
组件化:Vue提供了一种组合视图组件的方式,可以方便地构建复杂的用户界面。
虚拟DOM:Vue利用虚拟DOM技术对DOM操作进行优化,提高渲染性能。
渐进式框架:Vue可以逐步引入到现有项目中,也可以作为完整的前端框架使用。
总的来说,Vue是一个灵活、高效并且易于上手的前端框架,已经在很多项目中得到了广泛的应用。

import { createApp } from 'vue' 		//创建应用
import App from './App.vue'				//引入根组件
createApp(App).mount('#app')		<template>			//写html
<script>			//JS或者TS
<style>				//样式

Composition API(Vue3)和Options API(Vue2)的区别
Options API使用data属性来定义组件的数据,而Composition API使用setup函数来定义组件的状态。这是两种API的主要区别之一。另外,Composition API还提供了更多的功能和优势,例如:可以使用函数式组件、可以直接访问props、可以使用ref和computed等。这些功能可以让组件更加灵活和可维护。

setup是所有Composition API(组合API表演的舞台 ”,组件中所用到的:数据、方法等等,均要配置在setup中。

    setup(){//数据let name="张三"let tel='18848339298'//方法function showTel(){alert(tel)}return {name,showTel}}

Vue2.x配置(data、methos、computed…)中可以访问到setup中的属性、方法
但在setup中不能访问到Vue2.x配置(data、methos、computed…)

语法糖

<script setup lang="ts" name="Person1">
//数据
let name = "张三"
let tel = '18848339298'//方法npm run dev
function showTel() {alert(tel)
}
</script>

ref函数作用: 定义一个响应式的数据(基本类型响应数据)

import {ref} from 'vue'
let name = ref("张三")

reactive函数作用: 定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数)

import {reactive} from 'vue'
let car=reactive({brand:'奔驰',price:100})

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

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

相关文章

嵌入式培训机构四个月实训课程笔记(完整版)-Linux ARM驱动编程第二天-arm ads下的start.S分析(物联技术666)

链接&#xff1a;https://pan.baidu.com/s/1E4x2TX_9SYhxM9sWfnehMg?pwd1688 提取码&#xff1a;1688 ; ; NAME: 2440INIT.S ; DESC: C start up codes ; Configure memory, ISR ,stacks ; Initialize C-variables ; 完全注释 ; HISTORY: ; 2002.02.25:kwtark: ver 0.…

中国电子学会2023年12月份青少年软件编程Scratch图形化等级考试试卷一级真题(含答案)

2023-12 Scratch一级真题 分数&#xff1a;100 题数&#xff1a;37 测试时长&#xff1a;60min 一、单选题(共25题&#xff0c;共50分) 1.观察下列每个圆形中的四个数&#xff0c;找出规律&#xff0c;在括号里填上适当的数&#xff1f;&#xff08;C&#xff09;&#xf…

预处理详解(下)

1.#运算符 #运算符将宏的一个参数转换为字符串字面量。它仅允许出现在带参数的宏的替换列表中。 #运算符所执行的操作可以理解为”字符串化“。 例如&#xff1a; 我们将打印的字符串中的n改为参数n,这样在传参的时候就也会随着变化。假如我们不将其改为参数n的话会发生什么呢…

C++ Qt框架开发 | 基于Qt框架开发实时成绩显示排序系统(3) 保存表格数据

对上两篇篇的工作C Qt框架开发| 基于Qt框架开发实时成绩显示排序系统&#xff08;1&#xff09;-CSDN博客和C Qt框架开发 | 基于Qt框架开发实时成绩显示排序系统&#xff08;2&#xff09;折线图显示-CSDN博客继续优化&#xff0c;增加一个保存按钮&#xff0c;用于保存成绩数据…

论文阅读-面向机器学习的云工作负载预测模型的性能分析

论文名称&#xff1a;Performance Analysis of Machine Learning Centered Workload Prediction Models for Cloud 摘要 由于异构服务类型和动态工作负载的高变异性和维度&#xff0c;资源使用的精确估计是一个复杂而具有挑战性的问题。在过去几年中&#xff0c;资源使用和流…

给定n个结点的树,其中有k个结点是特殊结点(未知),定义好结点:该结点到k个特殊结点的距离之和最小。若随机k个结点为特殊结点,求好结点个数的期望值

题目 思路: 举例: 其中黑色结点为特殊结点,可以看出,每种情况都有一个结点的s值不等于k / 2,但是是好结点,所以最后答案加一。 #include <bits/stdc++.h> using namespace std; #define int long long #define pb push_back #define fi first #define se second …

支持向量机SVM

支持向量机&#xff08;SVM&#xff0c;Support Vector Machines&#xff09;是一种广泛使用的监督学习方法&#xff0c;适用于分类、回归和其他任务。SVM的核心思想是找到一个最优的决策边界&#xff08;在二维空间中是一条线&#xff0c;在更高维度是一个超平面&#xff09;&…

【北邮鲁鹏老师计算机视觉课程笔记】10 Classification 分类

【北邮鲁鹏老师计算机视觉课程笔记】10 Classification 分类 1 图像识别的基本范式 检测问题&#xff1a;不仅要知道有没有&#xff0c;还要知道在哪里 分类是整图级标签&#xff0c;检测是区域级标签&#xff0c;分割是像素级标签 2 检测任务的应用 3 单实例识别与类别识别…

问题 J: 今年暑假不AC

题目描述 “今年暑假不AC&#xff1f;” “是的。” “那你干什么呢&#xff1f;” “看世界杯呀&#xff0c;笨蛋&#xff01;” “#$%^&*%...” 确实如此&#xff0c;世界杯来了&#xff0c;球迷的节日也来了&#xff0c;估计很多ACMer也会抛开电脑&#xff0c;奔向电视…

【5G NR】【一文读懂系列】移动通讯中使用的信道编解码技术-Turbo编码原理

目录 Turbo码&#xff1a;无线通信中的革命性技术 引言 一、Turbo码的基本原理 1.1 卷积码基础&#xff1a; 1.2 Turbo码的构造&#xff1a; 1.2.1 分量编码器 1.2.2 随机交织器 1.2.3 穿刺和复接单元 1.3 编码器结构的重要性和影响 1.4 迭代解码&#xff1a; 1.4.1 …

接口测试怎么进行,如何做好接口测试

一、什么是接口&#xff1f; 接口测试主要用于外部系统与系统之间以及内部各个子系统之间的交互点&#xff0c;定义特定的交互点&#xff0c;然后通过这些交互点来&#xff0c;通过一些特殊的规则也就是协议&#xff0c;来进行数据之间的交互。 二、 常用接口采用方式&#x…

AI少女/HS2甜心选择2 仿剑三剑灵人物卡全合集打包

AI少女/HS2甜心选择2 仿剑三剑灵人物卡全合集打包 内含&#xff1a;菩提禅音[剑网3]明教晓天喵姐[剑3]明教晓天喵姐无帽版[剑3]茱莉亚[剑灵] 下载地址&#xff1a; https://www.changyouzuhao.cn/12492.html

配置DNS正反向解析服务!!!!

一.准备工作 #关闭防火墙和selinux,或者允许服务通过 [rootnode ~]# nmcli c mod ens32 ipv4.method manual ipv4.address 192.168.32.133/24 ipv4.gateway 192.168.32.2 ipv4.dns 192.168.32.132 [rootnode ~]# nmcli c reload [rootnode ~]# nmcli c up ens32[rootnode ~]# …

高速网络之翼:探索UDP的力量与灵活性

引言 在计算机网络中&#xff0c;用户数据报协议&#xff08;UDP&#xff09;是一种简单的面向数据报的传输层协议。与传输控制协议&#xff08;TCP&#xff09;相比&#xff0c;UDP不提供可靠性保证&#xff0c;但它因其低延迟和低开销的特性而在特定应用中非常有用。UDP使得…

【Java万花筒】解析Java依赖注入:从Spring到CDI的全方位比较

探索Java依赖注入&#xff1a;框架、实践与比较 前言 在当今的软件开发中&#xff0c;依赖注入已经成为了一种不可或缺的设计模式。Java作为一种广泛应用的编程语言&#xff0c;在依赖注入领域也有着丰富的框架和实践。本文将探索Java中几种常用的依赖注入框架&#xff0c;包…

three.js 细一万倍教程 从入门到精通(三)

目录 五、详解PBR材质纹理 5.1、详解PBR物理渲染 5.2、标准网格材质与光照物理效果 5.3、置换贴图与顶点细分设置 5.4、设置粗糙度与粗糙度贴图 5.5、设置金属度与金属贴图 5.6、法线贴图应用 5.7、如何获取各种类型纹理贴图 5.8、纹理加载进度情况 单张图片加载 多…

Windows 平台下NDK/CMAKE编译自己程序命令行

CMAKE_BUILD_TYPE 编译类型&#xff08;Debug、Release&#xff09; CMAKE_TOOLCHAIN_FILE 指定 Android 编译工具链文件 CMAKE_SYSTEM_NAME 系统名称&#xff1a;不要改变&#xff1a;值&#xff08;Android&#xff09; ANDROID_NATIVE_API_LEVEL 安卓原…

Transformer实战-系列教程17:DETR 源码解读4(Joiner类/PositionEmbeddingSine类/位置编码/backbone)

&#x1f6a9;&#x1f6a9;&#x1f6a9;Transformer实战-系列教程总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Pycharm中进行 本篇文章配套的代码资源已经上传 点我下载源码 DETR 算法解读 DETR 源码解读1&#xff08;项目配置/CocoDetection类&#xff09; …

数据结构-并查集

并查集原理 在一些应用问题中&#xff0c;需要将n个不同的元素划分成一些不相交的集合。开始时&#xff0c;每个元素自成一个 单元素集合&#xff0c;然后按一定的规律将归于同一组元素的集合合并。在此过程中要反复用到查询一 个元素归属于那个集合的运算。适合于描述这类…

Matplotlib Figure与Axes速成:核心技能一网打尽

Matplotlib Figure与Axes速成&#xff1a;核心技能一网打尽 &#x1f335;文章目录&#x1f335; &#x1f333;引言&#x1f333;&#x1f333; 一、Figure&#xff08;图形&#xff09;&#x1f333;&#x1f341;1. 创建Figure&#x1f341;&#x1f341;2. 添加Axes&#…