如何理解Vue前后端数据交互与显示

update(){
      this.$http.get(baseURL+`api/条件`,{params:{id:this.myId}}).then(function(res){
        this.memberData = res.body;
     });
},

update(){
      this.$http.get(baseURL+`api/条件`,{id:this.myId}).then(function(res){
        this.memberData = res.body;
     });
},

console.info(`大家好，我叫${name}，今年${age}岁了`)
// 等价于
console.info('大家好，我叫' + name + '，今年' + age + '岁了')

<script>
    export default {
        data(){
            memberData[],//等待存放后端数据的接收数组
        },
        mounted(){
            this.update();//在html加载完成后进行，相当于在页面上同步显示后端数据
        },
        methods:{
            update(){
                  this.$http.get(`/api/project/${this.$store.state.project.id}`, {
                      project_id:this.$store.state.project.id,
                    }).then(doc => {
                          var code = doc.data.status;
                          var msg = doc.data.msg;
                      if (code == 0){//请求成功，可以根据不同的状态码返回值做出相应的动作
                        this.memberData = doc.data.data.member//本数组存入后端数
                      }			
                  })
            },
        },
    };
</script>

var obj = {//将所有携带参数放在一起
    project_id:this.$store.state.project.id,
    id:this.id,
    finish:checked,
    name:this.flowName
}
this.$http.post(`/api/project/${this.$store.state.project.id}/task/update`, obj)//直接传值的合集
    .then(doc => {
            var code = doc.data.status;
            var msg = doc.data.msg;
			if (code == 0){
				this.update()//更新后端数据后自动刷新前端，随着更改外观
			}
    		else{
					this.$alert(msg,'false')
			}
	});

getTaskData:function(){
	this.$http.get(`/api/project/${this.$store.state.project.id}/task/info?						id=${this.messageId}`,//根据后端提供的URL，其中?后跟参数要注意写法${}
        {params:{project_id:this.$store.state.project.id,task_id:this.messageId}})
        .then(doc=>{
            if(doc.data.data){//当有数据传来时才可获取。若是为空，则在传来的data下.xxx寻找结构中的子变量则会出错。
                this.taskData=doc.data.data;//所谓的整体大数组，包含了所有传来的数据
                this.defaultChecked=this.taskData.finish;//细分传来的数据结构并放入已声明过的变量
                this.taskRemarks=this.taskData.remarks;   
            }                  
            else
                this.taskData=null;
            }).catch(err=>{//处理错误的写法
           		this.$alert("未知错误", "false");  //服务器还没搭起来
  		 })                
},

<a href="myHome." rel="external nofollow" >OK</a>

//这里url是在data中return的自定义变量，存储链接字符串
//url:"MyHome.",
<a v-bind:href="url" rel="external nofollow"  rel="external nofollow" >OK</a>
//简写为（我简记为在需要变量名作为属性的时候，在属性前加冒号）
<a :href="url" rel="external nofollow"  rel="external nofollow" >OK</a>

onFlowPri(pri){
			this.taskpriority = pri
			this.$http
         .post(`/api/project/${this.$store.state.project.id}/task/update`, {//当紧急程度一变化的时候就向后端传输数据，仅一项变化，更改的却是全部数据，这时传输其他旧数据就会遇到问题
				project_id:this.$store.state.project.id,
				id:this.id,
				remarks:this.flowMarks,
				name:this.flowName,
				finish:this.finish,
				priority:pri,
			})
         .then(doc => {
            var code = doc.data.status;
            var msg = doc.data.msg;
				if (code == 0){
					this.update()
				}else{
					this.$alert(msg,'false')
				}
         });
},

 :value="[moment(taskDetails.t_begin), moment(taskDetails.t_end)]"

<script>import moment from 'moment'</script>

function toDateTime(time) {
	var date = new Date(time);
	var Y = date.getFullYear() + '-';
	var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
	var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
	var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
	var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
	var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());
	strDate = Y+M+D+h+m+s;
	return strDate;
}