vue学习记录：vue引入，validator验证，数据信息，vuex数据共享
Posted skylarzhan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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数据共享的主要内容，如果未能解决你的问题，请参考以下文章