Vue的介绍


天行健,君子以自强不息;地势坤,君子以厚德载物。


每个人都有惰性,但不断学习是好好生活的根本,共勉!


文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。


两水夹明镜,双桥落彩虹。
人烟寒橘柚,秋色老梧桐。
——《秋登宣城谢脁北楼》


文章目录

  • 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风格的文档
根据自己需要选用即可


感谢阅读,祝君暴富!


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/370403.html

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

相关文章

ElasticSearch 如何计算得分及一个不太成熟的使用

1.背景 最近在做 ES 相关东西&#xff0c;只最会在查询的时候给不同的字段设置不同的权重&#xff0c;但是得分具体怎么算的不太明白&#xff0c;花了4-5 天研究和总结了一下。这样不至于被别人问到“这个分数怎么算出来的&#xff1f;”&#xff0c;两眼一抹黑&#xff0c;不…

【OnlyOffice】桌面应用编辑器,插件开发大赛,等你来挑战

OnlyOffice&#xff0c;桌面应用编辑器&#xff0c;最近版本已从8.0升级到了8.1 从PDF、Word、Excel、PPT等全面进行了升级。随着AI应用持续的火热&#xff0c;OnlyOffice也在不断推出AI相关插件。 因此&#xff0c;在此给大家推荐一下OnlyOffice本次的插件开发大赛。 详细信息…

最新扣子(Coze)实战案例:使用扩图功能,让你的图任意变换,完全免费教程

&#x1f9d9;‍♂️ 大家好&#xff0c;我是斜杠君&#xff0c;手把手教你搭建扣子AI应用。 &#x1f4dc; 本教程是《AI应用开发系列教程之扣子(Coze)实战教程》&#xff0c;完全免费学习。 &#x1f440; 微信关注公从号&#xff1a;斜杠君&#xff0c;可获取完整版教程。&a…

Qt扫盲-QRect矩形描述类

QRect矩形描述总结 一、概述二、常用函数1. 移动类2. 属性函数3. 判断4. 比较计算 三、渲染三、坐标 一、概述 QRect类使用整数精度在平面中定义一个矩形。在绘图的时候经常使用&#xff0c;作为一个二维的参数描述类。 一个矩形主要有两个重要属性&#xff0c;一个是坐标&am…

ingress-nginx控制器证书不会自动更新问题

好久没更新了&#xff0c;正好今天遇到了一个很有意思的问题&#xff0c;在这里给大家分享下&#xff0c;同时也做下记录。 背景 最近想做个实验&#xff0c;当k8s集群中secret更新后&#xff0c;ingress-nginx控制器会不会自动加载新的证书。我用通义千问搜了下&#xff0c;…

SAR目标检测

Multi-Stage with Filter Augmentation 多阶段滤波器增强(MSFA) 对SAR合成孔径雷达目标检测性能的改善 MSFA ON SAR 传统方法: 预训练:传统方法开始于在通用数据集上预训练一个基础模型。 微调:这个预训练的模型会被微调以适应特定的SAR图像&#xff0c;试图缩小域间的差距 …

webSocket网页通信---使用js模拟多页面实时通信

webSocket是什么 WebSocket是一种先进的网络技术&#xff0c;它提供了一种在单个TCP连接上进行全双工通信的能力。传统的基于HTTP的通信是单向的&#xff0c;即客户端发起请求&#xff0c;服务器响应请求&#xff0c;然后连接关闭。但是&#xff0c;WebSocket允许服务器和客户端…

anaconda中下载压缩包并用conda安装包

有时直接conda安装包时会出错&#xff1b;报错PackagesNotFoundError: The following packages are not available from current channels 比如 conda install -y bioconda::ucsc-gtftogenepred #直接安装报错 #直接下载压缩包安装https://blog.csdn.net/weixin_45552562/ar…

解决vscode配置C++编译带有中文名称报错问题

在新电脑上安装vscode运行带有中文路径和中文名称的C代码时遇到报错 根据别人的教程将laugh.json文件中"program": "${fileDirname}\\${fileBasenameNoExtension}.exe",改成了"program": "${fileDirname}\\output\\test.exe",&#x…

读书到底有什么意义?从笨小孩到名人的逆袭之路

点击上方△腾阳 关注 作者 l 腾阳 转载请联系授权 读书到底有什么意义&#xff1f; 有一个鸟语花香的农场里&#xff0c;住着老农夫和他的小孙子。 老农夫经常在清晨会坐在窗边&#xff0c;捧着厚厚的《圣经》&#xff0c;沉浸在知识的海洋里。 小孙子问他&#xff1a;…

豆瓣评分9.6,这本书不看损失巨大!

点击上方△腾阳 关注 转载请联系授权 这些年&#xff0c;我就像是个热心向导&#xff0c;逢人就劝读那本《毛泽东选集》。 结果呢&#xff1f;有人一听就摆手&#xff0c;笑言&#xff1a;“哎呀&#xff0c;那书太高大上了&#xff0c;咱啃不动啊&#xff01;” 特别是咱们…

Elasticsearch:Painless scripting 语言(一)

Painless 是一种高性能、安全的脚本语言&#xff0c;专为 Elasticsearch 设计。你可以使用 Painless 在 Elasticsearch 支持脚本的任何地方安全地编写内联和存储脚本。 Painless 提供众多功能&#xff0c;这些功能围绕以下核心原则&#xff1a; 安全性&#xff1a;确保集群的…

kubernetes集群部署:node节点部署和CRI-O运行时安装(三)

关于CRI-O Kubernetes最初使用Docker作为默认的容器运行时。然而&#xff0c;随着Kubernetes的发展和OCI标准的确立&#xff0c;社区开始寻找更专门化的解决方案&#xff0c;以减少复杂性和提高性能。CRI-O的主要目标是提供一个轻量级的容器运行时&#xff0c;它可以直接运行O…

推荐Bulk Image Downloader插件下载网页中图片链接很好用

推荐&#xff1a;Bulk Image Downloader chome浏览器插件下载图片链接&#xff0c;很好用。 有个网页&#xff0c;上面放了数千的gif的电路图&#xff0c;手工下载会累瘫了不可。想找一个工具分析它的静态链接并下载&#xff0c;找了很多推荐的下载工具&#xff0c;都是不能分…

容器:queue(队列)

以下是关于queue容器的总结 1、构造函数&#xff1a;queue [queueName] 2、添加、删除元素: push() 、pop() 3、获取队头/队尾元素&#xff1a;front()、back() 4、获取栈的大小&#xff1a;size() 5、判断栈是否为空&#xff1a;empty() #include <iostream> #include …

ubuntu设置开启自动挂载sftp

1. 前言 与其说 ubuntu 开启自动挂载 sftp, 更确切的说应该是 nautilus (ubuntu上默认的文件管理器) 开机自动挂载 sftp。 因为 这里即使选择永远记住&#xff0c;开机也不会自动挂载 sftp 2.设置方法 gnome-session-properties #开机只启动设置命令设置 gio mount sftp…

ListView 的简单使用及 ArrayAdapter 中参数详解

&#x1f604;作者简介&#xff1a; 小曾同学.com,一个致力于测试开发的博主⛽️&#xff0c;主要职责&#xff1a;测试开发、CI/CD&#xff0c;日常还会涉及Android开发工作。 如果文章知识点有错误的地方&#xff0c;还请大家指正&#xff0c;让我们一起学习&#xff0c;一起…

Java | Leetcode Java题解之第212题单词搜索II

题目&#xff1a; 题解&#xff1a; class Solution {int[][] dirs {{1, 0}, {-1, 0}, {0, 1}, {0, -1}};public List<String> findWords(char[][] board, String[] words) {Trie trie new Trie();for (String word : words) {trie.insert(word);}Set<String> a…

【JVM 的内存模型】

1. JVM内存模型 下图为JVM内存结构模型&#xff1a; 两种执行方式&#xff1a; 解释执行&#xff1a;JVM是由C语言编写的&#xff0c;其中有C解释器&#xff0c;负责先将Java语言解释翻译为C语言。缺点是经过一次JVM翻译&#xff0c;速度慢一点。JIT执行&#xff1a;JIT编译器…

策略模式的应用

前言 系统有一个需求就是采购员审批注册供应商的信息时&#xff0c;会生成一个供应商的账号&#xff0c;此时需要发送供应商的账号信息&#xff08;账号、密码&#xff09;到注册填写的邮箱中&#xff0c;通知供应商账号信息&#xff0c;当时很快就写好了一个工具类&#xff0…