vue學習記錄：vue引入，validator驗證，數據信息，vuex數據共享

 最近在學習vue，關於學習過程當中所遇到的問題進行記錄，包含vue引入，validator驗證，數據信息，vuex數據共享，傳值問題記錄

一、vue 引入vue

vue的大體形式以下：

<template>
</template>

<script>
</script>

<style>
</style>

要引入其餘vue ，須要 import

<template>

  <div>

    <Header></Header>

    <Carous></Carous>

    <SaleNumber></SaleNumber>

    <ShopList></ShopList>

    <Footer></Footer>

  </div>

</template>



<script>

import ShopList from '@/components/ShopList'

import Header from '@/components/Header'

import Carous from '@/components/Carous'

import SaleNumber from '@/components/SaleNumber'

import Footer from '../components/Footer'

export default {

  components: {

    Footer,

    ShopList,

    Header,

    Carous,

    SaleNumber

  }

</script>


<style scoped>

</style>

二、validator驗證，在element-ui中就有能夠參照，記得給el-form里加:rules="",在單個的item裏要加prop="",參照實例

<template>   
  <el-form :label-position="labelPosition" :rules="rules" label-width="80px" :model="form">

        <el-form-item label="收貨人" prop="name">

          <el-input v-model="form.name"></el-input>

        </el-form-item>

        <el-form-item label="手機號碼" v-if="isDelivery" prop="phoneNumber">

          <el-input v-model="form.phoneNumber"></el-input>

        </el-form-item>

      </el-form>
</template>

<script>

<script>

import Header from '@/components/Header'

import qs from 'qs'

export default {

  components: {

    Header

  },

  data () {

    return {

      form: {

        name: '',

        phoneNumber: ''

      },

      rules: {

        name: [{required: true, message: '用戶名不能爲空', trigger: 'blur'}],

        phoneNumber: [{validator: (rule, value, callback) => {

          if (!value) {

            callback(new Error('手機號不能爲空'))

          } else {

            const reg = /^1[3|4|5|7|8][0-9]\d{8}$/

            console.log(reg.test(value))

            if (reg.test(value)) {

              callback()

            } else {

              callback(new Error('請輸入正確的手機號'))

            }

          }

        },

        trigger: 'blur'}],

        requirement: [{required: true, message: '打印要求不能夠爲空', trigger: 'blur'}]

      }

    }

  }

三、數據信息 增刪，以及數組與字符串轉換，數據僅顯示三條

let obj = {name: ' name '}

增長：this.array.push(obj)

刪除：this.array.splice(obj)

字符串轉換爲數組： let fileNameList = (objArray[i].fileName || '').split(' ')    // split use in vue

數據僅顯示三條：item in array.slice(0,3)

四、數據共享 vuex

基本操做能夠按照百度常有的，npm install vuex ,這裏僅僅記錄登錄後保存用戶的數據，這一塊是store的存儲數據

export default new Vuex.Store({

  state: {

    openId: '',

    globalUrl: 'http://127.0.0.1:81',

    uid: '',

    openShop: '',

    cookie: '',

    accesstoken: '',

    islogin: '0',

    nickName: ''

  },

  mutations: {

    login (state, payload) {

      state.openId = payload.openId

      state.uid = payload.uid

      state.nickName = payload.nickName

      state.openShop = payload.openShop

      state.cookie = payload.cookie

      state.accesstoken = payload.accesstoken

      state.islogin = payload.islogin

      console.log('STATE' + state.accesstoken)

    }

  }

})

這一塊是數據響應後要存儲過去的，登錄狀態也相應改變

 methods: {

    login () {

。。。。。。

              that.$store.commit('login', {

                openId: openId,

                uid: uid,

                nickName: account,

                openShop: openShop,

                cookie: cookie,

                accesstoken: accesstoken,

                islogin: '1'

              })

。。。。

      }

    }

五、數據傳值問題

在瀏覽器中，若是採用params傳值，鏈接不會出現所傳的值，若是採用query傳值，鏈接會出現所傳的值

 傳值到指定頁面<router-link :to="{name: 'ShopDetail', params: {id: item.sid }}">

</router-link>

 獲取所傳值頁面id: this.$route.params.id

六、this的問題

若是須要指向，要先將this指代，否則會出現指向不明

let that = this