Vue超详细学习笔记

引言：

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

@[toc]

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 的桌面端组件库；

网址：https://element.eleme.cn/2.0/#/zh-CN

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://ucc.alicdn.com/images/user-upload-01/20200828150734825.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYwMTEzNg==,size_16,color_FFFFFF,t_70#pic_center',
                    'https://ucc.alicdn.com/images/user-upload-01/20200828150734958.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYwMTEzNg==,size_16,color_FFFFFF,t_70#pic_center',
                    'https://ucc.alicdn.com/images/user-upload-01/20200828150810950.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYwMTEzNg==,size_16,color_FFFFFF,t_70#pic_center',
                    'https://ucc.alicdn.com/images/user-upload-01/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 运行界面

主页面

图片.png

添加活动界面

图片.png

登录界面

图片.png

home界面

图片.png

商品界面

图片.png

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Vue超详细学习笔记

Vue超详细学习笔记

1. Vue简介及环境搭建

1.1 下载node.js

1.2 live-server使用

win+r输入cmd进入

安装cnpm，淘宝镜像

对npm进行全局安装

查看版本，看到版本号--->安装成功

清除缓冲

1.3 Vue案例

ctrl+~键打开命令框

编写index.html

初始化项目，生成package.json

在项目目录中打开

运行结果

2. 常用指令及案例

2.1 v-if和v-show

2.2 v-for

2.3 v-text和v-html

2.4 v-on

2.5 v-model

2.6 v-bind

3. Vue-cli

3.1 安装vue-li

查看版本，出现版本正确

用npm命令安装vue-cli

查看版本

3.2 初始化项目

输入命令后，会询问几个简单的选项如下：

3.3 运行项目

3.4 结束运行

3.5 Vue-cli案例

3.5.1 App.vue

3.5.2 HelloWord.vue

3.5.3 my.vue

3.5.4 index.js

3.5.5 结果展示

3.5.6 对应关系

4. Vue-router

4.1 安装vue-router

用npm命令安装vue-router

4.2 路由文件

4.3 增加一个my.vue

4.4 router-link制作导航

4.5 传值问题

4.5.1 通过name传值

4.5.2 通过标签to传值

4.5.3 通过URL传递参数

4.6 子路由

在需要的单页面多显示的位置加入

编写router/index.js代码

4.7 重定向

5. 使用Element组件

5.1 安装Element组件

用npm命令安装Element组件

导入element的js库以及样式

5.2 引入案例

5.2.1 进入官网、找需要的类型、查看代码

5.2.2 编写login.vue

5.2.3 在index.js中引入

5.2.4 页面展示

6. 综合案例

6.1 整体思路

6.2 index.js

6.3 index.vue