1.vue学习笔记(vue简介+API风格+开发前的准备)

1.介绍
1.一款用于构建用户页面的JavaScript框架
2.基于HTML、CSS、JavaScript
3.官方文档:cn.vuejs.org
2.渐进式框架
1.注重灵活性/可被逐步集成
根据需求场景:1.无需构建步骤,渐进式增强静态的HTML2.在任何页面中作为Web Components嵌入(组件)3.单页应用(SPA)(整个应用只有一个页面)4.全栈/服务端渲染(SSR)5.Jamstack/静态站点生成(SSG)6.开发桌面端,移动端,WebGL,命令行终端中的界面
3.版本问题
1.两大版本Vue2/Vue3Vue3涵盖了Vue2知识体系,Vue3增加了新特性
4.vue组件风格书写
4.1.选项式API(VUE2)
	可以包含多个选项的对象来描述组件的逻辑,如data,methods和mounted。选项
所定义的属性会暴露在函数内部的this上,他会指向当前的组件实例
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><div id="app">{{ message }}</div><script>const { createApp } = VuecreateApp({data() {return {message: 'Hello Vue!'}}}).mount('#app')
</script>
4.2.组合式API(VUE3)
	可以使用导入的API函数来描述组件逻辑
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><div id="app">{{ message }}</div><script>const { createApp, ref } = VuecreateApp({setup() {const message = ref('Hello vue!')return {message}}}).mount('#app')
</script>
5.如何选择
1.当你不需要使用构建工具,或者打算主要在低复杂度的场景中使用VUE,例如渐进增强的应用场景,推荐采用选项式API
2.当你打算用VUE构建完整的单页应用,推荐采用组合式API+单文件组件
6.开发前的准备
1.熟悉命令行
2.已安装15.0或更高版本的Node.js
7.创建vue项目
1.命令行找到要放置代码的位置npm init vue@latest这一指令将会安装并执行create-vue,它是官方的项目脚手架工具配置项:Project name(项目名称):(不要存在大写);Add TypeScript(是否添加ts):(默认是NO);Add JSX Support(是否添加支持JSX语法):(默认是NO);Add Vue Router for Single Page Application development(是否添加vue路由):(默认NO);Add Pinia for state management(是否添加Pinia状态管理):(默认是NO);其他配置都是测试文件全默认NO;

在这里插入图片描述
运行成功
启动测试
后须可以进行开发了

8.开发环境
1.推荐的IDE配置是 VSCode + Volar扩展插件

在这里插入图片描述

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

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

相关文章

深入理解 Go 函数:从基础到高级

一、函数基础 1、函数定义 函数是组织好的、可重复使用的、用于执行指定任务的代码块Go 语言中支持&#xff1a;函数、匿名函数和闭包 package mainimport "fmt"func main(){ret : intSum(1,2)fmt.PrintIn(ret) //3 }func instSum(x,y int) int {return x y }…

全息图着色器插件:Hologram Shaders Pro for URP, HDRP Built-in

8个新的Unity全息图着色器,具有故障效果,扫描线,网格线,和更多其他效果!与所有渲染管线兼容。 软件包添加了一系列的全息图着色器到Unity。从基本的全息图与菲涅耳亮点,先进的全息图与两种故障效应,扫描线,文体点阵和网格线全息图! 特色全息效果 Basic-支持菲涅耳发光照…

Hadoop学习笔记(HDP)-Part.11 安装Kerberos

目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger …

Netty核心知识总结

Netty是一个高性能、异步事件驱动的NIO框架&#xff0c;它提供了对TCP、UDP和文件传输的支持&#xff0c;作为一个异步NIO框架&#xff0c;Netty的所有IO操作都是异步非阻塞的&#xff0c;通过Future-Listener机制&#xff0c;用户可以方便的主动获取或者通过通知机制获得IO操作…

数据标准化 VS 数据归一化

数据标准化 VS 数据归一化 数据标准化目的方法应用场景优点缺点 数据归一化目的方法应用场景优点缺点 总结 数据标准化 目的 将数据转换为均值为0&#xff0c;标准差为1的分布。 方法 对于每个特征&#xff0c;从其值中减去特征的平均值&#xff0c;然后除以特征的标准差。…

APOLLO自动驾驶技术沙龙:未来已来,共创智能交通新时代

在这次Apollo会议上&#xff0c;我深刻地感受到了人工智能自动驾驶技术领域的最新进展和未来趋势。作为一名从事软件开发工作的人员&#xff0c;我深感荣幸能够参加这次盛会。 前言 本次活动是百度Apollo社区工程师齐聚首钢Park&#xff0c;带来现场实操与技术分享。主要围绕Ap…

vs qt widget application 槽函数和信号

1 slot 是对ui控件数据 读取或更新的函数 public slots:void startCountdown();void updateCountdown(); startCountdown 点击ui上的按钮,触发信号signal(按钮默认),执行slot,读取ui数据 updateCountdown 满足条件signal(默认信号),执行slot,更新ui数据 因为要操作ui上的数据所…

编译型语言和解释型语言的区别

编译型语言和解释型语言是两种常见的编程语言类型&#xff0c;它们在代码执行方式和执行效率上存在一些区别。 编译型语言&#xff1a; 编译过程&#xff1a;编译型语言的源代码需要先经过编译器的处理&#xff0c;将其转换为目标平台的机器码或字节码。这个编译过程发生在程序…

Token 和 N-Gram、Bag-of-Words 模型释义

ChatGPT&#xff08;GPT-3.5&#xff09;和其他大型语言模型&#xff08;Pi、Claude、Bard 等&#xff09;凭何火爆全球&#xff1f;这些语言模型的运作原理是什么&#xff1f;为什么它们在所训练的任务上表现如此出色&#xff1f; 虽然没有人可以给出完整的答案&#xff0c;但…

AWS攻略——VPC初识

大纲 在网络里启动一台可以ssh上去的机器查看区域、VPC和子网创建EC2连接Web端连接客户端连接 知识点参考资料 VPC是在AWS架构服务的基础&#xff0c;有点类似于我们在机房里拉网线和设置路由器等。等这些设施完备后&#xff0c;我们才能考虑给机器部署服务。而很多初识AWS的同…

AI助力智慧农业,基于YOLOv3开发构建农田场景下的庄稼作物、田间杂草智能检测识别系统

智慧农业随着数字化信息化浪潮的演变有了新的定义&#xff0c;在前面的系列博文中&#xff0c;我们从一些现实世界里面的所见所想所感进行了很多对应的实践&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a; 《自建数据集&#xff0c;基于YOLOv7开发构建农田场景下杂草…

园区规划技术要点

&#xff08;一&#xff09;技术点介绍 1.WLAN&#xff1a;无线局域网WLAN&#xff08;Wireless Local Area Network&#xff09;是一种无线计算机网络&#xff0c;使用无线信道代替有线传输介质连接两个或多个设备形成一个局域网LAN&#xff08;Local Area Network&#xff09…

JavaScript <md5加密的两种不同输出结果分析>--案例(二点一)

前言: 问题是这样的,在浏览器中看到这段代码 然后在控制台进行输出.得到: 紧接着,就在,js文件里面进行转译: 可是,得到的结果是: 这是问题!!! 正题: 为什么相同的js代码,在 .js 文件中的输出与 Chrome 控制台中的输出不一样? 环境差异&#xff1a;不同的JavaScript环境&…

从零开始训练一个ChatGPT大模型(低资源,1B3)

macrogpt-prertrain 大模型全量预训练(1b3), 多卡deepspeed/单卡adafactor 源码地址&#xff1a;https://github.com/yongzhuo/MacroGPT-Pretrain.git 踩坑 1. 数据类型fp16不太行, 很容易就Nan了, 最好是fp32, tf32, 2. 单卡如果显存不够, 可以用优化器adafactor, 3. 如果…

基于STM32驱动的压力传感器实时监测系统

本文介绍了如何使用STM32驱动压力传感器进行实时监测。首先&#xff0c;我们会介绍压力传感器的工作原理和常见类型。然后&#xff0c;我们将介绍如何选择合适的STM32单片机和压力传感器组合。接下来&#xff0c;我们会详细讲解如何使用STM32驱动压力传感器进行数据采集和实时监…

Ansys Zemax | 手机镜头设计 - 第 3 部分:使用 STAR 模块和 ZOS-API 进行 STOP 分析

附件下载 联系工作人员获取附件 本文是 3 篇系列文章的一部分&#xff0c;该系列文章将讨论智能手机镜头模组设计的挑战&#xff0c;从概念、设计到制造和结构变形的分析。本文是三部分系列的第三部分。它涵盖了使用 Ansys Zemax OpticStudio Enterprise 版本提供的 STAR 技术…

回归预测 | MATLAB实现CNN-BiLSTM(卷积双向长短期记忆神经网络

效果一览 基本介绍 提出一种同时考虑时间与空间因素的卷积&#xff0d;双向长短期记忆&#xff08; CNN-BiLSTM&#xff09;模型&#xff0c;将具有空间局部特征提取能力的卷积神经网络&#xff08;CNN&#xff09;和具有能同时考虑前后方向长时间信息的双向长短期记忆&#xf…

maven-plugin

plugin也是可以在继承的&#xff0c;即在父pom配置后&#xff0c;在子pom中也会有&#xff0c; 可以通过mvn help:effective-pom这个命令在父工程目录或者子工程目录中执行&#xff0c;查看到底有没有被继承 mvn help:effective-pom命令的作用_effective pom-CSDN博客

MySQL注入入门简述

原因 存在拼接用户输入到SQL的情况。 预防 可以使用参数化查询对用户输入进行验证严格控制数据库用户权限 常见分类 联合查询注入 使用union关键字拼接敏感数据查询语句 注释注入 使用 单引号() 或者 双中划线(--) 等有特殊含义的字符对SQL处理&#xff0c;从而获取信息…

不可变集合

概述 不可变集合&#xff0c;就是不可被修改的集合。 集合的数据项在创建的时候提供&#xff0c;并且在整个生命周期中都不可改变,否则报错。 为什么要创建不可变集合&#xff1f; 如果某个数据不能被修改&#xff0c;把它防御性地拷贝到不可变集合中是个很好的实践。 或者…