VUE to Tester如果只是展示数据，可以认为是单向绑定，数据绑定到视图中，当数据变化时，视图也跟着变化。关于实现

template如何使用vue的上下文

DOM节点里引用，使用{{vue里定义的变量，函数}}
```
  <div>{{msg}}</div>
```
DOM属性里引用，如果是vue自定义的属性，可以直接写，如果不是vue自定义的，需要前面加冒号
```
  <div v-if="loading"></div>
  <div :style="vue_style"</div>
```

VUE的结构

数据，定义在data里，在DOM节点直接引用data里的数据

export default {
  name: 'HelloWorld',
  data () {
    return {
        msg: 'Hello world',
        loaiding: false,
        vue_style: 'color:red;font-size:14px'
    }
  }
}

方法，定义在methods里

export default {
  name: 'HelloWorld',
  data () {},
  methods: {
	  requestData: function(bucketId){
		  //实现函数逻辑
	  },
	  onSwitchChange: function(){
	  }
  }
}

生命周期回调函数

export default {
  name: 'HelloWorld',
  data () {},
  methods: {},
  created: {
	  //创建时，一般页面初始数据请求在这里
  },
  updated: {
	  //界面更新时的回调
  }
}

双向绑定 v-model

如果只是展示数据，可以认为是单向绑定，数据绑定到视图中，当数据变化时，视图也跟着变化。关于实现原理，可以简单的理解为，vue特殊的语法，vue在解析时可以将视图和数据的一一对应关系记录下来，然后使用类似观察者模式，当数据变化时，去查找这个一一对应的关系记录表，然后对应去改视图的内容。

而双向绑定是针对表单这类有输入的控件。就是数据绑定到表单类控件，当数据变化时，表单控件的显示内容变。当用户改变表单内容时，绑定的数据也跟着变化。这样的话，提交表单时，直接就拿到了最终的数据（变化后的数据），使用JSON.stringify直接搞成json格式提交给服务端。

//template 部分
<input type="text" v-model="user.name" />


//data数据部分
data(){
    return {
        user:{
            name: "def name"
        }
    }
}

JS 部分

script包围的部分是写JS的部分，可以把它理解成.java文件，里面的上下文都是JS的上下文，是写代码的部分。

this默认指代vue的上下文，所以通过this访问data里的数据属性和methods里的方法都是可以直接访问的

data() {
    return {
        name: "",
        gender: ""
    }
},
created: fucntion(){
    console.log(this.name)
    this.requestData()
},
methods: function(){
    requestData: function(){
        console.log(this.name)
        let url = "http://baseurl.com/request"
        let data = {id: "123", name : this.name}
        var self = this
        axios.post(url,data)
            .then(function(res){
                //注意，这里的this只的是axios的上下文了，如果要使用vue上下文，在外面转一下
                self.name = "new value here"
            })
    },
    deleteItem: function(){},
}

REF

https://vuejs.org/v2/guide/instance.html