Vue项目的数据获取到渲染操作

从获取数据到渲染

一个组件内使用Element UI来布局样式后
我们在vue组件页面内接下来就是

1. 获取数据
2. 存放数据
3. 以及渲染数据

因为vue是由数据操作视图,所以我们首先要获取到我们的数据,

其一 获取数据

使用api文档存放请求而来的数据

//用axios来获取数据,所以要引入axios
import axios from 'axios';

class HttpRequest {
  constructor(options){
    this.defaults = {
      baseUrl: ''
    }
    this.defaults = Object.assign(this.defaults, options);
  }
  setConfig(){

  }
  interceptors(install){
    install.interceptors.request.use(
      config => {
        let token = localStorage.getItem('token');
        // 判断是否存在token，如果存在的话，则每个http header都加上token
        if (token) {  
          config.headers.authorization = `token ${token}`;
        }
        return config;
      },
      err => {
        return Promise.reject(err);
      }
    );
    install.interceptors.response.use(
      res => {
        const { data, status } = res;
        return data;
      },
      err => {
        return Promise.reject(err);
      }
    );
  }
  request(options){
    options = Object.assign(this.defaults, options)
    const instance = axios.create(options)
    this.interceptors(instance);
    return instance
  }
}
//中间穿插其他的传入数据的方法

export async function postComment(params){
  return await http.post('/menu/comment', params);
}

先要从后端写的的api文档,获取到我们所需数据的方法,
引入 :: improt {getdata} from '/api文件路径'
使用 ::可以在声明周期内的挂载后阶段使用,也可以在点击事件内使用,具体使用方法因情景而定(注意:某些数据在挂载后的时候还未能获取到,所以我们在使用api方法之后,打印数据尽量在methods内使用方法打印到控制台)

mounted(){
	getdata().then((data)=>{
		console.log(data);//@1 有时数据会因为阶段问题无法获取到
	})
},
methods:{
	btn(){
		getdata().then(({data})=>{//data,外包一层大括号是解构赋值,我们可以直接拿到深一层的数据
			console.log(data);//@2 所以个人建议用事件在触发
			this.getdata = data
		})
	}
}

其二 存放数据

当我们成功引入数据到组件内部,我们还无法直接使用它,我们需要用数据把它存起来,方便我们之后在页面上直接渲染使用

data(){
	return{
		getdata:''
	}
}

组件内的data这样写是为了防止他们的数据存放地址为同一地址,return之后的数据,
它不会在你改变一个位置的数据后,将页面上所有使用这个数据的地方全部修改,
因为他们的数据存放地址不同,所以我们才会用写函数的方式来书写它

其三 使用和渲染数据

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。

还可以使用v-html,v-text等vue指令

还有v-for遍历循环指令,使用时记得用v-bind绑定key值,使遍历出来的数据防复用