Javaweb（前端）

Web开发

Web前端

HTML+CSS

盒子模型

JavaScript

js引入方式

js基础语法

js函数

js对象（JSON+BOM+DOM）

js事件监听

Vue

编辑Vue快速入门

Vue常用指令

Vue生命周期

Ajax

原生Ajax

Axios

YApi（应用网页）

前端工程化

Vue-cli

Vue组件库Element

Vue路由

打包部署

Web开发

web:全球广域网，也称万维网www(World Wide Web)，能够通过浏览器访问的网站。

web网站的工作流程：

浏览器根据请求的域名请求对应的前端服务器，前端服务器接受请求之后，会把对应的前端代码响应回浏览器，（浏览器也是一个程序，里面有自动引擎，会自动解析前端的代码，显示）浏览器解析到前端代码中去哪（url）获取数据，浏览器会根据url访问（请求）后端Java程序，后端Java程序会继续访问（请求）数据库服务器，数据库服务器响应响应的数据返回给后端Java程序，后端Java程序在响应给浏览器，浏览器渲染展示出来。

前后端分离开发:需求分析-->接口定义 (API接口文档)-->前后端并行开发 (遵守规范)--->前端、后端)-->前后端联调测试

Web前端

不同的浏览器，内核不同，对应相同的前端代码解析的效果会产生的效果存在差异。就需要有统一的网页标准。

HTML：相当于骨架，负责网页的结构。

CSS：丰富其内容会生动，负责网页的表现。

JavaScript:可以让网页产生交互，动起来，负责网页的行为。

HTML+CSS

HTML：超文本标记语言。

CSS：层叠样式表，用于控制页面的样式（表现）

<img scr=url width= height= >
 <!-- img标签：
       src:图片资源路径
       width：宽度 (px: 像素； %,相对于父元素的百分比)
       height:高度
       绝对路径：
          1、绝对磁盘路径：
          <img src="C:\Users\Lenovo\Desktop\javaweb\day01-HTML-CSS\day01-HTML-CSS\资料\3. 图片、音频、视频\img\news_logo.png">
          <img src="D:\Javaweb\img\news_logo.png">
          2、绝对网路路径：
          <img src="https://search-operate.cdn.bcebos.com/e8cbce1d53432a6950071bf26b640e2b.gif">
        
        相对路径：相对于这个网页的位置
                  ./:当前目录 ./可以省略
                 ../:上一级目录 不能省略
                <img src="./img/news_logo.png">
                <img src="img/news_logo.png">
    -->

CSS选择器
span{}  .cls{} #time{}
   <style>
        h1 {
            color: #4D4F53;
        }
        /* id>类>元素 
         元素选择器 
         span {
            color: red;
        } 

         类选择器 
        .cls {
            color: green;
        } 
        
         ID选择器 */
        #time {
            color: #968D92;
            font-size: 13px; /* 设置字体大小 */
        }

    </style>

超链接<a href="" target="_self或_blank"></a>
 <!-- 
        标签：<a>
         href:指定资源访问的url
         target：指定在何处打开资源链接
                _self:默认值,在当前页面打开
                _blank:在空白页面打开
     -->

视频<video src="" controls width="" height=""></video>
音频<audio src="" controls></audio>
   <!--
     视频标签 <video>
             src:规定视频的url
             controls:显示播放控件
             width:播放器的宽度
             height:播放器的高度
    音频标签 <audio>
           src:规定音频的url
           controls:显示播放控件
    段落标签：<p>
    文本加粗标签：<b> </strong>
     -->
font-size:10px; 设置字体的大小
text-decoration:none; 设置文本为一个标准的文本
text-index:30px; 设置首行缩进
line-height:35; 设置行高
text-aligh:right;设置对齐方式

盒子模型

<title>盒子模型</title>
    <style>
        /* CSS盒子模型 */
        /* 组成：内容 content 内边距 padding 边框 border 外边距 margin */
        div {
            width: 200px;/* 设置宽度 */
            height: 200px;/* 设置高度 */
             /* 设置边框属性 */
            box-sizing: border-box; /* 指定width height为盒子的高宽 如果没有border-box 宽和高指的是内容的大写 */
            background-color: aquamarine; /* 背景色 */
            /* padding-top padding-left padding-right */
            padding: 20px; /* 内边距, 上 右 下 左 */
            border: 10px solid red; /* 边框, 宽度 线条类型-solid-直线 颜色 */
            margin: 30px; /* 外边距, 上 右 下 左 */
        }
    </style>

表格table

<table>定义表格

<tr>定义表格中的行,一个<tr>表示一行

<th>表示表头单元格，具有加粗居中效果

<td>表示普通单元格

表单form

<!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-scale=1.0">
    <title>HTML-表单项标签</title>
</head>
<body>
<!--
     场景：在网页中主要负责数据采集功能，如 注册、登录等数据采集
    标签：<form>
    表单项：不同类型的input元素、下拉列表、文本域等
    <input>:定义表单项，通过type属性控制输入形式
    <select>:定义下拉列表
    <textarea>:定义文本域

    form表单属性: 
        action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面
        method: 表单的提交方式 .
            get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值
            post: 在消息体(请求体)中传递的, 参数大小无限制的.
    <input>:定义表单项，通过type属性控制输入形式
             type取值
                 text:默认值，定义单行的输入字段
                 password 定义密码字段
                 radio 定义单选按钮
                 checkbox 定义复选框
                 file 定义文件上传按钮
                 date/time/datetime-local 定义日期/时间/日期时间
                 number 定义数字输入框
                 email 定义邮件输入框
                 hidden 定义隐藏域
                 submit/reset/button 定义提交按钮/重置按钮/可点击按钮
    <select>:定义下拉列表
    <textarea>:定义文本域
    
 -->
<!-- value: 表单项提交的值 -->
 <form action="" method="post">
   姓名:<input type="text" name="name"><br><br>
   密码:<input type="password" name="password"> <br><br>
   性别: <label><input type="radio" name="gender" value="1">男</label>
   <label><input type="radio" name="gender" value="2">女</label><br><br>
   爱好：<label><input type="checkbox" name="hobby" value="java">java</label>
   <label><input type="checkbox" name="hobby" value="game">game</label>
   <label><input type="checkbox" name="hobby" value="sing">sing</label><br><br>
   图像：<input type="file" name="image"><br><br>
   生日：<input type="date" name="date"><br><br>
   时间：<input type="time" name="time"><br><br>
   日期时间：<input type="datetime-local" name="datetime"> <br><br>
   邮箱：<input type="email" name="email"><br><br>
   年龄：<input type="number" name="age"><br><br>
   学历：<select name="degree" >
        <option value="">-----------请选择----------</option>
        <option value="1">大专</option>
        <option value="2">本科</option>
        <option value="3">硕士</option>
        <option value="4">博士</option>
   </select><br><br>
   描述：<textarea name="description" cols="30" rows="10"></textarea><br><br>
   <input type="hidden" name="id" value="1">
   <input type="button" value="按钮">
   <input type="reset" value="重置">
   <input type="submit" value="提交">
 </form>
<br><br>

</body>
</html>

JavaScript

JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互

js引入方式

 <!-- 内部脚本 -->
     <script>
        alert("Hello JS");//定义弹出框
    </script> 
    
    <!-- 外部脚本 -->
    <script src="js/demo.js"></script>

内部脚本：将JS代码定义在html页面的<script></script>中

建议：将<script></script>放在<body>的底部

外部脚本：将JS代码定义在js文件中，通过<script></script>标签引入

注意：通过<script>标签引入外部js文件时，标签不可以自闭合

js基础语法

输出语句

<script>
    window.alert("Hello JS"); //弹出框
    alert("hello everyone");//可以省略window
    document.write("Hello JS"); //写入HTML页面

    console.log("Hello JS"); //浏览器控制台
   </script>

变量

JavaScript 中用 var 关键字（variable 的缩写）来声明变量。

JavaScript 是一门弱类型语言，变量可以存放不同类型的值。

变量名需要遵循如下规则：

组成字符可以是任何字母、数字、下划线（_）或美元符号（$）

数字不能开头

建议使用驼峰命名

变量特点：JS是弱类型语言，变量可以存放不同类型的值

声明：

var：声明变量，全局作用域/函数作用域，允许重复声明

let：声明变量，块级作用域，不允许重复声明

const：声明常量，一旦声明，常量的值不能改变

<script>
    //定义变量
    var a = 0;
    a = "A";

    alert(a);

    // var 定义的是一个全局变量， 还可以重复声明
    {
        var a = 0;
        var a = "A";
    }
    alert(a);
    

    // let 定义的是一个局部变量， 不可以重复声明
    {
        let a = 0;
        a = "A";

        alert(a);
    }
    
    //const 定义的是一个常量
    const pi = 3.14;
    //pi = 3.15;

    alert(pi);

</script>

数据类型

number：数字（整数、小数、NaN(Not a Number)）

string：字符串，单双引皆可

boolean：布尔。true，false

null：对象为空

undefined：当声明的变量未初始化时，该变量的默认值是 undefined

使用 typeof 运算符可以获取数据类型

<script>
   
    //原始数据类型
    alert(typeof 3); //number
    alert(typeof 3.14);//number

    alert(typeof "A"); //string
    alert(typeof 'Hello');//string

    alert(typeof true);//boolean
    alert(typeof false);//boolean

    alert(typeof null);//object

    var a ;
    alert(typeof a);//undefined
        
</script>

运算符

==会进行类型转换去比较 ===不会进行类型转换

<script>
    /* ==会进行类型转换去比较 ===不会进行类型转换 */
    var age = 20;
    var _age = "20";
    var $age = 20;
    
    alert(age == _age); //true
    alert(age === _age); //false
    alert(age === $age); //true
</script>

类型转换

<script>    
    // 类型转换 - 其他类型转为数字
    alert(parseInt("12")); //12
    alert(parseInt("1222A45")); //1222
    alert(parseInt("A45")); //NaN(not a number)

    // 类型转换 - 其他类型转为boolean
    if(0){ //false
        alert("0 转换为false");
    }

    if(NaN){ //false
        alert("NaN 转换为false");
    }

    if(-1){ //true
        alert("除0和NaN其他数字都转为 true");
    }

    if(""){ //false
        alert("空字符串为 false, 其他都是true");
    }
        
    if(null){ //false
        alert("null 转化为false");
    }

    if(undefined){ //false
        alert("undefined 转化为false");
    }

</script>

js函数

<script>
    /* 
       function functionName(参数1,参数2)
       {

       }
       形式参数不需要类型 因为javScript是弱类型语言
       返回值也不需要定义类型，可以在函数内部直接使用return返回即可
    */
    //定义函数---1
    // function add(a,b){
    //    return  a + b;
    // }
    //  function sub(a,b)
    //  {
    //     return a-b;
    //  }
    //  var sum=sub(20,10);
    //  alert(sum);
    //定义函数-----2
    
    var add = function(a,b){
        return  a + b;
    }
    
       var sub=function(a,b)
       {
        return a-b;
       }
    
       
    //函数调用
   var result = add(10,20);
   alert(result);
   
    
</script>

js对象（JSON+BOM+DOM）

Array

<script>
    //定义数组
    // var arr=new Array(1,2,"123","1sad");
    //  alert(arr);

    var arr=[1,'a','3'];
    alert(arr);
    for (let i = 0; i < arr.length; i++) {
        const element = arr[i];
        document.write(element);
        
    }

    //特点: 长度可变 类型可变
     var arr = [1,2,3,4];
     arr[10] = 50;

     arr[9] = "A";
     arr[8] = true;

     console.log(arr);


   //forEach: 遍历数组中有值的元素
    var arr = [1,2,3,4];
    arr[10] = 50;
    arr.forEach(function(e) {
        document.write(e);
    });

    //ES6 箭头函数: (...) => {...} -- 简化函数定义
    arr.forEach((e) => {
        console.log(e);
    }) 
    
    //push: 添加元素到数组末尾
    arr.push(7,8,9);
    console.log(arr);

 
    //splice: 删除元素 从第几个位置开始删 删的长度
    arr.splice(2,2);
    console.log(arr);
</script>

String

<script>
    //创建字符串对象
    //var str = new String("Hello String");
    var str = "  Hello String    ";
    
    console.log(str);

    //length
    console.log(str.length);

    //charAt 返回指定字符串的位置
    console.log(str.charAt(4));
    

    //indexOf 检索字符串
    console.log(str.indexOf("lo"));
    

    //trim 去掉字符串两边的空格
    var s = str.trim();
    str.trim()
    console.log(s);

    //substring(start,end) --- 开始索引, 结束索引 (含头不含尾) 提取两个指定的索引号之间的字符
    console.log(s.substring(0,5));

</script>

JSON

概念：JavaScript Object Notation，JavaScript对象标记法。

JSON 是通过 JavaScript 对象标记法书写的文本。

<script>
   // 自定义对象
    var user = {
        name: "Tom",
        age: 10,
        gender: "male",
        // eat: function(){
        //     alert("用膳~");
        // }
        eat(){
            alert("用膳~");
        }
    }

   alert(user.name);
    user.eat();

    //定义json--多用于数据载体，在网络中进行数据传输
    var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
    alert(jsonstr.name);//不能用对象的方式去获取 jsonstr相当于一个字符串

    //json字符串--js对象 parse json字符串转化未js对象
    var obj = JSON.parse(jsonstr); 
    alert(obj.name);

    //js对象--json字符串 stringify js对象转为json字符串
    alert(JSON.stringify(obj)); 

    var jsonstr1='{"name":"Tom","age":18,"addr":["哈哈哈","hhh"]}';
    document.write(jsonstr1);
    var obj=JSON.parse(jsonstr1);
    document.write("</br>");
    document.write(obj);
    document.write("</br>");
    document.write(JSON.stringify(obj));
</script>

BOM

BOM:Browser Object Model 浏览器对象模型，运行JavaScript与浏览器对话, JavaScript将浏览器的各个部分封装为对象

Window：浏览器窗口对象

Navigator：浏览器对象

Screen：屏幕对象

History：历史记录对象

Location：地址栏对象

Window

<script>
    //获取
    window.alert("Hello BOM");
    alert("Hello BOM Window");

    //方法
   // confirm - 对话框 -- 确认: true , 取消: false
     var flag = confirm("您确认删除该记录吗?");
    alert(flag);

    //定时器 - setInterval -- 周期性的执行某一个函数--周期性执行
    var i = 0;
    setInterval(function(){
        i++;
        console.log("定时器执行了"+i+"次");
    },2000);

    // 定时器 - setTimeout -- 延迟指定时间执行一次-- 在指定的毫秒数后调用函数或计算表达式--只执行一次
    setTimeout(function(){
        alert("JS");
    },3000);


    var i=0;
    setInterval(function(){
       i++;
       alert("定时器执行了"+i+"次");
    },2000);
</script>

Location

<script>   
 //自动跳转到这个网页
     alert(location.href);
     location.href="https://www.baidu.com";
</script>

DOM

DOM:Document Object Model 文档对象模型, 将标记语言的各个组成成分封装为对应的对象.

获取元素

<body>
    <img id="h1" src="img/off.gif">  <br><br>

    <div class="cls">传智教育</div>   <br>
    <div class="cls">黑马程序员</div>  <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
</body>

<script>
    //1. 获取Element元素
    
    document.getElementById('');
    document.getElementsByTagName('');
    document.getElementsByName('');
    document.getElementsByClassName('');
     

   // 1.1 获取元素-根据ID获取,返回单个Element对象
    var img = document.getElementById('h1');  
    alert(img);

    //1.2 获取元素-根据标签获取 - div-返回Element对象数组
    var divs = document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
        alert(divs[i]);
    }
    
    //1.3 获取元素-根据name属性获取-返回Element对象数组
    var ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
        alert(ins[i]);
    }

    //1.4 获取元素-根据class属性获取-返回Element对象数组
    var divs = document.getElementsByClassName('cls');
    for (let i = 0; i < divs.length; i++) {
        alert(divs[i]);
    }

</script>

案例

<!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-scale=1.0">
    <title>JS-对象-DOM-案例</title>
</head>

<body>
    <img id="h1" src="img/off.gif">  <br><br>

    <div class="cls">传智教育</div>   <br>
    <div class="cls">黑马程序员</div>  <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
</body>

<script>
     //1. 点亮灯泡 : src 属性值
    var img = document.getElementById('h1');
    img.src = "img/on.gif";

    // //2. 将所有div标签的内容后面加上: very good (红色字体) -- <font color='red'></font>
    var divs = document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
        const div = divs[i];
        div.innerHTML += "<font color='red'>very good</font>"; 
    }
    
    // //3. 使所有的复选框呈现选中状态
    var ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
        const check = ins[i];
        check.checked = true;//选中
    }
</script>
</html>

js事件监听

事件：HTML事件是发生在HTML元素上的"事情"

例如：按钮被点击

鼠标移动到元素上

按下键盘按键

事件监听：JavaScript可以在事件被侦测到时执行代码

事件绑定

<body>
    <!-- 方式一：通过 HTML标签中的事件属性进行绑定 -->
    <input type="button" id="btn1" value="事件绑定1" onclick="on()">
    <!-- 方式二：通过 DOM 元素属性绑定 -->
    <input type="button" id="btn2" value="事件绑定2">
</body>

<script>
    function on()
    {
        alert("按钮1被点击了...");
    }
    document.getElementById("btn2").onclick=function()
    {
        alert("按钮2被点击了...");
    }
</script>

常见事件

<script>
    //onload : 页面/元素加载完成后触发
    function load(){
        console.log("页面加载完成...")
    }

    //onclick: 鼠标点击事件
    function fn1(){
        console.log("我被点击了...");
    }

    //onblur: 失去焦点事件
    function bfn(){
        console.log("失去焦点...");
    }

    //onfocus: 元素获得焦点
    function ffn(){
        console.log("获得焦点...");
    }

    //onkeydown: 某个键盘的键被按下
    function kfn(){
        console.log("键盘被按下了...");
    }

    //onmouseover: 鼠标移动到元素之上
    function over(){
        console.log("鼠标移入了...")
    }

    //onmouseout: 鼠标移出某元素
    function out(){
        console.log("鼠标移出了...")
    }

    //onsubmit: 提交表单事件
    function subfn(){
        alert("表单被提交了...");
    }

</script>

事例

<!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-scale=1.0">
    <title>JS-事件-案例</title>
</head>
<body>

    <img id="light" src="img/off.gif"> <br>

    <input type="button" value="点亮" onclick="on()"> 
    <input type="button"  value="熄灭" onclick="off()">

    <br> <br>

    <input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()">
    <br> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>

    <input type="button" value="全选" onclick="checkAll()"> 
    <input type="button" value="反选" onclick="reverse()">

</body>

<script>

    //1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; -- onclick
    function on(){
        //a. 获取img元素对象
        var img = document.getElementById("light");

        //b. 设置src属性
        img.src = "img/on.gif";
    }

    function off(){
        //a. 获取img元素对象
        var img = document.getElementById("light");

        //b. 设置src属性
        img.src = "img/off.gif";
    }



    //2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus , onblur
    function lower(){//小写
        //a. 获取输入框元素对象
        var input = document.getElementById("name");

        //b. 将值转为小写
        input.value = input.value.toLowerCase();
    }

    function upper(){//大写
        //a. 获取输入框元素对象
        var input = document.getElementById("name");

        //b. 将值转为大写
        input.value = input.value.toUpperCase();
    }



    //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
    function checkAll(){
        //a. 获取所有复选框元素对象
        var hobbys = document.getElementsByName("hobby");

        //b. 设置选中状态
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            element.checked = true;
        }

    }
    
    function reverse(){
        //a. 获取所有复选框元素对象
        var hobbys = document.getElementsByName("hobby");

        //b. 设置未选中状态
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            element.checked = false;
        }
    }
</script>
</html>

Vue

Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写

基于MMVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上

框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效

Vue快速入门

<!DOCTYPE html>
<html lang="en">
<head>
     <!-- 1、引入Vue.js -->
    <script src="js/vue.js"></script>
</head>
<body>
<!-- 
    Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写
    基于MMVM思想，实现数据的双向绑定，将编程的关注点放在数据上
    框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效
-->
    <!-- 3、编写视图 -->
     <div id="app">
        <input type="text" v-model="message">
        {{ message }}  <!-- 插值表达式 -->
     </div>

</body>
<!-- 2、在JS代码区域,创建Vue核心对象，定义数据模型 -->
<script>
    new Vue({
        el:"#app",//代表接管区域
        data:
        {
            message:"Hello Vue!"
        }
    })
</script>
</html>

Vue常用指令

v-bind v-model

<!DOCTYPE html>
<html lang="en">
<head>
   <script src="js/vue.js"></script>
</head>
<body>
    <!--
       v-bind:为HTML标签绑定属性值，如设置href css样式等--单向数据绑定 数据只能从data流向页面
       v-model:在表单元素上创建双向数据绑定 双向--数据不仅能从data流向页面 还能从页面流向数据
       v-bind v-model必须在数据模型中声明
     -->
  <div id="app">
    <a v-bind:href="url">百度</a>
    <a :href="url">百度</a>
    <input type="text" v-model="url">
  </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
          url:"https://www.baidu.com"
        }
    })
</script>
</html>

v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-on 为HTML标签绑定事件 -->
        <!-- v-on:event 用什么写什么 click blur... -->
        <input type="button" value="点我一下" v-on:click="handle()" >

        <input type="button" value="点我一下" @click="handle()">
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            handle:function()
            {
                alert("你点我了一下...");
            }
        }
    })
</script>
</html>

v-if v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        
        年龄<input type="text" v-model="age">经判定,为:
        <span v-if="age<=35">年轻人(35及以下)</span>
        <span v-else-if="age>35&&age<60">中年人(35-60)</span>
        <span v-else>老年人(60及以上)</span>

        <br><br>

        年龄<input type="text" v-model="age">经判定,为:
        <span v-show="age<=35">年轻人(35及以下)</span>
        <span v-show="age>35&&age<60">中年人(35-60)</span>
        <span v-show="age>=60">老年人(60及以上)</span>

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           age: 20
        },
        methods: {
            
        }
    })
</script>
</html>

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="js/vue.js"></script>
</head>
<body>
    <!-- v-for 列表渲染，遍历容器的元素或者对象的属性 -->
    <div id="app">
        <div v-for="addr in addrs">{{addr}}</div>
        <hr>
    <div v-for="(addr,index) in addrs">{{index+1}}:{{addr}}</div>

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           addrs:["北京", "上海", "西安", "成都", "深圳"]
        },
        methods: {
            
        }
    })
</script>
</html>

案例：

<!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-scale=1.0">
    <title>Vue-指令-案例</title>
    <script src="js/vue.js"></script>
</head>
<body>
    
    <div id="app">
        
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>

            <tr align="center" v-for="(user,index) in users">
                <td>{{index+1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="user.gender==1">男</span>
                    <span v-else>女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score>=85">优秀</span>
                    <span v-else-if="user.score>=60">及格</span>
                    <span v-else style="color: red;">不及格</span>
                </td>
            </tr>
        </table>

    </div>

</body>

<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {
            
        },
    })
</script>
</html>

Vue生命周期

（一）创建阶段
1. beforeCreate
=> 创建 Vue 实例以前

=> 执行完毕这个钩子函数, 就会生成实例了

2. created
=> 创建 Vue 实例以后

=> 执行完毕这个钩子函数, 才会去捕获页面上的内容, 准备渲染页面

3. beforeMount
=> 挂载数据之前

=> 拿到页面结构, 准备渲染到页面上之前

=> 执行完毕这个钩子函数, 就会把准备好的数据渲染到页面上了

4. mounted
=> 挂载数据之后

=> 把 data 中的数据已经渲染到该渲染的标签上了

（二）更新阶段
5. beforeUpdate
=> 更新数据之前

=> 当你该实例的内容被更新的时候, 会在更新之前执行这个钩子函数

6. updated
=> 更新数据之后

=> 当你该实例的内容被更新以后, 渲染完毕页面会执行这个钩子函数

（三）销毁阶段
7. beforeDestroy
=> 销毁实例之前

=> 当你准备销毁当前实例了

=> 执行完毕这个钩子, 才会销毁当前实例

8. destroyed
=> 销毁实例之后

=> 当你销毁完毕这个实例了, 那么会执行一遍这个钩子函数, 然后整个 Vue 生命周期结束

=> 再也没有 Vue 实例了

Ajax

Ajax --异步的Javascript和XML

作用：

数据交换：通过Ajax可以给服务器发送请求，并获取服务器相应的数

异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如搜索联想，用户名是否可用的校验等

原生Ajax

<script>
    function getData(){
        //1. 创建XMLHttpRequest 
        var xmlHttpRequest  = new XMLHttpRequest();
        
        //2. 发送异步请求
        xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
        xmlHttpRequest.send();//发送请求
        
        //3. 获取服务响应数据
        xmlHttpRequest.onreadystatechange = function(){
            if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
            }
        }
    }
</script>

Axios

Axios 对原生的Ajax进行了封装，简化书写，快速开发

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
    
    <input type="button" value="获取数据GET" onclick="get()">

    <input type="button" value="删除数据POST" onclick="post()">

</body>
<script>
    function get(){
        //通过axios发送异步请求-get
        // axios({
        //     method: "get",
        //     url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
        // }).then(result => {
        //     console.log(result.data);
        // })

       /* 前面的是把数据请求过来，中括号里的是调取数据，比如可以用数据进行赋值，显示，res是载体 */
        axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            console.log(result.data);
        })
    }
    axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result=>{
         console.log(result.data);
    })

    function post(){
        //通过axios发送异步请求-post
        // axios({
        //     method: "post",
        //     url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
        //     data: "id=1"
        // }).then(result => {
        //     console.log(result.data);
        // })

        axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
            console.log(result.data);
            document.write(result.data);
        })
    }
    /* axois.delete(url,[config]).then(result=>{
            console.log(result.data);
     })
            
         axois.put(url,[config]).then(result=>{
            console.log(result.data);
         })
      
     */
</script>
</html>

案例

<!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-scale=1.0">
    <title>Ajax-Axios-案例</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <!-- <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th> -->
            </tr>

            <tr align="center" v-for="(emp,index) in emps">
                <td>{{index + 1}}</td>
                <td>{{emp.name}}</td>
                <td>
                    <!-- <img :src="emp.image" width="70px" height="50px"> -->{{emp.age}}
                </td>
                <td>
                    <span v-if="emp.gender == 1">男</span>
                    <span v-if="emp.gender == 2">女</span>
                </td>
                <!-- <td>{{emp.job}}</td>
                <td>{{emp.entrydate}}</td>
                <td>{{emp.updatetime}}</td> -->
            </tr>
        </table>
    </div>
</body>
<script>

    new Vue({
       el: "#app",
       data: {
         emps:[]
       },
       mounted () {
          //发送异步请求,加载数据
          axios.get("https://yapi.pro/mock/481093/user/getById").then(result => {
            this.emps = result.data.user;
          })
       }
    });
</script>
</html>

YApi（应用网页）

介绍：YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务

主要功能：API接口管理、Mock服务(主要用于前端调式前端代码)

YApi--网址

YApi : 添加项目 -->添加分类--> 添加接口

前端工程化

Vue-cli

Vue项目目录结构

Vue项目--启动

Vue中修改端口号

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  /* 更改前端的端口号 */
  devServer:{
    port:8090,
  }
})

Vue项目开发流程

Vue组件库Element

Element：是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

组件：组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等。

官网：https://element.eleme.cn/#/zh-CNListener

Element快速入门

1、安装ElementUI组件库

npm install element-ui@2.15.3

在node_modules中找到element-ui 代表安装成功

2、引入ElementUI组件库

Element官网中搜

/* 引入ElementUI 组件 */
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3、创建一个ElementView.vue

从Element官网中找寻你所需要的

<template>

    <div>
        <!-- Ctrl+Alt+L 格式化 -->
        <!-- button -->
        <el-row>
            <el-button round>圆角按钮</el-button>
            <el-button type="primary" round>主要按钮</el-button>
            <el-button type="success" round>成功按钮</el-button>
            <el-button type="info" round>信息按钮</el-button>
            <el-button type="warning" round>警告按钮</el-button>
            <el-button type="danger" round>危险按钮</el-button>
        </el-row>
    </div>

</template>

<script>
export default {
    
}
</script>

<style>

</style>

将ElementView导入到App.View中

<template>
  <div>
    <element-view></element-view>
  </div>
</template>


<script>
import ElementView from './views/element/ElementView.vue'
export default {
  components: { ElementView },
  
}
</script>
<style>

</style>

重新启动

<template>
    <div>
        <!-- button 按钮 -->
        <el-row>
            <el-button round>圆角按钮</el-button>
            <el-button type="primary" round>主要按钮</el-button>
            <el-button type="success" round>成功按钮</el-button>
            <el-button type="info" round>信息按钮</el-button>
            <el-button type="warning" round>警告按钮</el-button>
            <el-button type="danger" round>危险按钮</el-button>
        </el-row>
        <br><br>
        <!-- Table表格 v-bind:data  -->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
        </el-table>
        <br><br>
        <!-- Pagination 分页 -->
        <el-pagination background layout="sizes,prev, pager, next,jumper,total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :total="1000">
        </el-pagination>
        <br><br>
        <!-- Dialog对话框：在保留当前页面状态的情况下，告知用户并承担相关操作 -->
        <!-- Table -->
        <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
        <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
                <el-table-column property="date" label="日期" width="150"></el-table-column>
                <el-table-column property="name" label="姓名" width="200"></el-table-column>
                <el-table-column property="address" label="地址" width="300"></el-table-column>
            </el-table>
        </el-dialog>

        <!-- From 表单：由输入框、单选框、多选框等控件组成，用以收集、校验、提交数据 -->
        <!-- Dialog对话框-From表单 -->
        <el-button type="text" @click="dialogFromVisible = true">打开嵌套From的 Dialog</el-button>
        <el-dialog title="From表单" :visible.sync="dialogFromVisible">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="活动名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="活动区域">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动时间">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
                            style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
          name: '',
          region: '',
          date1: '',
          date2: ''
        },

            gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        dialogTableVisible: false,
        dialogFromVisible:false,
            tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
        }
    },
    methods: {
        handleSizeChange:function(val)
        {
              alert("每页记录数变化："+val)
        },
        handleCurrentChange:function(val)
        {
              alert("页码发送变化："+val)
        },

        onSubmit:function()
        {
         alert(JSON.stringify(this.form))
        },



        
    },
}
</script>

<style>

</style>

<template>
    <div>
        <!-- button 按钮 -->
        <el-row>
            <el-button round>圆角按钮</el-button>
            <el-button type="primary" round>主要按钮</el-button>
            <el-button type="success" round>成功按钮</el-button>
            <el-button type="info" round>信息按钮</el-button>
            <el-button type="warning" round>警告按钮</el-button>
            <el-button type="danger" round>危险按钮</el-button>
        </el-row>
        <br><br>
        <!-- Table表格 -->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
        </el-table>
        <br><br>
        <!-- Pagination 分页 -->
        <!-- background	是否为分页按钮添加背景色
             layout	组件布局，子组件名用逗号分隔 
             sizes:每页展示多少条
             prev:< 
             pager:展示每一页的页码
             next:>
             Events:
                   size-change	pageSize 改变时会触发   每页条数
                   current-change	currentPage 改变时会触发	当前页
        -->
        <el-pagination background layout="sizes,prev, pager, next,jumper,total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :total="1000">
        </el-pagination>
        <br><br>
        <!-- Dialog对话框：在保留当前页面状态的情况下，告知用户并承担相关操作 -->
        <!-- Table -->
        <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
        <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
                <el-table-column property="date" label="日期" width="150"></el-table-column>
                <el-table-column property="name" label="姓名" width="200"></el-table-column>
                <el-table-column property="address" label="地址" width="300"></el-table-column>
            </el-table>
        </el-dialog>

        <!-- From 表单：由输入框、单选框、多选框等控件组成，用以收集、校验、提交数据 -->
        <!-- Dialog对话框-From表单 -->
        <el-button type="text" @click="dialogFromVisible = true">打开嵌套From的 Dialog</el-button>
        <el-dialog title="From表单" :visible.sync="dialogFromVisible">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="活动名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="活动区域">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动时间">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
                            style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
          name: '',
          region: '',
          date1: '',
          date2: ''
        },

            gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        dialogTableVisible: false,
        dialogFromVisible:false,
            tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
        }
    },
    methods: {
        handleSizeChange:function(val)
        {
              alert("每页记录数变化："+val)
        },
        handleCurrentChange:function(val)
        {
              alert("页码发送变化："+val)
        },

        onSubmit:function()
        {
         alert(JSON.stringify(this.form))
        },



        
    },
}
</script>

<style>

</style>

案例：

根据页面原型完成员工管理页面开发，并通过Axios完成数据异步加载。

步骤：

1、创建页面(总体布局),完成页面的整体布局规划

2、布局中各个部分的组件实现

3、列表数据的异步加载,并渲染展示

Vue项目中使用Axios：在项目目录下安装axios：npm install axios

需要使用axios时，导入axios：import axios from 'axios'

EmpView.vue

<!-- 
     步骤：
     1、创建页面(总体布局),完成页面的整体布局规划
     2、布局中各个部分的组件实现
     3、列表数据的异步加载,并渲染展示 
-->
<template>
    <div>
        <el-container  style="height: 700px; border: 1px solid #eee">
            <el-header style="font-size:40px; background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header>
            <el-container>
                <el-aside width="230px" style="border: 1px solid #eee">
                    <el-menu :default-openeds="['1', '3']">
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
                            <el-menu-item index="1-1">部门管理</el-menu-item>
                            <el-menu-item index="1-2">员工管理</el-menu-item>
                        </el-submenu>
                        </el-menu>
                </el-aside>


                <el-main>
                    <!-- 表单 -->
                    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                        <el-form-item label="姓名">
                            <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
                        </el-form-item>

                        <el-form-item label="性别">
                            <el-select v-model="searchForm.gender" placeholder="性别">
                                <el-option label="男" value="1"></el-option>
                                <el-option label="女" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        
                        <el-form-item label="入职日期">
                            <!-- 日期选择器 -->
                            <el-date-picker
                                v-model="searchForm.entrydate"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                        
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                    </el-form>

                    <!-- 表格 -->
                    <el-table :data="tableData" border>
                        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                        <el-table-column label="图像" width="180">
                            <!-- 插槽 -->
                            <template slot-scope="scope">
                                <img :src="scope.row.image" width="100px" height="70px">
                            </template>
                        </el-table-column>
                        <el-table-column label="性别" width="140">
                            <template slot-scope="scope">
                                {{scope.row.gender == 1 ? '男':'女'}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="job" label="职位" width="140"></el-table-column>
                        <el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column>
                        <el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column>
                        <el-table-column label="操作" >
                            <el-button type="primary" size="mini">编辑</el-button>
                            <el-button type="danger" size="mini">删除</el-button>
                        </el-table-column>
                    </el-table>

                    <br>
                    
                    <!-- 分页条 -->
                    <!-- Pagination 分页 -->
                    <el-pagination background layout="total,sizes, prev, pager, next, jumper" 
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="1000"></el-pagination>

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

<script>
import axios from 'axios';


export default {
    data() {
        return {
            tableData: [],
            searchForm: {
               name:"",
               gender:"",
               entrydate:[]
            }
        }
    },
    methods: {
        onSubmit:function(){
            alert("查询数据");
        },
        handleSizeChange:function(val){
            alert("每页记录数变化" + val)
        },
        handleCurrentChange:function(val){
            alert("页码发生变化" + val)
        }
    },
    mounted () {
        //发送异步请求,获取数据
        axios.get("https://yapi.pro/mock/401965/user/getById").then((result) => {
            this.tableData = result.data.data;  
        });
    }
}
</script>

<style>

</style>

Vue路由

1、定义路由Vue-Router

在router中的index.js中输写

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



Vue.use(VueRouter)

const routes = [
  {
    path: '/emp',/* 如果你访问的路径为/emp 代表你要访问EmpView.vue 这个组件 */
    name: 'emp',
    component: () => import( '../views/tlias/EmpView.vue')
   
  },
  {
    path: '/dept',
    name: 'dept',
  
    component: () => import('../views/tlias/DeptView.vue')
  },
  {
    path:'/', /* 根路径 */
    redirect:'/dept'         /* redirect重定向的含义 访问路径为/ 时在让它访问'/dept'*/
  }
]

const router = new VueRouter({
  routes
})

export default router

2、请求连接组件router-link

在EmpView.vue和DeptView.vue中书写

<el-menu-item index="1-1">
      <router-link to="/dept">部门管理</router-link> 
</el-menu-item>
<el-menu-item index="1-2">
      <router-link to="/emp">员工管理</router-link>
</el-menu-item>

3、Router-View

在App.view中书写

<template>
  <div>
     <router-view></router-view>
  </div>
</template>


<script>

export default {
  components: {   },
  
}
</script>
<style>

</style>