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

news2025/2/23 3:57:07
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.coloradmin.cn/o/1286128.html

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

相关文章

生命在于折腾——Android Studio网络设置(MAC)

一、前言 在macos上面&#xff0c;能使用的android模拟器是真不如windows多&#xff0c;各个厂家似乎抛弃了macos的安卓模拟器&#xff0c;当然&#xff0c;我使用的mac是2019款16寸的inter芯片&#xff0c;之前使用arm架构M2芯片的时候&#xff0c;更是可怕&#xff0c;不过q…

博客文章SEO:提升博客排名和吸引更多读者的方法来啦!

互联网发展到现在&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;一直发挥着不可替代的作用。搜索引擎的流量往往更加定向&#xff0c;来自搜索引擎的流量转化率更高&#xff0c;可以帮助企业更好地实现销售和推广目标。因此&#xff0c;通过合理的SEO策略&#xff0c;你…

【FreeRTOS】消息队列——简介、常用API函数、注意事项、项目实现

在嵌入式系统开发中&#xff0c;任务间的通信是非常常见的需求。FreeRTOS提供了多种任务间通信的机制&#xff0c;其中之一就是消息队列。消息队列是一种非常灵活和高效的方式&#xff0c;用于在不同的任务之间传递数据。通过消息队列&#xff0c;任务可以异步地发送和接收消息…

泛型和Object的区别

什么时候使用 泛型&#xff1a;只要确定了用哪类对象&#xff0c;并且用到这个对象里的方法。选择泛型&#xff0c;泛型更加精确&#xff0c;只要用到Object的地方基本都能用泛型代替。Object类&#xff1a;Object是所有类的父类&#xff0c;更加笼统&#xff0c;且只能使用固…

找不到客户?交你一招

在当今社会中&#xff0c;获取潜在客户的信息对于企业的成功至关重要。然而&#xff0c;许多企业却面临着找不到潜在客户的难题。 企业想要成交的第一步就是寻找客户&#xff0c;将产品和目标客户进行匹配才能提高成交率。 因此企业首先需要明确自己的目标客户群体&#xff0…

GAN:WGAN-DIV

论文&#xff1a;https://arxiv.org/pdf/1712.01026.pdf 代码&#xff1a; 发表&#xff1a;2018 摘要 在计算机视觉的许多领域中&#xff0c;生成对抗性网络已经取得了巨大的成功&#xff0c;其中WGANs系列被认为是最先进的&#xff0c;主要是由于其理论贡献和竞争的定性表…

Leetcode—538.把二叉搜索树转换为累加树【中等】

2023每日刷题&#xff08;四十九&#xff09; Leetcode—538.把二叉搜索树转换为累加树 实现代码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(…

Node包管理工具 - nvm、npm、yarn、cnpm、pnpm

转载说明 原文地址 简介 nvm : 可以实现一台电脑&#xff0c;拥有多个版本的Node npm : node package manager 下载Node后自带的一个包管理工具 yarn : npm 的升级版&#xff0c;更优秀 cnpm : 配置下载非官方地址的依赖&#xff08;淘宝、华为、腾讯镜像&#xff09; pnpm :…

Java jdk和jre的区别

jdk和jre的区别为&#xff1a;JRE是java运行时环境而JDK是java开发工具包&#xff0c;JDK包含JRE&#xff0c;但是JRE可以独立安装。 JDK&#xff1a; java development kit (java开发工具)&#xff0c;JDK 是用于开发 Java 程序的最小环境。 JRE&#xff1a; java runtime e…

视频推拉流直播点播EasyDSS平台点播文件加密存储的实现方法

视频推拉流直播点播系统EasyDSS平台&#xff0c;可提供流畅的视频直播、点播、视频推拉流、转码、管理、分发、录像、检索、时移回看等功能&#xff0c;可兼容多操作系统&#xff0c;还能支持CDN转推&#xff0c;具备较强的可拓展性与灵活性&#xff0c;在直播点播领域具有广泛…

uniapp实现拨打电话跳转手机拨号界面 (ios和安卓通用)

效果展示&#xff1a;左边为安卓系统展示&#xff0c;右边为ios系统展示 代码&#xff1a; toPhone(){uni.makePhoneCall({phoneNumber: "10086", //要拨打的手机号success: (res) > {// console.log("调用成功")},fail: (res) > {// console.log(调…

Web安全-初识SQL注入(一)

1、初识SQL注入 1.1、什么是注入&#xff1f; 将不受信任的数据作为命令或查询的一部分发送到解析器时&#xff0c;会产生诸如SQL注入、NoSQL注入、OS 注入和LDAP注入的注入缺陷。攻击者的恶意数据可以诱使解析器在没有适当授权的情况下执行非预期命令或访问数据。 注入能导…

JOSEF约瑟 同步检查继电器DT-13/200 100V柜内安装,板前接线

系列型号 DT-13/200同步检查继电器; DT-13/160同步检查继电器; DT-13/130同步检查继电器; DT-13/120同步检查继电器; DT-13/90同步检查继电器; DT-13/254同步检查继电器; 同步检查继电器DT-13/200 100V柜内板前接线 一、用途 DT-13型同步检查继电器用于两端供电线路的…

构建高效预约系统:预约系统源码的设计与实现

随着社会的不断进步&#xff0c;预约系统在各个领域的应用愈发广泛。为了满足不同行业的需求&#xff0c;设计高效的预约系统源码至关重要。在本文中&#xff0c;我们将深入研究预约系统的设计原则&#xff0c;并提供一些关键的技术代码示例&#xff0c;帮助读者更好地理解如何…

怎么使用AI写作工具批量写作?批量AI智能写作的方法

随着科技的不断发展&#xff0c;人工智能&#xff08;AI&#xff09;技术在各个领域都有了广泛的应用&#xff0c;其中之一就是智能写作。对于需要大量文本创作的用户来说&#xff0c;批量AI智能写作成为提高效率的一项重要工具。本文将专心分享批量AI智能写作的方法、工具以及…

分享116个图片JS特效,总有一款适合您

分享116个图片JS特效&#xff0c;总有一款适合您 116个图片JS特效下载链接&#xff1a;https://pan.baidu.com/s/1WvUvmG1adR2EJG97MiGj3A?pwd6666 提取码&#xff1a;6666 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;收集整…

t-SNE方法:

使用t-SNE时&#xff0c;除了指定你想要降维的维度&#xff08;参数n_components&#xff09;&#xff0c;另一个重要的参数是困惑度&#xff08;Perplexity&#xff0c;参数perplexity&#xff09; 困惑度&#xff1a; 困惑度大致表示如何在局部或者全局位面上平衡关注点&am…

【稳定检索|投稿优惠】2024年光电信息与机器人发展国际会议(ICOIRD 2024)

2024年光电信息与机器人发展国际会议(ICOIRD 2024) 2024 International Conference on Optoelectronic Information and Robot Development(ICOIRD 2024) 一、【会议简介】 信息技术与人工智能的浪潮正在激荡&#xff0c;不断刷新我们生活的页面&#xff0c;深刻烙印在光电信息…

西安安泰Aigtek——ATA-8152射频功率放大器

ATA-8152射频功率放大器简介 ATA-8152是一款射频功率放大器。其P1dB输出功率100W&#xff0c;饱和输出功率200W。增益数控可调&#xff0c;一键保存设置&#xff0c;提供了方便简洁的操作选择&#xff0c;可与主流的信号发生器配套使用&#xff0c;实现射频信号的放大。宽范围供…

【每日一题】到达首都的最少油耗

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;贪心深搜 写在最后 Tag 【递归/深度优先搜索】【树】【2023-12-05】 题目来源 2477. 到达首都的最少油耗 题目解读 每个城市都有一位代表需要前往城市 0 进行开会。每个城市都有一辆座位数为 seats 的汽车&#xff0…