学到了REST API，必须前后端分离了，以前逃的Vue课，现在必须再补上了学起计算机，和以前学会计这种垃圾科目，逮着一本书学完再学下一本完全不同。计算机的知识全是互相关联的，现在读到Spring in Action 5的第六章，书里已经用到了一堆Java库先不说，还马上要使用前后端分离来进行交互了。书里的前端例子都是Angular，作者也说了可以用React或者Vue都可以，之前一直想学Vue，但是Django时期没有写过什么前后端分离的项目，这次要借着这个机会，好好的学习一下Vue。老样子，找到了这个视频，在这里可以免费下载。 Vue的知识比较散，直接读官方视频容易一下迷乱，看了一下这个视频分成了几个部分还不错。先跟着视频来记录一下学习心得吧

第一个例子

什么是MVC和MVVM这里就不大篇幅说了。由于前后端分离，前端也必须像后端一样，拿到数据，进行控制和处理，然后再渲染页面，等于在页面里也搞起了MVC。Vue就是这样一个前端框架，交给浏览器的前端代码不再是原始的HTML，而是经过Vue渲染之后的代码，很像后端是经过模板处理引擎渲染的代码一样。先来写第一个Vue的例子，首先需要导入Vue。Vue的位置在Head标签的时候就可以导入，先于body标签中的内容导入，而不要放到body最后。之后就可以写一个最简单包含取值和双向绑定的页面：

<div id="app">
    <input type="text" v-on:input="changeTitle">
    <p>{{ title }}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data:{
            title:'Hello world!'
        },
        methods: {
            changeTitle: function (event) {
                this.title = event.target.value;
            }
        }

    })
</script>

一个Vue对象的实例，就相当于绑定了一个标签对应的区域的控制器。其中的el是选择器，可以选择对应的一个标签。data中是键值对，用于标识在标签区域内{{变量}}的变量名称，将其转换成字符串后渲染在其中。 methods是方法名称和对应的方法内容，像JS原来的那些方法一样，可以传入事件对象来获取值。在vue实例的内部，关于data内部的键值，都用this.键名来取，这里要注意。 v-on之类的叫做指令，指令都带有前缀v-，用于表示不同的功能。会慢慢学到。这里的v-on是事件监听器，监听事件，所以在方法中传入了event对象，再获取对应的值设置给title变量。可以看到，Vue对JS进行了重新的规划，以控制器和渲染的形式重新组织前端页面，将数据有效的绑定到最后的输出上。因为JS的灵活性，Vue也比较灵活，还需要大量的例子和总结。