天行健,君子以自强不息;地势坤,君子以厚德载物。
每个人都有惰性,但不断学习是好好生活的根本,共勉!
文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。
两水夹明镜,双桥落彩虹。
人烟寒橘柚,秋色老梧桐。
——《秋登宣城谢脁北楼》
文章目录
- Vue的概览
- 1. Vue.js 简介
- 1.1 创始人
- 1.2 版本
- 1.3 读音
- 1.4 特点
- 1.5 核心特点
- 1.6 Vue官网
- 2. vue与angular的区别
- 2.1 angular的特点
- 2.2 vue的特点
- 2.3 共同点
- 3. vue的几个概念
- 3.1 渐进式框架
- 3.2 单文件组件
- 3.2 API风格
- 3.2.1 选项式API
- 3.2.2 组合式API
- 3.2.3 两个种风格的选择
Node.js的下载、安装和配置
node的下载、安装、配置和使用(node.js下载安装和配置、npm命令汇总、cnpm的使用)
Vue入门
Vue的概览
该部分可参考Vue官网介绍
1. Vue.js 简介
摘录自Vue官网的介绍如下:
Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。
它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,
帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。
1.1 创始人
项目的创建人:尤雨溪
1.2 版本
版本分为Vue、Vue2、Vue3
2016年Vue2发布
2020年Vue3发布
随着Vue2在2023年12月31日停止维护
后续的使用基本都是Vue3
1.3 读音
读音为view,并非v-u-e
1.4 特点
- 轻量的mvvm(model-view-viewmodel)框架,与angular、react类似,均为数据双向绑定的实现
- 数据驱动+组件化的前段开发
- 通过简单的API实现响应式的数据绑定和组合的视图组件
- 易上手,轻量化
1.5 核心特点
-
声明式渲染:Vue 基于标准 HTML 拓展了一套模板语法,使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
-
响应性:Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。
1.6 Vue官网
官网地址
英文官网:https://vuejs.org/
中文官网:https://cn.vuejs.org/
2. vue与angular的区别
2.1 angular的特点
- 上手较难
- 指令以ng-xxx开头
- 所有属性和方法都存储在$scope中
- 由google维护
2.2 vue的特点
- 简单、易学、轻量
- 指令以v-xxx开头
- HTML代码+JSON数据,再创建一个vue的实例
2.3 共同点
- 都不兼容低版本IE
总结对比,github中vue使用更多
3. vue的几个概念
3.1 渐进式框架
无需构建步骤,渐进式增强静态的HTML
在任何页面中作为Web Components嵌入
单页应用(SPA)
全栈/服务端渲染(SSR)
Jamstack/静态站点生成(SSG)
开发桌面端、移动端、WebGL,甚至是命令行终端的界面
3.2 单文件组件
以.vue结尾的文件就是单文件组件,是一种类似HTML格式的文件的Vue组件
单文件组件英文件名称为:Single-File Components
缩写为SFC
Vue单文件组件将一个组件的逻辑(JavaScript)、模板(HTML)和样式(CSS)封装在同一个文件中
3.2 API风格
vue的组件有两种风格,选项式API和组合式API
3.2.1 选项式API
Options API
可使用包含多个选项的对象来描述组件的逻辑,如data、methods、mounted
选项所定义的属性会暴露在函数内部的this上,他会指向当前的组件实例
3.2.2 组合式API
Composition API
可使用导入的API函数来描述组件逻辑,单文件组件中,组合式API会与<script setup>
搭配使用
setup attribute是一个表示,让vue需要在编译时进行处理,让我们更简洁的使用组合式API
3.2.3 两个种风格的选择
两种风格的底层系统相同
选项式API是在组合式API基础上实现的,vue的基础知识在两种api种是通用的
选项式API与面向对象的思想更为贴近
组合式API更为灵活
选项式API更易理解和上手
在vue的官网可自由切换两种api风格的文档
根据自己需要选用即可
感谢阅读,祝君暴富!