前端技术栈-----WEB

前端技术栈

开发工具

HTML静态页面

结构

常用标签

注册表单展现

CSS技术

选择器

盒子模型

用户注册表单

JavaScript

JS定义

特点和优势

HTML中引入JS

JS语法

DOM树的作用

JSON

Ajax

Vue

MVVM框架

Vue高级用法

Vue组件

Vue路由

Vue的Ajax

前端技术栈

HTML超文本标记语言实现页面展现，形成静态网页

CSS层叠样式表实现页面美化

JS javascript脚本语言实现页面前端和后端的数据交互，形成动态网页

React facebook出品前端、移动端JavaScript框架

Angular google 出品基于TypeScript的开源 Web 应用框架

Vue 国人出品，阿里收购构建用户界面的渐进式框架，自底向上开发

NodeJS 基于 Chrome V8 引擎的 JavaScript 运行环境

开发工具

HBuilderX：https://www.dcloud.io/hbuilderx.html

HTML静态页面

超文本标记语言，是做网站页面的最基础的开发语言

结构

·文档声明，用来声明HTML文档所遵循的HTML规范。
·头部分，用来存放HTML文档的基本属性信息，比如网页标题、编码格式，这部分内容会被网页优先加载。
·体部分，用来存放网页要显示的数据。
·声明网页标题
用来通知浏览器使用哪个编码来打开HTML文档，打开的方式一定要和保存文件时使用的编码一致，避免出现中文乱码问题。

常用标签

标题标签

列表标签

图片标签

超链接标签

Input标签

表格标签

表单标签

其他标签

注册表单展现

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>form表单</title></head><body>
<!-- get方式提交的数据都在地址栏里 http://127.0.0.1:8848/cgbtest/3.html?user=&pwd= --><!-- <form method="get"> --><!-- post提交安全不显示数据 --><form method="post"><table border="1px" bgcolor="bisque" cellspacing="0" width="35%" cellpadding="3"><th colspan="2">注册表单</th><tr><td>用户名:</td><td><input type="text" name="user"/></td></tr><tr><td>密码:</td><td><input type="password" name="pwd"/></td></tr><tr><td>确认密码:</td><td><input type="password" name="repwd"/></td></tr><tr><td>昵称:</td><td><input type="text" name="nick"/></td></tr><tr><td>邮箱:</td><td><input type="text" name="mail"/></td></tr><tr><td>性别:</td><td><!-- 不配name属性,性别是多选!!  sex属性的值按照1 2 提交-->
<!-- input中,type如果是radio或者checkbox的话,不配置value属性的话,默认提交on --><input type="radio" name="sex" value="1"/>男<input type="radio" name="sex" value="2"/>女</td></tr><tr><td>爱好:</td><td><!-- name必须配,多选 ,提交的值就是1 2 3 --><input type="checkbox" name="like" value="1"/>篮球<input type="checkbox" name="like" value="2"/>足球<input type="checkbox" name="like" value="3"/>排球</td></tr><tr><td>城市:</td><td><select name="city"> <!-- 实现多选,按name提交数据 1 2--><option value="1">北京</option> <option value="2">上海</option></select></td></tr><tr><td>头像:</td><td><input type="file" name="path"/></td></tr><tr><td colspan="2" align="center"><button type="submit">提交</button></td></tr></table></form></body>
</html>

CSS技术

CSS全称叫做层叠样式表stylesheet，是用来修饰HTML网页的一门技术，增强网页的展示能力。

主要是使用CSS属性来实现，最终可以将css代码和HTML网页代码进行分离，也可以提高css代码的复用性。

选择器

标签名选择器

<style> /* 在HTML中加入css*/span{ /* 标签名选择器,选中所有span */background-color: chartreuse; /* 背景颜色*/               font-size: 24px; /*字号*/font-family: 黑体;/* 字体 */}
</style>

class选择器

<p class="a b">123</p> <!-- b覆盖a--><style> /* 在HTML中加入css*//* 选择class=a的元素 */.a{background-color: cornflowerblue; /*背景颜色*/color:red; /*字体颜色*/}.b{background-color: lightsalmon;color: black;}
</style>

id选择器

<p id="p1">123</p>
/* 使用id选中元素 */
#p1{text-indent: 200px; /* 首行缩进*/
}

分组选择器

/* 分组选择器,将多个选择器选中的元素组合在一起，统一设置样式 */
.a,.b,#p1{background-color: #000000;
}

属性选择器

<style type="text/css">/* 选中指定的元素 */input[type='text']{background-color: #6495ED;}
</style>

盒子模型

margin（外边距）

<input type="radio" name="sex" value="1" style="margin: 20px;"/>男

border（边框）

#div2{
border:10px solid yellow;/*实线*/
border:10px dashed yellow;/*点状*/
border:10px dotted yellow;/*虚线*/
}

padding（内边距）

<td style="padding: 20px;">用户名:</td>

用户注册表单

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>用户注册</title><style>/* 语法:选择器{样式1;样式2;样式3;} */
/* 统一网页风格 */
body{font-family: "宋体";/* 统一字体 */font-size: 15px;/* 统一字号 */width: 500px;/* 统一宽度 */padding-left: 100px;/* 设置左边距 */
}/*修饰所有input的样式 */
.a{height: 20px;/* 高度 */width: 300px;/* 宽度 */padding: 15px;/* 调整内容和边框的距离,内边距 */font-size:20px ;/* 字号变大 */margin: 10px;/* 调整盒子间的距离,外边距 */
}/* 修饰所有的提示信息 */
.xiao{font-size: 8px;/* 字体变小 */color: grey;/* 字的颜色 */padding-left: 30px;/* 左边距 */
}/* 修饰同意 */
#note{height: 60px;/* 高度 */text-indent: 40px;/* 首行缩进 */font-size: 12px;/* 字号变大 */
}/* 修饰立即注册按钮 */
#btn{background-color: #E64346;/* 背景色 */font-size: 25px;/* 字号变大 */color: white;/* 字的颜色 */width: 360px;/* 设置宽度 */height: 50px;/* 设置高度 */border: #E64346;/* 设置边框 */
}</style></head><body><!-- 用户注册的数据需要提交给服务器入库,所以需要form --><form method="get" action="#"> <!-- 指定提交数据的方式--><table><h2 style="padding-left: 130px;font-size:30px;">用户注册</h2><tr><td><input type="text" placeholder="用户名" class="a"/></td></tr><tr><td class="xiao">支持中文、字母、数字、“-”、“_”的组合，4-20个字符</td></tr><tr><td><input type="password" placeholder="设置密码" class="a" /></td></tr><tr><td class="xiao">建议使用数字、字母和符号两种以上的组合，6-20个字符</td></tr><tr><td><input type="password" placeholder="确认密码" class="a" /></td></tr><tr><td class="xiao">两次密码输入不一致</td></tr><tr><td><input type="password" placeholder="验证手机" class="a"/>或<a href="#"> 验证邮箱</a></td></tr><tr><td id="note"><input type="checkbox" />我已阅读并同意 <a href="#">《京淘用户注册协议》</a></td></tr><tr><td><!-- type类型必须是submit才能提交数据 --><input  id="btn" type="submit" value="立即注册" /></td></tr></table></body>
</html>

JavaScript

JS定义

JavaScript 是 web 前端开发者必学的三种语言之一：

HTML 定义网页的内容 H5
CSS 规定网页的布局 CSS3
JavaScript 实现网站的交互 ES6

JS是一门基于对象和事件驱动的脚本语言，通常用来提高网页与用户的交互性。

基于对象：它不仅可以创建对象,也能使用现有的对象。JS没有类的概念，也没有编译的过程。是一边解释一边执行。

事件驱动：在JS中，大部分情况下都是通过事件触发驱动函数执行的，从而实现特定的功能。（比如点击div将内容替换为时间、当鼠标滑过元素，元素就有翻转的动态。）

脚本语言：在网络前端开发环境下，用于嵌入在客户端浏览器中的一段小程序。

特点和优势

特点：

(1)JS是一门直译式的语言，直接执行的就是源代码.

是一边解释一边执行，没有编译的过程（不像Java需要提前编译为class文件再运行）.

(2)JS是一门弱类型的语言,没有严格的数据类型.

优势：

(1)良好的交互性

(2)一定的安全性(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)

(3)跨平台性(Java语言具有跨平台性,是因为有虚拟机)

只要有浏览器的地方都能执行JS

HTML中引入JS

<head><meta charset="utf-8"/><script>/* JS代码 */function fn(){alert("JS的第1种引入方式");}</script>
</head>
<body><div id="div1" onclick="fn();">Hello JavaScript</div>
</body>

JS语法

基本数据类型：number string boolean null undefined

复杂数据类型：函数、数组、对象（自定义对象、内置对象、DOM对象、BOM对象…）

JS的变量: js是弱类型语言，所有类型的变量都是用var关键字定义。并且参数的类型可以随时转换

DOM树的作用

ECMAScript描述了javascript语言的语法和基本对象
文档对象模型DOM（Document Object Model）与HTML网页API接口
浏览器对象模型BOM（Browser Object Model），与浏览器进行交互的API接口
核心对象有：window浏览器窗口，navigator浏览器信息，location浏览器当前地址信息，history浏览器历史信息，screen用户屏幕信息。

DOM树的结构

DOM 是一项 W3C (World Wide Web Consortium) 标准，DOM（Document Object Model）文档对象模型为JS操作html文档所提供的一套API，通过这套API可以很方便的对html元素进行访问及增删改查操作。

Document对象

--获取对象: window.document
--调用方法: getElementById("元素的id的属性的值")--返回1个元素getElementsByName("元素的name属性的值")--返回多个元素(用数组)getElementsByClassName("元素的class属性的值")--返回多个元素(用数组)getElementsByTagName("元素的标签名的值")--返回多个元素(用数组)
write()--向文档写 HTML 表达式 或 JavaScript 代码
title--返回网页的标题
id--设置或返回元素的id
innerHTML--设置或返回元素的内容

dom.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>DOM解析</title><!-- js --><script>function a(){/* 按id获取,返回1个 */var x = document.getElementById("div1");x.innerHTML="<h1>你好div</h1>";/* 按name属性值获取,返回多个*/var y = document.getElementsByName("div2"); console.log(y);//NodeListy[0].innerHTML="hello js...";/* 按class属性值获取,返回多个*/var z = document.getElementsByClassName("span1");console.log(z);//HTMLCollectionz[0].innerText="<p>我变了</p>"/* 按照标签名获取,返回多个 */var m = document.getElementsByTagName("div");console.log(m);//HTMLCollectionm[1].style.fontSize=30+"px";}</script></head><body><div id="div1" onclick="a();">我是div1</div><div name="div2"  onclick="a();">我是div2</div><span class="span1">我是span1</span><span class="span1">我是span2</span><a name="div2" id="a1">我是a</a><!-- js事件: -->
<a href="#" onclick="method();">单击触发js</a><a href="#" ondblclick="method2();">双击触发js</a><a href="#" onmouseenter="method3();">滑过触发js</a><a href="#" onmouseleave="method4();">滑走触发js</a>
<button onkeydown="alert(1);">点我</button></body>
</html>

总结：

获取页面元素的4种方式:

getElementsByTagName 标签名称，得到数组
getElementsByName name属性，得到数组
getElementsByClassName class属性，得到数组
getElementById id属性，单个值
注：dom树在描述标签时除id方式，其它都是以数组形式体现，哪怕是一个元素。

JSON

概念：

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）

JSON(JavaScript Object Notation，JS 对象简谱) 是一种轻量级的数据交换格式即可。它基于 ECMAScript (js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。是xml的终结者，成为主流开发方式（ajax异步请求，json返回）

作用：

JSON 是存储和交换文本信息的语法。当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。

JSON语法：

JSON数据      var a =' "firstName" : "John" ' JSON对象      var a =' "firstName" : "John" ' JSON数组      var a = '[{ "firstName":"Bill" , "lastName":"Gates" },{ "firstName":"George" , "lastName":"Bush" }]';

JSON转换：

给服务器发送数据: 将JS对象转成JSON字符串     JSON.stringify(Js对象)
接受服务器的数据: JSON字符串转成JS对象     JSON.parse("json字符串")

Ajax

什么是Ajax：允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。

Vue

官网：https://cn.vuejs.org

什么是Vue：Vue是我们国人开发的，作者：尤雨溪，是一个基于JavaScript的渐进式前端框架，更符合中国人习惯，在中国很多大型一线企业中广泛应用。Vue是我们国人开发的，作者：尤雨溪，是一个基于JavaScript的渐进式前端框架，更符合中国人习惯，在中国很多大型一线企业中广泛应用。

什么是渐进式框架：Vue是一个用于构建用户界面的渐进式 SPA （ Single-Page Applications ）**单一页面框架。与其它庞大而单一框架不同的是，Vue从一开始就被设计为按需搭建。

可以只使用核心vue.js
可以只使用核心vue.js + components组件
可以只使用核心vue.js + components组件 + router路由
可以只使用核心vue.js + components组件 + router路由 + vuex状态管理
构建大型vue项目：npm（包依赖） + webpack（打包、压缩、合并等）

Vue入门案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>vue</title><!-- 1. 引入vue.js --><script src="vue.js"></script>    </head><body><!-- 2. 准备数据渲染区 ,{{ 插值表达式 }}--><div id="app">{{msg}}</div><script><!-- 3. 创建Vue对象 -->new Vue({el : "#app" ,data : {msg : "hello vueeee~~~"}});</script></body>
</html>

MVVM框架

MVVM框架实现了页面和数据的分离，代码结构更加清晰，责任更加明确，同时实现自动化，数据变化，页面随之变化，无需写代码，非常棒的一个改进。这是javascript、jquery、bootstrap等无法做到的，也是前端为何开始推崇Vue这些框架的根本原因，也标示着jquery的终结。

基础语法：

运算符 operator

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>vue的运算符</title><script src="vue.js"></script></head><body><div id="app"><p> 加法:{{2+3}} </p><p> 减法:{{2-3}} </p><p> 乘法:{{2*3}} </p><p> 除法:{{3/2}} </p><p> 取余:{{10%2}} </p><p> 三元表达式: {{age>10?'yes':'no'}}</p><p> 字符串操作: </p>
<p> {{str}} {{str.length}} {{str.concat(1000)}} {{str.substr(3)}}  </p></div><script>new Vue({el:"#app",data:{str:"hellovue~",age:12}});</script></body>
</html>

方法 methods

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>vue数据的写法</title><script src="vue.js"></script></head><body><div id="app"><!-- vue的事件,使用v-on调用指定函数 -->按钮1:<button onclick="alert(100)">点我</button>按钮2:<button v-on:click="show()">点我</button><h2>  vue调用无参函数：{{ show() }}  </h2><h3>  vue调用含参函数：{{ sysout(100) }}  </h3> </div><script>new Vue({el:"#app",data:{address:"北京",name:"张三",age:20,person:{name:"jack",age:18,salary:1100},hobby:["唱","跳","rap"],url:"https://act.codeboy.com/"},methods: { /* 必须在methods里,创建Vue函数 */show:function(){ console.log('hello vue');},sysout: function(color){console.log(color);}}});</script></body>
</html>

注意：

方法必须写在methods代码段中
方法体中访问数据代码段中声明的变量，前面加this
方法和属性声明方式的差异在于 function(){}
方法和属性调用的差异是 {{msg}} {{sayHello()}}，名称后加小括号

三种data值的写法

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>vue里data的三种写法</title><script src="vue.js"></script></head><body><div id="app">{{msg}}</div><script>new Vue({el : "#app" ,// 数据的三种写法:标准写法// 第一种形式// data : {//   msg : "hello vueeee~~~"// }// 第二种形式:定义函数,返回对象// data:function(){//    return {//      msg:"hi~vue"//    }// },// 第三种形式:定义函数,es6的简写法data(){return {msg:"vue hi~"}}});</script></body>
</html>

Vue高级用法

V-指令：v-if v-for v-on v-bind v-model v-cloak等

双向绑定 V-model：

通过指令v-model，实现双向绑定，修改一方同时修改相同的另一方，达到数据同时更新。MVVM是将"数据模型双向绑定"的思想作为核心，在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此View视图的数据的变化会同时修改Model数据源，而Model数据源数据的变化也会立即反应到View视图上。

闪现：

遇到插值表达式加载时闪烁对用户不好的现象，那怎么解决呢？

在标签中增加指令：v-cloak
增加style标签，[v-cloak]属性选择器，设置先不展示display:none;

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js"></script><style>[v-cloak]{display: none;}</style></head><body><div id="app" v-cloak>…</div></body>
</html>

判断 V-if

v-if指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素

v-show靠页面的样式进行控制，未显示但内容已在页面上，而v-if内容是不在的

v-if判断是否加载，可以减轻服务器的压力，但在需要时加载有更高的切换开销；v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>vue数据的写法</title><script src="vue.js"></script></head><body><div id="app"><!-- 用来判断,类似于java的if else if else,判断成立就显示不成立就不显示 --><p v-if="person.age>=18">成年人</p><p v-if="person.age<18">未成年人</p><p v-if="person.salary>=2000">金领</p><p v-else-if="person.salary>=1000">白领</p><p v-else>屌丝</p><!-- 和v-if一样也可以判断,只是条件不满足也会在页面加载,不显示而已 --><p v-show="person.age>=20">成年人</p></div><script>new Vue({el:"#app",data:{address:"北京",name:"张三",age:20,person:{name:"jack",age:18,salary:1100},hobby:["唱","跳","rap"],url:"http://act.codeboy.com/"}});</script></body>
</html>

循环 V-for

v-for 指令可以绑定数组的数据来渲染一个项目列表

事件 v-on

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js"></script></head><body><div id="app"><p>{{count}}</p><button @click="count++">点我</button><button onclick="show()">javascript 点我</button><button v-on:click="show()">v-on:click 点我</button><button @click="show()">简写的事件,点我</button></div></body><script>function show(){alert("old show");}new Vue({el: "#app",data:{msg : "hello vue",count:1},methods:{show : function(){console.log(this.msg)}}})</script>
</html>

绑定 v-bind

当属性的值是变量而不是字符串时，通过v-bind进行标识，vue会自动处理

全称: v-bind:href
简称： :href 冒号开头就说明后面跟的是变量

Vue组件

组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 1.先引入vue --><script src="../js/vue.js"></script></head><body><div id="app"><starter></starter><foot></foot></div><script>//全局组件Vue.component('foot',{template:'<ol><li>你好</li><li>你好</li><li>你好</li></ol>'})new Vue({el:'#app',//局部组件components:{starter:{//组件名template:'<h1>哈哈</h1>'}}})</script></body>
</html>

Vue路由

用户发起一个请求,在互联网中经过多个站点的跳转.最终获取服务器端的数据. 把互联网中网络的链路称之为路由. (网络用语)
VUE中的路由: 根据用户的请求URL地址,展现特定的组件(页面)信息. (控制用户程序跳转过程)

使用步骤：

<!-- 1.引入JS 路由需要依赖vue 注意顺序-->
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>router</title><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="vue-router.js"></script></head><body><div id="app"><!-- 将被解析成a标签,还有href属性 --><router-link to="/home">主页</router-link><router-link to="/help">帮助页</router-link><!-- 路由出口,匹配成功后,在这里展示 --><router-view></router-view></div><script>//1,定义组件let home = {template:"<h3>这是主页</h3>"}let help = {template:"<h3>这是帮助页</h3>"}//2,创建路由的实例VueRouter,routes指定每个路由映射的一个组件let router=new VueRouter({routes:[{path:"/home",component:home},{path:"/help",component:help}]})//3,通过router注入路由,从而让整个应用都有路由功能new Vue({el:"#app",// router:routerrouter})</script></body>
</html>

Vue的Ajax

Ajax 即Asynchronous Javascript And XML( 异步的 )
Ajax并不是一种新的编程语言，而是多种技术的综合应用
Ajax是客户端的技术，它可以实现局部刷新网页
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

Ajax原理：

AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

axios：

1, Vue中封装了ajax并增强了它，在异步并发处理优于原生ajax。称为：axios（ajax input output system）
2, 使用步骤: 要使用一个单独的js文件,注意导入顺序

<script src="vue.js"></script>
<script src="axios.min.js"></script>

axios.get("url地址信息","参数信息").then(res=>{console.log(res.data);
})

测试

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>ajax</title><script src="js/vue.js"></script><script src="js/axios.min.js"></script></head><body><div id="app"><p>{{info}}</p><button @click="init()">点我获取数据</button></div><script>new Vue({el:"#app",data:{info:''},// 发ajax请求，用以获取数据methods:{init(){axios.get('http://localhost:8080/car/get').then(     //可以跨域请求服务器数据a => ( //a就是访问成功后返回的数据// this.info = a.data.name  this.info = a.data //data已经是js对象了)    ).catch(function (e){console.log(e)})}}})</script></body>
</html>

知识点巩固：

axios请求头的 Content-Type 默认是 application/json，而postman默认的是 application/x-www-form-urlencoded。

ajax/postman一般采用@RequestParam接收参数：

@ResponseBodypublic Result testpost(@RequestParam String username) {}

axiso采用@RequestBody的json方式接收参数

@ResponseBodypublic Result testget(@RequestBody Map map) {}

常见错误

浏览时必须用服务模式浏览，否则报跨域错误

前端技术栈-----WEB相关推荐

2019DevFest | 从互联网前端到2B交付型前端-探索面向交付的实用前端技术栈
2019年11月23日,由天津GDG发起,天津多个技术社区主办的"天津人工智能开发者峰会暨天津技术社群联合峰会"在天津渤龙山庄酒店举行.本次大会内容丰富,涵盖人工智能.大数据.互联 ...
GitChat·前端 | 从软件工程角度看大前端技术栈
GitChat 作者:韩亦乐前言我们都知道,大学几乎是没有 Web 前端课的.以我所在的大学为例,唯一引导我们了解 JavaScript 的也只是'人机界面'和'Web应用开发'选修课.再者,由于 ...
2023年中高级前端养成指南-需要关注和学习的13大类80余个前端技术栈与前端趋势-看这篇就够了系列
今天是兔年开工的第一个星期一,我们又要投入到忙碌的工作了. 以下是imqdcn研究整理的2023年中高级前端养成指南,收藏起来,从开工第一天起,立下全新的计划和目标,愿你在兔年大展宏兔,扬眉兔气. 文 ...
将前端技术栈移植到掌上游戏机
https://juejin.im/post/5df89b96518825125b21d0f6 前端工程师,我们编写的代码只能活在浏览器.小程序或者 Node 进程里,这似乎已经成为了一种常识.但这就 ...
从软件工程角度看大前端技术栈
从软件工程角度看大前端技术栈优秀人才不缺工作机会,只缺适合自己的好机会.但是他们往往没有精力从海量机会中找到最适合的那个. 100offer 会对平台上的人才和企业进行严格筛选,让「最好的人才」和「 ...
前端技术栈之html,css,js
目录 1.前端技术栈介绍 1.1.前端技术简介 1.2. 前端调试工具 1.2.1.HBuilder 1.2.2.webstorm 1.2.3.vscode 2. 静态页面HTML 2.1 概念 2. ...
2021-11-05前端技术栈
前端技术栈一.Node.js 二.Webpack 三.Koa2 五.MongoDB 五.Vue 全家桶 Vue: Vuex: Vue Router: Vue CLI: Vant: 目前前端主流技术栈 ...
前端学习路线整理，如何点亮前端技术栈
从用Markdown写博客开始,慢慢点亮前端技术栈写在开始关于Markdown 关于学习方法和学习资源前端技术栈学习路线一.工具类代码编辑器Visual Studio Code 代码管理工具 ...
前端，前端技术，前端技术栈，前端工具等词汇的区别
参考博文:node.js是前端还是后端? - 知乎 (zhihu.com) 一.概念前端是指浏览器的执行环境.相反的后端是指服务器的执行环境. 前端技术则是指浏览器端的应用开发技术,包括HTML, ...

前端技术栈-----WEB

前端技术栈

开发工具

HTML静态页面

结构

常用标签

注册表单展现

CSS技术

选择器

盒子模型

用户注册表单

JavaScript

JS定义

特点和优势

HTML中引入JS

JS语法

DOM树的作用

JSON

Ajax

Vue

MVVM框架

Vue高级用法

Vue组件

Vue路由

Vue的Ajax

前端技术栈-----WEB相关推荐

最新文章

热门文章