Vue 实践整理

Vue现在已经是国内前端主流框架，越来越多的人开始专注其中，最近有幸参加了一个小型vue+spring boot项目，做了一些自我总结，希望给入门的同行们一些帮助

我之前做的JSP+Servlet为主，主要掌握模板技术为JSP，Freemarker，Thymeleaf为主
也做过一些angular的一些小型练习

要入门开发一个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.前后端数据传输类型
    Json

Vue：

1.页面加载流程：vue生命周期中，主要的触发函数

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

2.如何实现数据绑定

    数据来源：computed, data

3.如何实现事件绑定

    @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.如何使用页面组件

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

8.如何在页面组件中传递，接收参数

    主子页面传参
        ：xxx.sync=’xxxx’
        子页面
          props: {
            xxx: {
              default: () => false,
              type: Boolean
            }
          },
    子页面回调
        
        子页面
            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.前端字段验证

    
      
        
          
            
          
        
      
    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
    }