Vue超详细学习笔记
引言：
本文主要分享了在学习Vue时候的一些笔记，包括Vue环境的搭建、常用的指令（v-for、v-on、v-model）、Vue-cli脚手架（环境的搭建、初始化项目对应的关系、简单的案例展示）、Vue-router（环境的搭建、单页面多显示问题、导航问题、子路由）、ElementUI环境的搭建以及使用、最后分享了一个案例综合了所有知识（附源码）；
1. Vue简介及环境搭建
Vue是一套用于构建用户界面的渐进式框架；与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合；
- Vue官网：https://vuejs.org/
- 是一个构建用户界面的框架
- 数据驱动和组件化的前端开发
- 实现响应式的数据绑定和组合视图组件
1.1 下载node.js
http://nodejs.cn/
- 无脑点击下一步
1.2 live-server使用
win+r输入cmd进入
安装cnpm，淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
对npm进行全局安装
cnpm install live-server -g #国内镜像
查看版本，看到版本号—>安装成功
清除缓冲
npm cache clean -f
1.3 Vue案例
ctrl+~键打开命令框
输入
mkdir temp//创建文件夹
编写index.html
<html>
<head>
<title>VueDemo</title>
</head>
<script src="/assets/js/vue.js">
</script>
<p></p>
<body>
<h2>The First Vue Demo</h2>
<div id="div1">
<p>{
{mes}}</p>
</div>
<script>
new Vue({
el:'#div1',
data:{
mes:'Hello Vue!!!'
}
})
</script>
</body>
</html>
初始化项目，生成package.json
npm init
在项目目录中打开
live-server
运行结果
2. 常用指令及案例
2.1 v-if和v-show
- v-if是vue的一个内部指令，作用于HTML中，根据表达式的值的真假条件，销毁或重建元素；
- v-show根据表达式之真假值，切换元素的 display CSS 属性
2.2 v-for
v-for指令是循环渲染一组data中的数组，需要以 item in items 形式，items是源数据数组并且item是数组元素迭代的别名。
<html>
<head>
<title>vfor</title>
<script src="/assets/js/vue.js"></script>
</head>
<body>
<div id="vfor">
<span>是否显示</span>
<div v-if="ifshow">
<ul>
<li v-for="h in hobby">{
{h}}</li>
</ul>
</div>
<div>
<h3 v-for="person in persons">
<span v-text="msg"></span>
{
{person.pid}}- {
{person.pname}}- {
{person.page}}
</h3>
</div>
<hr/>
<div v-text="msg">
msg
<div>
<h2>Two title</h2>
</div>
</div>
</div>
<script>
new Vue({
el:'#vfor',
data:{
msg:'this is message!!!',
ifshow:true,
hobby:['baskerball','football','pingpang'],
persons:[{
'pid':1001,'pname':'kak','page':18},
{
'pid':1002,'pname':'kak','page':28},
{
'pid':1003,'pname':'kak','page':13}
]
}
});
</script>
</body>
</html>
- 先在js里定义了hobby、persons数组，然后在模板中用v-for循环出来，需要那个html标签循环，v-for就写在那个上边；
2.3 v-text和v-html
当我们网速很慢或者javascript出错时，会显示{ {xxx}}；Vue提供的v-text、v-html可以解决这个问题；
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-text、v-html</title>
<script src="/assets/js/vue.js"></script>
</head>
<body>
<div id="app">
<p v-text="message">hello</p>
<span v-html="msgHtml">abc
</span>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'hello vue',
msgHtml:'<h2>wellcome to vue world!</h2>'
}
})
</script>
</body>
</html>
2.4 v-on
v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码；
- 还可以使用@click代替v-on
<html>
<head>
<title>Add</title>
<script src="/assets/js/vue.js"></script>
</head>
<body>
<div id="von">
<p>number:{
{num}}</p>
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button><br/>
<button @click="add">加</button>
<button @click="sub">减</button>
</div>
<script>
new Vue({
el:'#von',
data:{
num:100
},
methods:{
add:function(){
this.num = this.num + 1;
},
sub:function(){
this.num --;
}
}
});
</script>
</body>
</html>
2.5 v-model
绑定数据源：就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定；我们需要vue实例可以帮我们渲染数据并响应式的监听数据修改，同时我们还需要监听用户行为，如果用户在标签上面修改了数据，我们需要获取到数据可以使用v-mode指令；
<html>
<head>
<title>v-model</title>
<script src="/assets/js/vue.js"></script>
</head>
<body>
<div id = "vmodle">
number1:{
{num1}}<br/>
number2:{
{num2}}<br/>
<p>
number1:<input type="text" v-model="num1"/><br/>
number2:<input type="text" v-model="num2"/><br/>
</p>
<!-- 加的方法 -->
<button @click="add">+</button>
<!-- 减的方法 -->
<button @click="sub">-</button><br/>
result:{
{result}}
<!-- v-bind图片 -->
<p><img v-bind:src="imgSrc" @click="change"/></p>
</div>
<script>
new Vue({
el:'#vmodle',
data:{
num1:10,
num2:20,
result:0,
imgSrc:'assets/img/01_af.jpg'
},
methods:{
add:function(){
this.result = parseInt(this.num1) +parseInt(this.num2);
},
sub:function(){
this.result = parseInt(this.num1) -parseInt(this.num2);
},
change:function(){
this.imgSrc = 'assets/img/01_csd.jpg'
}
}
}) ;
</script>
</body>
</html>
2.6 v-bind
- v-bind是处理HTML中的标签属性的
<html>
<head>
<title>v-bind</title>
<script src="/assets/js/vue.js"></script>
</head>
<body>
<div id = "vbind">
<!-- v-bind图片 -->
<p><img v-bind:src="imgSrc" @click="change"/></p>
</div>
<script>
new Vue({
el:'#vbind',
data:{
imgSrc:'assets/img/01_af.jpg'
},
methods:{
change:function(){
this.imgSrc = 'assets/img/01_csd.jpg'
}
}
}) ;
</script>
</body>
</html>
- 在html中用v-bind:src=”imgSrc”的动态绑定了src的值，这个值是在vue构造器里的data属性中找到的；
3. Vue-cli
Vue-cli是vue官方出品的快速构建单页应用的脚手架，致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样可以专注在撰写应用上，而不必花好几天去纠结配置的问题。
3.1 安装vue-li
查看版本，出现版本正确
用npm命令安装vue-cli
cnpm install vue-cli -g
- -g：代表全局
查看版本
- 如果出现版本号，说明已经顺利的把vue-cli安装成功
3.2 初始化项目
需要用vue init命令来初始化项目
vue init <template-name> <project-name>
- init：表示初始化项目
- < template-name >：表示模板名称，vue-cli官方为我们提供了5种模板，一般使用webpack（全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展）；
- < project-name >：项目名字
输入命令后，会询问几个简单的选项如下：
- Project name :项目名称 ，如果不需要更改直接回车就可以了，不能使用大写；
- Project description:项目描述，默认为A Vue.js project,直接回车，不用编写；
- Author：作者；
- Install vue-router? 是否安装vue的路由插件需要安装，选择Y；
- Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格，不需要输入n；如果是大型团队开发，最好是进行配置；
- setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，这里不需要，所以输入n；
- Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n；
如果下载超慢可以使用下面指令后再创建项目：
cnpm install --save-dev webpack
3.3 运行项目
npm run dev
3.4 结束运行
Ctrl+C
3.5 Vue-cli案例
3.5.1 App.vue
<template>
<div id="app">
<!-- <img src="./assets/logo.png"> -->
<router-link to="/">首页</router-link>
<router-link to="/my">Form</router-link>
<router-link to="/main">Main</router-link>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
3.5.2 HelloWord.vue
<template>
<div class="hello">
<h1>{
{ msg }}</h1>
<h2>默认页面</h2>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
3.5.3 my.vue
<template>
<!-- 视图显示部分-->
<div>
<div id="leftScope" class="leftClass">
<h2>左边区域</h2>
</div>
<div id="rightScope" class="rightClass">
<div id="forms">
<h2>表单提交</h2>
<form>
UserName:<input type="text" name = "username" v-model="userInfo.username"/><br/>
PassWord:<input type="password" name="password" v-model="userInfo.password"/><br/>
age:<input type="text" name="age" v-model="userInfo.age"/><br/>
<button @click="login">LOGIN</button>
</form>
</div>
</div>
</div>
</template>
<script>
// 编写js行为
export default {
name:'MyVue',
data(){
return{
userInfo:{
'username':'','password':'','age':18}
}
},
methods:{
login:function(){
alert(this.userInfo.username+"-"+this.userInfo.password+"-"+this.userInfo.age);
}
}
}
</script>
<style scoped>
/*CSS样式*/
.leftClass{
float: left;
left: 0;
top:0;
width: 200px;
height: 400px;
background-color: aquamarine;
}
.rightClass{
float: left;
left: 210px;
top:0;
width: 1000px;
height: 400px;
background-color:aqua;
}
</style>
3.5.4 index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import MyVue from '@/components/my'
import Main from '@/view/main.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path:'/my',
component:MyVue
},
{
path:'/main',
component:Main
}
]
})
3.5.5 结果展示
3.5.6 对应关系
4. Vue-router
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得轻松；这里的路由并不是指我们平时所说的硬件路由器，而是SPA（单页应用）的路径管理器也就是说vue-router就是我们WebApp的链接路径管理系统；
4.1 安装vue-router
如果用vue-cli脚手架来搭建项目，配置过程会选择是否用到路由，如果选择y，后面下载依赖会自动下载vue-router；
用npm命令安装vue-router
npm install vue-router
4.2 路由文件
4.3 增加一个my.vue
地址栏输入http://localhost:8080/#/my的时候出现一个新的页面;
-
在src/components目录下，新建 my.vue 文件
<template> <!-- 视图显示部分--> <div> <div id="leftScope" class="leftClass"> <h2>左边区域</h2> </div> <div id="rightScope" class="rightClass"> <div id="forms"> <h2>表单提交</h2> <form> UserName:<input type="text" name = "username" v-model="userInfo.username"/><br/> PassWord:<input type="password" name="password" v-model="userInfo.password"/><br/> age:<input type="text" name="age" v-model="userInfo.age"/><br/> <button @click="login">LOGIN</button> </form> </div> </div> </div> </template> <script> // 编写js行为 export default { name:'MyVue', data(){ return{ userInfo:{ 'username':'','password':'','age':18} } }, methods:{ login:function(){ alert(this.userInfo.username+"-"+this.userInfo.password+"-"+this.userInfo.age); } } } </script> <style scoped> /*CSS样式*/ .leftClass{ float: left; left: 0; top:0; width: 200px; height: 400px; background-color: aquamarine; } .rightClass{ float: left; left: 210px; top:0; width: 1000px; height: 400px; background-color:aqua; } </style> -
引入MyVue组件：我们在router/index.js文件的上边引入MyVue组件
import MyVue from '@/components/my' -
增加路由配置：在router/index.js文件的routes[]数组中，新增加一个对象，代码如下：
{
path:'/my',
component:MyVue
}
4.4 router-link制作导航
<router-link to="/">首页</router-link>
- 导航路径，在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 /
4.5 传值问题
4.5.1 通过name传值
{
path:'/userInfo',
name:'This is Kak',
component:User
},
//接收
currentUser:{
{
$route.name}}
4.5.2 通过标签to传值
- to属性进行传参，需要您注意的是这里的to要进行一个绑定，to前面要加冒号；
<router-link :to="{name:'eqp',params:{
'pname':'Kak','age':23}}">商品管理</router-link><p/>
- name：就是我们在路由配置文件中起的name值。
- params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。
{
path:'/goodsInfo',
name:'eqp',
component:Goods
}
- name：就是传过来的name
<p>
name:{
{$route.name}}<br/>
pname:{
{$route.params.pname}}<br/>
age:{
{$route.params.age}}
</p>
- 就收数据
4.5.3 通过URL传递参数
- 传入参数
<router-link to="/otherInfo/kak/23">其他管理</router-link><p/>
- 路由配置文件里制定了这两个值
{
path:'/otherInfo/:name/:age',
component:Others
}
- 接收值
<p>
name:{
{$route.params.name}}<br/>
age:{
{$route.params.age}}
</p>
4.6 子路由
也就是菜单的路由方式，子路由的情况一般用在一个页面有他的基础模版，然后它下面的页面都隶属于这个模版，只是部分改变样式；
在需要的单页面多显示的位置加入
<router-view/>
编写router/index.js代码
export default new Router({
routes: [
{
path: '/home',
name: 'Home',
component: Home,
children:[
{
path:'/',component:Welcome},
{
path:'/userInfo',component:User},
{
path:'/goodsInfo',name:'eqp',component:Goods},
{
path:'/otherInfo/:name/:age',component:Others}
]
},
]
})
4.7 重定向
把原来的component换成redirect参数就可以；
{
path:'/otherInfo/:name/:age',
redirect:Others
}
5. 使用Element组件
Element，一套基于 Vue 2.0 的桌面端组件库；
5.1 安装Element组件
用npm命令安装Element组件
npm install element-ui --S
导入element的js库以及样式
import ElementUI from './router'
import 'element-ui/lib/theme-chalk/index.css'
//全组件加载
Vue.use(ElementUI);
5.2 引入案例
5.2.1 进入官网、找需要的类型、查看代码
5.2.2 编写login.vue
加入对应的样式
<template>
<!-- 视图显示部分-->
<div>
<h2>登录页面</h2>
<div id="inputStyle" class="inputClass">
<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
<el-form-item label="用户名" prop="uname">
<el-input type="text" v-model="ruleForm2.uname" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="验证码" prop="code">
<el-input v-model.number="ruleForm2.code"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
<el-button @click="resetForm('ruleForm2')">重置</el-button>
<el-button type="text"><router-link to="/">回到首页</router-link></el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
// 编写js行为
export default {
name:'Login',
data(){
return {
ruleForm2: {
uname: '',
pass: '',
code: ''
}
}
},
methods: {
submitForm(formName) {
this.$message(this.ruleForm2.uname+this.ruleForm2.code);
//
if(this.ruleForm2.uname=='admin'){
//登录成功
// 导航到后台主页
this.$router.push("/home");//使用编程式动态路由
}else{
this.$router.push("/");
}
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style scoped>
.inputClass{
padding: 20px;
width: 300px;
height: 250px;
margin: 0 auto;
}
.Codename{
margin-right: 227px;
padding: 10px;
font-family: PingFang SC
}
.name{
margin-left: -237px;
padding: 10px;
font-style: inherit
}
</style>
5.2.3 在index.js中引入
{
path:'/login',
component:Login
}
5.2.4 页面展示
6. 综合案例
6.1 整体思路
将默认页面修改为index.vue，将页面分为（heard、Main、footer）三部分；左上角跳转登录和添加活动界面；中间是轮播图；点击添加活动跳转添加页面；点击登录跳转登录界面；只要是admin跳转主页面、不是则回到首页；进入主页面首先显示欢迎页，然后利用子路由单页多显示；
6.2 index.js
import Vue from 'vue'
import Router from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Home from '@/views/home'
import User from '@/views/userInfo/usersinfo'
import Goods from '@/views/goodsinfo/showGoods'
import Others from '@/views/other/otherView'
import Login from '@/views/login.vue'
import Register from '@/views/register.vue'
import Welcome from '@/views/welcome'
import FirstPage from '@/views/index'
Vue.use(Router)
Vue.use(ElementUI);
export default new Router({
routes: [
{
path:'/',
component:FirstPage
},
{
path:'/login',
component:Login
},
{
path:'/regist',
component:Register
},
{
path: '/home',
name: 'Home',
component: Home,
children:[
{
path:'/',component:Welcome},
{
path:'/userInfo',component:User},
{
path:'/goodsInfo',name:'eqp',component:Goods},
{
path:'/otherInfo/:name/:age',component:Others}
]
},
]
})
6.3 index.vue
<template>
<div>
<el-container>
<el-header>
<div class="sousuo">
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
</div>
<div class="Lr">
<router-link to="/login">登录</router-link>
<router-link to="/regist">添加活动</router-link>
</div>
<div class="fonts">
<b>娱乐天地</b>
</div>
</el-header>
<el-main>
<div class="block">
<el-carousel height="545px">
<el-carousel-item v-for="item in items" :key="item">
<img :src="item" class="imgSize"/>
</el-carousel-item>
</el-carousel>
</div>
</el-main>
<el-footer>
<div id="footer">
<p>©kak.com 京ICP证XXXXX号，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
</div>
</el-footer>
</el-container>
</div>
</template>
<script>
export default {
name:'FirstPage',
data(){
return{
items:['https://img-blog.csdnimg.cn/20200828150734825.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYwMTEzNg==,size_16,color_FFFFFF,t_70#pic_center',
'https://img-blog.csdnimg.cn/20200828150734958.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYwMTEzNg==,size_16,color_FFFFFF,t_70#pic_center',
'https://img-blog.csdnimg.cn/20200828150810950.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYwMTEzNg==,size_16,color_FFFFFF,t_70#pic_center',
'https://img-blog.csdnimg.cn/2020082815084381.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYwMTEzNg==,size_16,color_FFFFFF,t_70#pic_center'
]
}
}
}
</script>
<style>
.imgSize{
height: 545px;
width: 1500;
}
.sousuo{
float: right;
}
.Lr{
float: left;
}
.fonts{
float: left;
margin-left: 500px;
font-family: fantasy;
font-size: 30px;
font-style: normal;
font-weight: lighter;
letter-spacing:20px;
color: brown;
}
.el-header,.el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 545px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
/* 轮播图 */
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 150px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
6.4 register.vue
<template>
<!-- 视图显示部分-->
<div id="registId" class="registClass">
<h2>添加活动界面</h2>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="账号" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="即时配送" prop="delivery">
<el-switch v-model="ruleForm.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')"><router-link to="/">重置</router-link></el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name:'Register',
data() {
return {
ruleForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
rules: {
name: [
{
required: true, message: '请输入活动名称', trigger: 'blur' },
{
min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{
required: true, message: '请选择活动区域', trigger: 'change' }
],
date1: [
{
type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
date2: [
{
type: 'date', required: true, message: '请选择时间', trigger: 'change' }
],
type: [
{
type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
],
resource: [
{
required: true, message: '请选择活动资源', trigger: 'change' }
],
desc: [
{
required: true, message: '请填写活动形式', trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style scoped>
/*CSS样式*/
.registClass{
/* float: right; */
padding: 20px;
width: 700px;
height: 250px;
margin: 0 auto;
}
</style>
6.5 login.vue
<template>
<!-- 视图显示部分-->
<div>
<h2>登录页面</h2>
<div id="inputStyle" class="inputClass">
<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
<el-form-item label="用户名" prop="uname">
<el-input type="text" v-model="ruleForm2.uname" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="验证码" prop="code">
<el-input v-model.number="ruleForm2.code"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
<el-button @click="resetForm('ruleForm2')">重置</el-button>
<el-button type="text"><router-link to="/">回到首页</router-link></el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
// 编写js行为
export default {
name:'Login',
data(){
return {
ruleForm2: {
uname: '',
pass: '',
code: ''
}
}
},
methods: {
submitForm(formName) {
this.$message(this.ruleForm2.uname+this.ruleForm2.code);
//
if(this.ruleForm2.uname=='admin'){
//登录成功
// 导航到后台主页
this.$router.push("/home");//使用编程式动态路由
}else{
this.$router.push("/");
}
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style scoped>
.inputClass{
padding: 20px;
width: 300px;
height: 250px;
margin: 0 auto;
}
.Codename{
margin-right: 227px;
padding: 10px;
font-family: PingFang SC
}
.name{
margin-left: -237px;
padding: 10px;
font-style: inherit
}
</style>
6.6 home.vue
<template>
<div>
<h2>home page </h2>
<div class="leftArea">
<!-- 主页左侧导航区域 -->
<router-link to="/userInfo">用户管理</router-link><p/>
<!-- to传值 -->
<!-- <router-link to="/goodsInfo">商品管理</router-link><p/> -->
<router-link :to="{name:'eqp',params:{
'pname':'Kak','age':23}}">商品管理</router-link><p/>
<!-- url传参 -->
<!-- <router-link to="/otherInfo">其他管理</router-link><p/> -->
<router-link to="/otherInfo/kak/23">其他管理</router-link><p/>
<router-link to="/">回到首页</router-link>
</div>
<div class="content">
<router-view/>
</div>
</div>
</template>
<script>
export default {
name:'Home',
data(){
return{
}
}
}
</script>
<style scoped>
.leftArea{
float: left;
left: 0px;
top:100px;
width: 200px;
height: 500px;
background-color: aqua;
}
.content{
float: left;
left: 310px;
top:100px;
width: 1300px;
height: 500px;
background-color: blanchedalmond
}
</style>
6.7 welcome.vue
<template>
<div>
<h2>欢迎界面</h2>
<h2>正在建设中............</h2>
</div>
</template>
<script>
export default {
name:'Welcome',
data(){
return{
}
}
}
</script>
<style scoped>
</style>
6.8 userInfo.vue
<template>
<div>
<h2>用户界面</h2>
<h2>正在建设中............</h2>
<p>
currentUser:{
{$route.name}}
</p>
</div>
</template>
<script>
export default {
name:'User',
data(){
return{
}
}
}
</script>
<style scoped>
</style>
6.9 showGoods.vue
<template>
<div>
<h2>商品界面</h2>
<h2>正在建设中............</h2>
<p>
name:{
{$route.name}}<br/>
pname:{
{$route.params.pname}}<br/>
age:{
{$route.params.age}}
</p>
</div>
</template>
<script>
export default {
name:'Goods',
data(){
return{
}
}
}
</script>
<style scoped>
</style>
6.10 otherView.vue
<template>
<div>
<h2>其他界面</h2>
<h2>正在建设中............</h2>
<p>
name:{
{$route.params.name}}<br/>
age:{
{$route.params.age}}
</p>
</div>
</template>
<script>
export default {
name:'Others',
data(){
return{
}
}
}
</script>
<style scoped>
</style>
6.11 运行界面
主页面
添加活动界面
登录界面
home界面
商品界面
