7

Vue的学习笔记

 2 years ago
source link: https://blog.csdn.net/qq_49137582/article/details/123331333
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

MVVM架构：view（视图层）、viewModel（双向绑定层）、 Model（数据访问层）

在这里插入图片描述

idea中使用VUE环境准备

官方文档：https://cn.vuejs.org/v2/guide/installation.html#%E5%AF%B9%E4%B8%8D%E5%90%8C%E6%9E%84%E5%BB%BA%E7%89%88%E6%9C%AC%E7%9A%84%E8%A7%A3%E9%87%8A

  1. 在setting中下载插件（搜索Vue.js）

在这里插入图片描述

      • 包含完整的警告和调试模式: https://vuejs.org/js/vue.js
      • 删除了警告，30.96KB min + gzip: https://vuejs.org/js/vue.min.js

  2. 第一个vue程序

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
    {{message}}
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        //Model：数据
        data:{
            message:"hello,vue!"
        }
    });
</script>

</body>
</html>
    newCodeMoreWhite.png

在这里插入图片描述

vue基本语法

绑定元素特性

v-bind

<!--view层 模板-->
<div id="app">
    <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息</span>
<!--    {{message}}-->
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        //Model：数据
        data:{
            message:"hello,vue!"
        }
    });
</script>
newCodeMoreWhite.png

判断和循环

if和if-else

采用v-if和v-else-if和v-else

<!--view层 模板-->
<div id="app">
<!--    <h1 v-if="ok">Yes</h1>-->
<!--    <h1 v-else>No</h1>-->
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else>C</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        //Model：数据
        data: {
            ok: true,
            type: 'A'
        }
    });
</script>
newCodeMoreWhite.png

采用v-for


<!--view层 模板-->
<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>

</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        //Model：数据
        data: {
            items: [
                {message: 'lzj'},
                {message: 'hh'},
                {message: 'yy'}
            ]
        }
    });
</script>
newCodeMoreWhite.png

在这里插入图片描述

<!--view层 模板-->
<div id="app">
    <button v-on:click="sayhi">click me</button>

</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data: {
            message: "lzj"
        },
        methods: {//方法必须定义在Vue的Methods对象中,
            sayhi:function (){
                alert(this.message)
            }
        }

    });
</script>
newCodeMoreWhite.png

表单双绑和组件

为什么要实现数据的双向绑定

​ 在Vue.js 中,如果使用vuex ，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单，Vuejs 的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项,方便跟踪;局部性数据流使用双向，简单易操作。

在表单中使用双向数据绑定

​ 你可以用v-model 指令在表单 、 及 元索上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特 殊处理。
​ 注意: v-model会忽略所有表单元素的value. checked. selected 特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值!

  1. <!--view层 模板-->
<div id="app">
输入的文本：<input type="text" v-model="message">{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data: {
            message: "",
        }

    });
</script>

  2. <!--view层 模板-->
<div id="app">
    输入的文本：<textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data: {
            message: "",
        }

    });
</script>

  3. <!--view层 模板-->
<div id="app">
    
<input type="radio" name="sex" value="男" v-model="message">男
<input type="radio" name="sex" value="女" v-model="message">女
    <p>选中了谁:{{message}}</p>
    
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data: {
            message: "",
            check: false
        }

    });
</script>
    newCodeMoreWhite.png
<!--view层 模板-->
<div id="app">
    下拉框：
    <select v-model="message">
        <option value="" disabled>--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>value:{{message}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data: {
            message: "",
        }
    });
</script>
newCodeMoreWhite.png

vue的组件

Vue.component():注册组件

template:组件的模板

props：传递参数到组件（值不能为大写）

<!--view层 模板-->
<div id="app">
<!--    组件：传递给组件中的值：props-->
    <lzj v-for="item in items" v-bind:hh="item"></lzj>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    //定义员工Vue组件 component
    //命名不能使用大写
    Vue.component("lzj",{
        props: ['hh'],//接收参数
        template: '<li>{{hh}}</li>'
    });
    var vm=new Vue({
        el:"#app",
        data: {
            items:["Java","Linux","Html"]
        }

    });
</script>
newCodeMoreWhite.png
  • v-bind:hh=“item”：将遍历的item项绑定到组件中props定义的名为hh属性上；= 左边的hh为props定义的属性名，右边的为item in items中遍历的item项的值

Axios异步通信

官方文档：https://axios-http.com/zh/docs/intro

github地址：https://github.com/axios/axios

Json数据

{
  "name": "lzj",
  "url": "https://blog. kuangstudy.com" ,
  "page ": 1,
  "isNonprofit": true,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
    "name": "bilibili",
    "url": "https:/ /space.bilibili. com/95256449"
    },
    {
    "name": " lzj",
    "url": "https:/ /blog. kuangstudy.com"
    },
    {
    "name":"百度",
    "url": "https:/ /www.baidu.com/"
    }
  ]
}
newCodeMoreWhite.png

html进行读取JSON文件中的值

//需要添加CDN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--v-clock:解决闪烁问题-->
    <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>

</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm=new Vue({
        el:"#vue",
        data(){
            return{
                //请求的返回参数格式，必须和json字符串一样
                info:{
                    name:null,
                    address:{
                        street:null,
                        city:null,
                        country:null
                    },
                    url:null
                }
            }
        },
        mounted(){//钩子函数    链式编程
            axios.get('./data.json').then(response=>(this.info=response.data));
        }

    });
</script>
</body>
</html>
newCodeMoreWhite.png

计算出来的结果，保存在属性中，内存中运行：虚拟Dom

计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销

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

<!--view层 模板-->
<div id="app">
    <p>currentTime1 {{currentTime1()}}</p>
    <p>currentTime1 {{currentTime2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data: {
            message:"hello,lzj"
        },
        methods: {
            currentTime1: function (){
                return Date.now();//返回一个时间戳
            }
        },
        computed: {//计算属性：methods和computed方法名不建议重名,重名之后只会调用methods中的方法
            currentTime2: function (){
                this.message;
                return Date.now();
            }
        }
    });
</script>
newCodeMoreWhite.png
  • methods: 定义方法，调用方法使用currentTime1()， 需要带括号
  • computed: 定义计算属性，调用属性使用currentTime2, 不需要带括号; this.message是为了能够让currentTime2观察到数据变化而变化

插槽slot

<!--view层 模板-->
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>
    </todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    //slot:插槽
    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 vm=new Vue({
        el:"#app",
        data:{
            title:"列表",
            todoItems:['lzj','hh','wxl']
        }

    });
</script>
newCodeMoreWhite.png

在这里插入图片描述

自定义事件内容分发

v-bind给组件绑定参数，简写**😗*

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

v-model 数据双向绑定

组件内部绑定事件需要使用到this.$emit(‘事件名’,参数);

<!--view层 模板-->
<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 todoItems" v-bind:item="item" v-bind:index="index" v-on:remove="removeItems(index)"></todo-items>
    </todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    //slot:插槽
    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 v-on:click="remove">删除</button></li>',
        methods:{
            remove:function (index){
                // this.$emit
                this.$emit('remove',index);
            }
        }
    });

    var vm=new Vue({
        el:"#app",
        data:{
            title:"列表",
            todoItems:['lzj','hh','wxl']
        },
        methods: {
            removeItems:function (index){
                console.log("删除了"+this.todoItems[index]+"ok")
                this.todoItems.splice(index,1);//一次删除一个元素
            }
        }
    });
</script>
newCodeMoreWhite.png

第一个vue-cli项目

需要的环境

将idea设为以管理员身份运行，不然后面会出现在idea中无法使用命令语句的情况

在这里插入图片描述

  • Node.js:https://nodejs.org/en/download/

    无脑下一步即可，安装在自己的环境目录下

    确定nodejs安装成功

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

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

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

    安装Node.js淘宝镜像加速器(cnpm)

    # -g就是全局安装
npm install cnpm -g
# 或使用如下语句解决npm速度慢的问题
npm install --registry=https://registry.npm.taobao.org

    安装过程可能有点慢，耐心等待！虽然安装了cnpm，但是尽量少用

    安装的位置：C:\Users\86158\AppData\Roaming\npm

    安装vue-cli

    cnpm install vue-cli -g

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

第一个vue-cli应用程序

  1. 创建一个Vue项目，我们随便建立一个空的文件夹在电脑上，我们在E盘下新建一个目录

    E:\Allworkspaces\idea-workspace\Vue

    管理员身份运行cmd，进入上述目录

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

    # 这里的 myvue 是项目名称，可以根据自己的需求起名
vue init webpack myvue

    一路都选择no即可

    说明

    • Project name:项目名称，默认回车即可

    • Project description: 项目描述，默认回车即可

    • Author:项目作者，默认回车即可

    • 在这里插入图片描述

    • Install vue-router: 是否安装vue-router, 选择n不安装(后期需要再手动添加)

    • Use ESLint to lint your code:是否使用ESLint做代码检查，选择n不安装(后期需要再手
      动添加)

    • Set up unit tests: 单元测试相关，选择n不安装(后期需要再手动添加)

    • Setup e2e tests with Nightwatch: 单元测试相关，选择n不安装(后期需要再手动添加)

    • Should we run npm install for you after the project has been created: 创建完成后直
      接初始化，选择n,我们手动执行;运行结果!

在这里插入图片描述

初始化并运行

cd myvue//进入项目目录
npm install//安装依赖文件
npm run dev//启动当前项目

ctrl+c可以停止

如果在安装依赖文件时出现warn，可以不管，也可以选择修复（建议不管）

Webpack学习

安装WebPack

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

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

​ 测试安装成功

  • webpack -v

  • webpack-cli -v

在这里插入图片描述

​ 配置

​ 创建webpack.config.js 配置文件

  • entry: 入口文件，指定WebPack用哪个文件作为项目的入口
  • output: 输出，指定WebPack把处理完成的文件放置到指定路径
  • module: 模块，用于处理各种类型的文件
  • plugins: 插件，如:热更新、代码重用等
  • resolve: 设置路径指向
  • watch:监听，用于设置文件改动后直接打包
module.exports = {
    entry: "",
    output: {
        path:"",
        filename: ""
    },
    module: {
        loaders: [
            {test: /\.js$/,loader: ""}
        ]
    },
    plugins: {},
    resolve: {},
    watch:true
}

​ 直接运行webpack命令打包

使用webpack

  1. 直接创建文件夹，然后使用idea打开

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

在这里插入图片描述

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

    //暴露一个方法
exports.sayHi = function (){
    document.write("<h1>lzj学习vue</h1>")
}

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

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

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

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

  4. 在Idea控制台中直接执行webpack；如果失败的话就用管理员权限运行即可

在这里插入图片描述

  1. 在项目目录下创建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>

  2. 运行HTML看效果

在这里插入图片描述

  1. 在这里插入图片描述

​ 说明

  • 运行不可以的管理员运行，添加mode:none

  • 参数 --watch 用于监听变化

    webpack --watch

vue-router路由

相当于ssm中的requestMapper的效果，用于跳转显示页面

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

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于Vue.js过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的CSS class的链接
  • HTML5历史模式或hash模式，在IE9中自动降级
  • 自定义的滚动条行为

​ 基于第一一个vue-cli进行测试学习;先查看node_ modules中是否存在vue-router
​ vue- router是一个插件包，所以我们还是需要用npm/cnpm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

npm install vue-router --save-dev

##如果下载中出现问题peer vue@"^3.2.0" from [email protected]
可以改为输入以下
npm install --legacy-peer-deps [email protected] --save-dev

##使用高版本会报错，可以使用如下命令
npm install [email protected] --save-dev

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

import Vue from 'vue'
import VueRouter from 'vue-router'//引入包
Vue.user(VueRouter);//显示声明使用VueRouter

  1. 先删除没有用的文件

  2. components目录下存放我们自己编写的组件

  3. 定义一个Content.vue和main.vue的组件

    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>

  4. 安装路由，在src目录下，新建一个文件夹：router，专门存放路由，建议文件名为index.js

    存放路由的相关设置

    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
    }
  ]
});
    newCodeMoreWhite.png

  5. 在main.js中配置路由

    1.引入router包，自动扫描里面的路由配置

    2.在new Vue中配置路由

    import Vue from 'vue'
import App from './App'
import router from './router'//自动扫描里面的路由配置

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: '<App/>'
})

  6. 在App.vue中使用路由

    router-link 跳转

    router-view 显示

    两个都必须要有

    <template>
  <div id="app">
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <router-view></router-view>
    <h1>lzj</h1>
  </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>
    newCodeMoreWhite.png

​ 项目架构：

在这里插入图片描述

Vue:实战快速上手

结合ElementUI组件库

命令行都要使用管理员模式运行

先在cmd中将依赖安装完成再在idea中打开

  1. 创建一个名为hello-vue的工程vue init webpack hello-vue

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

    # 进入工程目录
cd hello-vue
# 安装vue-router
npm install vue-router --save-dev
# 安装element-ui
npm i element-ui -S
# 并安装依赖
npm install
# 并安装SASS加载器//这里的版本建议使用4.0.0版本
cnpm install sass-loader node-sass --save-dev
# 并启动测试
npm run dev

  3. 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: --saves-dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写

  4. 创建成功后用idea打开，并删除净东西 创建views和router文件夹用来存放视图和路由

  5. 在views创建Main.vue

    <template>
  <h1>首页</h1>
</template>
<script>
    export default {
        name: "Main"
    }
</script>
<style scoped>
</style>

  6. 在views中创建Login.vue视图组件

    <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>
    newCodeMoreWhite.png

  7. 创建路由，在 router 目录下创建一个名为 index.js 的 vue-router 路由配置文件

    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',
      component: Main
    },
    {
      path: '/login',
      component: Login
    }
  ]
});
    newCodeMoreWhite.png

  8. 在main.js中配置相关，main.js是index.html调用的 所以前面注册的组件要在这里导入。一定不要忘记扫描路由配置并将其用到new Vue中

    import Vue from 'vue'
import App from './App'
//扫描路由配置
import router from './router'
//导入elementUI
import ElementUI from "element-ui"
//导入element css
import 'element-ui/lib/theme-chalk/index.css'

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

new Vue({
  el: '#app',
  router,
  render: h => h(App),//ElementUI规定这样使用
})
    newCodeMoreWhite.png

  9. 在App.vue中配置显示视图

    <template>
  <div id="app">
    <router-link to="/login">login</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App',
}
</script>


  10. npm run dev

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

    Profile.vue

    <template>
  <h1>个人信息</h1>
</template>
<script>
  export default {
    name: "UserProfile"
  }
</script>
<style scoped>
</style>

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

    List.vue

    <template>
  <h1>用户列表</h1>
</template>
<script>
  export default {
    name: "UserList"
  }
</script>
<style scoped>
</style>

  3. 修改首页视图，我们修改 Main.vue 视图组件，此处使用了 ElementUI 布局容器组件，代码如下：

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>
newCodeMoreWhite.png

​ 4.配置嵌套路由修改 router 目录下的 index.js 路由配置文件，使用children放入main中写入子模块，代码如下

index.js

import Vue from "vue";
import Router from "vue-router";
import Main from "../views/Main";
import Login from "../views/Login";
import UserList from "../views/user/List";
import UserProfile from "../views/user/Profile";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main,
      //路由嵌套
      children: [
        {path: '/user/profile',component: UserProfile},
        {path: '/user/list',component: UserList}
      ]
    },
    {
      path: '/login',
      component: Login
    }
  ]
});
newCodeMoreWhite.png

​ 5.路由嵌套效果图

在这里插入图片描述

参数传递及重定向

需要传参的跳转连接

<!--插入的地方-->
<!--                name传组件名  params传递参数,需要对象；v-bing-->
<router-link :to="{name:'UserProfile',params:{id:1}}">个人信息</router-link>

显示数据的页面

<template>
<!--  所有的元素，必须不能在根节点下-->
<!--  template只能有一个子元素-->
  <div>
    <h1>个人信息</h1>
<!--      {{$route.params.id}}-->
    {{id}}
  </div>

</template>

<script>
export default {
  props:['id'],//若router中没有定义props为true则可以不用写
  name: "UserProfile"
}
</script>

<style scoped>

</style>
newCodeMoreWhite.png

注册router

import Vue from "vue";
import Router from 'vue-router'
import Main from "../views/Main";
import Login from "../views/Login";
import UserList from "../views/user/List";
import UserProfile from "../views/user/Profile";
Vue.use(Router);

export default new Router({
  routes:[
    {
      path:'/main',
      component:Main,
      //嵌套路由
      children:[
        {
          path:'/user/profile/:id',
          name:'UserProfile',
          component:UserProfile,
          props:true//让显示数据的页面可以获取，可不添加
        },
        {
          path:'/user/list',
          component:UserList
        }
      ]
    },
    {
      path:'/login',
      component:Login
    },
    {
      path:'/goHome',
      redirect:'/main'
    }
  ]
});
newCodeMoreWhite.png
{
    path:'/goHome',
    redirect:'/main'
}

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

路由钩子与异步请求

路由模式与404

  • hash：路径带 # 符号，如 http://localhost/#/login

  • history：路径不带 # 符号，如 http://localhost/login

    修改路由配置，代码如下：

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

​ 404界面：

    1. 创建一个NotFound.vue视图组件

      <template>
    <div>
      <h1>404,你的页面走丢了</h1>
    </div>
</template>
<script>
    export default {
        name: "NotFound"
    }
</script>
<style scoped>
</style>

    2. 修改路由配置index.js

      import NotFound from '../views/NotFound'
{
   path: '*',
   component: NotFound
}

路由钩子与异步请求

beforeRouteEnter：在进入路由前执行
beforeRouteLeave：在离开路由前执行

在Profile.vue中写:

  export default {
    name: "UserProfile",
    beforeRouteEnter: (to, from, next) => {
      console.log("准备进入个人信息页");
      next();
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("准备离开个人信息页");
      next();
    }
  }

参数说明:

  • to：路由将要跳转的路径信息
  • from：路径跳转前的路径信息
  • next：路由的控制参数
  • next() 跳入下一个页面
  • next(’/path’) 改变路由的跳转方向，使其跳到另一个路由
  • next(false) 返回原来的页面
  • next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例

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

  1. 安装 Axios

    cnpm install --save vue-axios

  2. main.js引用 Axios

    import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

  3. 准备数据 ： 只有我们的 static 目录下的文件是可以被访问到的，所以我们就把静态文件放入该目录下。
    数据和之前用的json数据一样 需要的去上述axios例子里

    // 静态数据存放的位置
static/mock/data.json

  4. 在 beforeRouteEnter 中进行异步请求

    Profile.vue:

    export default {
  props:['id'],
  name: "UserProfile",
  //过滤器
  beforeRouteEnter:(to,from,next)=>{
    console.log("进入路由之前")
    next(vm => {
      vm.getData();//进入路由之前执行getData
    });
  },
  beforeRouteLeave:(to,from,next)=>{
    console.log("进入路由之后")
    next();
  },
  methods:{
    getData:function (){
      this.axios({
        method:'get',
        url:'http://localhost:8080/static/data.json'
      }).then(function (response){
        console.log(response);
      })
    }
  }
}


    ==**参数说明:**==

    - to：路由将要跳转的路径信息
    - from：路径跳转前的路径信息
    - next：路由的控制参数
    - next() 跳入下一个页面
    - next(’/path’) 改变路由的跳转方向，使其跳到另一个路由
    - next(false) 返回原来的页面
    - next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实
    newCodeMoreWhite.png
  5. export default {undefined
name: “UserProfile”,
beforeRouteEnter: (to, from, next) => {undefined
console.log(“准备进入个人信息页”);
next();
},
beforeRouteLeave: (to, from, next) => {undefined
console.log(“准备离开个人信息页”);
next();
}
}

  6. main.js引用 Axios

    import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

  7. 准备数据 ： 只有我们的 static 目录下的文件是可以被访问到的，所以我们就把静态文件放入该目录下。
    数据和之前用的json数据一样 需要的去上述axios例子里

    // 静态数据存放的位置
static/mock/data.json

  8. 在 beforeRouteEnter 中进行异步请求

    Profile.vue:

    export default {
  props:['id'],
  name: "UserProfile",
  //过滤器
  beforeRouteEnter:(to,from,next)=>{
    console.log("进入路由之前")
    next(vm => {
      vm.getData();//进入路由之前执行getData
    });
  },
  beforeRouteLeave:(to,from,next)=>{
    console.log("进入路由之后")
    next();
  },
  methods:{
    getData:function (){
      this.axios({
        method:'get',
        url:'http://localhost:8080/static/data.json'
      }).then(function (response){
        console.log(response);
      })
    }
  }
}


    ==**参数说明:**==

    - to：路由将要跳转的路径信息
    - from：路径跳转前的路径信息
    - next：路由的控制参数
    - next() 跳入下一个页面
    - next(’/path’) 改变路由的跳转方向，使其跳到另一个路由
    - next(false) 返回原来的页面
    - next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实
    newCodeMoreWhite.png
  9. export default {undefined
name: “UserProfile”,
beforeRouteEnter: (to, from, next) => {undefined
console.log(“准备进入个人信息页”);
next();
},
beforeRouteLeave: (to, from, next) => {undefined
console.log(“准备离开个人信息页”);
next();
}
}

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK