Vue超详细学习笔记

引言:

        本文主要分享了在学习Vue时候的一些笔记,包括Vue环境的搭建、常用的指令(v-for、v-on、v-model)、Vue-cli脚手架(环境的搭建、初始化项目对应的关系、简单的案例展示)、Vue-router(环境的搭建、单页面多显示问题、导航问题、子路由)、ElementUI环境的搭建以及使用、最后分享了一个案例综合了所有知识(附源码);

文章目录

1. Vue简介及环境搭建

         Vue是一套用于构建用户界面的渐进式框架;与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合;

  • Vue官网:https://vuejs.org/
  1. 是一个构建用户界面的框架
  2. 数据驱动和组件化的前端开发
  3. 实现响应式的数据绑定和组合视图组件

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的时候出现一个新的页面;

  1. 在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>
    
  2. 引入MyVue组件:我们在router/index.js文件的上边引入MyVue组件

    import MyVue from '@/components/my'
    
  3. 增加路由配置:在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界面

在这里插入图片描述

商品界面

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐