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.rhkb.cn/news/210904.html

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

相关文章

禅道v11.6 基于linux环境下的docker容器搭建的靶场

一、环境搭建 linux环境下的 在docker环境下安装禅道CMS V11.6 docker run --name zentao_v11.6 -p 8084:80 -v /u01/zentao/www:/app/zentaopms -v /u01/zentao/data:/var/lib/mysql -e MYSQL_ROOT_PASSWORD123456 -d docker.io/yunwisdom/zentao:v11.6二、常见问题 1.删除…

HarmonyOS学习--TypeScript语言学习(二)

本章目录如下&#xff1a; 一、基础类型 二、运算符 三、变量声明 四、类型断言 五、类型推断 TypeScript支持一些基础的数据类型&#xff0c;如布尔型、数组、字符串等&#xff0c;下文举例几个较为常用的数据类型&#xff0c;我们来了解下他们的基本使用。 关于let 我们…

蓝桥杯每日一题2023.12.5

题目描述 1.一步之遥 - 蓝桥云课 (lanqiao.cn) 题目分析 对于本题遵循多了就减少了就加的原则&#xff0c;用while进行计算即可 #include<bits/stdc.h> using namespace std; int x, ans; int main() {while(x ! 1){if(x < 1)x 97;else x - 127;ans ;}cout <&…

Vue学习(一)——实现计数器自增

&#x1f4d1;前言 本文主要是【Vue】——Vue实现的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 &#x1f304;每日一句&#xff1a…

Ruff智能物联网网关助力工厂数智化运营,实现产量提升5%

数字化转型是大势所趋&#xff0c;以工业互联网为代表的数实融合是发展数字经济的重要引擎&#xff0c;也是新质生产力的一大助力。工业互联网是新工业革命的重要基石&#xff0c;加快工业互联网规模化应用&#xff0c;是数字技术和实体经济深度融合的关键支撑&#xff0c;是新…

【Polar靶场WEB签到】

题目&#xff1a; <?phperror_reporting(0);$file $_GET[file];if(!isset($file))$file 1;$file str_replace(../, , $file);include_once($file.".php");highlight_file(__FILE__); ?>解答&#xff1a;1、进入index页面&#xff0c;说让你加弟弟&#x…

从0到1实现Flink 实战实时风控系统的经验总结

随着互联网金融的快速发展&#xff0c;实时风控系统成为保障业务安全和用户信任的关键。本文将分享从零开始构建Flink实时风控系统的经验&#xff0c;并提供相关示例代码。 一、搭建Flink环境 首先&#xff0c;我们需要搭建Flink环境。以下是一些基本步骤&#xff1a; 安装Ja…

二百一十二、Flume——Flume实时采集Linux中的目录文件写入到HDFS中(亲测、附截图)

一、目的 在实现Flume实时采集Linux中的Hive日志写入到HDFS后&#xff0c;再做一个测试&#xff0c;用Flume实时采集Linux中的目录文件&#xff0c;即使用 Flume 监听Linux整个目录的文件&#xff0c;并上传至 HDFS中 二、前期准备 &#xff08;一&#xff09;安装好Hadoop、…

springboot整合阿里云oss上传图片,解决无法预览的问题

1.前置工作 需要申请一个域名,需要备案&#xff0c;对接这个踩了不少坑,写的很详细,guan fang tong guo bu 了,各位参考别的博客结合看吧,主要是域名配置,还有看service里面的实现 2.进入控制台 bucket列表 选择bucket 选择域名管理 复制你申请的域名,比如域名:abkhkajs…

周周爱学习之快速排序

快速排序&#xff0c;顾名思义&#xff0c;快速排序是一种速度非常快的一种排序算法 平均时间复杂度为O(),最坏时间复杂度为O()数据量较大时&#xff0c;优势非常明显属于不稳定排序 1.算法描述 每一轮排序选择一个基准点&#xff08;pivot&#xff09;进行分区 让小于基准点…

金融科技走向 Web3 的趋势不可逆转——新加坡金融科技节会后总结(上)

11 月 15 日至 17 日&#xff0c;2023 年度新加坡金融科技节&#xff08;Singapore FinTech Festival&#xff0c;以下简称 SFF&#xff09;在樟宜机场附近的新加坡会展中心&#xff08;Singapore Expo&#xff09;举办。我本人受新加坡金管局的邀请&#xff0c;第一次亲身参与…

BearPi Std 板从入门到放弃 - 后天篇(2)(I2C1读写EEPROM)

简介 基于 BearPi Std 板从入门到放弃 - 后天篇&#xff08;1&#xff09;(I2C1 读取 光照强度)&#xff0c; 使用同一个I2C接口访问EEPROM, 同时读取光照亮度 主芯片: STM32L431RCT6 LED : PC13 \ 推挽输出即可 \ 高电平点亮 串口: Usart1 I2C : I2C1 光照强度传感器&#xf…

Hive的使用技巧

一.Hive常用交互命令 [zhangflinkflinkv1 hive]$ bin/hive -help1.在Hive命令行里创建一个表student&#xff0c;并插入1条数据 2.“-e”不进入hive的交互窗口执行hql语句 3.“-f”执行脚本中的hql语句 二. Hive参数配置方式 1.查看当前所有的配置信息 hive> set;2.参数的…

[跑代码-遇到问题-报错3]BK-SDM. KeyError: ‘up_blocks.0‘

File "src/kd_train_text_to_image.py", line 790, in mainKeyError: up_blocks.0 出问题的原因 dict acts_tea读到dict acts_stu没有读到dict 原因是 unet_teacher的结构后面直接接down_blocks&#xff08;正常&#xff09;unet_teacher.down_blocks 但是unet的结构…

Android实验:广播实验

目录 广播实验目的实验内容实验要求项目结构代码实现结果展示 广播 Android 应用与 Android 系统和其他 Android 应用之间可以相互收发广播消息&#xff0c;这与发布-订阅设计模式相似。这些广播会在所关注的事件发生时发送。举例来说&#xff0c;Android 系统会在发生各种系统…

初级数据结构(一)——顺序表

文中代码源文件已上传&#xff1a;数据结构源码 1、顺序表的特点 1.1、数组 现实中数据记录一般都记录在表格中&#xff0c;如进货单、菜单等&#xff0c;它们的最大特点就是有序。表述中可以用第一项、第二项、第 n 项来描述表格中某个数据或者某串数据。在 C 语言中&#…

uni-app 微信小程序之swiper轮播图

1. 实现效果 2. 完成代码 <template><view class"components-home"><view style"margin-top:-50rpx;height: 486rpx; position: relative;margin-bottom: 80rpx;"><image srchttps://xxx.com/img/wccQQP.png modewidthFix classpng …

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

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

【C++】POCO学习总结(九):网络

【C】郭老二博文之&#xff1a;C目录 1、Poco::Net::IPAddress IP地址 Poco::Net::IPAddress类存储IPv4或IPv6主机地址。 Poco::Net::IPAddress可以从字符串解析&#xff0c;也可以格式化为字符串。支持IPv4格式(d.d.d.d)和IPv6格式(x: x: x: x: x: x: x: x)。 常用函数&…

搞笑视频无水印下载,高清无水印视频网站!

搞笑视频无水印下载这件事情一直困扰了广大网友&#xff0c;每当看见好玩好笑的搞笑视频然而下载下来的时候&#xff0c;要么画质模糊就带有水印今天分享大家几个搞笑视频无水印下载方法。 这是一个非常良心的搞笑视频无水印下载小程序水印云&#xff0c;它支持图片去水印、视…