vue的由来、vue教程和M-V-VM架构思想、vue的使用、nodejs

vue

vue的由来
vue教程和M-V-VM架构思想
vue的初步简单使用
nodejs

vue的由来

# 1 HTML(5)CSS(3)、JavaScript(ES5ES6ES11):编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看# 2 Ajax的出现 -> 后台发送异步请求,Render+Ajax混合# 3 单用Ajax(加载数据,DOM渲染页面):前后端分离的雏形前端就用html,css,js 写页面,空页面当页面加载完成---》发送ajax---》后端获取数据js 把获取完的数据,渲染到页面上后端只负责写接口# 4 Angular框架的出现(1JS框架):出现了“前端工程化”的概念(前端也是1个工程、1个项目)# 5 React、Vue框架:当下最火的2个前端框架(Vue:国人喜欢用,React:外国人喜欢用)# 6 移动开发(Android+IOS+ Web(Web+微信小程序+支付宝小程序) + 桌面开发(Windows桌面):前端 -> 大前端# 7 一套代码在各个平台运行(大前端):谷歌Flutter(Dart语言:和Java很像)可以运行在IOS、Android、PC端# 8 在Vue框架的基础性上 uni-app:一套编码 编到10个平台# 9 在不久的将来 ,前端框架可能会一统天下

vue教程和M-V-VM架构思想

# 官网:教程https://cn.vuejs.org/# vue版本-vue3 :一般情况下,新项目都用vue3编写-vue2 :公司里很多项目用vue2编写的-就在vue3上写vue2的语法,完全支持,但是vue3的语法不一样了# 基础阶段讲vue2,1--2天vue3vue2:https://v2.cn.vuejs.org/v2/guide/vue3:https://cn.vuejs.org/guide/quick-start.html# vue 是什么
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架渐进式:前端项目中可以一部分使用vue,也可以全部项目使用vue# M-V-VM架构思想# 之前学过mvc,mtvMVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,是一种事件驱动编程方式
Model :js中的变量
View : 用户看到的页面
ViewModel:只要js中变量变化了,页面自动跟着变化 ,页面中数据变化了,js变量也跟着变# 单页面应用(组件化开发)-single page application,SPA-原来写一个个html页面-用了vue后,只有一个html页面

vue的使用

# vue 项目,选择编辑器-vscode:免费-webstorm:jetbrains全家桶公司出品:pycharm,idea,goland...-收费的,破解方案跟pycharm一样-单个  全家桶-本质跟pycharm是一个东西,我们就不下载webstorm了,直接在pycharm中配置一下,安装一个插件,就支持写vue了-----------------------------------------------------------------------注意:
'''
官网:https://cdn.jsdelivr.net/npm/vue/dist/vue.js
打开后将里面的内容拷贝出来,建一个文件夹,然后建一个js文件放入
'''<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> --><script src="./js/vue.js"></script></head>
<body>
<div id="app"><h1>这里面可以写vue的模板语法</h1><!--插值语法--><p>姓名是:{{name}}</p><p>年龄是:{{age}}</p>
</div></body><script>// div  被 vue托管了---》内部就可以写vue的语法,vue会自动渲染// 本质是dom操作,只是不用我们手动操作了var vm = new Vue({el: '#app',data: {name: 'lin',age: 19}})console.log(vm.$data.name)// pereson=Person(data={name:lqz,age:19})// __inti__// self.data=data//self.name=data.get('name')// person.name
</script>
</html>

在这里插入图片描述

nodejs

解释型的语言是需要解释器的
js就是一门解释型语言,只不过js解释器被集成到了浏览器中所以,在浏览器的Console中输入命令,就和在cmd中输入python后,进入交互式环境一样nodejs:一门后端语言,运行在操作系统上的语言---》网络处理,文件处理
把chrome的v8引擎(解释器),安装到操作系统之上vue 项目编译成 纯粹的html,css,js---》需要有node环境

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

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

相关文章

ATLAS 200通过PCIE 接入RK3588-EP模式

ATLAS 200 作为算理模块&#xff0c;可以作为主/协处理器接入RK3588,有两种模式&#xff1a;RC 模式和EP模式 RC模式&#xff1a;rk3588 和 ATLAS 200 可分别独立处理自身业务数据&#xff0c;不存在业务互相依赖&#xff0c;二者可通过网络等方式进行通信&#xff0c;ATLAS …

【SpringCloud微服务全家桶学习笔记-服务注册zookeeper/consul】

SpringCloud微服务全家桶学习笔记 Eureka服务注册 gitee码云仓库 9.其他服务注册框架 &#xff08;1&#xff09;zookeeper安装与使用 zookeeper需安装在虚拟机上&#xff0c;建议使用CentOS&#xff0c;安装地址如下&#xff1a; zookeeper镜像源 选择第一个进入后下载ta…

WebSocke(简略笔记)

介绍 WebSocket是基于TCP的一种新的网络协议&#xff0c;实现了浏览器域服务器全双工通信——浏览器和服务器只需要完成一次握手&#xff0c;两者直接就可以创建持久性的连接&#xff0c;并进行双向数据传输。 Http协议和WebSocket协议对比&#xff1a; * HTTP是短连接 * We…

python经典百题之逆序打印字符串

题目&#xff1a;利用递归函数调用方式&#xff0c;将所输入的5个字符&#xff0c;以相反顺序打印出来。 方法1: 简单递归 def reverse_print(s, idx):if idx < 0:returnprint(s[idx], end"")reverse_print(s, idx - 1)input_str "hello" reverse_pr…

【核辐射监测】 隐私协议

【核辐射监测】隐私协议 1.个人信息的收集和使用 我们的应用程序不会收集用户的个人信息&#xff0c;包括姓名、地址、电子邮件地址、电话号码等。我们不会追踪用户的位置信息或共享用户的个人信息。 2. 非个人化信息的收集和使用 我们的应用程序可能会收集一些非个人化信息…

Unity实战(11):项目非启动状态下使用代码批量替换材质

目录 前言 配置环境 一、场景准备 二、代码演示 三、效果呈现 四、关于Resources.Load()的说明 前言 本文内容为unity在编辑状态&#xff08;非启动状态&#xff09;下使用代码批量替换材质&#xff0c;该方法也适用于其他在编辑状态下对物体的操作需求。 配置环境 win1…

ResponseEntity下载包含点的文件名无法下载

ResponseEntity下载包含点的文件名无法下载 原因&#xff1a;这可能是因为浏览器或服务器不正确地解析文件名的问题。文件名中的点通常被解释为文件扩展名的一部分 1.UriUtils String filename "file.name.with.dot.txt"; // 替换为你的文件名 filename UriUtil…

ros2与web通信实例

ros2与web通信实例 最近需要进行ros2与web端进行通信操作&#xff0c;目标是ros2发送的消息web端能够显示在界面&#xff0c;并且前端能够发布数据&#xff0c;最终实例如下&#xff1a; 然而网上查的的资料如古月居的&#xff1a; 利用Websocket实现ROS与Web的交互 https:/…

子网掩码的作用

1.子网掩码的作用 子网掩码是用来给ip划分网络位和主机位的。 子网掩码是为了给ip确定谁是网络地址、谁是主机地址的。子网掩码的二进制位是1的对应的是网络地址&#xff0c;子网掩码的二进制位是0的对应的是主机地址。

Ribbon负载均衡器

两种&#xff1a; 1.1 集中式负载均衡&#xff0c;服务端负载均衡 硬件 nginx 轮询、负载、哈希、随机、权重 为什么要做负载均衡&#xff1f; 1.2 客户端负载均衡器 用客户端 负载均衡器 很多机制可以自定义 小知识&#xff1a;不想让别人调自己&#xff0c;只想用别人的…

使用Arduino简单测试HC-08蓝牙模块

目录 模块简介模块测试接线代码测试现象 总结 模块简介 HC-08 蓝牙串口通信模块是新一代的基于 Bluetooth Specification V4.0 BLE 蓝牙协议的数传模块。无线工作频段为 2.4GHz ISM&#xff0c;调制方式是 GFSK。模块最大发射功率为4dBm&#xff0c;接收灵度-93dBm&#xff0c…

[2023-09-12]Oracle备库查询报ORA-01187

一个多表关联的语句在备库执行查询时提示ORA-01187: cannot read from file because it failed verification tests&#xff0c;单独对某一个表查询则正常返回&#xff08;因为不需要排序等&#xff0c;没有用到临时表空间&#xff09;。 查看报错信息发现是提示的临时数据文件…

51单片机光照强度检测自动路灯开关仿真( proteus仿真+程序+报告+讲解视频)

51单片机光照强度检测自动路灯开关仿真( proteus仿真程序报告讲解视频&#xff09; 仿真图proteus7.8及以上 程序编译器&#xff1a;keil 4/keil 5 编程语言&#xff1a;C语言 设计编号&#xff1a;S0052 讲解视频 基于51单片机的光照检测自动路灯控制仿真设计( proteus仿…

如何搭建游戏平台?

搭建游戏平台是一个复杂的任务&#xff0c;涉及多个方面的工作。下面是一些关键步骤和注意事项&#xff0c;以帮助您搭建游戏平台&#xff1a; 平台开发&#xff1a;开发游戏平台的关键部分&#xff0c;包括网站或应用程序的开发、数据库设计、用户界面设计、游戏上传和管理工具…

ES7新特性深度解析:提升JavaScript开发效率的利器

前言 ES7&#xff08;ECMAScript 2016&#xff09;是JavaScript的最新版本&#xff0c;引入了一些强大的新特性&#xff0c;旨在提升开发者的工作效率。本篇博客将深度解析ES7的一些重要特性&#xff0c;并且以不超过50%的代码比例展示其用法。 包含属性初始化器的类(Class)定…

加速新药问世,药企如何利用云+网的优势?

随着计算能力的不断提高和人工智能技术的迅速发展&#xff0c;药物研发领域正迎来一场革命。云端强大的智能算法正成为药物研发企业的得力助手&#xff0c;推动着药物的精确设计和固相筛选。这使得药物设计、固相筛选以及药物制剂开发的时间大幅缩短&#xff0c;有望加速新药物…

MyBatis之增删查改功能

文章目录 一、创建各种类二、MyBatis的各种功能 1、查询<select>2、增加<insert>3、修改<update>4、删除<delete>三、总结 前言 在MyBatis项目中编写代码实现对MySql数据库的增删查改 一、创建各种类 1、在Java包的mapper文件下创建一个接口 我创建…

vmware NAT模式配置方式

VMware在NAT模式下宿主机与多台虚拟机互相访问&#xff0c;可连接外网 虚拟机的网络连接类型的选择&#xff0c;网络连接类型一共有桥接、NAT、仅主机和不联网四种。 桥接&#xff1a;选择桥接模式的话虚拟机和宿主机在网络上就是平级的关系&#xff0c;相当于连接在同一交换机…

滚雪球学Java(25):动态代理

&#x1f3c6;本文收录于「滚雪球学Java」专栏&#xff0c;专业攻坚指数级提升&#xff0c;助你一臂之力&#xff0c;带你早日登顶&#x1f680;&#xff0c;欢迎大家关注&&收藏&#xff01;持续更新中&#xff0c;up&#xff01;up&#xff01;up&#xff01;&#xf…

Java中使用BigDecimal类相除保留两位小数

问题 遇到2个数相除&#xff0c;需要保留2位小数的结果。 解决 BigDecimal sum ...; BigDecimal yearValue ...;MathContext mathContext new MathContext(2, RoundingMode.DOWN); yearValue.divide(sum, mathContext);