Java学习笔记____Vue.js入门

前置概述：

Vue.js是类似于Angular.js的灵活前端Js框架，vue本身是一个构建数据驱动的渐进式框架

**数据驱动：**
    前提是事先将DOM与数据绑定，当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改DOM
**事件驱动：**
    通过js提供的事件对象(Document)完成某些操作，监听该事件，触发后从页面的DOM元素中逐个收集数据，然后再进行数据处理最后调用接口进行提交
    优势：
    	直观，页面做出的任何改变全部交由js处理，整个流程由自己掌控
    劣势：
        适用于小型项目，项目扩大化后代码编写成本与维护成本将急剧上升，具有较高的代码抽象与规范要求，
        整个项目代码好烂可能受制于某一个人，木桶原理

**渐进式：**
    可以只独立使用使用一部分而不是所有，具有较强的灵活性与兼容性

**双向绑定与单向绑定:**
    双向绑定：数据驱动，
        效果上视图层与模型层直接进行了交互，即数据变化更新视图，视图变化更新数据
        缺点：
            由于自动更新的特点，无法确定data改变的时机与原因，但是可以通过watch监听来实现控制
    单向绑定：
        指的是我们先把模板写好，把模板和数据（数据可能来自后台）整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里面。
        缺点：
            操控不够灵活，当用户页面数据发生改变时，必须要重新利用DOM操作获取页面数据再提交后台来处理，
            不能自动的将页面数据传给数据模型，严格地讲单向绑定的情况下没有数据模型的概念

MVVM模式:

Model-View-ViewModel

原理：
    通过DOM Listeners监听视图层，一旦视图层内容发生改变则更新模型层内容
    通过Data Bindings实现当模型层内容发生改变时更新视图层内容

本质上ViewModel与Controller还是十分类似的，都是用以控制数据的双向流转

Vue.Js相关:

**使用流程：**
    1.实例化Vue对象，格式：

		new Vue({
                  el:"",          //Vue挂载点
                  data:{          //数据模型
                      ...
                  },
                  methods:{       //方法函数
                      函数名:function({
                          ...
                      })
                  }
              });

    2.配置挂载点(控制区域)el
    3.准备数据模型data
    4.添加方法函数methods
    5.使用插值表达式进行数据展示
        [注意]:
            插值表达式可以进行数值运算，但是当进行字符串拼接时，需要使用引号包裹拼接内容，
            否则将会出现undefine

**指令：**
    事件绑定：v-on:事件        
        v-on:click            鼠标单击
        v-on:keydown          键盘按下
        v-on:mouseover        光标悬停
        ...
        **[注意]:**
            可以直接使用 @ 符号替换 v-on: 标识，如v-on:click ---> @ click
    事件修饰符：事件.修饰符
        .prevent              阻止默认
        .stop                 阻止冒泡
        .按键                 只有按下特定键位时才会触发对应事件，如：enter、space...
        ...
    文本展示：
        v-text                文本展示
        v-html                解析展示
        ...
    数据绑定：
        v-model               双向绑定
    强制绑定：v-bind:属性 或 :属性
        v-bind:color
        强制将js的属性识别为vue的属性，从而完成目标数据的替换
    循环遍历：
        v-for = "... in ..."
        [注意]:
            可以在遍历的同时显示下标,格式：v-for="(e,i) in list"
            其中e表示被遍历对象中一个元素，i表示在对象中的下标
    控制显隐：
        v-if                  标签变更
        v-show                样式变更
        [注意]:
            两者区别：if方式隐藏将会移除整个标签，show方式仅仅是变更标签的样式控制显隐，
            前者对性能影响较大适用于高安全需求，后者对性能影响相对较小，适用于高效需求

生命周期：前后可做处理
    创建实例、挂载、数据更新、销毁实例
    [注意]:
        Vue实例销毁后，实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
        该钩子在服务器端渲染期间不被调用，但是dom结构依然存在，对于实时显示的通知型组件，
        在他destroyed之前，我们必须手动removeChild()删除该节点；否则，DOM节点还是存在，影响浏览器性能

拓展：
    1.阻止浏览器默认事件           event.preventDefault();
    2.事件的传播性（冒泡）
        任何事件首先向下传播直到遇到目标元素，然后再向上冒泡返回
    3.回调函数(钩子函数)：
        一个被作为参数传递的普通函数

Axios: 详见官方中文文档https://www.kancloud.cn/yunye/axios/234846

Vue.js中使用一个第三方插件替代vue-resource，发送Ajax请求

特点：
    1.支持浏览器和node.js 
    2.支持promise
    3.能拦截请求和响应
    4.能转换请求和响应数据
    5.能取消请求
    6.自动转换JSON数据
    7.浏览器支持防止CSRF（跨站请求伪造）

格式：
    axios.请求方式(url[, data[, config]]).then(function(res){...}).catch(function(err){...})
    注：其中请求方式共计七种常用get/post，then类似ajax的成功回调函数，catch类似失败回调函数
    如：

         axios.post(url,_this.user).then(function(result){
           _this.findAll();
         }).catch(function(err){
           console.log(err);
         });

综合案例：(此案例仅提供流程思路，代码过长不作展示)

SpringBoot+SpringMVC+SpringDataJpa+Vue.js

1.准备启动类
    @SpringBootApplication
2.准备实体类
    [注意]:
        当数据库字段与实体类属性名一致时可以不用添加@Colunm注解进行映射，若字段格式清晰（如：user_name）且实体类属性名使用驼峰命名法则可以自动进行关系映射
3.准备dao持久层接口
4.准备service业务层及实现类
    [注意]:
        当查询单个对象时，由于JPA默认返回值类型为Optional<T>类型，故需要通过.get()方法获取对应泛型的对象，再进行返回
5.准备controller控制层
6.准备静态资源文件
    在resources下准备static文件夹用以存储静态资源文件
7.编写前端Vue.js代码
    1.实例化Vue对象
        设置挂载点
        准备数据模型
        准备方法函数
        准备生命周期钩子函数
        [注意]:
            挂载点即控制区域，超出其范围的组件将不接受Vue控制
    2.使用axios发送ajax请求
        [注意]:
            1.控制台打印后端响应数据：
                console.log();
              控制组件显隐：
                $(选择器).modal('show')
            2.前端this只会代表距离最近的对象实例，注意axios也算，可能需要另外定义变量代表Vue实例对象进行赋值
            3.后端响应格式可以参照控制台打印内容格式，所需的响应数据内容在data集合中