当前位置: 首页 > news >正文

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.lryc.cn/news/253740.html

相关文章:

  • 树莓派学习:学习opencv+用opencv获取树莓派mjpg摄像头视频流
  • 探索Playwright的现代自动化测试力量
  • 游戏mod制作--引擎与解包
  • 3D模型制作木质纹理贴图
  • [足式机器人]Part2 Dr. CAN学习笔记-数学基础Ch0-4线性时不变系统中的冲激响应与卷积
  • CSS BFC特性和应用
  • 软件工程 - 第8章 面向对象建模 - 3 - 动态建模
  • Stable Diffusion AI绘画系列【16】:霸气侧漏的二次元武侠风
  • 第二证券:苹果市值重返3万亿美元,关键因素并非人工智能
  • 西南科技大学C++程序设计实验六( 继承与派生一)
  • MySQL 性能优化
  • 求职招聘小程序源码系统 全开源源代码:找工作+招人才 平台级别运营版 附带完整的搭建教程
  • 26、卷积 - 实际上是一个特征提取器
  • web前端之vue3
  • 原来在C++的类中声明函数时可以不写参数名只写参数类型
  • 独孤思维:这里有蓝海项目,你要吗?
  • 外卖平台推荐算法的优化与实践
  • CONTROLLING VISION-LANGUAGE MODELS FOR MULTI-TASK IMAGE RESTORATION
  • HarmonyOS应用开发——页面
  • Java流Stream使用详解(练习)
  • 请介绍一下MySQL的存储引擎及其特点
  • Python---魔术方法
  • 手把手教你注册意大利商标
  • pandas详细笔记
  • win11安装(未完待续)
  • python之记录程序运行时长工具
  • .Net core 6.0 升8.0
  • MacDroid Pro for Mac – 安卓设备文件传输助手,实现无缝连接与传输!
  • 【EtherCAT详解】基于Wireshark的EtherCAT帧结构解析
  • C语言之程序的组成和元素格式