前端技术发展史(了解)
1.前端历史
1.1.静态网页
1990 HTML
1.2.异步刷新-操作dom
1995 年的JavaScript
1.3.动态网站
臃肿的后台如Asp/jsp(java)、php等
1.4.Ajax成为主流
异步请求
1.5.Html5
它被认为是互联网的核心技术之一。 HTML 创建于1990 年，HTML4 于1997 年成为互联网标准，并广泛用于开发互联网应用程序。 HTML5 是Web 核心语言HTML 的规范。
2.Nodejs介绍
2.1.介绍
官方说明：
Node.js 于2009 年5 月发布，由Ryan Dahl 开发。这是一个基于Chrome V8引擎的JavaScript执行环境，用于启用JavaScript执行。在服务器端平台上，JavaScript是一种相当于PHP、Python、Perl、Ruby等服务器端语言的[脚本语言]。
随着Node.js的出现，许多前端开发人员开始使用JavaScript开发服务器代码，其异步编程风格也很受开发人员欢迎。 Node.js 的美妙之处在于，它不仅释放了JavaScript 在服务器端的无限可能性，更重要的是，它创建了一个巨大的生态系统。
易于理解：Nodejs 是一个JavaScript 运行时环境，允许您使用JavaScript 开发服务器端代码。
2010 年，NPM 首次作为Node.js 的包管理系统发布。开发者可以根据Common.js 规范创建Node.js 模块，并将其发布到NPM 供其他开发者使用。它是目前全球最大的包模块管理系统（类似于构建Java开源生态系统）。 NPM 相当于Java 的Maven，NPM（用于管理JS 插件）。
容易理解：npm是Nodejs平台上的一个js包管理系统。例如，要安装jquery：npm install jquery。
JDK、JRE（Java开发/运行平台） Nodejs（JS运行平台） 后端应用开发前端应用开发Maven：jar包管理NPM：JS库管理springboot+SSM架构开发项目VUE技术栈、React技术
此后，出现了很多基于Node的前端框架，比如Angular（MVC-MVVM）、Vue（MVVM）等。
2.2.主流前端框架
前端框架三巨头：
Vue.js:vue.js 以轻量级且易于使用而闻名
React.js:vue.js 和React.js 拥有最快的Web 前端和应用技术开发集成
AngularJS:AngularJS曾经是老大。
Nodejs和VUE的安装
vue有两种安装方式。
手动下载VUE的js库，并将该JS库导入到html中进行开发。
通过Npm 安装VUE 的JS 库并将其导入到HTML 中。
使用其他JS 库时始终使用第一种方法。我主要使用Npm 安装VUE。
1.Nodejs的安装
NPM是Node.js提供的模块管理工具。非常方便下载安装很多前端框架如Jquery、AngularJS、VueJs等。先安装node和npm工具，方便以后学习。
1.1.安装Nodejs
Nodejs 带有npm。安装Nodejs 时，也会安装npm。
NodeJs 下载：Node.js — 下载Node.js®
安装：绿色版直接双击安装，解压设置环境变量。
升级：npm install npm@latest -g [不升级]
测试节点：cmd -node -v
测试Npm：cmd – npm -v
淘宝镜像：npm config setregistry https://registry.npmmirror.com
1.2.cnpm的使用（可用可不用）
由于npm服务器在海外，淘宝团队在国内进行镜像，可能会影响你的安装。淘宝的镜像与官方同步频率目前为每10分钟一次，以便尽可能与官方服务同步。
安装：运行命令提示符npm install cnpm -g –registry=https://registry.npm.taabao.org
测试cnpm：cnpm -v
2.VUE的安装
在IDEA中创建静态项目并通过终端安装VUE
安装vue
使用CDN方式
有两种使用Vue 的方法。 1.使用cdn部署JS库。 2.使用npn安装VUE库。
!– 开发环境版本（包括有用的命令行警告）–
脚本src=\’https://cdn.jsdelivr.net/npm/vue/dist/vue.js\’/script
当然，您也可以通过手动下载JS库到本地项目来部署。
使用NPM安装VUE
使用终端初始化：npm init -y
名称更改会初始化NPM 并在项目中生成package.json 文件。
安装vue.
全局安装（已弃用）： npm install -g vue
部分安装（推荐）：npm install vue
如果安装成功，VUE JS库：node_modules/vue/dist/vue.js
【注意】项目名称中不能使用“vue”。如果不使用就会报错。
NPM相关命令
全局安装: npm install -g vue （安装工具vue-cli、webpack）
部分安装: npm install vue@2.6.10 （本项目仅使用了vue、jquery、js库）
显示模块: npm list vue
卸载模块: npm uninstall vue
更新模块: npm update vue
运行项目: npm 运行dev/test/online
编译项目: 运行npm build
注:
一般情况下，只需要在本地安装js库即可。
Vue组件
1. 什么是组件
组件是Vue.js 最强大的功能之一。组件可以扩展HTML 元素并封装可重用的代码。从高层次来看，组件是一个标记为mycomponent 的自定义元素，Vue.js 的编译器向其中添加了特殊功能。在某些情况下，组件也可能呈现为使用vue.js 功能扩展的原生HTML 元素。
概述:Vue 组件是用于完成特定功能（例如:）的自定义HTML 标签。
身体
我的标签/我的标签
/身体
: 请注意，mytag 是一个组件，您需要通过Vue 为其赋予特定功能。
2. 组件的作用
组件封装了特定的功能代码（html、css、js），可以使用组件的名称重用这些代码。包复用
3. 组件的分类
组件分为全局组件和局部组件
全局组件：对所有Vue实例有效（对挂载元素有效）
本地组件：在自己的vue实例中有效（在挂载的元素上有效）
3.1. 全局组件
语法：
Vue.component(\’自定义标签名称\’,{配置对象})
特征：
全局组件可用于任何安装的标签。
全局组件配置对象必须包含模板属性
预防：
模板中的HTML 必须出现在标签内。根节点只能有一个。
应用场景：
如果您需要安装的标签使用组件的特定功能，我们建议使用全局组件。
div id=\’应用程序\’
我的组件1/我的组件1
我的组件2/我的组件2
/div
div id=\’app1\’
我的组件1/我的组件1
我的组件2/我的组件2
/div
————————————————– ————————
//定义第一个全局组件
Vue.component(\’mycomponent1\’,{
模板: \’h1这是第一个全局组件/h1\’
})
//定义第二个全局组件
var 组件2Config={
模板: \’h1这是第二个全局组件/h1\’
};
Vue.component(\’mycomponent2\’,component2Config);
var 应用=新Vue({
el: \’#app\’,
数据: {
}
});
var app1=新的Vue({
el: \’#app1\’,
数据: {
}
});
3.2. 局部组件
语法：
var 应用=新Vue({
el: \’#app\’,
数据:{}，
组件: {
\’本地组件1名称\’ : {组件配置对象},
\’本地组件2的名称\’ : {组件配置对象}
}
});
特征：
本地组件只能在已安装的标签内使用
div id=\’app1\’
我的组件/我的组件
/div
div id=\’app2\’
我的组件/我的组件
/div
//1、定义一个本地组件为id=app1挂载的实例上的组件。
var app1=新的Vue({
el: \’#app1\’,
数据:{}，
组件: {
“我的组件”: {
模板: \’h1 这是本地组件/h1\’
}
}
});
//2.上面app2对象的本地组件不能在id=app2的标签中使用。
var app2=新的Vue({
el: \’#app2\’,
数据: {}
});
4. 组件使用两种HTML模板
两种方式：
直接在模板属性中写入HTML 代码字符串或变量规范
！–
模板ID=\’mytemplate\’
h1template 标签中的html/h1
/模板
脚本类型=\’文本/模板\’id=\’mytemplate\’
h1template 标签中的html/h1
/剧本
—
使用当前网页的html标签作为模板代码（大量的HTML不需要组装HTML字符串）。 a. 在网页中定义模板或脚本标签以包含所需的HTML 模板代码。模板
！–
\’mycomponent2\’:{
template: \’#mytemplate\’, #表示查找对应的HTML代码作为当前组件的模板代码
}
—
代码：
div id=\’app4\’
我的组件4/我的组件4
/div
!–模板id=\’mytemplate\’
h1template 标签中的html/h1
/模板-
脚本类型=\’文本/模板\’id=\’mytemplate\’
h1template 标签中的htmlsssssssssssssssss/h1
/剧本
脚本类型=\’文本/javascript\’
var app4=新的Vue({
el:\’#app4\’,
组件:{
\’mycomponent4\’:{
template:\’#我的模板\’
}
}
});
/剧本
5. 组件中的数据必须是函数
在组件中定义数据语法：
\’组件名称\’:{
模板:\’\’,
数据:函数（）{
返回{
键1: 值1，
键2: 值2
}
}
}
预防：
data 数据只能以函数的形式返回。这是因为您可以在该函数内编写其他业务代码。
每个组件内的数据仅在每个组件模板内可用。
Vue 对象中的数据不能在组件内使用。组件数据在已安装的HTML 标签上不可用。
组件:{
\’我的组件1\’:{
//\’模板\’:\’#templateStr1\’
\’模板\’:\’#templateStr2\’,
//模板定义数据并且可以：
//1 必须是一个函数
//返回2个return的数据对象
//3 多个数据是object对象的多个属性和值。
数据（）{
返回{
message:\’jjjj\’,
yhptest:\’xxxxx
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/92630.html
