前后端分离&vue简介

vue简介

vue是一个渐进式js框架，用于构建用户界面，其主要特点是易学易用、轻量、灵活和高效。Vue.js由前Google工程师尤雨溪（ Evan You）在2014年创建，它的核心库只关注视图层，是一款非常优秀的MVVM框架，提供了响应式和组件化的视图组织方式。它可以轻松与其他JavaScript库和第三方库集成，并支持服务端渲染（server-side rendering）和单文件组件（Single File Components）。Vue.js的主要特点是数据驱动、组件化、指令系统和可插拔性

官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js

spring-context依赖包含了很多的jar

mvvm模型：model，view，view-model

mvc模型：model，view，comtroller

后端 ajax拿数据 json数组[]

前端 $.each(arr,function（）{

str=...

})

$("table").html()...

mvvm模型：虚拟dom，渲染dom树==数据双向绑定

库与框架的区别

库（Library），本质上是一些函数的集合，每次调用函数，实现一个特定的的功能，接着把控制权交给使用者

代表：jQuery

jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作

2.2 框架(Framework)，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码

代表：vue

框架规定了自己的编程方式，是一套完整的解决方案

使用框架的时候，由框架控制一切，我们只需要按照规则写代码

框架的侵入性很高(从头到尾)

前后端分离

1.确定数据格式/接口文档

2.前端后端各司其职

传统开发：jsp 找项目原状页面--》专业的前端写项目原型页，后端代码 html--》js样式乱了

1迁就网上的原型页 2自己改样式

客户提的新需求，改变了页面版

重大问题：

1.后端写代码必须等前端完成后，意味着项目周期会拉长

2.后端做了他不擅长的事

3.不便于后期的维护

vue的入门

v-model：数据双向绑定

边界中的变量，在vue实例中变量定义

：value：从vues实例中的定义变量取出，用到的边界中

@click/v-on:click:

js:onclick

	
		
		
			
		
		
	
	
		
		

			{{msg}}
			
				
			
			
			弹出来吧，光
			
		
			
		
	
	

	
		
		
			
		
		
	
	
		
		

			
			
				
			弹出来吧，光
			
		
		
	
	

vue的生命周期

becreate , created , beforeMount , mounted , beforeUpdate , updated , beforedestory , destoryed

vue初始化默认触发的钩子函数：becreate , created , beforeMount , mounted

	
		
		
		
	
	
		

			
number:{{number}}
			
{{detail()}}