vue填坑笔记：
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,
}
}
},
2、<router-link to=”/group/groupList” tag=”div” class=”img-outer”><img src=”../../assets/imgs/qzsy_qzlb.png” alt=””></router-link>
3、that.$emit(‘reGetGroupList’)
<dialogs :dialog=”dialog” @reGetGroupList=”getGroupListByAxios”></dialogs>
4、import { mapState,mapActions } from ‘vuex’
methods: {
...mapActions([
'updateDemoPosition'
])},
computed:{
...mapState([
'wxInfo'
])
},…mapActions({
setVideoPlayer:types.SET_VIEOPLAYER
}),
5、:to=”/index/${groupInfo.id}“
6、{
path: 'index/:id',
component: require('@/pages/group/Index'),
}
this.$route.params.id
url:index?id=12
this.$route.query.id
7、 mounted(){
//检测是否已经登录，如果没有就弹出注册对话框
this.$nextTick(() => {
this.registeredPopup.show = true;
});},
8、data(){
return {
img:`/circle/liveInvite?userid=${this.$route.query.userid}&circle_id=${this.$route.query.circle_id}&liveinfo_id=${this.$route.query.liveinfo_id}`
}
},
9、<img :src=”img” alt=”” @load=”loadImg”>
10、
import { Loading,LoadingPlugin } from ‘vux’
this.$vux.loading.show({
text: '正在加载图片...'
});
11、
Axios.post(‘/feed/add’,Qs.stringify({}))
Axios.get(‘/feed/add’,{
params:{
data:''}
})
12、
location.replace(location.href.replace(location.search, “”));
13、vframe/jpg/offset/1
http://cdn.mdedutech.com/xmli…
14、父组件：
<children v-model=”value”/>
子组件：
<input :value=”value”> props:{
value:[String,Number]
}
总结：父组件在使用子组件上并且使用v-model，那么子组件要通过props设置value值
15、<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))
}}
})
16、七牛获取图片信息?imageInfo
返回：{“format”:”jpeg”,”width”:640,”height”:360,”colorModel”:”ycbcr”}
18、
.then((response)=>{
if(response.data.success){
this.textData = response.data.data;
}
})
19、
// 触发组件 A 中的事件
bus.$emit(‘id-selected’, 1)
// 在组件 B 创建的钩子中监听事件
bus.$on(‘id-selected’, function (id) {
// …
})
20、<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
27异步加载组件
{
path: ‘/somepath’,
component: function (resolve) {
require(['@/pages/circle/Lists'], resolve)}
}
27、解决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();28、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/
29、vue动态设置html5 video src问题
如果设置在<video>下面的<soruce :src=...>是不起作用的，要设置在<video :src=...才起作用
30、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)
]);
}31：解决vue组件通过props获取数据后没有实时改变值问题
暂时解决方案：
props:{
lessons:{
type:Array,
default:()=>[]
}
},
computed:{
courseLessons(){
return this.lessons;
}
},32、数组更新检测
由于 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);
}33、关于一些总结
1.不要试图在子组件里面改变props的值 ，因为会让你死得很难看
2.watch属性：immediate:true,会让子组件立即执行
```
watch:{
courseType:{
immediate:true,
handler:function(newVal,oldVal){
this.getCourses();
}
}
},
```
3.this.$set(this.lessons,index,lesson);//监听数组变化并重新渲染数据34、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
}
]
},