• Vue详解

    Vue详解

    一、回顾SSM

    1. SSM
    • mybatis
    • spring
    • springmvc

    二、Vue概述

    1、Vue概述

    1. Vue是一套用于构建用户界面的渐进式JavaScript框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（[SPA]）提供驱动。（百度百科）

      ​

    2、认识前端

    1. 前端三要素
    • HTML(结构)
    • CSS（表现样式）
    • Javascript（行为）
    1. CSS预处理器
    • CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。“用一种专门的编程语言，进行web页面样式设计，再通过编译器转化为正常的css文件，以供项目使用 ”
    • 常用css预处理器： SASS、LESS（基于nodejs，常用）
    1. JavaScript框架
    • JQuery：熟知的JavaScript框架，优点是简化了DOM操作，缺点是DOM操作太频繁，影响前端性能
    • Angular：Google收购的前端框架，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念。
    • React：Facebook出品，高性能的JS前端框架，特点是提出了新概念（虚拟DOM）来减少真实dom操作，在内存中模拟DOM操作
    • Vue：一款渐进式JavaScript框架，如实现模块化开发、路由、状态管理等新特性 ，结合了Angular、React的优点。
    • Axios：前端通信框架
    1. JavaScript构建工具
    • Babel
    • WebPack

    3、前端发展史

    1. 混合开发，三端统一（PC，Android，IOS）
    2. 前端人员为了方便开发需要掌握一定的后端技术
    3. 前端框架-----Vue.js
    • iView：是一个强大的基于Vue的UI库，主要特点是移动端支持的较多
    • ElementUI：是饿了么前端开源维护的Vue UI组件库，组件齐全，基本涵盖后台所需的所有组件，主要用于PC端的页面，主要特点是桌面端支持较多。
    1. 前后端分离的演变史

    • 后端为主的MVC

    • 基于AJAX带来的SPA时代单页面应用时代

    • 前端为主的MV*时代

      • MVC：同步通信为主 Model、View、Controller
      • MVP：异步通信为主 Model、View、Presenter
      • MVVM：异步通信为主 Model、View、ViewModel

      涌现大量的前端框架

      前后端指责很清晰：前端工作在浏览器端，后段工作在服务端。

      全端开发的复杂度可控

      部署相对独立

    • Nodejs带来的全栈时代

    随着Nodejs的兴起，JavaScript开始有能力运行在服务器端。

    三、Vue入门

    1、第一个Vue程序

    1. MVVM模式的实现者
    • Model：模型层，在这里表示JavaScript对象
    • View：视图层，在这个表示DOM（HTML操作的元素）
    • ViewModel：连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者
    1. 在MVVM架构中，不允许数据和视图直接通信，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者
    • ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
    • ViewModel 能够监听到视图的变化，并能够通知数据发生改变
    1. 为什么要使用Vue.js
    • 轻量级、体积小
    • 移动优先，更适合移动端
    • 易上手，文档齐全
    • 吸取了Angular和React的长处，并拥有自己独特的功能，如：计算属性
    • 开源，社区活跃度高
    1. 第一个Vue程序
    • IDEA搜索Vue.js插件，下载
    • 或者引入
    

    • 1
    • 写一个demo.html
    doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>

<div id="app">
    {{message}}
div>




<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>
<script>
    var vm = new Vue({
        el:"#app",
        //Model:数据
        data:{
            message:"hello,vue!"
        }
    });
//可以通过console中，动态修改数据
    //vm.message="xqh"  不用刷新可以直接在页面中得到反馈修改数据
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    通过Vue绑定的数据，可以在浏览器中console直接动态修改，不用刷新页面

    • 为什么要使用MVVM
      • 低耦合：视图（View）可以独立于Model变化和修改
      • 可复用
      • 独立开发
      • 可测试

    2、Vue基本语法

    1. v-bind指令
    doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>

<div id="app">
   <span v-bind:title="message">
       鼠标悬停几秒钟查看此处动态绑定的提示信息！
   span>
div>




<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>
<script>
    var vm = new Vue({
        el:"#app",
        //Model:数据
        data:{
            message:"hello,vue!"
        }
    });
//可以通过console中，动态修改数据
    //vm.message="xqh"  不用刷新可以直接在页面中得到反馈修改数据
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • v-bind等被称为指令，指令带有前缀v-表示它们是Vue提供的特殊活性，它们会在渲染的DOM上应用特殊的响应式行为，在这里该指令的意思是：“将这个元素节点的title特性和Vue实例的message属性保持一致”
    1. 条件判断句
    • v-if
    • v-else
    • v-else-if
    doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>

<div id="app">
    <h1 v-if="type==='A'">Ah1>
    <h1 v-else-if="type==='B'">Bh1>
    <h1 v-else>Ch1>

div>




<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
           type:'A'
        }
    });
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    1. 循环
    • v-for
    doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>

<div id="app">
    <li v-for="item in items">
        {{item.message}}
    li>

div>




<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            items:[
                {message:'xqh学Java'},
                {message:'xqh学python'}
            ]
        }



    });

script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    3、Vue绑定事件

    1. 方法写在methods对象中，用v-on绑定事件
    doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>

<div id="app">
  <button v-on:click="sayHi">click mebutton>
div>




<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>
<script>
    var vm = new Vue({
        el:"#app",
        //Model:数据
        data:{
            message:"早安喝了喝了"
        },
        methods:{//方法必须定义在Vue的Methods对象中 v-on绑定事件
            sayHi:function (){
                alert(this.message);
            }

        }
    });

script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    4、Vue双向绑定

    1. Vue.js 是一个MVVM框架，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化
    2. 在表单中实现双向绑定
    • 文本框和选择
    doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>

<div id="app">
{message}}-->

    <input type="radio" name="sex" value="男" v-model="xqh"> 男
    <input type="radio" name="sex" value="女" v-model="xqh"> 女
    <p>
        你的性别是：{{xqh}}  
    p>


div>




<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            xqh:''
        }
    });

script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    实现数据和表单绑定，你选择的或者输入的内容可以及时打印出来

    • 下拉框
    doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>

<div id="app">

   下拉框：
    <select v-model="selected">
        <option >--请选择--option>
        <option >--A--option>
        <option >--B--option>
        <option >--C--option>
    select>
    <span>你的选择是：{{selected}}span>

div>




<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            selected:''
        }
    });

script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    5、Vue组件

    1. 什么是组件
    • 组件是可复用的Vue实例，就是一组可以重复使用的模板，跟JSTL的自定义标签等框架有着异曲同工之妙
    1. 自定义组件
    doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>

<div id="app">



   <qinjiang v-for="item in items" v-bind:proj="item">qinjiang>

div>




<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>
<script>
    //定义一个Vue组件commponent
    Vue.component("qinjiang",{
        props:['proj'],
        template: '
  • {{proj}}
    • '    
    });
    var vm = new Vue({
        el:"#app",
        data:{
            items:["Java","python","linux"]
        }
    });

    script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    通过props传递参数

    6、 Axios异步通信

    1. 什么是Axios
    • 是一个开源的可以用在浏览器端和NodeJS的异步通信框架，它的主要作用是实现AJAX异步通信，功能特点如下
      • 从浏览器中创建异步请求
      • 从nodejs创建http请求
      • 支持Promise API
      • 转换请求数据和响应数据
      • 取消请求
      • 自动转换JSON数据
      • 客户端支持防御XSRF（跨站请求伪造）
    1. 为什么要使用Axios
    • 由于Vue.js是一个视图层框架并且作者严格遵守SOC（关注度分离原则），所以vue并不包含AJAX的通信功能，为了解决通信问题，使用Axios框架，少用JQuery，因为它操作Dom太频繁
    1. 第一个Axios程序

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

      doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>

    <style>
        [v-clock]{
            display: none;
        }
    style>
head>
<body>

<div id="vue">

    <div>{{info.name}}div>
    <div>{{info.address.street}}div>

    <a v-bind:href="info.url">点我a>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      ```

      ​

    7、计算属性

    1. 什么是计算属性
    • 首先这是一个属性 ，其次这个属性有计算能力，简单来说，它就是一个能够将计算结果1缓存起来的属性，可以想象为缓存

    ​```html

    Document

    currentTime:{{currentTime()}}

    ```
    1. computed和methods区别
    • computed是属性调用，methods是方法调用一定要加（）
    • computed带有缓存作用，而methods没有
    doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>

<div id="app">
    <p>reversedName:  {{reversedNameMethod()}}p>
    <p>reversedMessage: {{reversedMessageComputed}}p>


div>




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

    var vm = new Vue({
        el: '#app',
        data: {
            name: 'Alex',
            message: 'Hello'
        },
        methods: {
            reversedNameMethod: function () {
                return this.name.split('').reverse().join('')
            }
        },
        computed: {
            reversedMessageComputed: function () {
                return this.message.split('').reverse().join('')
            }
        }
    })

script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 只要message没发生变化 多次访问 reversedMessageComputed 计算属性会立即返回之前的计算结果，而不必再次执行函数。而 reversedNameMethod() 方法，每次调用都会重新执行函数。

    10、插槽slot

    1. 在vue中，我们使用 元素作为承载分发内容的出口
    doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>

<div id="app">
   <todo>
       <todo-title slot="todo-title" :title="title">todo-title>
       <todo-items slot="todo-items" v-for="item in todoItems" :item="item">todo-items>
   todo>

div>




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

    Vue.component("todo",{
        template: '
    \
                         \
                         
      \
                             \
                          
    \
                   
    '    

    });
    Vue.component("todo-title",{
        props:['title'],
        template: '
    {{title}}
    '    
    });
    Vue.component("todo-items",{
        props:['item'],
        template: '
  • {{item}}
    • '    
    });

    var vm = new Vue({
        el: "#app",
        data:{
            title:"秦老师系列课程",
            todoItems:['说Java','说前端','说Linux']
        }

    })

    script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53

    11、自定义事件内容分发

    • 实现按下删除按钮可以删除内容
    doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>

<div id="app">
   <todo>
       <todo-title slot="todo-title" :title="title">todo-title>
       <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                   :item="item" v-bind:index="index" v-on:remove="removeItems(index)">todo-items>
   todo>

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

    Vue.component("todo",{
        template: '
    \
                         \
                         
      \
                             \
                          
    \
                   
    '    

    });
    Vue.component("todo-title",{
        props:['title'],
        template: '
    {{title}}
    '    
    });
    Vue.component("todo-items",{
        props:['item','index'],
        template: '
  • {{index}}---{{item}}
    • '    ,
        methods:{
            remove:function (index){
                //自定义事件分发
                this.$emit('remove',index)
            }
        }
    });
    var vm = new Vue({
        el: "#app",
        data:{
            title:"秦老师系列课程",
            todoItems:['说Java','说前端','说Linux']
        },
        methods: {
            removeItems:function (index){
                console.log("删除了"+this.todoItems[index]+"ok")
                this.todoItems.splice(index,1);//一次删除一个元素
            }
        }

    })

    script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61

    12、Vue入门小结

    1. 核心：数据驱动，组件
    2. 常用属性：
    • v-if
    • v-else-if
    • v-else
    • v-for
    • v-on 绑定事件 简写@
    • v-model 数据双向绑定
    • v-mind 给组件绑定参数，简写 ：
    1. 组件化
    • 组合组件slot插槽
    • 组件内部绑定事件需要用到this.$emit（“事件名”，参数）；
    • 计算属性的特色，缓存计算数据
    1. 遵循SOC关注度分离原则，Vue是纯粹的视图框架，并不包含比如Ajax之类的通信功能，为了解决通信问题，我们需要使用Axios框架做异步通信

    四、vue-cli项目

    1、什么是vue-cli

    1. vue-cli 是官方提供的一个脚手架，用于快速生成一个vue的项目模板。预先定义好的目录结构以及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，我们的开发更加快速。
    2. 主要的功能
    • 统一的目录结构
    • 本地调试
    • 热部署
    • 单元测试
    • 集成打包上线
    1. 安装nodejs，官网安装（看前面nodejs的笔记）
    • 命令窗口中输入 node -v 查看版本，则安装成功
    • 输入 npm install cnpm -g 以后通过cnpm下载会更快
    • 下载vue-cli 输入 ： cnpm install vue-cli -g
    • 输入 vue list 查看可以基于哪些模板创建vue应用程序

    2、创建vue-cli项目

    • vue init webpack myvue ----会生成一个myvue的文件夹（初始化一个vue项目） 然后一直no，就可以了
    • cd myvue —跳到myvue操作
    • npm install — 下载所需要的依赖 如果要修复，按照给的提示修复
    • npm run dev ----运行程序，得到程序端口
    • Your application is running here: http://localhost:8080
    • 浏览器中打开，则可以到达页面
    • ctrl+c 关闭程序

    3、vue-router路由

    1. Vue Router 是Vue.js官方的路由管理器，它和Vue.js的核心 深度集成，让构建单页面应用变的易如反掌
    2. Vue Router 包含的功能有：
    • 嵌套的路由/视图表
    • 模块化的、基于组件的路由配置
    • 路由参数、查询、通配符
    • 基于Vue.js过渡系统的视图过渡效果
    • 细粒度的导航控制
    • 带有自动激活的CSS class 的链接
    • Html5 历史模式或hash模式，在ie9中自动降级
    • 自定义的滚动条行为
    1. 使用路由
    • 安装（管理员模式打开命令窗口）

    cnpm install vue-router --save-dev

    安装好后，在node_modules中可以找到vue-router

    如果没找到可以试一试 cnpm install vue-router@3.1.3 --save-dev (因为可能router版本太高)

    • 在components文件夹中，定义两个组件

    Content.vue

    






    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    Main.vue

    






    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 在src目录下，新建一个文件夹：router，专门存放路由
    import Vue from "vue";
import VueRouter from "vue-router";
import Content from "../components/Content";
import Main from '../components/Main'
//存放路由
//安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes:[
    {
      //路由路径
      path:'/content',
      name:'content',
      //路由组件
      component:Content
    },
    {
      //路由路径
      path:'/main',
      name:'main',
      //路由组件
      component:  Main
    }

  ]
})


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 在main.js中配置路由
    // The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
//只有这一个入口
import Vue from 'vue'
import App from './App'
import router from './router'  //自动扫描里面的路由配置
Vue.config.productionTip = false

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


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 在App.vue中使用路由
    






    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    定义组件（定义路由） ---->存放路由（router.js）------>配置路由（main.js）---->使用路由(App.vue)

    4、vue+elementUI

    1. 创建工程(命令行都要使用管理员模式运行 )
    • 创建名为hello-vue的工程 vue init webpack hello-vue
    • 进入工程目录 cd hello-vue
    • 安装vue-router 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
    1. NPM命令解释：
    • npm install moduleName:安装模块到项目目录下
    • npm install -g moduleName: -g的意思是将模块按照到全局
    • npm install --save moduleName: --save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖，-S为该命令的缩写
    • –save-dev: 意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写
    1. 创建登录页面
    • 在src目录下建立view文件夹，放vue文件
    • 创建登录页面 Login.vue
    






    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 创建 Main.vue
    1. 在roter中的index.js中存放路由
    import Vue from "vue";
import Router from "vue-router";
import Main from "../views/Main";
import Login from "../views/Login";
Vue.use(Router);
export default new Router({
  routes:[
    {
      path:'/main',
      name:'main',
      component:Main
    },
    {
      path:'/login',
      name:'login',
      component:Login
    }
  ]
});



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    1. 在main.js配置路由
    // The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import router from "./router";
import App from "./App.vue";
Vue.use(ElementUI);
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '',
  render:h=>h(App)
});


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    1. 在App.vue中使用
    






    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    5、路由嵌套

    实现在跳转过去的路由再跳转

    在view下创建子目录user，创建list.vue 和 profile.vue

    先把路由存放到router中的index.js中

    import Vue from "vue";
import Router from "vue-router";
import Main from "../views/Main";
import Login from "../views/Login";
import List from "../views/user/List";
import ProFile from "../views/user/ProFile";
Vue.use(Router);
export default new Router({
  routes:[
    {
      path:'/main',
      name:'main',
      component:Main,
      //嵌套路由  children
      children:[
        {
          path:'/user/profile',
          component:ProFile
        },
        {
          path:'/user/list',
          component:List
        }
      ]
    },
    {
      path:'/login',
      name:'login',
      component:Login  

    }
  ]
});



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    写Main.vue

    






    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 运行测试

    6、参数传递及重定向

    • 传递个人信息id=1
    • index.js
      //传递参数
          path:'/user/profile/:id',
          name:'UserProfile',
          component:ProFile,
          props:true

    • 1
    • 2
    • 3
    • 4
    • 5
    • Main.vue
    
              个人信息

    • 1
    • 2
    • profile.vue
    






    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 这是用props的方式(推荐)
    • 也可以直接用route
    






    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    7、404和路由模式

    1. 路由模式有两种
    • hash ：路径带#符号 ，如 http://locallhost/#/login
    • history:路径不带#符号

    修改路由配置，代码如下

    mode:'history',

    • 1
    1. 404
    • 在views下新加一个NotFound.vue
    






    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 去index.js中配置
     {
      path:'*',
      component:NotFound
    }

    • 1
    • 2
    • 3
    • 4

    8、路由钩子与异步请求

    1. 路由钩子

    beforeRouterEnter : 在进入路由前执行

    beforeRouterLeave :在离开路由前执行

    在你要跳转的那个路由，加上钩子，就可以实现在进入这个路由之前和离开这个路由之前的一些操作

    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    参数说明：

    • to：路由将要跳转的路径信息
    • from：路径跳转前的路径信息
    • next：路由的控制信息
      • next（） 跳入下一个页面
      • next（‘/path’）改变路由的跳转方向，使其跳到另一个路由
      • next(false)返回原来的页面
    1. 在钩子函数中使用异步请求
    • 安装Axios

    cnpm install axios -s

    cnpm install vue-axios

    • 在main.js中导入axios
    import axios from 'axios';
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);

    • 1
    • 2
    • 3
    • 实现在进入profile路由前获取到data.json的数据
    






    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
  • 相关阅读:
    visual studio 2022 opencv 4.6.0 创建测试工程
    class file has wrong version 55.0, should be 52.0
    rabbitmq详解
    在Ubuntu 16.04上安装和配置VNC
    STL常用算法——遍历算法
    IO流的学习1
    动机：关于如何获得和保持动力的科学指南
    etcd实现大规模服务治理应用实战
    cmake链接ffmpeg静态库的方法，及报错答解
    被 GitHub 「临时邮箱」项目拉黑，Firefox Relay 引热议；业内首个开源容器安全平台发布；Deepin 20.4 发布 | 开源日报
  • 原文地址：https://blog.csdn.net/m0_56116754/article/details/125898238