vue resource的应用

页面骨架开发

给需要的vue文件中的标签添加属性
<script type="text/ecmascript-6">
由于header标签名不可直接用，所以app。vue文件中使用时在components: { 中修改代码
'v-header': header
在app。vue组件中html部分添加<div class="tab border-1px"></div>
css部分的样式添加
.tab
display: flex
width: 100%
height: 40px
line-height: 40px
border-1px(rgba(7, 17, 27, 0.1))
完善app。vue组件
<div class="tab border-1px">
<div class="tab-item">
<router-link to="/goods">商品</router-link>
</div>
<div class="tab-item">
<router-link to="/ratings">评论</router-link>
</div>
<div class="tab-item">
<router-link to="/seller">商家</router-link>
</div>
</div>
添加app。vue组件中激活商品等按钮的css样式
.tab-item
flex: 1
text-align: center
& > a
display: block
font-size: 14px
color: rgb(77, 85, 93)
&.active
color: rgb(240, 20, 20)

vue resource的应用和头部组件开发

添加依赖，项目根/package。json文件的"dependencies": { 里面添加 "vue-resource": "^1.3.4",
手动找到项目根目录下的eslintrc。js文件，改变打开方式，我习惯用Hbuilder
找到并修改为
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
env: {
browser: true,
},
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
extends: 'standard',
// required to lint *.vue files
plugins: [
'html'
],
// add your custom rules here
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'semi': ['error', 'always'],
'no-tabs': 0,
'indent': 0,
'space-before-function-paren': 0
}
}

在app。vue组件添加data
data() {
return {
seller: {

}
};
},
找到main。js文件添加 import VueResource from 'vue-resource';和Vue.use(VueResource);
再回到app。vue组件添加
<div class="content-wrapper">
<div class="avatar">
<img width="64" height="64" :src="seller.avatar">
</div>
<div class="content">
<div class="title">
<span class="brand"></span>
<span class="name">{{seller.name}}</span>
</div>
<div class="description">
{{seller.description}}/{{seller.deliveryTime}}分钟送达
</div>
<div v-if="seller.supports" class="support">
<span class="icon" :class="classMap[seller.supports[0].type]"></span>
<span class="text">{{seller.supports[0].description}}</span>
</div>
</div>

</div>
<div class="bulletin-wrapper" @click="showDetail">
<span class="bulletin-title"></span><span class="bulletin-text">{{seller.bulletin}}</span>
<i class="icon-keyboard_arrow_right"></i>
</div>
并设置app。vue组件的css样式
.header
position: relative
overflow: hidden
color: #fff
background: rgba(7, 17, 27, 0.5)
.content-wrapper
position: relative
padding: 24px 12px 18px 24px
font-size: 0
.avatar
display: inline-block
vertical-align: top
img
border-radius: 2px
.content
display: inline-block
margin-left: 16px

vue resource的应用相关推荐

vue -resource 文件提交提示process,或者拦截处理
this.$http.post('url',fd||data,{emulateJSON:true}).then(fn(res){},fn(res){}) process成功案例 _self.$http ...
vue - resource 使用过程的坑
一. get 传参的坑:加params对象传参(不能直接get(url, params)!!!) this.$http.get(url, {params: { offset: this.offset, ...
vue resource then
https://www.cnblogs.com/chenhuichao/p/8308993.html
vue 仿二手交易app_项目vue2.0仿外卖APP（七）
ratings评价列表页实现在ratings.vue组件里开发首先先引入seller数据: 书写模板结构: 由于评价页又有之前写过的star.vue组件,所以又要在ratings.vue组件引入: ...
vue.js插件使用(01) vue-resource
本文的主要内容如下: 介绍vue-resource的特点介绍vue-resource的基本使用方法基于this.$http的增删查改示例基于this.$resource的增删查改示例基于int ...
Vue.js——vue-resource全攻略
概述上一篇我们介绍了如何将$.ajax和Vue.js结合在一起使用,并实现了一个简单的跨域CURD示例.Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的D ...
Vue.js使用-http请求
Vue.js使用-ajax使用 1.为什么要使用ajax 前面的例子,使用的是本地模拟数据,通过ajax请求服务器数据. 2.使用jquery的ajax库示例 new Vue({el: '#app', ...
voinc vue实现级联选择
需求: vonic中实现级联选择 <!DOCTYPE html> <html> <head><title>下拉框</title><me ...
vue-router路由、mixin混入、vue-resource、axios、计算属性watch、moment.js、vuex、vue-cli、数据双向绑定、搭建vue环境、vue实例、配置启动项
路由vue-router介绍: // 1.前端路由核心:锚点值的改变,根据不同的锚点值,渲染指定dom位置的不同数据.// 2.vue中,模板数据不是通过ajax请求的,而是调用函数获取到模板内容// ...
vue概述、vue文件特点、vue核心思想、双向数据流、单文件、启动一个vue项目、声明式渲染
vue介绍: Vue:当前较火的MVVM框架,轻量.简介.高效.组件化.数据驱动,模块和渲染函数的弹性选择,简单的语法及项目创建,渲染速度极快,基于Virtual Dom,利用虚拟DOM实现快速渲染: ...

vue resource的应用

vue resource的应用相关推荐

最新文章

热门文章