vue学习记录：vue引入，validator验证，数据信息，vuex数据共享

最近在学习vue，关于学习过程中所遇到的问题进行记录，包含vue引入，validator验证，数据信息，vuex数据共享，传值问题记录

1、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>

2、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'}]

      }

    }

  }

3、数据信息增删，以及数组与字符串转换，数据仅显示三条

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)

4、数据共享 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'

              })

。。。。

      }

    }

5、数据传值问题

在浏览器中，如果采用params传值，连接不会出现所传的值，如果采用query传值，连接会出现所传的值

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

</router-link>

获取所传值页面id: this.$route.params.id

6、this的问题

如果需要指向，要先将this指代，不然会出现指向不明

let that = this

vue学习记录：vue引入，validator验证，数据信息，vuex数据共享

猜你喜欢