一篇简单易懂的文章教你如何快速掌握 Vue

于 2020-08-25 08:18:55 发布
阅读量1.1k 收藏 11
点赞数
文章标签： vue html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44544465/article/details/108207299
版权

目录

Vue 入门

Vue 第一个程序

Vue 基本语法

Vue 事件监听

Vue 双向绑定

Vue 组件

Axios 异步通信

Vue 计算属性

Vue 插槽

自定义事件

小结

vue-cli

webpack

模块化的演进

安装 webpack

使用 webpack

vue-router路由

结合 elementUI

创建工程

路由嵌套

参数传递

重定向

路由模式与404

路由钩子与异步请求

Vue 入门

Vue 第一个程序

包下载：https://cn.vuejs.org/v2/guide/installation.html

cdn 引用：

  • <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>

  • <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<div id="app">
    {{msg}}
</div>
<!--导入 Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"hello,world"
        }
    });
</script>

Vue 7个常用属性：

  • el 属性

    用来指示 vue 编译器从什么地方开始解析 vue 的语法，可以说是一个占位符

  • data 属性

    用来组织从 view 中抽象出来的属性，可以说将视图的数据抽象出来存放在 data 中

  • methods 属性

    放置页面中的业务逻辑，js 方法一般都放置在 methods 中

  • template 属性

    用来设置模板，会替换页面元素，包括占位符

  • render 属性

    创建真正的 Virtual Dom

  • computed 属性

    用来计算

  • watch 属性

    watch:function(new,old){}

    监听 data 中数据的变化

    两个参数，一个返回新值，一个返回旧值

Vue 基本语法

绑定元素：v-bind 

<div id="app">
    <span v-bind:title="msg">
        鼠标悬停几秒查看提示信息
    </span>
</div>
<!--导入 Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"hello,world"
        }
    });
</script>

v-bind 被称为指令，指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute，会在渲染的 DOM 上应用特殊的响应式行为

条件判断：v-if、v-else

<!--if(){}else{}-->
<div id="app">
    <h1 v-if="status">true</h1>
    <h1 v-else>false</h1>
</div>
<!--导入 Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            status:true
        }
    });
</script>

<!--if(){}else if(){}else{}-->
<div id="app">
    <h1 v-if="type=='A'">A</h1>
    <h1 v-else-if="type=='B'">B</h1>
    <h1 v-else-if="type=='C'">C</h1>
    <h1 v-else>D</h1>
</div>
<!--导入 Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            type:"A"
        }
    });
</script>

循环：v-for

<div id="app">
    <li v-for="item in items">
        {{item.text}}
    </li>
</div>
<!--导入 Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            items:[
                {text:"薯片"},
                {text:"蛋糕"},
                {text:"汉堡"}
            ]
        }
    });
</script>

Vue 事件监听

事件监听器：v-on

<div id="app">
    <button v-on:click="sayHello">Click here</button>
</div>
<!--导入 Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"hello,world"
        },
        //方法必须定义在 Vue 的 methods 对象中
        methods:{
            sayHello:function () {
                alert(this.msg);
            }
        }
    });
</script>

Vue 双向绑定

双向绑定：v-model

实现表单输入和应用状态之间的双向绑定

文本框：

<div id="app">
    <input type="text" v-model="msg">{{msg}}
</div>
<!--导入 Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"hello,world"
        }
    });
</script>

单复选框：

<div id="app">
    <input type="checkbox" v-model="checked">
    {{checked}}
</div>
<!--导入 Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            checked:false
        }
    });
</script>

多复选框：

<div id="app">
    <input type="checkbox" value="Jack" v-model="checked"> Jack
    <input type="checkbox" value="John" v-model="checked"> John
    <input type="checkbox" value="Mike" v-model="checked"> Mike
    选中的值：{{checked}}
</div>
<!--导入 Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            checked:[]
        }
    });
</script>

单选按钮：

<div id="app">
    <input type="radio" value="男" v-model="checked"> 男
    <input type="radio" value="女" v-model="checked"> 女
    选中的值：{{checked}}
</div>
<!--导入 Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            checked:""
        }
    });
</script>

下拉框：

<div id="app">
    <select v-model="selected">
        <option disabled value="">--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    选择的值：{{selected}}
</div>
<!--导入 Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            selected:""
        }
    });
</script>

注：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源

Vue 组件

Vue.component("my-component-name",{...});

基本使用：

<div id="app">
    <my-component/>
</div>
<!--导入 Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el:"#app"
    });
    
    //定义一个 Vue 组件 component
    Vue.component("my-component",{
        template:'<li>hello world</li>'
    });    
   
</script>

传递数据：

<div id="app">
    <my-component v-for="item in items" v-bind:val="item"/>
</div>
<!--导入 Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script>   
    var app = new Vue({
        el:"#app",
        data:{
           items:["A","B","C"]
        }
    });
    
     //定义一个 Vue 组件 component
    Vue.component("my-component",{
        props:['val'],//通过 props 向子组件传递数据
        template:'<li>{{val}}</li>'
    });
</script>

Axios 异步通信

Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，主要作用就是实现 ajax 异步通信，其功能特点有：

  • 从浏览器中创建 XMLHttpRequests

  • 从 node.js 创建 http 请求

  • 支持 Promise API（JS 中链式编程）

  • 拦截请求和响应

  • 转换请求数据和响应数据

  • 取消请求

  • 自动转换 JSON 数据

  • 客户端支持防御 XSRF（跨站请求伪造）

中文文档：http://www.axios-js.com/

GitHub：https://github.com/axios/axios

测试 json:

{
  "name": "断了尾巴的仓鼠",
  "url": "https://blog.youkuaiyun.com/weixin_44544465",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "city":"广东广州",
    "country": "中国/China"
  },
  "links": [
    {
      "name": "百度",
      "url": "www.baidu.com"
    },
    {
      "name": "优快云",
      "url": "https://blog.youkuaiyun.com"
    },
    {
      "name": "GitHub",
      "url": "https://github.com/"
    }
  ]
}

代码：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue-demo</title>
    <!--v-clock：解决闪烁问题-->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-clock>
    <div>{{info.name}}</div>
    <div>{{info.address.country}}</div>
    <a v-bind:href="info.url">{{info.url}}</a>
</div>
<!--导入 Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data(){
            return{
                //请求的返回参数合适，必须和json字符串一样
                info:{
                    name:null,
                    url:null,
                    address:{
                        country:null
                    }
                }
            }
        },
        mounted(){//钩子函数 链式编程 ES6新特性
            axios.get("./data.json").then(response => (this.info = response.data));
        }
    });
</script>
</body>
</html>

Vue 生命周期

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。

在 Vue 的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册 JS 方法，可以让我们用自己注册的 JS 方法控制整个大局，在这些事件响应方法中的 this 直接指向的是 Vue 的实例

生命周期探究：？？？https://learning.dcloud.io/#/?vid=4

Vue 计算属性

计算属性的重点突出在属性两个字上（属性是名词），首先它是个属性其次这个属性有计算的能力（计算是动词），这里计算就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），仅此而已；可以想象为缓存！

computed 

<div id="app">
    <div>currentTime1：{{currentTime1()}}</div>
    <div>currentTime2：{{currentTime2}}</div>
</div>
<!--导入 Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"hello,world"
        },
        methods:{
            currentTime1:function () {
                return Date.now();
            }
        },
        computed:{
            //属性，不是方法！！！！！
            currentTime2:function () {
                this.msg;
                return Date.now();
            }
        }

    });
</script>

 注：methods 和 computed 里的东西不能重名

说明：

  • methods：定义方法，调用方法需要带括号 currentTime1()

  • computed：定义计算属性，调用属性不需要带括号 currentTime2；this.msg 是为了能够让 currentTime2 观察到数据变化而变化

可以看出在方法中的值发生变化时，则缓存就会刷新！

结论：

调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，如果这个结果不经常变化，则可以采用计算属性将这个结果缓存起来；计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约系统开销

Vue 插槽

<slot></slot> 

<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in items" v-bind:item="item"></todo-items>
    </todo>
</div>
<!--导入 Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script>
    Vue.component("todo",{
        template:
            '<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                    <slot name="todo-items"></slot>\
                </ul>\
            </div>'
    });

    Vue.component("todo-title",{
        props:["title"],
        template:'<div>{{title}}</div>'
    });

    Vue.component("todo-items",{
        props:["item"],
        template:'<li>{{item}}</li>'
    });

    var app = new Vue({
        el:"#app",
        data:{
            title:"菜单",
            items:["小龙虾","牛排","红酒"]
        }
    });
</script>

自定义事件

this.$emit("方法名", 参数)

事件分发

<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in items"
                    v-bind:item="item" :index="index" @delete="removeItem(index)"></todo-items>
    </todo>
</div>
<!--导入 Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script>
    Vue.component("todo",{
        template:
            '<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                    <slot name="todo-items"></slot>\
                </ul>\
            </div>'
    });

    Vue.component("todo-title",{
        props:["title"],
        template:'<div>{{title}}</div>'
    });

    Vue.component("todo-items",{
        props:["item","index"],
        template:'<li>{{index}} --- {{item}}<button @click="remove">删除</button></li>',
        methods:{
            remove:function (index) {
                this.$emit("delete",index);
            }
        }
    });

    var app = new Vue({
        el:"#app",
        data:{
            title:"菜单",
            items:["小龙虾","牛排","红酒"]
        },
        methods: {
            removeItem:function (index) {
                console.log("删除了" + this.items[index]);
                this.items.splice(index,1);
            }
        }
    });
</script>

小结

Vue 核心：数据驱动，组件化

优点：借鉴了 AngulaJS 的模块化开发和 React 的虚拟 Dom ，虚拟 Dom 就是把 Dom 操作放到内存中执行

常用的属性：

  • v-if

  • v-else-if

  • v-for

  • v-on 绑定事件，简写 @

  • v-model 数据双向绑定

  • v-bind 给组件绑定参数，简写 :

组件化：

  • 组合组件 slot 插槽

  • 组价内部绑定事件 this.$emit("事件名", 参数)

  • 计算属性的特色，缓存计算数据

遵循 SoC 关注度分离原则，Vue 是纯粹的视图框架，并不包含，比如 Ajax 之类的通信功能，为了解决通信问题，需要使用 Axios 框架做异步通信

说明

Vue 的开发都是要基于 NodeJS，实际开发采用 vue-cli 开发，vue-router 路由，vuex 状态管理；Vue UI 界面一般使用 ElementUI(https://element.eleme.cn/#/zh-CN) 或者 ICE(https://ice.work/) 来快速搭建前端

 

vue-cli

vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板

预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个估计项目就是脚手架，我们的开发更加的快速

主要的功能

  • 统一的目录结构

  • 本地调试

  • 热部署

  • 单元测试

  • 集成打包上线

需要环境

Node.js：http://nodejs.cn/download/ 安装就是无脑的下一步就好，安装在自己的环境目录下

git镜像：https://npm.taobao.org/mirrors/git-for-windows/

确认nodejs安装成功：

  • cmd下输入 node -v，查看是否能够正确打印出版本号即可！

  • cmd下输入 npm -v，查看是否能够正确打印出版本号即可！

npm，就是一个软件包管理工具，就和linux下的apt软件安装差不多！

# -g 就是全局安装
npm install cnpm -g

# 或使用如下语句解决npm速度慢的问题
npm install --registry=https://registry.npm.taobao.org

安装的过程可能有点慢~，耐心等待！虽然安装了cnpm，但是尽量少用，因为有可能导致安装失败！

默认安装位置：C:\Users\administrator\AppData\Roaming\npm

安装 vue-cli

cnpm install vue-cli -g
#测试是否安装成功
#查看可以基于哪些模板创建vue应用程序，通常我们选择webpack
vue list

 创建第一个 vue-cli 应用程序  

  1. 创建一个Vue项目，创建一个空的文件夹：F:\vueStudy

  2. 创建一个基于webpack模板的vue应用程序

    #1、首先需要进入到对应的目录 cd F:\vueStudy
#2、这里的myvue是顶日名称，可以根据自己的需求起名
vue init webpack myvue

    一路都选择no即可

    说明：
    1. Project name：项目名称，默认回车即可
    2. Project description：项目描述，默认回车即可
    3. Author：项目作者，默认回车即可
    4. Install vue-router：是否安装vue-router，选择n不安装（后期需要再手动添加）
    5. Use ESLint to lint your code:是否使用ESLint做代码检查，选择n不安装（后期需要再手动添加)
    6. Set up unit tests:单元测试相关，选择n不安装（后期需要再手动添加）
    7. Setupe2etests with Nightwatch：单元测试相关，选择n不安装（后期需要再手动添加）
    8. Should we run npm install for you after the,project has been created:创建完成后直接初始化，选择n，我们手动执行；运行结果！

初始化

cd myvue
npm install

 运行

npm run dev

 

访问：http://localhost:8080/

webpack

本质上， webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler) 。当webpack处理应用程序时， 它会递归地构建一个依赖关系图(dependency graph) ， 其中包含应用程序需要的每个模块， 然后将所有这些模块打包成一个或多个bundle。

  Webpack是当下最热门的前端资源模块化管理和打包工具， 它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过loader转换， 任何形式的资源都可以当做模块， 比如Commons JS、AMD、ES 6、CSS、JSON、Coffee Script、LESS等；

  伴随着移动互联网的大潮， 当今越来越多的网站已经从网页模式进化到了WebApp模式。它们运行在现代浏览器里， 使用HTML 5、CSS 3、ES 6等新的技术来开发丰富的功能， 网页已经不仅仅是完成浏览器的基本需求； WebApp通常是一个SPA(单页面应用) ， 每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的JS代码，这给前端的开发流程和资源组织带来了巨大挑战。

  前端开发和其他开发工作的主要区别，首先是前端基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器的，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统，这个理想中的模块化系统是前端工程师多年来一直探索的难题

模块化的演进

Script标签

<script src = "module1.js"></script>
<script src = "module2.js"></script>
<script src = "module3.js"></script>

这是最原始的JavaScript文件加载方式，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在window对象中，不同模块的调用都是一个作用域

这种原始的加载方式暴露了一些显而易见的弊端：

  • 全局作用域下容易造成变量冲突

  • 文件只能按照<script>的书写顺序进行加载

  • 开发人员必须主观解决模块和代码库的依赖关系

  • 在大型项目中各种资源难以管理，长期积累的问题导致代码库混乱不堪

 

CommonsJS

服务器端的NodeJS遵循CommonsJS规范，该规范核心思想是允许模块通过require方法来同步加载所需依赖的其它模块，然后通过exports或module.exports来导出需要暴露的接口。

require("module");
require("../module.js");
export.doStuff = function(){};
module.exports = someValue;

优点：

  • 服务器端模块便于重用

  • NPM中已经有超过45万个可以使用的模块包

  • 简单易用

缺点：

  • 同步的模块加载方式不适合在浏览器环境中，同步意味着阻塞加载，浏览器资源是异步加载的

  • 不能非阻塞的并行加载多个模块

实现：

  • 服务端的NodeJS

  • Browserify，浏览器端的CommonsJS实现，可以使用NPM的模块，但是编译打包后的文件体积较大

  • modules-webmake，类似Browserify，但不如Browserify灵活

  • wreq，Browserify的前身

 

AMD

Asynchronous Module Definition规范其实主要一个主要接口define(id?,dependencies?,factory);它要在声明模块的时候指定所有的依赖dependencies，并且还要当做形参传到factory中，对于依赖的模块提前执行。

define("module",["dep1","dep2"],functian(d1,d2){
	return someExportedValue;
});
require（["module","../file.js"],function(module，file){});

优点：

  • 适合在浏览器环境中异步加载模块

  • 可以并行加载多个模块

缺点：

  • 提高了开发成本，代码的阅读和书写比较困难，模块定义方式的语义不畅

  • 不符合通用的模块化思维方式，是一种妥协的实现

实现：

  • RequireJS

  • curl

 

CMD

Commons Module Definition规范和AMD很相似，尽保持简单，并与CommonsJS和NodeJS的Modules规范保持了很大的兼容性

define(function(require,exports,module){
	var $=require("jquery");
	var Spinning = require("./spinning");
	exports.doSomething = ...;
	module.exports=...;
});

优点：

  • 依赖就近，延迟执行

  • 可以很容易在NodeJS中运行缺点

  • 依赖SPM打包，模块的加载逻辑偏重

实现：

  • Sea.js

  • coolie

 

ES6 模块

EcmaScript 6标准增加了JavaScript语言层面的模块体系定义。ES 6模块的设计思想， 是尽量静态化， 使编译时就能确定模块的依赖关系， 以及输入和输出的变量。Commons JS和AMD模块，都只能在运行时确定这些东西。

import "jquery"
export function doStuff(){}
module "localModule"{}

优点：

  • 容易进行静态分析

  • 面向未来的Ecma Script标准

缺点：

  • 原生浏览器端还没有实现该标准

  • 全新的命令，新版的Node JS才支持

实现：

  • Babel

安装 webpack

WebPack是一款模块加载器兼打包工具， 它能把各种资源， 如JS、JSX、ES 6、SASS、LESS、图片等都作为模块来处理和使用

安装:

npm install webpack -g
npm install webpack-cli -g

 测试安装成功:

webpack -v
webpack-cli -v

配置说明

webpack.config.js

  • entry：入口文件， 指定Web Pack用哪个文件作为项目的入口

  • output：输出， 指定WebPack把处理完成的文件放置到指定路径

  • module：模块， 用于处理各种类型的文件

  • plugins：插件， 如：热更新、代码重用等

  • resolve：设置路径指向

  • watch：监听， 用于设置文件改动后直接打包

module.exports = {
	entry:"",
	output:{
		path:"",
		filename:""
	},
	module:{
		loaders:[
			{test:/\.js$/,;\loade:""}
		]
	},
	plugins:{},
	resolve:{},
	watch:true
}

使用 webpack

  1. 创建项目（创建一个空的文件夹）

  2. 创建一个名为modules的目录，用于放置JS模块等资源文件

  3. 在modules下创建模块文件，如 hello.js，用于编写JS模块相关代码

    //暴露一个方法：exports.method=function(){}
exports.sayHello=function () {
    document.write("<div>Hello, webpack</div>");
}

     

  4. 在modules下创建一个名为main.js的入口文件，用于打包时设置entry属性

    //require 导入一个模块，就可以调用这个模块中的方法了
var hello = require("./hello");
hello.sayHello();

     

  5. 在项目目录下创建webpack.config.js配置文件，使用webpack命令打包

    module.exports = {
    entry: "./modules/main.js",
    output:{
        filename:"./js/bundle.js"
    }
}

     

  6. 运行  webpack 命令打包

     

  7. 在项目目录下创建HTML页面，如index.html，导入webpack打包后的JS文件

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="./dist/js/bundle.js"></script>
</body>
</html>

     

  8. 运行 html

# 参数--watch 用于监听变化
webpack --watch

 

vue-router路由

Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成， 让构建单页面应用变得易如反掌。包含的功能有：

  • 嵌套的路由/视图表

  • 模块化的、基于组件的路由配置

  • 路由参数、查询、通配符

  • 基于Vue js过渡系统的视图过渡效果

  • 细粒度的导航控制

  • 带有自动激活的CSS class的链接

  • HTML5 历史模式或hash模式， 在IE 9中自动降级

  • 自定义的滚动行为

安装

vue-router是一个插件包，打开命令行工具，进入你的项目目录，输入下面命令。

npm install vue-router --save-dev

如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能 ：

import Vue from 'vue'
import VueRouter from 'vue-router'

//显示声明使用 VueRouter
Vue.use(VueRouter);

测试使用

1、components 目录下存放编写的组件

2、定义组件

Content.vue

<template>
  <h1>内容</h1>
</template>

<script>
    export default {
        name: "Content"
    }
</script>

<style scoped>

</style>

 Main.vue

<template>
    <h1>首页</h1>
</template>

<script>
    export default {
        name: "Main"
    }
</script>

<style scoped>

</style>

3、安装路由，在src目录下，新建一个文件夹：router，专门存放路由，配置路由 index.js

import Vue from 'vue';
//导入路由插件
import Router from 'vue-router';
//导入定义的组件
import Content from "../components/Content";
import Main from "../components/Main";

//安装路由
Vue.use(Router);
//配置路由
export default new Router({
  routes:[
    {
      //路由路径
      path:'/content',
      //路由名称
      name:'Content',
      //跳转到组件
      component:Content
    },
    {
      //路由路径
      path: '/main',
      //路由名称
      name: 'Main',
      //跳转到组件
      component: Main
    }
  ]
})

4、在 main.js中配置路由

import Vue from 'vue'
import App from './App'
//导入创建的路由配置目录
import router from './router';//自动扫描里面的路由配置

//来关闭生产模式下给出的提示
Vue.config.productionTip = false

new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: '<App/>'

});

5、在 App.vue 中使用路由

<template>
  <div id="app">
    <!--
			router-link：默认会被渲染成一个<a>标签，to属性为指定链接
			router-view：用于渲染路由匹配到的组件
		-->
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容</router-link>
    <router-view></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>

6、运行

npm run dev

结合 elementUI

创建工程

  1. 创建工程

     vue init webpack elementvue

     

  2. 安装依赖， 需要安装 vue-router、element-ui、sass-loader 和 node-sass 四个插件 

    #进入工程目录
 cd elementvue
 ​
 #安装vue-routern 
 npm install vue-router --save-dev
 ​
 #安装element-ui
 npm i element-ui -S
 ​
 #安装依赖
 npm install
 ​
 # 安装SASS加载器
 cnpm install sass-loader node-sass --save-dev
 ​
 #启功测试
 npm run dev

    npm 命令解释：

    npm install moduleName：安装模块到项目目录下

    npm install -g moduleName：-g的意思是将模块安装到全局，具体安装到磁盘哪个位置要看npm config prefix的位置

    npm install -save moduleName：–save的意思是将模块安装到项目目录下， 并在package文件的dependencies节点写入依赖，-S为该命令的缩写

    npm install -save-dev moduleName:–save-dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写

构建目录

  • assets：用于存放资源文件

  • components：用于存放Vue功能组件

  • views：用于存放Vue视图组件

  • router：用于存放vue-router配置

创建视图  

 在views目录下创建

Main.vue

<template>
    <div>首页</div>
</template>

<script>
    export default {
        name: "Main"
    }
</script>

<style scoped>

</style>

Login.vue

其中el-*的元素为ElementUI组件

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        form: {
          username: '',
          password: ''
        },

        // 表单验证，需要在 el-form-item 元素中增加 prop 属性
        rules: {
          username: [
            {required: true, message: '账号不可为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不可为空', trigger: 'blur'}
          ]
        },

        // 对话框显示和隐藏
        dialogVisible: false
      }
    },
    methods: {
      onSubmit(formName) {
        // 为表单绑定验证功能
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
            this.$router.push("/main");
          } else {
            this.dialogVisible = true;
            return false;
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }

  .login-title {
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
</style>

创建路由

在router目录下创建vue-router路由配置文件

index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Main from "../views/Main";
import Login from "../views/Login";

Vue.use(VueRouter);

export default new VueRouter({
  routes:[
    {
      path:'/login',
      name:'login',
      component:Login
    },
    {
      path: '/main',
      name: 'main',
      component: Main
    }
  ]
})

修改

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(router);
Vue.use(ElementUI);

new Vue({
  el: '#app',
  // 启用路由
  router,
  // 启用 ElementUI
  render: h=>h(App)
})

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

运行

npm run dev

 运行后可能会报一个错：

原因：sass-loader 版本过高，导致编译错误

解决：

package.json文件管理依赖包的版本，把 sass-loader 版本调低 ，修改版本为 7.3.1，然后因为修改了控制版本的文件package.json，需要重新运行命令

cnpm install

在重新运行项目 npm run dev，访问：http://localhost:8080/#/login 或 http://localhost:8080/#/main

路由嵌套

嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。同样的，URL 中各段动态路径也按某种结构对应嵌套的各层组件：

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

 1、用户信息组件，在 views/user 目录下创建一个名为 Profile.vue 的视图组件

<template>
    <div>个人信息</div>
</template>

<script>
    export default {
        name: "Profile"
    }
</script>

<style scoped>

</style>

2、用户列表组件在 views/user 目录下创建一个名为 List.vue 的视图组件

<template>
    <div>用户列表</div>
</template>

<script>
    export default {
        name: "List"
    }
</script>

<style scoped>

</style>

3、配置嵌套路由，修改 router 目录下的 index.js 路由配置文件

import Vue from "vue";
import VueRouter from "vue-router";
import Main from "../views/Main";
import Login from "../views/Login";
// 用于嵌套的路由组件
import UserProfile from "../views/user/Profile";
import UserList from "../views/user/List";

Vue.use(VueRouter);

export default new VueRouter({
  routes:[
    {
      path:'/login',
      name:'login',
      component:Login
    },
    {
      path: '/main',
      name: 'main',
      component: Main,
      // 配置嵌套路由
      children:[
        {
          path:'/user/profile',
          component:UserProfile
        },
        {
          path:'/user/list',
          component:UserList
        }
      ]
    }
  ]
})

说明：主要在路由配置中增加了 children 数组配置，用于在该组件下设置嵌套路由

4、修改 Main.vue 视图组件

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <router-link to="/user/profile">个人信息</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <router-link to="/user/list">用户列表</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
            <el-menu-item-group>
              <el-menu-item index="2-1">分类管理</el-menu-item>
              <el-menu-item index="2-2">内容列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>

        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: "Main"
  }
</script>

<style scoped lang="scss">
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>

5、运行结果

参数传递

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。此时我们就需要传递参数了

取代与 $route 的耦合

1、修改路由配置index.js, 主要是在 path 属性中增加了 :id 这样的占位符

{
    path:'/user/profile/:id',
    name:'UserProfile',
    component:UserProfile
}

2、传递参数

将 Main.vue 中的路由连接<router-link>进行绑定v-bind，是为了将这一属性当成对象使用，注意 router-link 中的 name 属性名称 一定要和 路由中的 name 属性名称 匹配，因为这样 Vue 才能找到对应的路由路径

<router-link v-bind:to="{name:'UserProfile',params:{id:1}}">个人信息</router-link>

3、在目标组件Profile.vue中接收参数

<div>个人信息{{$route.params.id}}</div>

通过 props 解耦

1、修改路由配置index.js , 主要增加了 props: true 属性

{
    path:'/user/profile/:id',
    name:'UserProfile',
    component:UserProfile,
    props:true
}

2、传递参数

3、为目标组件增加 props 属性

<template>
    <div>
      <h1>个人信息</h1>
      {{id}}
    </div>
</template>

<script>
    export default {
      props:['id'],
      name: "Profile"
    }
</script>

<style scoped>

</style>

重定向

Vue 中的重定向是作用在路径不同但组件相同的情况下

index.js

{
    path: '/main',
    name: 'Main',
    component: Main
},
{
    path: '/goHome',
    redirect: '/main'
}

说明：这里定义了两个路径，一个是 /main ，一个是 /goHome，其中 /goHome 重定向到了 /main 路径，重定向不需要定义组件

使用的话，只需要设置对应路径即可：

<router-link to="/goHome">回到首页</router-link>

路由模式与404

路由模式有两种：

修改路由配置

export default new VueRouter({
  mode: 'history',
  routes: [
  ]
});

处理404

创建 NotFound.vue视图组件

<template>
    <div>
      <h1>404</h1>
      页面不存在，请重试！
    </div>
</template>

<script>
    export default {
        name: "NotFound"
    }
</script>

<style scoped>

</style>

修改路由配置

import NotFound from "../views/NotFound";

{
    path:'*',
    component:NotFound
}

路由钩子与异步请求

beforeRouteEnter：在进入路由前执行

beforeRouteLeave：在离开路由前执行

Profile.vue 上修改代码：

 

export default {
    props:['id'],
    name: "Profile",
    beforeRouteEnter:function (to, from, next) {
    console.log("准备进入个人信息页");
    next();
    },
    beforeRouteLeave:function (to, from, next) {
    console.log("准备离开个人信息页");
    next();
    }
}

参数说明：

  • to：路由将要跳转的路径信息

  • from：路径跳转前的路径信息

  • next：路由的控制参数

    next() 跳入下一个页面

    next(’/path’) 改变路由的跳转方向，使其跳到另一个路由

    next(false) 返回原来的页面

    next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例

 

在钩子函数中使用异步请求

1、安装 Axios

npm install --save axios vue-axios

#更新
npm install

2、main.js引用 Axios

import Axios from 'axios'
import VueAxios from "vue-axios";

Vue.use(VueAxios,Axios)

试运行可能会报错：

这通常是因为运行 npm 安装后环境发生了变化

解决：

先按提示运行命令：npm rebuild node-sass

如若不行，则运行命令： npm install node-sass

运行完了还会报这么一个错:

解决：npm install --save vue-axios

3、准备数据 ： 只有我们的 static 目录下的文件是可以被访问到的，所以我们就把静态文件放入该目录下

// 静态数据存放的位置
//static/mock/data.json
{
  "name": "断了尾巴的仓鼠",
  "url": "https://blog.youkuaiyun.com/weixin_44544465",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "city":"广东广州",
    "country": "中国/China"
  },
  "links": [
    {
      "name": "百度",
      "url": "www.baidu.com"
    },
    {
      "name": "优快云",
      "url": "https://blog.youkuaiyun.com"
    },
    {
      "name": "GitHub",
      "url": "https://github.com/"
    }
  ]
}

4、在 beforeRouteEnter 中进行异步请求

export default {
      props:['id'],
      name: "Profile",
      beforeRouteEnter:function (to, from, next) {
        console.log("准备进入个人信息页");
        // 注意，一定要在 next 中请求，因为该方法调用时 Vue 实例还没有创建，此时无法获取到 this 对象，在这里使用官方提供的回调函数拿到当前实例
        next(vm => {
          vm.getData();
        });
      },
      beforeRouteLeave:function (to, from, next) {
        console.log("准备离开个人信息页");
        next();
      },
      methods:{
        getData:function () {
          this.axios({
            method:'get',
            url:'http://localhost:8080/static/mock/data.json'
          }).then(function (response) {
            console.log(response);
          }).catch(function (error) {
            console.log(error)
          })
        }
      }
    }

 

Dec_tail
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值