最近在学习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
原文地址：https://www.cnblogs.com/skylarzhan/p/10518181.html