VUE详解

JavaWeb项目前后端分离

        前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端、安卓、IOS等等）打下坚实的基础。
        这个步骤是系统架构从猿进化成人的必经之路。
        核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。
前后分离的优势
1.可以实现真正的前后端解耦，前端服务器使用nginx/tomcat。前端/WEB服务器放的是css、js、图片等等一系列静态资源，前端服务器负责控制页面引用、跳转、路由。
2.发现bug，可以快速定位是谁的问题，不会出现相互踢皮球的现象。页面逻辑，跳转错误，浏览器兼容性问题，脚本错误，页面样式等问题，全部由前端工程师来负责。接口数据出错，数据没有提交成功，应答超时等问题，全部由后端工程师来解决。
3.减少后端服务器的负载压力。除了接口以外的其他所有http请求全部转移到前端服务器上。
4.即使后端服务暂时超时或者宕机了，前端页面也会正常访问，只不过数据刷不出来而已。
5.也许你也需要有微信相关的轻应用，那样你的接口完全可以共用，如果也有app相关的服务，那么只需要通过一些代码重构，也可以大量复用接口，提升效率。（多端应用）
6.页面显示的东西再多也不怕，因为是异步加载。
7.nginx支持页面热部署，不用重启服务器，前端升级更无缝。
8.增加代码的维护性和易读性（前后端混在一起的代码读起来相当费劲）。
9.提升开发效率，因为可以前后端并行开发，而不是像以前的强依赖。
10.在nginx中部署证书，外网使用https访问，并且只开放443和80端口，其他端口一律关闭（防止黑客端口扫描），内网使用http，性能和安全都有保障。
11.前端大量的组件代码得以复用，组件化，提升开发效率。

MVVM

        MVVM是Model-View-ViewModel的简写。MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。当然这些事ViewModel已经帮我们做了，它可以取出Model的数据同时帮忙处理View中由于需要展示内容而涉及的业务逻辑。

1.什么是Vue.js

        Vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
        Vue.js是前端的主流框架之一，和Angular.js、React.js一起，并成为前端三大主流框架。

2.Vue.js优点

1.体积小 压缩后33k
2.更高的运行效率
        用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候，浏览器要不停的渲染新的DOM树，导致页面看起来非常卡顿。
        基于虚拟dom，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM，最后在计算完毕才真正将DOM操作提交，将DOM操作变化反映到DOM树上。
3.双向数据绑定，简化DOM操作
        通过MVVM思想实现数据的双向绑定，让开发者不再操作DOM对象，把更多的精力投入到业务逻辑上。
4.生态丰富，学习成本低
        市场上拥有大量成熟、稳定的基于vue.js的UI框架、常用组件，来实现快速开发，对初学者友好，入门容易，学习资料多。

3.第一个Vue程序

1.导入开发版本的Vue.js
2.创建Vue实例对象，设置el属性和data属性
3.使用简洁的模板语法把数据渲染到页面上
Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统：

代码解析：
{ {变量}}模板语法，插值表达式获取数据
new Vue();创建Vue对象（VM对象）
el：数据挂载的dom对象
        Vue会管理el选项命中的元素及其内部的后代元素
        可以使用其他的选择器，但是建议使用ID选择器
        可以使用其他的闭合标签，不能使用html和body
data:{message:‘hello world’}model数据
        Vue中用到的数据定义在data中
        data中可以写复杂类型的数据，如对象，数组
        渲染复杂类型数据时，遵守js的语法即可

4.模板语法

        Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。
        在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，Vue能够智能地计算出最少需要重新渲染多少组件，并把DOM操作次数减到最小。
插值文本
        数据绑定最常见的形式就是使用“Mustache”语法（双大括号）的文本插值：< span>Message:{ {msg}}< /span>，Mustache标签将会被替代为对应数据对象上msg property的值。无论何时，绑定的数据对象上msg property发生了改变，插值处的内容都会更新。
使用JavaScript
        迄今为止，在我们的模板中，我们一直都只绑定简单的property键值。但实际上，对于所有的数据绑定，Vue.js都提供了完全的JavaScript表达式支持。
{ {number+1}}
{ {ok?‘YES’:‘NO’}}
{ {message.split(’’).reverse().join(’’)}}
< div v-bind:id="‘list-’+id">< /div>
这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
< !-- 这是语句，不是表达式 -->
{ {var a=1}}
< !-- 流程控制也不会生效，请使用三元表达式 -->
{ {if(ok){return message} }}

5.Vue指令

        指令带有前缀v-开头，以表示它们是Vue提供的特殊属性。
v-text
作用是设置标签的文本内容
默认写法会替换全部内容，使用插值表达式可以替换指定内容
内部支持写表达式

<span v-text="message">aaa</span>
<span v-text="message+1"></span>

< b>hello Vue!< /b> < b>hello Vue!< /b>1
v-html
作用是设置元素的innerHTML
内容中有html结构会被解析为标签
内容支持写表达式

<span v-html="message+1">指令绑定的内容会覆盖标签内的内容</span>

        hello Vue!1
v-on
作用是为元素绑定事件
事件名不需要写on指令可以简写为@
绑定的方法定义在methods属性中，可以传入自定义参数

<input type="button" value="操作1" v-on:click="oper()"/>
<input type="button" value="操作2