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数据共享的更多相关文章
- vue props 下有验证器 validator 验证数据返回true false后,false给default值
vue props 下有验证器 validator 验证数据返回true false后,false给default值 props: { type: { validator (value) { retu ...
- Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
- Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
- vue学习之vue基本功能初探
vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)
五 Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...
- Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)
(五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二 Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...
- Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
- Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)
Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)
- JSR303中的来验证数据信息
spring mvc之实现简单的用户管理三 博客分类: spring spring mvc spring mvc dispatcherServlet springspring mvcbean vali ...
随机推荐
- Go基础篇【第2篇】: 内置库模块 fmt
fmt官方文档说明:https://studygolang.com/pkgdoc import "fmt" mt包实现了类似C语言printf和scanf的格式化I/O.格式化动作 ...
- 制作一个简易计算器——基于Android Studio实现
一个计算器Android程序的源码部分分为主干和细节两部分. 一.主干 1. 主干的构成 计算器的布局 事件(即计算器上的按钮.文本框)监听 实现计算 2. 详细解释 假设我们的项目名为Calcula ...
- Week2 Teamework from Z.XML 软件分析与用户需求调查(四)Bing桌面及助手的现状与发展
一.Bing搜索的相关背景 第一,必应搜索前几年的发展重点在于欧美市场,并且取得了一定的成效:根据 Hitwise 的统计数据,Bing 在 2011年3 月份市场占有率突破了 30% 大关,达到 3 ...
- android命令模式IntentService 远程下载文件
服务可用在一下情景: 1,用户离开activity后,仍需要继续工作,例如从网络下载文件,播放音乐. 2,无论activity出现或离开,都需要持续工作,例如网络聊天应用. 3,连接网络服务,正在使用 ...
- Xcode 自动打包之旅【本文摘自智车芯官网】
由于公司项目很多,作为iOS端的开发工程师,在打包和上传App Store过程中超级费时,而且往往会有频繁更改需求重新打包.上传的情况.这些过程让我不胜其烦.之前有听说过自动打包,一直没有时间尝试,此 ...
- Linux TCP协议使用的变量
Linux /proc/sys/net/ipv4/* 变量 TCP变量:somaxconn - INTEGER listen()的backlog参数的上限,在用户态为SOMAXCONN.默认是1 ...
- hibernate笔记(三)
目标: 第1部分: 对象的状态: 第2部分:缓存 1) 一级缓存 2) 相关知识 ----懒加载--- 第3部分:映射 一对一映射 组件映射 继承映射 一.对象的状态 举例: User user ...
- Spark分布式执行原理
Spark分布式执行原理 让代码分布式运行是所有分布式计算框架需要解决的最基本的问题. Spark是大数据领域中相当火热的计算框架,在大数据分析领域有一统江湖的趋势,网上对于Spark源码分析的文章有 ...
- 使用HTML5的JavaScript选择器操作页面中的元素
<!doctype html><html lang="en"> <head> <meta charset="UTF-8& ...
- Flink 任务打包、提交
一.Flink版本 flink-1.6.1-bin-hadoop26-scala_2.11 二.Flink任务打包 笔者将写好的flink计算任务代码发到服务器(ubuntu16.04),在服务器端进 ...