vue.js总结

axios all使用方法

axios.all([ axios.delete(`http://localhost:8089/contacts/${obj.id}`),
                        axios.get('http://localhost:8089/contacts')])
            .then(axios.spread(function (res1, res2) {
                obj.success();
                console.log(res2.data)
                state.contacts = res2.data;
            }));

1、props:{

photos:{
  type: Array,
  default: () => []
},

props:{

  activityData:[Object],
  showBars:{
      type:Object,
    default:{
      likeBar:true,
      commentBar:false,
      actionSheet:true,
    }
  }
},

<router-link to="/group/groupList" tag="div" class="img-outer"><img src="../../assets/imgs/qzsy_qzlb.png" alt=""></router-link>

that.$emit('reGetGroupList')

<dialogs :dialog="dialog" @reGetGroupList="getGroupListByAxios"></dialogs>

import { mapState,mapActions  } from 'vuex'
 methods: {
    ...mapActions([
      'updateDemoPosition'
    ])
  },
 computed:{
      ...mapState([
        'wxInfo'
      ])
    },
...mapActions({
        setVideoPlayer:types.SET_VIEOPLAYER
      }),

:to="`/index/${groupInfo.id}`"

{
          path: 'index/:id',
          component: require('@/pages/group/Index'),
        }

this.$route.params.id

url:index?id=12
this.$route.query.id

mounted(){
    //检测是否已经登录，如果没有就弹出注册对话框
      this.$nextTick(() => {
        this.registeredPopup.show = true;
      });
  },

data(){
      return {
        img:`/circle/liveInvite?userid=${this.$route.query.userid}&circle_id=${this.$route.query.circle_id}&liveinfo_id=${this.$route.query.liveinfo_id}`
      }
    },

<img :src="img" alt="" @load="loadImg">

import { Loading,LoadingPlugin  } from 'vux'
this.$vux.loading.show({
        text: '正在加载图片...'
      });

11、
Axios.post('/feed/add',Qs.stringify({}))
Axios.get('/feed/add',{
   params:{
     data:''
  }
})

location.replace(location.href.replace(location.search, ""));

vframe/jpg/offset/1

http://cdn.mdedutech.com/xmli...

父组件：

<children  v-model="value"/>

子组件：
<input :value="value"> props:{
value:[String,Number]
}

总结：父组件在使用子组件上并且使用v-model，那么子组件要通过props设置value值

<currency-input v-model="price"></currency-input>
Vue.component('currency-input', {
  template: '\
    <span>\
      $\
      <input\
        ref="input"\
        v-bind:value="value"\
        v-on:input="updateValue($event.target.value)"\
      >\
    </span>\
  ',
  props: ['value'],
  methods: {
    // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
    updateValue: function (value) {
      var formattedValue = value
        // 删除两侧的空格符
        .trim()
        // 保留 2 小数位
        .slice(0, value.indexOf('.') + 3)
      // 如果值不统一，手动覆盖以保持一致
      if (formattedValue !== value) {
        this.$refs.input.value = formattedValue
      }
      // 通过 input 事件发出数值
      this.$emit('input', Number(formattedValue))
    }
  }
})

七牛获取图片信息?imageInfo

返回：{"format":"jpeg","width":640,"height":360,"colorModel":"ycbcr"}

.then((response)=>{
          if(response.data.success){
            this.textData = response.data.data;
          }
        })

// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})

<p :class="['content-showAll',{'content-hide':hideArticle}]">

21、通过slot来组合组件

22、

?imageView2/1（裁剪）/w/414/h/180/q/90
?imageView2/2（等比例缩放）/w/414/h/180/q/90

23、

box{
  &>div{
  your style
    }
}

24、

<group class="group-outer">
      <cell title="张威" inline-desc='前两天我还玩平板了，锁屏密码也是对的，但是今天...'>
        <img slot="icon" class="avatar" src="../../assets/imgs/cxtx1.png">
        <div slot="default">
          <span class="dt">2017-5-01</span>
          <badge text="1"></badge>
        </div>
      </cell>
    </group>

25、

<x-input placeholder="选择省份城市" text-align="right" placeholder-align="right" :show-clear="false">
            <div slot="label" class="xInput-l">
              <img src="../../assets/imgs/xiju2017/dd0.png">
              <span class="title">省份城市</span>
            </div>
          </x-input>
<x-input v-model="userInfo.name" title="真实姓名" :show-clear="false" placeholder-align="right" text-align="right"></x-input>

26、

forEach针对array
for in针对object

异步加载组件

{
  path: '/somepath',
  component: function (resolve) {
    require(['@/pages/circle/Lists'], resolve)
  }
}

解决vuejs上传相同图片

<input type="file" @change>不触发changeg事件方法：

<form ref="avatarForm">
                                <Avatar icon="person" size="large" />
                                <label class="btn" for="uploadAvatar">上传头像</label>
                                <input type="file" 
                                    id="uploadAvatar" 
                                    style="position:absolute; clip:rect(0 0 0 0);" 
                                    accept="image/png, image/jpeg, image/gif, image/jpg" 
                                    @change="uploadImg($event)">
                            </form>
this.$refs.avatarForm.reset();

axios提交blob图片数据给服务器：

this.$refs.cropper.getCropBlob((data) => {
                this.$refs.avatarForm.reset();

                let formdata = new FormData();
                  formdata.append('imgStream',data);
                
                let config = {
                        headers:{'Content-Type': 'multipart/form-data'  //之前说的以表单传数据的格式来传递fromdata
                    }
                };

                this.$post(`${this.$url}/teacher/uploadFileToQiniu`,formdata,config)
                .then(res=>{
                })
                .catch(err=>{
                })
            })

        
        ```
        @PostMapping("/uploadFileToQiniu")
public String uploadFileToQiniu(@RequestParam("imgStream") MultipartFile imgStream) throws IOException {
    AjaxResult result = new AjaxResult();

    InputStream content = imgStream.getInputStream();
    DefaultPutRet defaultPutRet = qiniuService.uploadImageFile(content);
    result.setMsg("上传成功");
    result.setSuccess(true);
    return JSON.toJSONString(result);
}

    参考：http://www.jianshu.com/p/84e94cc446c0
    http://xyxiao.cn/vue-cropper/example/
    
# vue动态设置html5 video src问题
    如果设置在<video>下面的<soruce :src=...>是不起作用的，要设置在<video :src=...才起作用
    
# vue render函数的使用：

render:(h,{row})=>{

                        return h('div', [
                            h('img',{
                                style:{
                                    marginRight:'5px'
                                },
                                attrs:{
                                    width:16,
                                    height:16,
                                    src:row.sex==1? 'http://oz371c4o1.bkt.clouddn.com/image/gls/commmonman.png':'http://oz371c4o1.bkt.clouddn.com/image/gls/commmonwoman.png'
                                }
                            }),
                            h('a', {
                                attrs: {
                                    href: '#'
                                },
                                on: {
                                    click: () => {
                                        this.setStudentId(row.id);
                                        this.$router.push('/student/detail')
                                    }
                                }
                            }, row.name)
                        ]);
                    }

参考：[理解Vue中的Render渲染函数](https://www.cnblogs.com/tugenhua0707/p/7528621.html)

# 解决vue组件通过props获取数据后没有实时改变值问题
暂时解决方案：

props:{

    lessons:{
        type:Array,
        default:()=>[]
    }
},
computed:{
    courseLessons(){
        return this.lessons;
    }
},


# 数组更新检测

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
举个例子：

var vm = new Vue({
data: {

items: ['a', 'b', 'c']

}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

实践：

data(){

    return {
        studentCourses:[],
    }
},

...

<div :class="['sc-list-item',{'sc-list-item-borttom':studentCourses.length-1 != index}]" 
             v-for="(studentCourse,index) in studentCourses" :key="studentCourse.id">

...

showLessons(studentCourse,index){
        studentCourse.showLesson = !studentCourse.showLesson;
        this.$set(this.studentCourses, index, studentCourse);
    }


# 关于一些总结
    1.不要试图在子组件里面改变props的值 ，因为会让你死得很难看
    2.watch属性：immediate:true,会让子组件立即执行

watch:{
    courseType:{
        immediate:true,
        handler:function(newVal,oldVal){
            this.getCourses();
        }
    }
},
```
3.this.$set(this.lessons,index,lesson);//监听数组变化并重新渲染数据

vue-router根据打包的类型名称显示不同的路由组件：

const MainIndex = () => {
  switch(process.env.NAME){
    case "qitenai":
    return import('@/pages/main/QitenaiIndex');

    case "boomabc":
    return import('@/pages/main/BoomabcIndex');

    default:
    return import('@/pages/main/QitenaiIndex');
  }
}

{
      path: '/',
      component: MainLayout,
      children:[
        {
          path:'',
          name:'首页',
          meta:{
            auth: false
          },
          component:MainIndex
        }
      ]
    },

vue.js总结

axios all使用方法

that.$emit('reGetGroupList')

父组件：

七牛获取图片信息?imageInfo

异步加载组件

解决vuejs上传相同图片

axios提交blob图片数据给服务器：

vue-router根据打包的类型名称显示不同的路由组件：

Awbeci

引用和评论

SpringCloud-WebClient使用Get和Post请求

开发插件集合

Vue.js-方法与事件

Vue使用mixins

这个前端神器，竟让滴滴、美团都爱不释手？！

使用基于 WebRTC 的 JavaScript API 在浏览器环境里调用本机摄像头

推荐一个国产的 vue 中最好用的高性能表格 vxe-table grid 在线编辑表格，流畅渲染上万条数据