Vue現(xiàn)在已經(jīng)是國內(nèi)前端主流框架，越來越多的人開始專注其中，最近有幸參加了一個小型vue+spring boot項目，做了一些自我總結(jié)，希望給入門的同行們一些幫助

我之前做的JSP+Servlet為主，主要掌握模板技術(shù)為JSP，F(xiàn)reemarker，Thymeleaf為主
也做過一些angular的一些小型練習(xí)

要入門開發(fā)一個web項目，主要包含以下幾點

前后端如何通信：

1.前端如何訪問后端
        import { xxxx, xxx } from '@/api/xxx'
        const app = {
          state: {
          },
          mutations: {
          },
          actions: {
            xxx ({ commit }, aaaa) {
              return xxx(aaaa)
            }
          }
        }

        export function getxxx (ddd) {
          return request({
            url: 'http://localhost:8090/xxx',
            method: 'post',
            data: ddd
          })
        }

        let that = this
        this.$store.dispatch('getVisitorList', this.searchParams).then(
          (response) => {
            that.tableData = response.data.list
            that.searchParams.pageNum = response.data.pageNum + 1
            that.searchParams.total = response.data.total
          }
        )
    2.前后端數(shù)據(jù)傳輸類型
    Json

Vue：

1.頁面加載流程：vue生命周期中，主要的觸發(fā)函數(shù)

        export default {
          name: 'xxx',
          data () {
            return {
              xxx: ''
            }
          },
          methods: {
            xxxx (xx) {
            }
          },
          mounted () {
          },
          watch: {
          },
          computed: {
            ...mapGetters([
              'xxx'
            ]),
          },
          components: {
          }
        }

2.如何實現(xiàn)數(shù)據(jù)綁定

    數(shù)據(jù)來源：computed, data

3.如何實現(xiàn)事件綁定

    @click=''

4.如何使用路由

    import Vue from 'vue'
    import Router from 'vue-router'
    import Layout from '@/views/Layout/index'
    Vue.use(Router)
    export default new Router({
      routes: [
        {
          path: '/aaa',
          name: 'aaa',
          component: Layout,
          meta: {
            title: ''
          },
          children: [
            {
              path: 'bbb',
              name: 'bbb',
              component: () => import('@/views/bbb/index'),
              meta: {
                title: ''
              }
            }
          ]
        }
      ]
    })

5.路由傳參

    父頁面:
      this.$router.push({
        path: 'xxxx',
        query: {
          id: eid
        }
      })
    子頁面：
      watch: {
        $route (to, from) {
          this.xxx = to.query.id
        }
      }

6.如何引用其他的組件

7.如何使用頁面組件

    <xxx> </xxx>
    import xxx from '@/components/xxx'
    
    components: {
        xxx
    }

8.如何在頁面組件中傳遞，接收參數(shù)

    主子頁面?zhèn)鲄?        ：xxx.sync=’xxxx’
        子頁面
          props: {
            xxx: {
              default: () => false,
              type: Boolean
            }
          },
    子頁面回調(diào)
        <xxx ：xxx.sync="empCanvas" @dddd='empSignture'></xxx>
        子頁面
            this.$emit('dddd', {vvv:''})

9.如何配置跨域

    proxyTable: {
      '/api': {
         target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''  
        }
      }
    }
    訪問后端:
        export function getVisitorList (searchCond) {
          return request({
            url: '/api/nonacnVisitor/getVisitorList',
            method: 'post',
            data: searchCond
          })
        }

10.如何配置常量

    使用vuex的store功能
    const getters = {
      xxx: state => state.bubble.xxx,
      status: () => {
        return {
          '1': 'ddd',
          '2': 'fff',
          '3': 'ggg'
        }
      }
    }
    export default getters

11.前端字段驗證

    <el-form ref="xxxForm" :model="aaaa" :rules="rrrr">
      <el-row :gutter="20">
        <el-col :span="20" :offset="1">
          <el-form-item :label="$t('fff')" prop="ddd">
            <el-input v-model="ddd"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    visitorRules: {
        ddd: [
          {
            required: true,
            message: 'ddd',
            trigger: 'blur'
          }
        ]
    }
    this.$set(this.visitorRules, 'cardNumber', this.notNull)
    this.$set(this.visitorRules, 'cardNumber', [{required: false}])
    this.$refs.visitorForm.clearValidate()
    validateRequired () {
      let isValidate = true
      this.$refs.visitorForm.validate(valid => {
        if (!valid) {
          isValidate = false
        }
      })
      return isValidate
    }