vue项目中学习到的一些tip

1. 删除数组中的某一项
   • 常规做法是：

 Array.splice(index,1);

- 使用Vue.delete

this.$delete(this.array,index);

2. 简写v-bind
   • 之前遇到过一个场景，页面中的块的内容是类似的，而且块比较多，所以就想到了用v-for，但是这些块里面有input框而且placehoder的内容都不相同,所以就想到了用动态绑定的方式。

<input :value="value"  :placehoder="placehoder">

data(){
    return{
        placehoder :'this is placehoder',
        value :''
        input:{
            placehoder :'this is placehoder',
            value :''
        }
    }
}

3. vue的路由稍作优化
   • 之前的路由可能是：

    import search from ''./views/trainCourse/review.vue";
       {
           path:'/search',
           name:'search',
           component:search
       }
   

   • 修改之后的

      const Foo = resolve => {
     /* require.ensure 是 Webpack 的特殊语法，用来设置 code-split point
     （代码分块）*/
     require.ensure(['./Foo.vue'], () => {
       resolve(require('./Foo.vue'))
     })
   }
   /* 另一种写法 */
   const Foo = resolve => require(['./Foo.vue'], resolve);
   

4. 关于vue中的ajax请求，大家一般想到的是使用vue的axios或者resourse,这样就要引入整个库，但是在实际的项目中，一般只会用到一两个方法，比如说：get和post方法，所以可以自己写一个插件，里面只提供了post和get方法，后续如果需要可以在添加其他的方法。
   • 这个是插件的代码

   class XHR {
     get(url) {
       return new Promise((resolve, reject) => {
         const xhr = new XMLHttpRequest();
         xhr.onreadystatechange = () => {
           if (xhr.readyState === 4) {
             if (xhr.status >= 200 && (xhr.status < 300 || xhr.status === 304)) {
               if (xhr.responseText) {
                 resolve(JSON.parse(xhr.responseText));
               } else {
                 resolve(xhr.responseText);
               }
             } else {
               reject(`XHR unsuccessful:${xhr.status}`);
             }
           }
         };
         xhr.open('get', url, true);
         xhr.setRequestHeader('content-type', 'application/json');
         xhr.send(null);
       });
     }
     post(url, data) {
       return new Promise((resolve, reject) => {
         const xhr = new XMLHttpRequest();
         xhr.onreadystatechange = () => {
           if (xhr.readyState === 4) {
             if (xhr.status >= 200 && (xhr.status < 300 || xhr.status === 304)) {
               resolve(JSON.parse(xhr.responseText));
             } else {
               reject(`XHR unsuccessful:${xhr.status}`);
             }
           }
         };
         xhr.open('post', url, true);
         xhr.setRequestHeader('content-type', 'application/json');
         xhr.send(JSON.stringify(data));
       });
     }
   }
   /* Vue插件要求提供install方法l*/
   XHR.install = (Vue) => {
     Vue.prototype.$get = new XHR().get;
     Vue.prototype.$post = new XHR().post;
   };
   export default XHR;
   

   • 插件的调用

   /*这个插件比较常用所以就注册为全局的*/
    import httpRequest from './assets/js/httpRequest.js';
    Vue.use(httpRequest);
     /*在.vue文件里面调用*/
      this.$post(url,params).then(response=>{ ....})
      this.$get(url).then(response=>{ ....})
   

转载于:https://my.oschina.net/u/3586418/blog/1353344