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

1.介绍
1.一款用于构建用户页面的JavaScript框架
2.基于HTML、CSS、JavaScript
3.官方文档:cn.vuejs.org
2.渐进式框架
1.注重灵活性/可被逐步集成
根据需求场景:
	1.无需构建步骤,渐进式增强静态的HTML
	2.在任何页面中作为Web Components嵌入(组件)
	3.单页应用(SPA)(整个应用只有一个页面)
	4.全栈/服务端渲染(SSR)
	5.Jamstack/静态站点生成(SSG)
	6.开发桌面端,移动端,WebGL,命令行终端中的界面
3.版本问题
1.两大版本
	Vue2/Vue3
	Vue3涵盖了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 } = Vue
  
  createApp({
    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 } = Vue

  createApp({
    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.mfbz.cn/a/220835.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【LeetCode】每日一题 2023_12_2 拼车(模拟/差分)

文章目录 刷题前唠嗑题目&#xff1a;拼车题目描述代码与解题思路学习大佬题解 刷题前唠嗑 LeetCode&#xff1f;启动&#xff01;&#xff01;&#xff01; 题目&#xff1a;拼车 题目链接&#xff1a;1094. 拼车 题目描述 代码与解题思路 func carPooling(trips [][]int…

计算机毕业设计 基于SpringBoot的大学生双创竞赛项目申报与路演管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

【计算机组成体系结构】主存储器的基本组成

一、半导体元器件存储二进制0/1的原理 一个存储器逻辑上分为MAR&#xff0c;MDR和存储体&#xff0c;这三块在时序逻辑电路的控制下相互配合工作。 而存储体有多个存储单元构成&#xff0c;每个存储单元又由每个存储元构成。一个存储元可以存放一位的二进制的0/1。 一个存储元…

分布式ID服务实践

背景 分布式场景下需要一个全局 ID 来标识唯一性&#xff0c;比如在单数据库时通过表唯一主键即可实现唯一 ID&#xff0c;分库分表时就需要全局唯一 ID。 业务对唯一 ID 的要求如下&#xff1a; 全局唯一性 不能出现重复的 ID 号&#xff0c;既然是唯一标识&#xff0c;这…

JDK 历史版本下载以及指定版本应用

参考&#xff1a; 官网下载JAVA的JDK11版本&#xff08;下载、安装、配置环境变量&#xff09;_java11下载-CSDN博客 Gradle&#xff1a;执行命令时指定 JDK 版本 - 微酷网 下载 打开官网地址 Java Downloads | Oracle 当前版本在这里&#xff0c;但是我们要下载历史版本 选…

java中 list.size() = 1 但显示 All elements are null

一、问题描述 serve层定义一个对象集合接收mybatis返回的结果&#xff0c;查询结果为空&#xff0c;但是接收集合对象长度却为1&#xff0c;集合内部显示All elements are null&#xff1b;导致在直接调用list集合中一些方法时导致报错java.lang.NullPointerException: null …

【原创】提升MybatisPlus分页便捷性,制作一个属于自己的分页插件,让代码更加优雅

前言 MybatisPlus的分页插件有一点非常不好&#xff0c;就是要传入一个IPage&#xff0c;别看这个IPage没什么大不了的&#xff0c;最多多写一两行代码&#xff0c;可这带来一个问题&#xff0c;即使用xml的查询没法直接取对象里面变量的值了&#xff0c;得Param指定xml中的变…

一文看懂 Linux 内核,清晰明了

Linux内核预备工作 理解Linux内核最好预备的知识点&#xff1a;懂C语言 懂一点操作系统的知识 熟悉少量相关算法 懂计算机体系结构 Linux内核的特点&#xff1a; 结合了 unix 操作系统的一些基础概念。 Linux内核的任务&#xff1a; 1. 从技术层面讲&#xff0c;内核是硬…

制作图片马

准备一张图片和一句话木马 打开cmd copy 图片/b文件 新的图片的名字 然后就自动生成了

Excel——多列合并成一列的4种方法

Excel怎么将多列内容合并成一列&#xff1f; 怎么将多个单元格的内容连接起来放在一个单元格里&#xff1f; 比如下图&#xff0c;要将B、C、D列的内容&#xff0c;合并成E列那样&#xff0c;该怎么做呢&#xff1f; △图1 本文中&#xff0c;高潜老师将给大家介绍 4种 将多…

随机链表的复制[中等]

优质博文&#xff1a;IT-BLOG-CN 一、题目 给你一个长度为n的链表&#xff0c;每个节点包含一个额外增加的随机指针random&#xff0c;该指针可以指向链表中的任何节点或空节点。构造这个链表的深拷贝。深拷贝应该正好由n个全新节点组成&#xff0c;其中每个新节点的值都设为…

DAPP开发【09】NFT交易市场开发(hardhat测试)

测试文件下新建market.js文件 扁平化&#xff0c;将所有依赖放在tmp.sol&#xff0c;可以去给他人使用 npx hardhat flatten > tmp.sol 测试文件 const {expect} require(chai); const {ethers} require(hardhat);describe(Market,async function(){//定义三个合约&a…

BL121EN:IEC 61850到OPC UA的即插即用无缝转换解决方案

添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 在当今快速发展的工业自动化领域&#xff0c;实现不同通信协议之间的无缝连接是提高系统集成度、数据共享和设备互操作性的关键。钡铼技术&#xff08;Bay-Tech&#xff09;BL121EN硬网关应运而生&#xf…

vue3项目中使用iconfont图标

vue3项目中使用iconfont图标 写前端项目时&#xff0c;经常要用到iconfont图标&#xff0c;我最原始的方法是吧iconfont图标下载为png/svg文件&#xff0c;然后在文件中作为资源引入&#xff0c;后来发现这么搞太不专业了 记录一下相对比较靠谱的使用方法 1.在iconfont中找到…

【Spring Boot】如何在IntelliJ IDEA中由同一份spring boot源码运行多个不同端口的实例

我们需要使用一个服务有多个实例的测试场景&#xff0c;那么我们就需要在IntelliJ IDEA中通过不同的端口运行不同的实例&#xff0c;并且运行时的源代码是一样的&#xff0c;那么我们可以在IntelliJ IDEA这样操作&#xff0c;接下来以UserApplication服务为例&#xff1a; 复制…

【MySQL】基本安装配置

1 基础知识 1.1 MySQL安装 下载地址&#xff1a;https://dev.mysql.com/downloads/mysql/ 1.1.1 安装过程 配置环境变量&#xff08;和配置Java8的环境变量如出一辙&#xff09;在MySQL解压文件夹下&#xff0c;导入my.ini文件&#xff0c;与bin目录同级&#xff0c;具体文…

Linux4.8、环境变量续

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 前言 如果对环境变量没有基本的理解&#xff0c;那么建议先看完这篇文章&#xff1a;环境变量https://blog.csdn.net/m0_74824254/article/details/134661113?spm1001.2014.3001.5501 环境变量与本地变量区别 使用export设…

二百一十一、Flume——Flume实时采集Linux中的Hive日志写入到HDFS中(亲测、附截图)

一、目的 为了实现用Flume实时采集Hive的操作日志到HDFS中&#xff0c;于是进行了一场实验 二、前期准备 &#xff08;一&#xff09;安装好Hadoop、Hive、Flume等工具 &#xff08;二&#xff09;查看Hive的日志在Linux系统中的文件路径 [roothurys23 conf]# find / -name…

PostGIS学习教程十:空间索引

PostGIS学习教程十&#xff1a;空间索引 回想一下&#xff0c;空间索引是空间数据库的三个关键特性之一。空间索引使得使用空间数据库存储大型数据集成为可能。在没有空间索引的情况下&#xff0c;对要素的任何搜索都需要对数据库中的每条记录进行"顺序扫描"。索引通…

AI生成视频-Pika

背景介绍 Pika 是一个使用 AI 生成和编辑视频的平台。它致力于通过 AI 技术使视频制作变得简单和无障碍。 Pika 1.0 是 Pika 的一个重大产品升级&#xff0c;包含了一个新的 AI 模型,可以在各种风格下生成和编辑视频,如 3D 动画&#xff0c;动漫&#xff0c;卡通和电影风格。…