从获取数据到渲染

一个组件内使用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都加上tokenif (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值,使遍历出来的数据防复用

Vue项目的数据获取到渲染操作相关推荐

Vue项目中v-for无法渲染数据
在Vue项目中,我们想要实现下面的布局效果后端返回的数据格式如下,可以看出产品列表五张图的数据位于同一个数组中而我的html结构如下: 我希望直接渲染左边一张大图,然后右边的四张小图通过v-for ...
list vue 删除后页面渲染_浅谈Vue项目实战（页面渲染+事件绑定）
页面渲染 vue是不会去操作dom节点,是有数据去操控节点,在js文件数据都在data里 *js代码片* export default { data() { return { formInline: ...
vue概述、vue文件特点、vue核心思想、双向数据流、单文件、启动一个vue项目、声明式渲染
vue介绍: Vue:当前较火的MVVM框架,轻量.简介.高效.组件化.数据驱动,模块和渲染函数的弹性选择,简单的语法及项目创建,渲染速度极快,基于Virtual Dom,利用虚拟DOM实现快速渲染: ...
修改vue项目到服务器端渲染,现有vue-cli3搭建的vue项目改ssr服务器渲染
项目简介 vue+node+koa2 安装ssr依赖 npm install vue-server-renderer webpack-node-externals cross-env --save-d ...
vue项目转换服务器端渲染,vue-server-renderer实现vue项目改造服务端渲染
这是一篇教程,从创建项目到改造项目 vue-cli创建一个项目在放你做demo的地方,创建一个项目 vue create vue-ssr // 如果你安装了vue-cli4,选择vue2的版本,以下 ...
vue项目实战-4.前端渲染.微信小程序
设置整个页面结构 1.由于是手机端项目,所以需要加上手机端相关处理,修改index.html代码,增加meta处理 <meta name="viewport" content ...
vue项目seo优化-预渲染prerender-spa-plugin配置
文章目录前言一.prerender-spa-plugin是什么? 1.优点 2.缺点二.使用步骤 1.安装 prerender-spa-plugin 2.配置 prerender-spa-plu ...
Vue项目实操cookie相关操作封装
文章目录 1 介绍 2 utils 3 Test.vue 1 介绍在vue中通常使用axios进项http请求,但是axios不带cookie,这里可自己获取cookie,放到参数中进行登录验证等, ...
vue 获取动态域名_vue项目接口域名动态获取操作
需求: 接口域名是从外部 .json 文件里获取的. 思路: 在开始加载项目前进行接口域名获取,然后重置接口域名的配置项. 实现: 1.config/index.js 文件进行基础配置 impo ...

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

从获取数据到渲染

方法步骤

其一获取数据

其二存放数据

其三使用和渲染数据

Vue项目的数据获取到渲染操作相关推荐

最新文章

热门文章

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

从获取数据到渲染

方法步骤

其一 获取数据

其二 存放数据

其三 使用和渲染数据

Vue项目的数据获取到渲染操作相关推荐

最新文章

热门文章

其一获取数据

其二存放数据

其三使用和渲染数据