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…

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

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

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…

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

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

如何搭建游戏平台?

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

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

随着计算能力的不断提高和人工智能技术的迅速发展&#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…

SpringBoot配置加载优先级

1.SpringBoot配置文件 SpringBoot使用一个以application命名的配置文件作为默认的全局配置文件。支持properties后缀结尾的配置文件或者以yml/yaml后缀结尾的YAML的文件配置。 以设置应用端口为例: properties文件示例(application.properties)&#xff1a; server.port80 Y…

pytorch学习2

分类问题 手写数字数据集 其中&#xff0c;每个数字图片大小是28 x 28&#xff0c;矩阵中每个元素的大小为[0&#xff0c;1]区间的灰度值&#xff0c;将二维矩阵拉平(flat)为一维784&#xff0c;数据量不变&#xff0c;这样能忽略上下位置相关性&#xff0c;甚至左右位置相关性…

编译opencv-3.4.5 [交叉编译]

在unbuntu20.04环境下编译opencv3.4.5&#xff0c; cmake 版本&#xff1a;3.27.4 gcc 版本&#xff1a;11.4.0 g版本&#xff1a;11.4.0 在此环境下编译opencv4.5.4正常。 1. 编译时遇到的问题 &#xff08;1&#xff09; Built target libprotobuf make: *** [Makefile:163…

Linux开发工具之编辑器-vim

vim简单来说就是一款文本编辑器&#xff0c;用于写代码&#xff0c;更是一款多模式编辑器 vim的基本概念 vim有许多种模式&#xff0c;但是铁三角是以下三种模式&#xff1a;命令模式&#xff0c;插入模式&#xff0c;底行模式 1 正常/普通/命令模式&#xff08;默认打开&…

mySQL 安装

一、windows安装包下载 mysql官网提供了两种安装方式&#xff0c;一个是zip安装&#xff0c;另一个是msi安装&#xff0c;这里简绍第一种安装方式&#xff0c;第二种简单&#xff0c;不再简绍 官网下载&#xff0c;根据自己需要选择版本&#xff1a;MySQL :: MySQL Community…

ReactNative中升级IOS 17版本Crash解决

ReactNative中升级IOS 17版本Crash解决 ReactNative中升级IOS 17版本Crash解决一、问题描述二、原因分析三、解决方案决策3.1 设置宽高为非零值3.2 使用新的UIGraphicsImageRenderer替换就版本的UIGraphicsBeginImageContext 四、可能使用到该API的三方库4.1 react-native-fast…

反转单链表

思路图1&#xff1a; 代码&#xff1a; struct ListNode* reverseList(struct ListNode* head){if(headNULL)//当head是空链表时 {return head; }struct ListNode* n1NULL;struct ListNode* n2head;struct ListNode* n3head->next;if(head->nextNULL)//当链表只有一个节…