全面總結(jié)：vue使用過程中遇到的問題解決總結(jié)（必看）

[
 {name: 'abc', age: 18},
 {name: 'def', age: 20},
 {name: 'ghi', age: 22},
]

res.list.map(item => { 
 item.isTicked ＝ false
})

axios({
 method: 'post',
 url: '/user/12345',
 data: {
 firstName: 'Fred',
 lastName: 'Flintstone'
 }
})
 .then(function (response) {
 console.log(response);
 })
 .catch(function (error) {
 console.log(error);
 });

function post (url,param) {
 return axios({
 method: 'post',
 url: url,
 data: param
 ... axios 的其他配置
 })
}

let param = {
 firstName: 'Fred',
 lastName: 'Flintstone'
}
this.post('/user/12345',param)
.then(...)
.catch(...)

let param = {
 firstName: 'Fred',
 lastName: 'Flintstone'
}
let res = await this.post('/user/12345',param)
console.log(res) // res 就是異步返回的數(shù)據(jù)

<subComponent :subData="subData"></subComponent>

data () {
 return {
 subData: {
 filed1: 'field1',
 filed2: 'field2',
 filed3: 'field3',
 filed4: 'field4',
 filed5: 'field5',
 }
 }
}

 <input type="text" v-model="field1">
 <input type="text" v-model="field2">
 <input type="text" v-model="field3">
 ....
 <input type="text" v-model="fieldn">

data () {
 return {
 field1: 'value1',
 field2: 'value2',
 field3: 'value3',
 ...
 fieldn:'valuen'
 }
}

 var param = {
 backend_field1: this.field1,
 backend_field2: this.field2,
 backend_field3: this.field3,
 ...
 backend_fieldn: this.fieldn
 }
 this.post(url,param)

 <input type="text" v-model="queryParam.backend_field1">
 <input type="text" v-model="queryParam.backend_field2">
 <input type="text" v-model="queryParam.backend_field3">
 ....
 <input type="text" v-model="queryParam.backend_fieldn">

 
 "javascript
 data () {
 return {
 queryParam:{
 backend_field1: 'value1'
 backend_field2: 'value2'
 backend_field3: 'value3'
 ...
 backend_fieldn: 'valuen'
 }
 }
 }
 "
 然后提交數(shù)據(jù)的時候這樣：
 "javascript
 this.post(url,this.queryParam)
 "

data () {
 return {
 field1: 'value1', // 控制xxx顯示
 field2: 'value2', // 頁面加載狀態(tài)
 field3: [], // 用戶列表
 ...
 fieldn: 'valuen' // XXXXXXXX
 }
}

<p>
 <p>姓名：{{user1.name}}</p>
 <p>性別：{{user1.sex}}</p>
 <p>年齡：{{user1.age}}</p>
 ...此處省略999個字段...
 <p>他隔壁鄰居的阿姨家小狗的名字：{{user1.petName}}</p>
</p>
<-- 當(dāng)然，顯示中我們不會傻到不用 v-for,我們假設(shè)這種情況無法用v-for -->
<p>
 <p>姓名：{{user2.name}}</p>
 <p>性別：{{user2.sex}}</p>
 <p>年齡：{{user2.age}}</p>
 ...此處省略999個字段...
 <p>他隔壁鄰居的阿姨家小狗的名字：{{user2.petName}}</p>
</p>

<template>
 <p>
 <p>姓名：{{user.name}}</p>
 <p>性別：{{user.sex}}</p>
 <p>年齡：{{user.age}}</p>
 ...此處省略999個字段...
 <p>他隔壁鄰居的阿姨家小狗的名字：{{user.petName}}</p>
 </p>
</template>

<script >
export default {
 props:{
 user:{
 type:Object,
 default: () => {}
 }
 }
}
</script>

<comUserInfo :user="user1"/>
<comUserInfo :user="user2"/>

<template>
 <subComponent :data="param" @dataChange="dataChangeHandler"></subComponent>
</template>

<script >
 export default {
 data () {
 return {
 param:'xxxxxx'
 }
 },
 methods:{
 dataChangeHandler (newParam) {
 this.param = newParam
 }
 }
 }
</script>

<script >
 export default {
 methods:{
 updateData (newParam) {
 this.$emit('dataChange',newParam)
 }
 }
 }
</script>

<template>
 <subComponent v-model="param"></subComponent>
</template>

<script >
 export default {
 methods:{
 updateData (newParam) {
 this.$emit('input',newParam)
 }
 }
 }
</script>

 <subComponent field1.sync="param1" field2.sync="param2"></subComponent>

<script >
 export default {
 methods:{
 updateData1 (newValue) {
 this.$emit('update:field1',newValue)
 },
 updateData2 (newValue) {
 this.$emit('update:field2',newValue)
 }
 }
 }
</script>

import xxx form 'xxx/xxx'
export default {
 name: 'component-name',
 data () {
 return {
 // ...根據(jù)業(yè)務(wù)邏輯的復(fù)雜程度，這里省略若干行
 }
 },
 computed: {
 // ...根據(jù)業(yè)務(wù)邏輯的復(fù)雜程度，這里省略若干行
 },
 created () {
 // ...根據(jù)業(yè)務(wù)邏輯的復(fù)雜程度，這里省略若干行
 },
 mounted () {
 // ...根據(jù)業(yè)務(wù)邏輯的復(fù)雜程度，這里省略若干行
 },
 methods () {
 // ...根據(jù)業(yè)務(wù)邏輯的復(fù)雜程度，這里省略若干行
 },
}

import xxx form 'xxx/xxx'
export default {
 components: {
 xxx
 },
 // 省略其他代碼
}

created () {
 // 獲取用戶信息
 this.getUserInfo()
 // 獲取系統(tǒng)信息
 this.getSystemInfo()
 // 獲取配置
 this.getConfigInfo()
},
methods:{
 // 獲取用戶信息
 getUserInfo () {...},
 // 獲取系統(tǒng)信息
 getSystemInfo () {...},
 // 獲取配置
 getConfigInfo () {...},
}