前端三剑客相关

最新推荐文章于 2024-06-04 23:11:16 发布

SCV就绪

最新推荐文章于 2024-06-04 23:11:16 发布

阅读量307

点赞数 2

文章标签： javascript vue.js css

本文链接：https://blog.csdn.net/weixin_58698763/article/details/120188651

版权

前端技术栈

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

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

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

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

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

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

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

目前市场主流是ES6标准，但TypeScript可能会成为趋势，如Vue 3.0选用的语言则为TypeScript。TypeScript将带来JavaScript的华丽转身，迈入强语言行列，所以其发展趋势不容小觑。

Vue Element Admin 是通过Vue框架结合饿了吗的ElementUI，并在其基础上实现了后台管理的基本功能，企业在其基础上，直接二次开发，添加业务，实现敏捷编程。

静态页面HTML

概念

HTML（Hyper Text Markup Language）超文本标记语言，是做网站页面的最基础的开发语言，由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。由W3C组织发展壮大。它的功能很弱，连脚本语言都算不上，类比java这种强语言，那就是一个天上一个地下，但它小而美，网站开发它却是霸主。

结构

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

语法

HTML标签

HTML是一门标记语言，标签分为开始标签和结束标签

如果开始和结束中间没有内容，可以合并成一个自闭标签

CSS

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

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

1.css修饰网页语法

方式1：行内css <div style="background-color:red;">我是div2</div>

方式2: 内部css 头部添加 <style> div{ color:green; }</style>

方式3: css选择器

1.标签名选择器：

    div{  
                    background-color: #008000;
                    color: black;
                    font-size: 30px ;
                    font-family: "宋体" ;
                }
       input{
                    background-color: pink; 
                }

2.class选择器：

先设置class属性例如：<div class="a">我是div1</div>

通过.获取class的值

.a{ color: yellow; }

注：网页中class=a 的元素可以同时又很多，相当于同时被选中

3.id选择器：

先设置id属性例如：<div id="x">我是div2</div>

通过#获取id的值

#x{ font-size: 100px; }

注：选中网页中id=x的元素，由于id的值不能相同，所以只选中了一个元素

4.分组选择器：把多种选择器选中的元素分成一组，统一设置样式

div , #s1 {
         color: #008000;

}

5.属性选择器：根据标签的不同属性选择元素

input  [ type='text' ]  { 

                background-color: #FFFF00;

  }

2.CCS盒子模型

指的是将HTML中所有元素都看成一个盒子，盒子与盒子之间的距离，包括盒子的边框以及盒子边框和盒子内容的距离都可以设置。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vLAwyuck-1622525806196)(RackMultipart20210601-4-1w5z70a_html_8bf03415a97315e5.png)]

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>

元素类型的补充

块级元素

默认情况下，块级元素独占一行（div , p，h1~h6）

可以设置宽和高。如果不设置宽和高，其中宽是默认填满父元素，而高是由内容

外边距、边框、内边距都可以设置

行内元素

默认情况下，多个行内元素处在同一行

不能设置宽和高

左右外边距、边框、内边距都可以设置，上下外边距设置无效

行内块元素

既具备行内元素的特征，还具备块级元素的特征

JS

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

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它们根本没有关系，java是强语言几乎无所不能，而javascript是脚本语言，只局限于浏览器。

JavaScript遵循ECMA国际组织颁布的ECMAScript标准。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript 的第六版，简称为ES6。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。很多js相关技术都遵循这个标准，如目前最受欢迎的Vue。

微软出了符合规范类似javascript的称为js，但一般开发者忽略它们的差异，全称就习惯叫javascript，简称就习惯叫js。

全称JavaScript，是一种弱类型语言，同其他语言一样，有它自身的语法，数据类型，表达式，算术运算符等。

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

名词解释

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

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

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

特点和优势

特点：

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

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

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

优势：

(1)良好的交互性

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

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

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

入门案例

<head>
    <title>hello</title>
	<meta charset="utf-8"/>
	<script>/* JS代码 */
alert(100);
		function fn(){
			alert("111");
		}
	</script>
</head>
<body>
	<a href="#" onclick="fn();">鼠标点击事件...</a>
</body>

HTML中引入JS

通过script标签引入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>

通过script标签引入外部的JS文件

创建1.js文件

function fn(){
	alert("JS的第2种引入方式");
}

在html中引入文件

<head>
	<meta charset="utf-8"/>
	<script src="1.js"> </script>
</head>
<body>
	<div id="div1" onclick="fn();">Hello JavaScript</div>
</body>

注意：不要同时通过一个script标签引入JS代码和JS文件，会导致代码不会执行！比如：

<script src="demo1.js">
	alert("哈哈哈哈。。。");//代码不会执行！！
</script>

JS语法

注释

单行注释： //注释内容

多行注释： /* 注释内容 */

基本数据类型

包括:number/string/boolean/null/undefined

(1) 数值类型-number

在JS中，数值类型只有一种，就是浮点型。

在JS中，需要时会自动的进行数据类型的转换，比如：在显示和处理的时候，浮点型和整型会自动的转换。

2.4+3.6=6;

Infinity ： 正无穷大

-Infinity ： 负无穷大

NaN : Not a Number 非数字， 和任何值都不相等，包括它本身

(2) 字符串类型-string

在JS中，字符串是基本数据类型。

在JS中，字符串直接量是通过单引号或者双引号引起来。


var str1 = "Hello…";

var str2 = 'CGB2103…';;

alert(str1);

(3) 布尔类型-boolean

值为true或者是false；

var s1 = false;

console.log(s1);

(4) undefined

值只有一个就是undefined。表示变量没有初始化值。

比如：

a) var num; alert(num);//声明了变量但是没有为变量赋值，该变量的值就是undefined。

b) 或者访问一个对象上不存在的属性时，也是undefined。

c) 或者访问数组中一个没有的元素的位置时，该位置处的值也是undefined.

(5) null

值也只有一个，就是null。表示空值或者不存在的对象。

复杂数据类型

函数、数组、对象（自定义对象、内置对象、DOM对象、BOM对象…）

js的变量

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

javascript没有类似采用静态语言类型，如java的变量类型是编译期就确定的；而它采用了动态类型，也就是说在编译期类型不确定，运行时会动态根据变量的赋值来决定它的类型，这点比较灵活。这也是双刃剑，编译期就难以检查出其赋值的错误。

js的运算符

JS中的运算符和Java中的运算符大致相同

算术运算符: +，-，*，/，%，++，–

赋值运算符: =，+=，-=，*=，/=，%=

比较运算符: ，!=，=，!==，>，>=，<，<=

位运算符: & ， |

逻辑运算符: && ，||

前置逻辑运算符: ! (not)

三元运算符: ? :

js语句

JS中的语句和Java中的语句用法也大致相同

if...else语句

var i = 3;
if(i==4){
alert(“yes”);
}else{
alert(“no”);//no
}
例子: 接收用户输入的成绩，判断成绩所属的等级
80~100(包括80，也包括100)		优秀 
60~80(包括60，但不包括80)		中等
0~60(包括0，但不包括60)		不及格
其他值							输入有误
// prompt函数可以弹框提示用户输入成绩, 并返回用户输入的内容
var score = prompt("请输入您的成绩：");
console.log( score );
if( score >= 80 && score <=100 ){
	alert("您的成绩属于：优秀！");
}else if( score >= 60 && score < 80 ){
	alert("您的成绩属于：中等！");
}else if( score >= 0 && score < 60 ){
	alert("您的成绩属于：不及格！");
}else{
	alert("您输入的成绩不合法，请重新输入！");
}

switch...case语句

var day = 3;
switch( day ){
	case 1: 
		alert("今天是星期一");
		break;
	case 2: 
		alert("今天是星期二");
		break;
	case 3: 
		alert("今天是星期三");
		break;
	case 4: 
		alert("今天是星期四");
		break;
	case 5: 
		alert("今天是星期五");
		break;
}

循环语句

for(var i=0;i<5;i++){
	alert( i );
console.log(i);
}
var i=0;
while(i<5){
alert(i);
i++;
}
var sum = 0;
for( var i=1; i<=100; i++ ){
	sum += i; //sum = sum+i;
}
console.log(sum );
//没有增强for循环

注意： JS中的语句，判断条件可以不是boolean类型，因为JS中会自动进行数据类型的转换。

JS数组

JS数组用于在单个的变量中存储多个值(其实就是一个容器)。

JS中的数组可以存储例如：数值、字符串、布尔值、undefined、null、对象、函数等

js数组声明方式

var arr1 = new Array();//声明一个空数组
var arr2 = new Array("abc", "hello", true);//声明一个具有初始值的数组
alert(arr2.length);//3
var arr4 = [];//声明一个空数组
alert(arr4.length);//0
arr4 = ["abc", "hello", true];//声明一个具有初始值的数组
alert(arr4);

数组需要注意的细节

(1)JS数组中可以存放任意的数据类型

(2)JS中的数组长度可以被改变

var arr1 = [];//声明一个空数组
console.log( arr1.length ); //此时数组长度为 0
arr1.length = 10;
console.log( arr1.length ); //此时数组长度为 10
arr1[99] = "abc";
console.log( arr1.length ); //此时数组长度为 100
arr1.length = 0;
console.log( arr1.length ); //此时数组长度为 0

数组的常见操作

length属性  --  获取数组的长度，还可以改变数组的长度
var a = [1,2,3];  
alert(a.length);  

var arr = [123, "abc", false, new Object() ]
//遍历数组
for( var i=0; i< arr.length; i++ ){
	console.log( arr[i] ); 
}
//for..in
for(var i in a){
	console.log("i:::"+i);
}
//循环接收用户输入，将数据存储在数组中，直至输入‘exit’结束
c();
function c(){
	var a=[];
	for(;;){
		var x=prompt("请输入整数:");
		a[a.length]=x; 
		if(x=="exit"){
			break;
		}
	}
	console.log(a);
}

js函数

函数就是一个具有功能的代码块, 可以反复调用

函数就是包裹在花括号中的代码块，前面使用了关键词 function

方式一:通过function关键字声明函数

声明：function 函数名称([参数列表]){ 函数体 }
调用: 函数名称([参数列表]);
案例：
function a(){ //无参函数定义
	var a = [1,2,3,4,5]; //定义数组
	var sum =0; //定义变量
	for (var i = 0; i <a.length; i++) {
		if(a[i]%2==0){
			sum+=a[i];
		}
	}
	alert(sum);
}
a();//函数调用
function b(x,y){//定义含参函数
	alert(x+y);
}
b(1,"2");//函数调用
b(1,2);//函数调用

方式二:通过函数直接量声明函数

声明：var 函数名称 = function([参数列表]){ 函数体 }
调用: 函数名称([参数列表]);
案例：
// fn2();  //这种方式定义的函数还未加载就调用,会报错.方式1没问题
var fn2 = function(){ //定义无参函数
	alert(100);
}
fn2();  //函数调用

var fn3 = function(x,y){  //定义含参函数
	alert(x*y);
}
fn3(0.32,100);//函数调用
fn2("王海涛");参数个数不匹配，王海涛undefined
var e = function(x,y){ //定义有返回值含参函数
	return x-y;
}
alert("函数返回值:::"+ e(1.1,10.9) ); //函数调用

注意: 在JS中调用函数时, 传递的参数个数如果与声明的参数个数不相同, 也不会报错。

但是最好按声明的个数来传递, 因为个数不符, 可能会引发一些问题！！！

js对象

利用function关键字声明对象，用new关键字创建对象。

jQuery

jQuery是一门轻量的、免费开源的JS函数库，主要作用是用于简化JS代码

轻量的：代码或项目对该技术的依赖程度，依赖程度越低，这个技术越轻，反之，依赖程度越高，这个技术越重。推荐使用轻量级的技术框架

jQuery的核心思想："写的更少，但做的更多"

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。

jQuery** 库包含以下功能：**

HTML 元素快速选取(给予css选择器,方便快速查询DOM文档中的元素)
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX

jQuery的语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法是：$(selector).action()

$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素

jQuery的优势

1,简化了js的写法，用$替代了document.getXxx()

2,可以像CSS选择器一样非常方便的获取元素

3,可以通过修改css样式控制页面的效果

jQuery的使用

jQuery其实就是一个JS文件,如需使用 jQuery,需要下载，然后使用 HTML 的script标签引用它,应该位于页面的head 部分。

<!-- 引入jQuery的函数库文件 -->
<script src="jquery.min.js"></script>
或者：
<script src="jquery.js"></script>

文档就绪事件

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jq</title>
		<!-- 引入jQuery文件 -->
		<script src="jquery-1.8.3.min.js"></script>
		<!-- 嵌入js代码 -->
		<script>
		// 方式1:还没加载到h1元素,a是null,调用null的资源f12时会出问题
			// var a = document.getElementById("p1");
// alert(a); //null
			// alert(a.innerHTML);
			
			// 方式2: 使用jQuery的文档就绪函数,整个DOM都加载完了才执行
			//jQuery语法:$(选择器).action{ } ;
			$(document).ready(function(){
				var a = document.getElementById("p1");
				alert(a.innerHTML);
			});
			// 方式3: 简写
			$(function(){
				var a = document.getElementById("p1");
				alert(a.innerHTML);
			});
		</script>
	</head>
	<body>
		<h1 id="p1">文档就绪</h1>
	</body>
</html>

总结

什么时候该使用文档就绪事件函数？

如果在获取元素时，获取元素的代码执行的时机（时间）比元素本身加载的时间还要早，如果元素还没有加载到就获取，必然是获取不到的！

将获取元素的代码放在文档就绪事件函数中，等浏览器加载完整个网页后，文档就绪事件函数才会执行，此时所有的元素都被加载过了，再获取任何元素都能获取到！

jQuery选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中选择器语法：$()

基本选择器

元素选择器

$("div") -- 选中所有的div元素
$("span") -- 选中所有的span元素

id选择器

$("#one") -- 选中id为one的元素
$("p#demo") -- 选取所有 id="demo" 的p元素

class选择器

$(".mini") -- 选中所有class值为mini的元素
$(".test") -- 选中所有class值为test的元素

属性选择器

$("[href]") -- 选取所有带有 href 属性的元素
$("[href='#']") -- 选取所有带有 href 值等于 "#" 的元素

高级选择器

$("div span") -- 选中所有div元素下的所有span元素
$("#one div") -- 选中id为one的元素下的所有div元素
<!DOCTYPE html>
<html>
	<head>
			<meta charset="utf-8"> 
			<title>示例</title> 
			
			<!-- 引入jQuery文件 -->
			<script src="jquery-1.8.3.min.js"></script>
			<!-- 嵌入js代码 -->
			<script>
				$(function(){
					$("button").click(function(){
						// 层级选择器,选中div下的span,隐藏 
						$("div span").hide();
					})
					$("button").click(function(){
						//层级选择器,选中id=one下的div,隐藏
						$("#one div").hide();
					})
				});
			</script>
	</head>
<body>
	<button>点我</button>
	<span id="one">
		<div>我是div1</div>
		<div>我是div2</div>
	</span>
	<div>
		<a href="#">链接</a>
		<span>我是span1</span>
		<span>我是span2</span>
	</div>
	
</body>
</html>

其他选择器

	过滤选择器
$("li:first")    //第一个li
$("li:last")     //最后一个li
$("li:even")     //挑选下标为偶数的li
$("li:odd")      //挑选下标为奇数的li
$("li:eq(4)")    //下标等于 4 的li(第五个 li 元素)
$("li:gt(2)")    //下标大于 2 的li
$("li:lt(2)")    //下标小于 2 的li
	内容过滤选择器
$("div:contains('Runob')")    // 包含 Runob文本的元素
$("td:empty")                 //不包含子元素或者文本的空元素
	可见性过滤选择器
$("li:hidden")       //匹配所有不可见元素，或type为hidden的元素
$("li:visible")      //匹配所有可见元素
	属性过滤选择器
$("div[id]")        //所有含有 id 属性的 div 元素
$("div[id='123']")        // id属性值为123的div 元素
$("div[id!='123']")        // id属性值不等于123的div 元素
	状态过滤选择器
$("input:enabled")    // 匹配可用的 input
$("input:disabled")   // 匹配不可用的 input
$("input:checked")    // 匹配选中的 input
$("option:selected")  // 匹配选中的 option
	表单选择器
$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域

事件

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

常见的DOM事件有很多:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OT1mLgQ3-1622609771155)(RackMultipart20210602-4-1s7eaya_html_41934a8b8ef4f294.png)]

常用事件

click()  -- 单击事件
$("p").click( function(){ $(this).hide(); });
dblclick()  -- 双击事件
$("p").dblclick(function(){ $(this).hide(); });
mouseenter() -- 鼠标指针穿过元素
$("#p1").mouseenter(function(){ alert('鼠标移到了 id="p1" 的元素上!'); });
mouseleave() -- 鼠标指针离开元素
$("#p1").mouseleave(function(){ alert("再见，您的鼠标离开了该段落。"); });
hover() -- 光标悬停事件
$("#p1").hover( 
function(){ alert("你进入了 p1!"); }, //当鼠标移动到元素上时触发
function(){ alert("拜拜! 现在你离开了 p1!"); //当鼠标移出这个元素时触发
});
可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
$("#hide").click(function(){ $("p").hide(); });
$("#show").click(function(){ $("p").show(); });

ajax

Ajax 即Asynchronous Javascript And XML( 异步的 )

Ajax并不是一种新的编程语言，而是多种技术的综合应用

Ajax是客户端的技术，它可以实现局部刷新网页

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

原理

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bJcZLtUh-1622609771162)(RackMultipart20210602-4-1s7eaya_html_a3c5ab779ef32318.png)]

格式

$.ajax({
	type:  //要使用的请求方式
	url:  //要使用的请求路径 
	contentType: //要传递的数据类型
	data:  //要拼接的数据
	dataType:  //数据类型
	success: function(data){ //成功时的方案 
		
	},
	error: function(data){ //失败时的方案
		
	}
})

json和js对象的区别

json字符串: { "id":"100","name":"tony","salary":"30000" }
js对象：{ "id":100,"name":"tony","salary":30000 }

可以看出js对象中value值如果是整数，小数，无需加双引号

含义不同，json是一种数据格式，js表示类的实例
传输：json用于跨平台、跨网络传输，速度快；js不能传输
展现：json键值对方式，值是字符串不能是对象方法函数；js值不一定加双引号，值可以是对象、函数、字符串等
转换：JSON.parse(jsonStr) JSON已经作为浏览器内置对象，eval(json)；JSON.stringify(obj)

VUE

官网

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

https://cdn.jsdelivr.net/npm/vue/dist/vue.js #下载最新版本

特点

一个轻量级的mvvm框架，双向绑定，数据动态更新，gzip后大小只有20k+
是一个渐进式框架，其核心思想是数据驱动、组件化的前端开发
原生html页面是通过js 操作的是dom，而vue.js操作的是数据。
和传统前端开发开发的关注点完全不同，传统方式关注的是都像的document结构的api，而vue关注的是数据。
优点显而易见，从而屏蔽了使用复杂晦涩难记的dom结构api。

渐进式框架

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

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

MVVM框架

在这里插入图片描述

上面看似结构非常简单，其实却深藏奥秘。和传统框架不同，Vue采用了最新的MVVM框架，它最大的特点就是：传统js机制操作的是页面，如我们之前写的html+css+js案例，大家会发现页面和页面里的数据混杂在一起。

而MVVM框架体系引入后端早已深入人心的分层思想，是后端MVC框架的延伸，实现把数据和页面分离。我们可以在页面布局好后，只对数据进行操作，当数据改变，页面上的内容会自动随之改变，而无需开发者开发专门的代码去改变，如之前ajax技术实现的局部刷新。

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

vue扩展

SCV就绪

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
前端三剑客相关

前端技术栈HTML超文本标记语言实现页面展现，形成静态网页CSS层叠样式表实现页面美化JS javascript脚本语言实现页面前端和后端的数据交互，形成动态网页React facebook出品前端、移动端JavaScript框架Angular google 出品基于TypeScript的开源 Web 应用框架Vue 国人出品，阿里收购构建用户界面的渐进式框架，自底向上开发NodeJS 基于 Chrome V8 引擎的 JavaScript 运行环境目前市场主流是ES6标准，
复制链接

扫一扫