精华内容
下载资源
问答
  • vue组件封装极简实例

    2019-11-25 17:25:34
    props对象中的数据,我们可以直接在当前组件中使用 this.searchList,可以直接使用。这里要强调一下,props传过来的数据只做展示,不得修改,想修改,再新写一个data中的变量承接做数据的再处理。至于原因,同上,...
  • vue项目长用到的模板封装(使用移动端ui插件Vant) lubotu.vue代码 <template> <div class="lunboimage"> <van-swipe :autoplay="3000"> <van-swipe-item v-for="image in images" :key=...

    vue项目长用到的模板封装(使用移动端ui插件Vant)

    目录中1处的轮播图会在项目中频繁使用 特将次封装以备候用

    lubotu.vue代码

    <template>
      <div class="lunboimage">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="image in images" :key="image.id">
            <img v-lazy="image.img" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </template>
               
    <script>
    
    export default {
      name: "Lunboimage",
      data() {
        return {
        
        };
      },
      props:['images']
    };
    

    axio简易二次封装

    //response.js
    import axios from 'axios'
     
    axios.defaults.baseURL = '####.com/'
    
    function myFetch(data={}){
        if(!Object.prototype.toString.call(data)==='[object Object]'){return  alert('data is wrong')}
        if(!data.method){ data.method='get'}
        if(data.method=='get'){
            return axios.get(data.url,{params:data.params})
        }else{ return axios.post(data.url,data.params)}
    }
    export default myFetch
    
    //api.js
    import myFetch from '../utils/response.js'
    export const getthumimages = (imgid) => {
      return myFetch({
        url: '/api/getthumimages/' + imgid,
        method: 'get'
      })
    }
    

    页面中需要的使用lubotu.vue 例

    <template>
      <div class="goodsDetail">
        <div style="padding:10px">
          <Lunboimage :images="picture"></Lunboimage>
           </div>
      </div>
    </template>
    <script>
    import Lunboimage from "@/components/lubotu.vue";
    //axios封装
    import { getthumimages } from "@/api/api.js";
    export default {
      data() {
        return {
          // 轮播图片
          picture: []
        };
      },
      components: {
        Lunboimage
      },
       created() {
        this.initDetail();
        this.$store.state.value = 1;
      },
      methods: {
        // 初始化数据
        async initDetail() {
          //数据赋值
          const res = await getthumimages(id);
          for (let i = 0; i < res.data.message.length; i++) {
          //lubotu的接口在每一个页面的不一定相同 可以自行转换
            this.picture.push({ img: "" });
            this.picture[i].img = res2.data.message[i].src;
          }
        },
    
    展开全文
  • vue中使用类的封装可以创造出多个具有相同属性或方法的实例。实例们具有统一的属性和方法,能够保证数据的一致性。代码更加简洁,只需要将参数对象传入即可。 例如现在有如下需求(1、2): 类A,需要包含编号id,...
  • 主要介绍了vue.js基于v-for实现批量渲染 Json数组对象列表数据,结合实例形式分析了vue.js使用v-for遍历json格式数据渲染列表相关操作技巧,需要的朋友可以参考下
  • Vue: 将axios封装为Javascript对象

    Vue: 将axios封装为Javascript对象

    本篇博客的主要目标: 在Vue-CLI项目中封装axios为Javascript对象

    1. main.js

    引用axios、vue-axios

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    import './registerServiceWorker'
    
    Vue.config.productionTip = false;
    
    Vue.use(VueAxios, axios);
    
    new Vue({
        router,
        store,
        render: h => h(App),
    }).$mount('#app')
    

    2. Http.js

    使用 Promise 封装HTTP:

    import axios from 'axios'
    
    const http = options => {
        return new Promise((resolve, reject) => {
            const defaultOptions = {};
            const newOptions = {
                ...defaultOptions,
                ...options
            };
    
            // headers默认传递json格式数据,这里也可以设置token,每次调用都会携带
            newOptions.headers = {
                'content-Type': 'application/json;charset=UTF-8',
                ...newOptions.headers
            };
    
            // 这里可以在调用的时候看到你的method、url、data、headers等参数
            // console.log(newOptions);
            axios({
    
                headers: newOptions.headers,
                method: newOptions.method,
                url: newOptions.url,
                data: newOptions.data,
                responseType: newOptions.responseType
    
            }).then(res => {
                // 根据返回的状态码判断,注意res返回的并不一定都是status,比如小程序就是statusCode
                if (res.status == 200) {
                    // console.log(newOptions);
                    // 这里我们只需要获取返回的data中的数据即可
                    resolve(res.data);
                } else {
                    reject(res);
                }
            }).catch(err => {
                reject(err);
            })
        })
    };
    
    export default http
    

    3. .vue 文件使用

    目录层次结构如下:
    在这里插入图片描述

    
    <script>
    
    import http from '@/api/http'
    
    export default {
    
      name: 'Login',
      
        data () {
    
        return {
    
          username: null,
    
          password: null
    
        }
      
      },
      
      methods: {
    
        login() {
    
            if (this.username == null || this.username == "" || this.password == "" || this.password == null) {
    
              this.$message.warning("userName and password can't be empty!");
    
            } else {  // 输入合法
              
              var _this = this;
    
              http({
    
    					// 假设后台需要的是表单数据这里你就可以更改
    					headers: {
    
    						"Content-Type": "application/json;charset=UTF-8"
    					
    					},
    
              			method: 'post',
              			
              			// 你的后端接口地址
    					url: 'http://localhost:8080/xxxx',
    
    					data: {
    
    			            username: _this.username,
    			            password: _this.password
    
    					},
    
    					responseType: 'json'
    
    		        // 直接使用function, 而不使用箭头函数时, 不可以直接使用this
    		        // function有独立的作用域
    				}).then(function (res) {
    
    					var code = res.code;
    					var info = res.info;
    
    					if (res.code == 200) {
                
                			console.log(info);
    						_this.$router.push("/home");
    					
    					} else {
    						
                			console.log(info);
    
              			}
              
    		        // 使用箭头函数时, 则可以直接使用this
    		        // 箭头函数没有独立的作用域
    				}).catch((err) => {
    
              			console.log(err);
    				
    				});
    
            }
    
        }
    
      }
    
    
    }
    </script>
    

    由于这里采用 JSON 类型作为 数据交换格式,故 responseType: 'json’

    后端 JSON 数据格式如下,这里的 JSON 格式采用 Alibaba 的 fastjson,这里也非常推荐大家使用 fastjson,因为其非常简单,并且好用!:

    
    
    import com.alibaba.fastjson.JSONObject;
    import sun.compiler.constants.Constants;
    
    /**
     * 封装 HTTP 请求
     * author: Sun Rui
     * 2020.07.21
     */
    public class JSONUtil {
    
        public static JSONObject successJSON() {
    
            JSONObject resultJson = new JSONObject();
    
            resultJson.put("info", "QUERY_SUCCESS");
    
            resultJson.put("msg", "QUERY_SUCCESS");
            resultJson.put("code", 200);
    
            return resultJson;
    
        }
    
    
        public static JSONObject successJSON(Object info) {
    
            JSONObject resultJson = new JSONObject();
            resultJson.put("info", info);
            resultJson.put("msg", "QUERY_SUCCESS");
            resultJson.put("code", 200);
    
            return resultJson;
    
        }
    
    
        public static JSONObject errorJSON(Object info) {
    
            JSONObject resultJson = new JSONObject();
    
            resultJson.put("info", info);
            resultJson.put("msg", "QUERY_FAILED");
            resultJson.put("code", "400");
    
            return resultJson;
    
        }
    
    }
    
    
    
    展开全文
  • vue封装方法

    千次阅读 2019-03-27 14:16:48
    vue封装方法 在vue项目中,有些方法是重复使用,超过两次以上的操作,就需要考虑封装了,这样会减少代码量以及重复率。 建立一个js文件 export function 方法名 { .....方法 } export default { 方法名 } ...

    vue封装方法

    在vue项目中,有些方法是重复使用,超过两次以上的操作,就需要考虑封装了,这样会减少代码量以及重复率。

    • 建立一个js文件
      在这里插入图片描述
    export function 方法名 {
    	.....方法
    }
    
    export default {
    		方法名
    }
    

    此处可以编辑多个方法,在export default 导出去即可

    • 使用
      在需要的文件中引入js
      在这里插入图片描述
      在需要的地方调用
      在这里插入图片描述
    展开全文
  • * 存放 ** 数据 * **/ // initial state const state = { all: { ID:'', BrandID:'' } } // getters const getters = {} // actions const actions = {} // mutations const mutations = { setPrint...
  • 先npm install axios npm install axios 我自己分装了请求方法所以单独的建了一个文件 创建了utils文件夹 在里面新建了 ...import VueCookies from 'vue-cookies';//这是cookies的npm 根据自己的需求这个可以忽略...

    先npm install axios

    npm install axios
    

    我自己分装了请求方法所以单独的建了一个文件 创建了utils文件夹 在里面新建了 request.js文件

    在这里插入图片描述
    request.js文件

    import axios from 'axios';
    import VueCookies from 'vue-cookies';//这是cookies的npm  根据自己的需求这个可以忽略
    export default {
    //method 是请求方法 post,get 
    //url 是请求的地址 
    //data 是入参 {} 是对象 如 data={user_id:'212',id:'12'}
      Ajax: function (method, url, data) {
        return new Promise((resolve, reject) => {
          axios({
              method: method,
              url: url, //本地调试
              // url: process.env.API_ROOT + url, //打包
              data: data,
              dataType: 'jsonp',
              headers: {
                Token: VueCookies.get('token'),//这是我要从cookie中拿取的数据 后台要在header中传两个固定的值  你可以根据自己的情况去定义这的值  也可以值改成变量传值过来
                Logintime: VueCookies.get('logintime'),//header 这的传值可以删除 根据自己的需求
              },
            })
            .then(res => {
            //res返回的参数自己起名字这里必须是res.data  axios返回数据多一层data
              resolve(res.data);
            })
            .catch(err => {
              reject(err);
            });
        });
      },
      }
    

    在min.js页面中

    import request from './utils/request'
    Vue.prototype.request = request
    //定义成了全局方法  在.vue页面中 直接this.request.Ajax() 就可以调用了
    //你也可以在request.js 中写其他的方法  也是可以调用 this.request.login() 这是调用其他的方法
    new Vue({
      el: '#app',
      router,
      store,
      components: {
        App
      },
      template: '<App/>'
    })
    
    

    这个时候就完成了 可以去请求数据了 在index.vue中 这里就没有必要在去 引用request.js 文件了 因为已经设置成全局方法了

    created(){
    	let data={user_id:'123'}
    	this.request.Ajax("post", "https://baidu.com",data).then(res=>{
    		console.log(res)
    		//res 可自己定义名称这个不是固定的些什么东西
    		//这里是请求成功了
    		//上面的分装  resolve(res.data);写成了 resolve(res); 你打印出来的会多一层data
    	}).catch((err){
    		console.log(err)
    		//这里是失败
    	})
    }
    

    后面有一篇文章我会写到 请求跨域 做代理的方法

    展开全文
  • 主要介绍了Vue简单封装axios之解决post请求后端接收不到参数问题,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • VUE封装js方法

    2020-06-28 08:45:21
    import Vue from 'vue' //axios import axios from 'axios'; //需要跳转路由的 function toRouter(url, parameter) { router.push({ path: url, query: parameter }); }; // 删除 function dele(url, parameter,...
  • Vue封装组件的过程

    万次阅读 多人点赞 2018-03-20 09:41:05
    vue组件的定义 ● 组件(Component)是Vue.js最强大的功能之一 ● 组件可以扩展HTML元素,封装可...● 所有的Vue组件同时也都是Vue实例,所以可以接受相同的选项对象(除了一些根级特有的选项),并提供相同的生命周...
  • 组件化是Vue中的重要思想,当我们对vue的基本知识有了一定的基础就要开始封装组件了 它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用。组件树。 组件化思想的应用 1.在项目中充分...
  • 在用select组件的时候,官方给出的例子是option 里面的value绑定一个值(不能是对象,绑定的对象的话就会出问题)。但是在开发过程中,确实遇到了需要绑定对象的时候,看官方文档根本没发现怎么解决,后来通过百度,...
  • vue封装Axios的get、post请求

    千次阅读 多人点赞 2021-02-27 16:55:30
    Axios 在vue项目中用的较多,每次都要写一遍很是不方便,尤其其中的config配置项是公用的,完全可以封装一下,这样下次再用就可以直接CV了!毕竟CV大法香啊! 封装 Axios 基础配置 创建一个request.is 文件,内容...
  • 主要介绍了在vue中使用Echarts利用watch做动态数据渲染操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • VUE 封装请求参数 json 中键是变量

    千次阅读 2020-04-07 19:24:19
    红色部位 即关键代码 // 表中中直接开和关 switchcontrol (userId, userName, status, attr1, attr2) { var jsonObj = {'userId': userId} var key1 = attr1 //表中字段 var value1 = status ...
  • 在发送请求前将数据用qs模块转化 修改请求头的Content-Type=’application/x-www-form-urlencoded’ 具体配置如下: import axios from 'axios' import qs from 'qs' // 添加请求拦截器 axios.interceptors.request...
  • 主要介绍了Vue 使用formData方式向后台发送数据的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue封装element中table组件

    万次阅读 2019-09-26 21:48:13
    后台管理系统中,table表格是最常用的,而且权限控制到按钮颗粒度的时候,要控制操作列的按钮,所以决定封装一下,方便使用 1.新建一个Table.vue文件 <template> <div> <el-table v-loading=...
  • Vue组件封装的过程

    千次阅读 多人点赞 2020-09-09 18:02:16
    所有的Vue组件同时也都是Vue实例,所以可以接受 相同的选项对象(除了一些根级特有的选项),并提供 相同的生命周期钩子函数 vue组件的功能 能够把页面抽象成多个相对独立的模块 实现代码重用,提高开发效率和...
  • vue封装jsonp

    2018-12-05 16:39:00
    一、安装jsonp 二、封装 转载于:https://www.cnblogs.com/shaoshuai0305/p/10071779.html
  • vue封装公共echarts组件

    2020-06-20 15:03:37
    下载echarts ...Vue.prototype.$echarts = echarts components文件下新建echartsPie.vue文件 <template> <div :id="this.id" style="width:100%;height:100%"></div> </t.
  • vue封装组件(简单入门)

    千次阅读 2019-03-04 15:34:49
    然后因为这两天在搞tinymce富文本技术预言,所以也是跟着网上的案例半懂不懂的弄出来了,但是对其中封装的组件调用确实很不明白,所以也是在文档和网上似是非是的介绍中搞了一下,所以也是写下来作为学习vue的一个小...
  • vue封装ztree

    千次阅读 2019-01-14 11:59:54
    —- ztree封装vue树,依赖ztree3.5版本的css和js,setting配置项等配置可查看ztree官网的api文档。要正常使用,则项目需要引入jQuery--&gt; &lt;style&gt; @import "./ztree/metroStyle/metro...
  • 定义图表公共样式是为了统一同一网站各页面图表的基础样式baseOption.js(轴线、区域、高亮样式),统一封装后页面需要直接引入,传入所需参即可覆盖基础样式。以下示例封装图表组件Echart.vue
  • vue封装树形组件tree

    千次阅读 2018-08-04 11:25:19
     我们项目中有很多需要用到树形组件的,以前写jq的时候用ztree,现在写vue,感觉找不到像ztree一样好用的树形组件,又不想在vue总用jq,所以打算自己封装一个tree组件,花了两个时间才搞完一些基本功能,不过已经...
  • vue 使用axios封装

    千次阅读 2021-04-23 11:20:35
    先下载好axios然后进行封装 npm install axios import axios from 'axios' export default { apiGet(url, params) { var that=this return new Promise((resolve, reject) => { axios.get(url, {params})....
  • vue如何封装一个组件

    千次阅读 2019-12-26 14:46:07
    vue如何封装一个组件 1.新增子组件 在工程src->components目录下新建一个文件夹用于存放组件。 我封装了一个树组件,文件夹名称为va-tree,里面有一个va-tree.vue文件,写了树组件的具体内容,包括组件样式、组件...
  • Vue请求接口封装

    千次阅读 2019-11-13 16:10:07
    vue接口封装 封装请求方法 import axios from 'axios' import { Message } from 'iview' //axios请求拦截 service.interceptors.response.use(response => { //统一处理返回信息 const res = response.data ...
  • Vue封装的组件全局注册并引用

    千次阅读 2019-06-26 10:04:47
    vue接触的多了之后,你可能也会到自己封装组件的程度,试想每个页面的功能级模块全部拆分成组件,然后后续请求后台数据传入进去或者自己模拟数据,是多么方便的一件事情。 每当我们需要修改的时候,只需维护那一...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 35,163
精华内容 14,065
关键字:

vue封装对象数据

vue 订阅