【Vue】Vue入门学习笔记

最新推荐文章于 2024-09-20 11:00:29 发布
最新推荐文章于 2024-09-20 11:00:29 发布
阅读量133 收藏 1
点赞数
文章标签： vue.js 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30130205/article/details/130401854
版权

Vue

Vue常用7个属性

  1. el属性
  2. data属性
  3. template属性
  4. methods属性
  5. render属性
  6. computed属性
  7. watch属性

1、前端核心分析

  • 软件名称：vue.js
  • 作者：尤雨溪
  • 前端三大框架：VUE js,Angular JS,Ractive js

相关技术侧重的功能

  1. 视图：VUE
  2. 网络通信：axios
  3. 页面跳转：vue-router
  4. 状态管理：vuex
  5. Vue-Ul:如 飞冰

CSS预处理器

为CSS增加了一下变成的特性

常用的css预处理器：

  1. SASS:基于Ruby
  2. LESS:基于NodeJS(建议使用这种)

2、前端发展史

UI框架

  1. Ant-Design
  2. ElementUl、iview、ice
  3. Bootstrap
  4. AmazeUI

Javascrpt 构建工具

  • Babel：js编译工具（用于编译typeScript比较多）
  • Webpack：模块打包器（我们这个用的比较多）

3、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/vue@2.5.16/dist/vue.js"></script>
<script>
    /*创建vue对象*/
    var vm = new Vue({
        /*绑定元素*/
        el:"#app",
        /* model:数据 */
        data:{
            message:"hello vue!"
        }
    });
</script>
</body>
</html>

4、Vue基本语法

  • if语句

    <!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<!--V-if的用法-->
<div id="app">
<!--    <h1 v-if="ok">Yes</h1>-->
    <h1 v-if="dat==='A'">A</h1>
    <h1 v-else-if="dat==='B'">B</h1>
    <h1 v-else-if="dat==='C'">C</h1>
    <h1 v-else>No</h1>
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            ok: false,
            dat:'A'
        }
    });
</script>
</body>
</html>
</body>
</html>

  • for语句

    <!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

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

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            items:[
                {message: '狂神说Java'},
                {message: '狂神说前端'},
                {message: '狂神说运维'},
            ]
        }
    });
</script>
</body>
</html>
</body>
</html>

5、Vue绑定事件

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
    <button v-on:click="sayHi">click Me</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            message:"狂神说Java"
        },
        methods:{//方法必须定义在Vue的Method对象中
            sayHi:function (event){
                alert(this.message)
            }
        }
    });
</script>
</body>
</html>
</body>
</html>

6、Vue双向绑定

v-model=“message”

案例：将用户输入的数据与系统数据进行绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
    输入的文本：<input type="text" v-model="message">{{message}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            message:"输入你需要的数据"
        }
    });
</script>
</body>
</html>
</body>
</html>

7、Vue组件讲解

Vue组件:自定义标签

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
    <!--使用组件-->
    <qinjiang></qinjiang>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    //定义一个vue组件
    Vue.component("qinjiang",{
        template:'<li>Hello</li>'	//template属性为该组件的模板或者样式
    });

    var vm = new Vue({
        el: "#app",
        data:{
            message:"狂神说Java"
        }
    });
</script>
</body>
</html>
</body>
</html>
  • 切记：模板的定义是在script标签中
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
    <!--组件:传递给组件中的值：props-->
    <qinjiang v-for="item in items" v-bind:dat="item"></qinjiang>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    //定义一个vue组件
    Vue.component("qinjiang",{
        props:['dat'],//通过props访问外部变量
        template:'<li>{{dat}}</li>'
    });

    var vm = new Vue({
        el: "#app",
        data:{
            items:["java","Linux","前端"]
        }
    });
</script>
</body>
</html>
</body>
</html>
  • 以上内容：将组件数据与内部数据进行绑定

8、Axios异步通信

网络通信

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo7</title>
    <!--v-clock:解决闪烁问题-->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
    <!--v-clock：解决闪烁问题，当数据没有加载完，则显示白屏-->
    <div id="vue" v-clock>
        <div>{{info.name}}</div>
        <div>{{info.address.street}}</div>
        <a v-bind:href="info.url">点我</a>
    </div>

<!--同时导入vue和axios的cdn包-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.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>
</body>
</html>

9、计算属性

计算属性：计算出来的结果，保存在属性中~

好处：在内存中运行，即虚拟Dom

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo7</title>
    <!--v-clock:解决闪烁问题-->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>{{currentTime1()}}</p>
        <p>{{currentTime2}}</p>
    </div>

<!--同时导入vue和axios的cdn包-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            message:"hello,kuangshen"
        },
        methods:{
            currentTime1:function (){
                return Date.now();//返回一个时间戳
            }
        },
        computed:{//计算属性：methods，computed 方法名不能重名，否则会调用methods中的方法
            currentTime2:function (){
                return Date.now();//返回一个时间戳
            }
        }
    });
</script>
</body>
</html>
</body>
</html>

使用场景

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

10、插槽slot

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo9</title>
</head>
<body>
<div id="app">
    <todo>
        <todo-title solt="todo-title" :title="title"></todo-title>
        <todo-items solt="todo-items" v-for="item in todoItems" :item="item"></todo-items>
    </todo>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.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: ['狂神说Java', '狂神说前端', '狂神说Linux']
        }
    });
</script>
</body>
</html>
</body>
</html>

11、自定义事件、内容分发

略

12、第一个vue-cli项目

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

  • 主要功能：

    1. 统一目录结构
    2. 本地调试
    3. 热部署
    4. 单元测试
    5. 集成打包上线

  • 需要的坏境：

    1. Node.js ：下载 | Node.js 中文网 (nodejs.cn)

      • 确认安装成功可以在cmd输入：node -v或npm -v查看版本

    2. Git

    3. 镜像（这里以淘宝镜像为例 cnpm）

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

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

#方法三
npm config set registry https://registry.npm.taobao.org
#验证，如果返回 https://registry.npm.taobao.org 说明安装成功！
npm config get registry

  • 安装vue-cli

    cnpm install vue-cli -g

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

在这里插入图片描述

出现如上界面，说明安装成功！

  • 创建项目

  1. 在你的项目目录打开cmd

  2. 输入：vue init webpack 项目名

在这里插入图片描述

  1. 初始化，并运行
#进入项目目录
cd 项目目录
#安装依赖
npm install
#启动项目
npm run dev

出现下面界面说明项目启动成功！

在这里插入图片描述

然后再浏览器地址栏输入：http://localhost:8080/便可访问

在这里插入图片描述

**关闭项目：**ctrl+C

13、webpack学习使用

  • webpack简介：webpack是一个现代javaScript应用程序的静态模块打包器。是一款模块加载兼打包工具，它能吧各种资源，如js，jsx，es6，sass，less图片等都作为模块处理和使用

  • 安装：

    1. #安装打包工具
npm install webpack -g
#安装客户端
npm install webpack-cli -g

    2. 测试安装成功：

      webpack -v
webpack-cli -v

  • 配置

    1. 创建webpack.config.js配置文件
      • entry:入口文件，指定webpack用哪个文件作为项目的入口
      • output：输出，指定webpack吧处理完成的文件放置到指定的路径
      • module：模块，用于处理各类型的文件
      • plugins：插件，如：热更新、代码重用等
      • resolve：设置路径指向
      • watch：监听，用于设置文件改动后直接打包

  • 使用

    1. 创建项目

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

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

      //暴露一个方法,exports相当于java中的public
exports.sayHi = function (){
    document.write("<h1>狂神说ES6</h1>")
};

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

      //引入模块，类似Java的导包
var hello = require("./hello")

//使用模块中的方法
hello.sayHi();

    5. 在项目目录下chuangjianwebpack.config.js配置文件

      //导出模块
module.exports = {
    entry:'./modules/main.js',//设置主入口
    output:{    //输出
        filename:"./js/bundle.js"
    }
};

    6. 使用webpack命令打包（需要使用管理员模式打开IDEA或命令行，无法打包请看https://blog.csdn.net/PengHengYYDS/article/details/121234702）

      webpack

      出现如下画面则说明打包成功

在这里插入图片描述

 完整的项目目录结构：

在这里插入图片描述

14、vue-router路由

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

  • 安装

    cnpm install vue-router --save-dev

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

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

Vue.use(VueRouter)

  • 使用

    目录结构

在这里插入图片描述

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>

App.vue

<template>
  <div id="app">
    <h1>Vue-Router</h1>
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
  import Content from "./components/Content";
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>

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

//现实声明使用VueRouter
Vue.use(router);

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

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:[
    {
      //路由路径 类似@RequestMapping
      path:'/content',
      name:'content',
      //跳转的组件
      component:Content
    },
    {
      //路由路径
      path:'/main',
      name:'main',
      //跳转的组件
      component:Main
    }
  ]
});

15、vue+elementUI

创建工程

  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加载器
cnpm install sass-loader node-sass --save-dev
#启动测试
npm run dev

项目代码

  • 结构

在这里插入图片描述

  • App.vue

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

<script>

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

  • Nain.vue

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

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

<style scoped>

</style>

  • 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="dialogVisiable" 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:"密码不可为空",tigger:"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>

  • package.json

    {
  "name": "hello-vue",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "kuangshen",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": {
    "element-ui": "^2.15.9",
    "vue": "^2.5.2"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "less-loader": "^5.0.0",
    "node-notifier": "^5.1.2",
    "node-sass": "^7.0.1",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "sass-loader": "^4.1.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-router": "^3.1.5",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

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

  • main.js

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

import router from './router'

//导入elementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

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

// Vue.config.productionTip = false


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

注意：Vue Router v3对应Vue2.x， v4对应Vue3，

16、路由嵌套

效果：

在这里插入图片描述

  • 项目目录结构

在这里插入图片描述

  • List.vue

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

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

<style scoped>

</style>

  • Profile.vue

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

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

<style scoped>

</style>

  • 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>
            <e1-menu-item-group>
              <el-menu-item index="2-1">分类管理</el-menu-item>
              <el-menu-item index="2-2">内容列表</el-menu-item>
            </e1-menu-item-group>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title"><i class="el-icon-caret-right"></i>系统管理</template>
            <e1-menu-item-group>
              <el-menu-item index="3-1">用户设置</el-menu-item>
            </e1-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: #048bd1;
  color: #333;
  line-height: 60px;
}

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

  • 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
    },
    {
      path:'/login',//嵌套路由
      component:Login,
      children:[
        {path:'/user/profile',component:UserProfile},
        {path:'/user/list',component:UserList},
      ]
    }
  ]
});

17、参数传递及重定向

效果

在这里插入图片描述

  • 目录结构：和上一节一样

  • Profile.vue

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

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

<style scoped>

</style>

  • List.vue

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

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

<style scoped>

</style>

  • 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">
                <!--name:地址 params传递参数 需要对象：v-bind-->
                <router-link :to="{name:'UserProfile',params:{id:1}}">个人信息</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <router-link to="/user/list">用户列表</router-link>
              </el-menu-item>
              <el-menu-item index="1-3">
                <router-link to="/goHome">回到首页</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>
            <e1-menu-item-group>
              <el-menu-item index="2-1">分类管理</el-menu-item>
              <el-menu-item index="2-2">内容列表</el-menu-item>
            </e1-menu-item-group>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title"><i class="el-icon-caret-right"></i>系统管理</template>
            <e1-menu-item-group>
              <el-menu-item index="3-1">用户设置</el-menu-item>
            </e1-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: #048bd1;
  color: #333;
  line-height: 60px;
}

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

  • 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/:id',name:'UserProfile',component:UserProfile,props:true},
        {path:'/user/list',component:UserList},
      ]
    },
    {
      path:'/login',
      component:Login
    },
    {//演示重定向
      path:'/goHome',
      redirect:'main'
    }
  ]
});

18、404和路由钩子

路由方式有两种

  1. hash：路径带#（默认）
  2. history：路径不带#

将路由改为history模式

只需要在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({
  mode:'history',	//修改路由的方式在这里
  routes:[
    {
      path:'/main/:name',
      component:Main,
      props:true,
      children:[
        {path:'/user/profile/:id',name:'UserProfile',component:UserProfile,props:true},
        {path:'/user/list',component:UserList},
      ]
    },
    {
      path:'/login',
      component:Login
    },
    {
      path:'/goHome',
      redirect:'main'
    }
  ]
});

自定义404

  1. 在views目录下 创建404视图

    <template>
  <h1>404,你的页面走丢了</h1>
</template>

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

<style scoped>

</style>

  2. 在index.js中导入视图

    import NotFound from "../views/NotFound";//1.导入404视图

//2.设置404页面
{
      path:'*',
      component:NotFound
    }

路由钩子与异步请求

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

在Profile.vue中测试

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

<script>
export default {
  props:['id'],
  name: "UserProfile",
  //进入路由前的钩子，类似过滤器，拦截器
  beforeRouteEnter:(to,form,next)=>{
      console.log("进入路由之前");
      next();
  },
  beforeRouteLeave:(to,form,next)=>{
      console.log("在离开路由前");
      next();
  }
}
</script>

<style scoped>

</style>

参数说明：

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

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

  1. 安装Axios

    cnpm install axios -s

  2. main.js引用Axios

    import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios);

Vue.prototype.axios = axios;

  3. Profile.vue

    <template>
  <div>
    <h1>个人信息</h1>
    {{$route.params.id}}<br/>
    {{id}}
  </div>
</template>
 
<script>
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)
      });
    }
  }
}
</script>
 
<style scoped>
 
</style>
#上善若水
关注
vue 3.0学习笔记(从入门到精通)
10-07
本文将从入门到精通的角度详细介绍Vue 3.0的关键知识点。 首先，安装Vue 3.0的开发环境是至关重要的。你可以通过npm（Node Package Manager）全局安装Vue CLI的最新版本，命令为`npm I -g @vue/cli@next`。接着，...
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，于2014年发布。它以简单易学和高效为核心，适用于构建复杂且响应式的用户界面。Vue的特点在于其渐进式架构，允许开发者逐步将Vue融入现有的项目中，而不必...
VUE3.0基础入门笔记
执笔写JAVA
06-01 1998
Vue 3 是一个流行的开源JavaScript框架，用于构建用户界面和单页面应用。 它带来了许多新特性和改进，包括更好的性能、更小的打包大小、更好的TypeScript支持、全新的组合式 API，以及一些新的内置组件。
Vue学习笔记
fzt12138的博客
07-06 718
点击传递data(){return{Message:"我是子数据"},methods:{//参数1：字符串，理论上自定义，但是需要有意义//参数2：传递的数据
狂神说Vue笔记整理
热门推荐
qq_46138160的博客
12-11 10万+
狂神说Vue笔记 ​ 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 一、前端核心分析 1.1、概述 Soc原则：关注点分离原则 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管
尚硅谷vue3学习笔记
2302_77862232的博客
01-07 2286
setup`是`Vue3`中一个新的配置项，值是一个函数，它是 `Composition API` ，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在`setup`中。特点如下：- `setup`函数返回的对象中的内容，可直接在模板中使用。- `setup`中访问`this`是`undefined`。- `setup`函数会在`beforeCreate`之前调用，它是“领先”所有钩子执行的。姓名：{{ name }}
Vue的快速入门通俗易懂(学习笔记)
吉屋安的博客
05-22 1674
本文是观看“【狂神说Java】Vue最新快速上手教程通俗易懂 ”所记录的笔记，读者结合视频阅读更佳，文章包含了个人对相关知识点的粗略理解，借此进行分享，文中代码结构理解有误的地方，还请大家指出。本文章将不断更新，直至视频学完 目录一、Vue的基本语法二、Vue的绑定事件三、Vue的双向绑定四、Vue的组件讲解五、Vue的Axios异步通信六、Vue的计算属性七、Vue的插槽slot八、Vue的自定义事件的分发九、Vue的webpack十、Vue的路由十一、Vue的element-UI十二、Vue的路由嵌.
Vue入门学习笔记
Sainxuxufei的博客
09-29 628
vue学习笔记（包含vue快速入门和vue脚手架入门）
Vue学习笔记（一）
wz_1992的博客
09-03 966
Vue.js 1、如何引用Vue <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scal
Vue基础快速入门学习笔记整理
weixin_45311418的博客
02-26 714
一、Vue基础 课程详情：黑马VUE学习笔记—后端小白入门（附带项目天气预报和音乐播放器所有源码） 视频地址：https://www.bilibili.com/video/BV12J411m7MG?p=37&share_source=copy_web 课程源代码：链接：https://pan.baidu.com/s/1yQMpgrHDPMnGYkmwfgRseQ 提取码：1234 提前掌握基础知识：HTML、CSS、JavaScript、AJAX 工具：VSCode、插件Live Server 课程
【Vue基础版】三天学会Vue，Vue详细学习笔记
每天進步一點點
06-27 1436
Vue学习笔记 一、Vue基础知识 1、简介 构建用户界面的渐进式框架 官网：https://v2.cn.vuejs.org/ 学习一个技术，最重要得就是技术官网。 2、初识VUE root容器里面依然符合Html规范，只不过是加入了一些特殊的Vue语法 实例和容器是一一对应的。 真实开发中只有一个Vue实例，并且会配合着组件一起使用； {{ xxx }}中的xxx要写js表达式（js表达式是会产生一个值，可以放在任何需要值的地方，这与js语句是不同的），且xxx可以读到data中的所有用到的属性
Vue3系统入门与项目实战学习笔记
倩mys的博客
04-24 4955
文章目录1 Vue 语法初探1-1 课前须知1-2 初学编写 HelloWorld 和 Counter1-3 编写字符串反转和内容隐藏小功能1-4 编写TodoList 小功能，了解循环和双向绑定1-5 组件概念初探，对 TodoList 进行组件代码拆分2 Vue 基础语法2-1 Vue 中应用和组件的基础概念2-2 理解 Vue 中的生命周期函数2-3 常用模版语法讲解2-4 数据，方法，计算属性和侦听器2-5 样式绑定语法2-6 条件渲染2-7 列表循环渲染2-8 事件绑定2-9 表单中双向绑定指令的
Vue初学者入门学习笔记(包含实践demo)
08-01
Vue初学者入门学习笔记将引导你逐步掌握这个强大的框架。笔记中包括了Vue.js的基础概念、核心特性、组件化开发以及实战应用等方面的知识。 首先，Vue.js的核心概念包括响应式系统、指令（如v-if、v-for）、计算属性...
JavaScript的MVVM库Vue.js入门学习笔记
11-26
一、v-bind 缩写 <!-- 完整语法 --> <a></a> <!-- 缩写 --> <a></a> <!-- 完整语法 --> <button v-bind:disabled="someDynamicCondition">Button</button>...-- 缩写
Vue 3:实现页面返回上一页的功能
weixin_73060959的博客
09-15 245
在Vue 3中，可以使用Vue Router库来实现页面返回上一页的功能。首先，确保你已经安装并设置了Vue Router。这两个方法都可以使浏览器的历史记录回退一步。来获取Vue Router实例。然后，我们定义了一个。函数会被触发，从而使浏览器返回到上一个访问的页面。在这个例子中，我们使用。
vue 中如何实现鼠标拖动出发滚动条的跟随移动？
最新发布
sinat_33255495的博客
09-20 240
如果要实现鼠标辅助触发滚动条的移动，需要借助 mousedown，mouseup，mousemove 三个事件，通过鼠标的移动来动态修改滚动条的scrollLeft和scrollTop,来模拟实现滚动条的位置变更。在做弹窗、表单或 tab 切换需求的时候，有时候因为内容过长会导致出现滚动条，但是只能拖动滚动条时会导致操作不便，我们会希望实现通过拖动内容区实现滚动条的滑动。这样操作就会简单多了。为方便复用，我们可以创建一个类来封装鼠标事件，使用时把事件挂载到指定容器即可。这样就实现啦，就是如此简单！
Vue 常用高级指令解析
前端梦工厂
09-18 1028
本文简要介绍了Vue框架中几个常见的高级指令，它们在某种特定场景下发挥了各种妙用，提供了更复杂的功能场景方案，但是在使用高级指令时，需要注意掌握各个指令的用法和特点，合理选择和搭配不同的指令，从而实现所需的功能。同时，还需要注意控制指令的使用粒度，避免过度使用指令导致代码难以维护。指令的使用也远不止这些，这些仅仅涉及到在Vue中内置的某些指令，当我们发现如果内置指令满足不了我们在项目中的使用场景时，Vue允许开发者创建自定义指令，以满足特定的需求或扩展Vue的功能。自定义指令可以用于操作DOM。
基于Vue 3组合函数的分页、搜索与排序实践 —— nbsaas-boot项目的实际应用
nbsaas-boot基于Request-Response的企业级快速开发框架
09-17 1547
Vue 3的组合函数是用于封装功能逻辑的一种模式。与Vue 2的选项式API不同，组合函数允许开发者将组件逻辑集中封装在独立的函数中，便于在不同的组件间共享。在大型项目中，像这样的电商系统，组件往往需要实现复杂的数据交互逻辑，例如分页、搜索、排序等功能。如果将这些功能重复写在多个组件中，代码将会变得臃肿且难以维护。组合函数可以有效解决这一问题。
vue 案例使用
buhuidage的博客
09-17 308
加上show-password就行。el-switch 按键的使用。
Vue全家桶学习笔记：从入门到实践
本资源是一份详细的Vue全家桶学习笔记，旨在提供从入门到深入理解Vue及其相关技术的完整指南。主要内容包括： 1. **Vue基础**： - Vue的核心功能：Vue是一个轻量级的MVVM框架，它强调组件化开发，具有插件、组件、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值