看到RCTF里有道题是Flask + Vue 的题目
想快速入门一下Vue
这个题目看起来应该是Flask只是做API接口

Vue

Vue是MVVM(Model-View-ViewModel)框架

View

<div id="app">
    {{ message }}
</div>

Model

var Data = {
    message: 'Hello'
}

ViewModel

new Vue({
  el: '#app', // View
  data: Data //Model
})

ViewModel相当于把view和Model绑定起来

Demo

<div id="app">
    <p>{{ message }}</p>
    <input type="text" v-model="message"/>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        message: 'init'
    }
})
</script>

另外: 每个Vue实例都会代理其选项对象里的data属性
```javascript
var v = new Vue({
el: ‘#xxx’,
data: {
message: ‘xxxx’
}

})
v.message
// => ‘xxxx’

## 一些预定义的实例属性
vm.$data 
vm.$el

## 生命周期和钩子
钩子的 this 指向调用它的 Vue 实例
```javascript
var vm = new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// -> "a is: 1"

生命周期图示在官网有
看起来大概是有

beforeCreate created beforeMount mounted
beforeUpdate updated activated deactivated
beforeDestroy destroyed

这么多

vue-source

就像是jQuery里的$.ajax,用来和后端进行数据交互
是Vue的一个插件

A Vue instance provides the this.$http service which can send HTTP requests

// global Vue object
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

// in a Vue instance
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

发现大部分的vm.$methodName 都是 Vue.methodName 的别名

使用resource也可以达到类似的效果(那为什么提供了http和resource两种方法)

get: {method: 'GET'},
save: {method: 'POST'},
query: {method: 'GET'},
update: {method: 'PUT'},
remove: {method: 'DELETE'},
delete: {method: 'DELETE'}
// Vue.resource or vm.$resource

一个栗子

new Vue({
    data:
    {
        apiUrl: '/api/download{/token}{/fname}',
        filelist: [],
    },
    ......
    method:{
        getFilelist: function()
        {
            var resource = this.$resource(this.apiUrl)
            resource.get().then(
                (response) => 
                {
                    this.filelist = response.data
                })
        },
        downloadFile: function(n, t)
        {
            var resource = this.$resource(this.apiUrl)
            resource.get({fname: n, token: t}).then(
                (response) =>
                {
                    if(response.data['code'] == 1)
                    {
                        location.href = response.url
                    }
                    else
                    {
                        this.getFilelist()
                        alert(response.data['msg'])
                    }
                })
        }
        ......
    }
    .....
})

看这个apiUrl: '/api/download{/token}{/fname}'，里面的{/token}{/fname}相当于可选参数
当调用getFilelist时候只请求/api/download，而当downloadFile时候

resource.get({fname: n, token: t})

这里填上了{/token}{/fname}，hhhhh

那post data放在哪里，，，好像是这样子?

resource.post({arg-key:arg-value}, {post-key:post-value})

就先看到这里