介绍

Vue.js 是什么

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

Vue.js 优点

前端三要素

  • HTML + CSS + JavaScript

CSS 预处理器

JavaScript 框架

UI 框架

JavaScript 构建工具

常用的 Vue UI 组件库

vue-element-admin

  • 简述：vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。
  • 地址：https://panjiachen.github.io/vue-element-admin-site/zh/

MVVM 模式

为什么使用 MVVM 模式

第一个 Vue 程序

IDEA 安装插件

使用 IDEA 工具开发，可安装 Vue.js 插件！

在 IDEA 中安装插件后，可快速构建 vue 文件：

PS：若安装插件后也没有出现快速构建 vue 文件的选项，可先手动创建 .vue 结尾的空文件，再次新建时，则可成功显示！

CDN 简述

  1. 智能 dns 让用户可以访问同线路最近的服务器

  2. cdn 的缓存机制可以加快访问速度，也可以缓解源站服务器压力（因为根本不会去访问源站）

  3. cdn 让大规模的用户请求架构变得简单

  4. cdn 性价比高，同带宽需求下 cdn 服务比增加带宽划算

作用：尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输得更快、更稳定。

安装

可使用多种方式进行安装，如直接下载对应类库、使用 CDN 引入、使用 NPM 安装等...

此处使用 CDN：

  • 压缩版：<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  • 完整版：<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>first vue</title>
  6. </head>
  7. <body>
  8.     <!--view层：模板-->
  9.     <div id="app">
  10.         <h2>{{message}}</h2>
  11.     </div>
  13.     <!--使用CDN方式导入Vue.js-->
  14.     <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  15.     <script>
  16.         var vm = new Vue({
  17.             el: "#app",
  18.             //Model: 数据
  19.             data: {
  20.                 message: "hello,vue!"
  21.             }
  22.         });
  23.     </script>
  24. </body>
  25. </html>

相关指令

v-bind

  • 作用：与指定属性进行绑定

  • v-bind: 可简写为 :

  • 示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test</title>
    6. </head>
    7. <body>
    8.     <!--view层：模板-->
    9.     <div id="app">
    10.         <h2>{{message}}</h2>
    11.         <span v-bind:title="message">
    12.             鼠标悬浮几秒查看动态绑定的提示信息！
    13.         </span>
    14.         <!-- v-bind可简写 -->
    15.         <input type='text' :value="str" />
    16.     </div>
    18.     <!--使用CDN方式导入Vue.js-->
    19.     <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    20.     <script>
    21.         var vm = new Vue({
    22.             el: "#app",
    23.             //Model: 数据
    24.             data: {
    25.                 message: "hello,vue!",
    26.                 str: "test str"
    27.             }
    28.         });
    29.     </script>
    30. </body>
    31. </html>

v-if、v-else-if、v-else

  • 作用：判断

  • 示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test3</title>
    7. </head>
    8. <body>
    10.     <div id="app">
    11.         <h1 v-if="ok">yes</h1>
    12.         <h1 v-else>no</h1>
    14.         <span v-if="type==='A'">A</span>
    15.         <span v-else-if="type==='B'">B</span>
    16.         <span v-else>D</span>
    17.     </div>
    19.     <!--  导入vue.js  -->
    20.     <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    21.     <script>
    22.         var vm = new Vue({
    23.             el: "#app",
    24.             data: {
    25.                 ok: true,
    26.                 type: 'A'
    27.             }
    28.         });
    29.     </script>
    31. </body>
    32. </html>

v-show

  • 作用：判断
  • 说明：从功能上讲，v-show 和 v-if 作用是相同的，主要是他们的渲染过程有区别。

除了 v-if，还有一个可以按条件显示一个元素的指令是 v-show。其用法基本一样：

  1. <h1 v-show="ok">Hello!</h1>

不同之处在于 v-show 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性。

v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。

v-if vs. v-show

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。

v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。

相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。

总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

v-for

  • 作用：循环

  • 示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test4</title>
    7. </head>
    8. <body>
    10.     <div id="app">
    11.         <ul>编程语言
    12.             <li v-for="item in items">
    13.                 {{item.message}}
    14.             </li>
    15.         </ul>
    17.         <ol>编程语言(显示下标)
    18.             <li v-for="(item, index) in items">
    19.                 {{item.message}} --> {{index}}
    20.             </li>
    21.         </ol>
    22.     </div>
    24.     <!--  导入vue.js  -->
    25.     <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    26.     <script>
    27.         var vm = new Vue({
    28.             el: "#app",
    29.             data: {
    30.                 items: [
    31.                     {message: "java"},
    32.                     {message: "python"},
    33.                     {message: "go"}
    34.                 ]
    35.             }
    36.         });
    37.     </script>
    39. </body>
    40. </html>

v-on

  • 作用：事件监听

  • v-on:click 可简写为 @click

  • 示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test5</title>
    7. </head>
    8. <body>
    10.     <div id="app">
    11.         <p>{{message}}</p>
    12.         <button v-on:click="reverseMessage">反转消息</button>
    13.     </div>
    15.     <!--  导入vue.js  -->
    16.     <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    17.     <script>
    18.         var vm = new Vue({
    19.             el: "#app",
    20.             data: { message: "Hello Vue.js!"},
    21.             methods: {
    22.                 reverseMessage: function () {
    23.                     this.message = this.message.split('').reverse().join('');
    24.                 }
    25.             }
    26.         });
    27.     </script>
    29. </body>
    30. </html>

v-model

  • 作用：实现数据的双向绑定

  • 说明：使用该指令可在<input>、<textarea>、<select>等元素上创建双向数据绑定，会根据控件类型自动选取正确方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

  • 注意：v-model会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源，所以开发者应该通过 JavaScript 在组件的 data 选项中声明初始值！

  • v-model 又称表单标签，主要作用就是实现表单标签的的双向绑定；

    它只能使用在表单输入标签，因为需要通过表单输入标签输入的内容，来改变其他地方的数据；

    v-model:value 可以简写为 v-model，需要明确它默认就是绑定的 value 属性。

  • 示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test6</title>
    7. </head>
    8. <body>
    10.     <div id="app">
    12.         单行文本：
    13.         <input type="text" v-model="message">
    14.         {{message}}
    16.         <br><br>
    18.         文本域：
    19.         <textarea v-model="texts"></textarea>
    20.         {{texts}}
    22.         <br><br>
    24.         单选按钮：<br>
    25.         性别：
    26.         <input type="radio" name="sex" value="男" v-model="gender">男
    27.         <input type="radio" name="sex" value="女" v-model="gender">女
    28.         <br>
    29.         <span>选中了【{{gender}}】</span>
    31.         <br><br>
    33.         下拉框：
    34.         <select v-model="selected">
    35.             <option value="" disabled>--请选择--</option>
    36.             <option>A</option>
    37.             <option>B</option>
    38.             <option>C</option>
    39.         </select>
    40.         <span>value:{{selected}}</span>
    42.     </div>
    44.     <!--  导入vue.js  -->
    45.     <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    46.     <script>
    47.         var vm = new Vue({
    48.             el: "#app",
    49.             data: {
    50.                 selected: '',
    51.                 message: "123",
    52.                 texts: '',
    53.                 gender: ''
    54.             }
    55.         });
    56.     </script>
    58. </body>
    59. </html>

vue 实例

每个使用 vue 进行数据渲染的网页文档都需要创建一个 Vue 实例——ViewModel

Vue 实例的生命周期

vue 实例的生命周期：vue 实例从创建到销毁的过程

  • 创建 vue 实例：初始化 data，加载 el
  • 数据挂载：将 vue 实例 data 中数据渲染到网页 HTML 标签
  • 重新渲染：当 vue 的 data 数据发生变化，会重新渲染到 HTML 标签
  • 销毁实例

钩子函数

为便于开发者在 vue 实例生命周期不同阶段进行特定的操作，vue 在生命周期四个阶段的前后分别提供了一个函数，这个函数无须开发者调用，当 vue 实例到达生命周期的指定阶段，会自动进行相关函数的调用，这些函数称为钩子函数。

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  7. 	</head>
  8. 	<body>
  10. 		<div id="container">
  11. 			<label v-once>{{str}}</label><br />
  12. 			<label>{{str}}</label><br />
  13. 			<input type="text" v-model="str" />
  14. 		</div>
  16. 		<script type="text/javascript">
  17. 			var vm = new Vue({
  18. 				el: "#container",
  19. 				data: {
  20. 					str: "初始数据"
  21. 				},
  22. 				beforeCreate: function() {
  23. 					//1.data初始化之前执，不能操作data
  24. 					console.log("beforeCreate------->1");
  25. 				},
  26. 				created: function() {
  27. 					//2.data初始化之后执行，模板加载之前，可以修改/获取data中的值
  28. 					console.log(this.str);
  29. 					console.log("created------->2");
  30. 					//this.str = "data初始化之后执行";
  31. 				},
  32. 				beforeMount: function() {
  33. 					//3.模板加载之后，数据初始渲染（挂载）之前，可以修改/获取data中的值
  34. 					//this.str = "数据初始渲染（挂载）之前执行";
  35. 					console.log("beforeMount------->3");
  36. 				},
  37. 				mounted: function() {
  38. 					//4.数据初始渲染（挂载）之后，可以对data中的变量进行修改，但是不会影响v-once的渲染
  39. 					//this.str = "数据初始渲染（挂载）之后执行";
  40. 					console.log("mounted------->4");
  41. 				},
  42. 				beforeUpdate: function() {
  43. 					//5.数据渲染之后，当data中的数据变化触发重新渲染，渲染之前执行此函数
  44. 					// data数据被修改之后，重新渲染到html之前
  45. 					console.log("-----" + this.str);
  46. 					this.str = "数据被修改，重新被渲染到html之前";
  47. 					console.log("beforeUpdate------->5");
  48. 				},
  49. 				updated: function() {
  50. 					//6.data数据被修改之后，重新渲染到html之后
  51. 					//this.str = "数据被修改，重新渲染都html后";
  52. 					console.log("updated------->6");
  53. 				},
  54. 				beforeDestroy: function() {
  55. 					//7.实例销毁之前
  56. 					console.log("beforeDestroy------->7");
  57. 				},
  58. 				destroyed: function() {
  59. 					//8.实例销毁之后
  60. 					console.log("destroyed------->8");
  61. 				}
  62. 			});
  63. 		</script>
  64. 	</body>
  65. </html>

计算属性

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>test9</title>
  6.     <!--引入Vue.js-->
  7.     <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  8. </head>
  9. <body>
  11.     <div id="vue">
  12.         <!--注意：一个是方法，一个是属性！-->
  13.         <p>调用当前时间的方法：{{currentTime1()}}</p> <!--方法调用需要带括号-->
  14.         <p>当前时间的计算属性：{{currentTime2}}</p> <!--属性调用不能带括号-->
  15.     </div>
  17.     <script type="text/javascript">
  18.         var vm = new Vue({
  19.             el: '#vue',
  20.             data: {message: 'Hello Vue.js!'},
  21.             // 注意：methods 和 computed 里的东西不能重名！
  22.             methods: { //在此可定义方法，调用方法需要带()
  23.                 //currentTime1：这是一个方法！
  24.                 currentTime1: function () {
  25.                     return Date.now();
  26.                 }
  27.             },
  28.             computed: { //在此可定义计算属性，调用属性不需要带()
  29.                 //currentTime2：这是一个属性，不是方法！
  30.                 currentTime2: function () {
  31.                     this.message; //作用：通过改变该值，观察currentTime2属性值的变化
  32.                     return Date.now();
  33.                 }
  34.             }
  35.         });
  36.     </script>
  38. </body>
  39. </html>

测试结果：（F12 --》控制台）

  1. vm.currentTime1()
  2. 1656988519767
  3. vm.currentTime1()
  4. 1656988521888
  5. vm.currentTime1()
  6. 1656988524916
  7. 结论：调用方法，每次都需要重新计算
  9. vm.currentTime2()
  10. Uncaught TypeError: vm.currentTime2 is not a function
  11.     <anonymous> debugger eval code:1
  12. debugger eval code:1:4
  13. 结论：计算属性是属性，调用时不能带括号
  15. vm.currentTime2
  16. 1656988393581
  17. vm.currentTime2
  18. 1656988393581
  19. vm.currentTime2
  20. 1656988393581
  21. 结论：计算属性将不经常变化的计算结果缓存了起来，只有发生变化的时候才会重新计算
  23. vm.message = 'new data';
  24. "new data"
  25. vm.currentTime2
  26. 1656988775105
  27. vm.currentTime2
  28. 1656988775105
  29. 结论：计算属性中的值被改变时，计算结果重新计算，并重新进行缓存

说明：如果计算属性中的值发生变化时，则缓存就会刷新，可在控制台使用vm.message = 'new data';，改变下数据的值，再次测试并观察效果！

结论：调用方法时，每次都需要重新计算，既然有计算过程，则必定会产生系统开销，如果这个结果是不经常变化的，则可以考虑将这个结果缓存起来，采用计算属性就可以很方便的做到这一点！计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约系统开销。

侦听器

侦听器，就是 data 中属性的监听器，当 data 中的属性值发⽣变化就会触发侦听器函数的执⾏。

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  7. 	</head>
  8. 	<body>
  10. 		<div id="container">
  11. 			<input type="text" v-model="str1" /><br />
  12. 			<input type="text" v-model="str2" /><br />
  13. 			{{str3}}
  14. 		</div>
  15. 		<script type="text/javascript">
  16. 			var vm = new Vue({
  17. 				el: "#container",
  18. 				data: {
  19. 					str1: "江苏",
  20. 					str2: "苏州",
  21. 					str3: "江苏苏州"
  22. 				},
  23. 				watch: {
  24. 					str1: function() {
  25. 						this.str3 = this.str1 + this.str2;
  26. 					},
  27. 					str2: function() {
  28. 						this.str3 = this.str1 + this.str2;
  29. 					}
  30. 				}
  31. 			});
  32. 		</script>
  33. 	</body>
  34. </html>

类与样式绑定

我们可以使⽤ mustache 语法将 vue 中 data 的数据绑定到 HTML 标签及标签的属性，如何将 data 中的值绑定到标签的 class 及 style 属性呢？下面就是需要介绍的类与样式绑定—— class 与 style 绑定。

class 绑定

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  7. 		<style type="text/css">
  8. 			.mystyle1 {
  9. 				width: 200px;
  10. 				height: 100px;
  11. 				background: orange;
  12. 			}
  14. 			.mystyle3 {
  15. 				width: 200px;
  16. 				height: 100px;
  17. 				background: black;
  18. 			}
  20. 			.my-style2 {
  21. 				border-radius: 10px;
  22. 			}
  23. 		</style>
  24. 	</head>
  25. 	<body>
  27. 		<div id="container">
  28. 			<!--如果b1为true就加载 mystyle1；如果b2为true，则加载my-style2-->
  29. 			<!-- 注意：如果样式名中有特殊字符如横杠，需要添加单引号 -->
  30. 			<div :class="{mystyle1:b1,'my-style2':b2}"></div>
  31. 			<!--为class属性加载多个样式名 -->
  32. 			<div :class="[chooseStyle1,chooseStyle2]"></div>
  33. 			<!--如果b3为true，则class='mystyle3'; 否则class='mystyle1'
  34. 			如果在三目运算中使用样式名则需加单引号，不加单引号则表示从data变量中获取样式名-->
  35. 			<div :class="[b3 ? 'mystyle3' : 'mystyle1']"></div>
  36. 			<div :class="[b3 ? chooseStyle3 : chooseStyle1]"></div>
  37. 		</div>
  38. 		<script type="text/javascript">
  39. 			var vm = new Vue({
  40. 				el: "#container",
  41. 				data: {
  42. 					b1: true,
  43. 					b2: true,
  44. 					b3: false,
  45. 					chooseStyle1: "mystyle1",
  46. 					chooseStyle2: "my-style2",
  47. 					chooseStyle3: "mystyle3"
  48. 				}
  49. 			});
  50. 		</script>
  51. 	</body>
  52. </html>

style 绑定

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  7. 	</head>
  8. 	<body>
  10. 		<div id="container">
  12. 			<!--当使用v-bind绑定内联样式时：
  13. 			1. 使用{}定义style样式，才能获取data中的值，{}要遵循JSON格式
  14. 			2. {}中不再使用style样式属性名“font-size”,要使用对应的js属性名
  15. 			border-style-width ---》 borderStyleWidth（横杠连接变驼峰形式）
  16. 			-->
  17. 			<div v-bind:style="{color: colorname,fontSize: fontsize+'px'}">vue之style绑定</div>
  19. 			<!--我们可以直接为style属性绑定一个data中定义好的内联样式的字符串-->
  20. 			<div v-bind:style="mystyle1">vue之style绑定</div>
  22. 			<!--我们可以直接为style属性绑定一个data中定义好的内联样式的对象-->
  23. 			<div v-bind:style="mystyle2">vue之style绑定</div>
  25. 			<!--可以在同一个style上通过数组引用多个内联样式的对象-->
  26. 			<div v-bind:style="[mystyle2,mystyle3]">vue之style绑定</div>
  28. 		</div>
  29. 		<script type="text/javascript">
  30. 			var vm = new Vue({
  31. 				el: "#container",
  32. 				data: {
  33. 					colorname: "green",
  34. 					fontsize: 30,
  35. 					mystyle1: "color:orange;font-size:45px",
  36. 					mystyle2: {
  37. 						color: "blue",
  38. 						fontSize: "40px"
  39. 					},
  40. 					mystyle3: {
  41. 						textShadow: "orange 3px 3px 5px"
  42. 					}
  43. 				}
  44. 			});
  45. 		</script>
  46. 	</body>
  47. </html>

事件处理

事件绑定传值的三种方式

在使⽤ vue 进⾏数据渲染时，如果使⽤原⽣ js 事件绑定(例如 onclick )，则需要获取 vue 实例中的数据，并传参，而且需要通过拼接来完成。

vue 提供了 v-on 指令⽤于绑定各种事件（v-on:click），简化了从 vue 取值的过程，但是触发的⽅法需要定义在 vue 实例的 methods 中，如下：

  1. <button type="button" v-on:click="doDelete(s.stuNum,s.stuName)">删除</button>
  3. <script type="text/javascript">
  4. 	var vm = new Vue({
  5.      el:"#container",
  6.      data:{},
  7.      methods:{
  8.          doDelete:function(snum,sname){
  9.          	console.log("----delete:"+snum+" "+sname)
  10.          }
  11.      }
  12.  });
  13. </script>

PS：v-on:click 可以缩写为 @click

1. 使用 JS 函数传值（不建议）

  1. <button type="button" v-on:click="doDelete(s.stuNum,s.stuName)">删除</button>
  3. <script>
  4.     var vm = new Vue({
  5.         el:"#container",
  6.         data:{};
  7.         methods:{
  8.             doDelete:function(snum,sname){
  9.             	console.log("----delete:"+snum+" "+sname)
  10.             }
  11.         }
  12.     });
  13. </script>

2. 使⽤ dataset 对象传值（推荐）

说明：

推荐直接调用方法；

需要传递的参数使用 :data-xxx="数据" 格式进行传递；

参数获取通过方法定义时添加的 event 参数中获取；

  1. <button type="button" @click="doUpdate" :data-snum="s.stuNum" :data-sname="s.stuName" :data-simg="s.stuImg">修改</button>
  3. <script>
  4.     var vm = new Vue({
  5.         el:"#container",
  6.         data:{};
  7.         methods:{
  8.             doUpdate:function(event){
  9.                 //如果v-on绑定的js函数没有参数，调⽤的时候可以省略()，同时可以给
  10.                 //js函数⼀个event参数(事件对象)
  11.                 // 1. event 表示触发当前函数的事件
  12.                 // 2. event.srcElement 表示发⽣事件的元素---修改按钮
  13.                 // 3. event.srcElement.dataset 表示按钮上绑定的数据集（data-开头的属性）
  14.                 console.log("-----update")
  15.                 var stu = event.srcElement.dataset;
  16.             }
  17.         }
  18.     });
  19. </script>

3. 混合使⽤传值

混合传值，方法参数中事件参数 event 需要注意，必须使用 $event 。

  1. <button type="button" v-on:click="doDelete(s.stuNum,s.stuName,$event)":data-simg="s.stuImg">删除</button>
  3. <script>
  4.     var vm = new Vue({
  5.         el:"#container",
  6.         data:{};
  7.         methods:{
  8.             doDelete:function(snum,sname,event){
  9.                 console.log("----delete:"+snum+" "+sname)
  10.                 console.log(event.srcElement.dataset);
  11.             }
  12.         }
  13.     });
  14. </script>

事件修饰符

当使⽤ v-on 进⾏事件绑定的时候，可以添加特定后缀，设置事件触发的特性。

下面介绍常用的几个事件修饰符，更多参考官网：点击查看

  • .prevent：消除元素的默认事件
  • .stop：阻⽌事件冒泡（阻⽌⼦标签向上冒泡）
  • .self：设置只能⾃⼰触发事件（⼦标签不能触发）
  • .once：限定事件只触发⼀次

使用语法示例：

  1. <button type="submit" @click.prevent="事件函数">测试</button>

.prevent

作用：消除元素的默认事件

示例：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  7. 	</head>
  8. 	<body>
  10. 		<div id="container">
  11. 			<form action="https://www.baidu.com">
  12. 				<button type="submit" class="btn btn-success btn-xs" @click.prevent="test">测试</button>
  13. 			</form>
  14. 		</div>
  16. 		<script type="text/javascript">
  17. 			var vm = new Vue({
  18. 				el: "#container",
  19. 				data: {},
  20. 				methods: {
  21. 					test: function() {
  22. 						console.log("---test");
  23. 					}
  24. 				}
  25. 			});
  26. 		</script>
  28. 	</body>
  29. </html>

.stop 和 .self

作用：

  • .stop：阻⽌事件冒泡（阻⽌⼦标签向上冒泡）
  • .self：设置只能⾃⼰触发事件（⼦标签不能触发）

示例：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  7. 	</head>
  8. 	<body>
  10. 		<div id="container">
  11. 			<div style="width: 200px; height: 200px; background: red;" @click.self="method1">
  12. 				<div style="width: 150px; height: 150px; background: green;" @click="method2">
  13. 					<button type="button" @click.stop="method3">测试</button>
  14. 				</div>
  15. 			</div>
  16. 		</div>
  18. 		<script type="text/javascript">
  19. 			var vm = new Vue({
  20. 				el: "#container",
  21. 				data: {},
  22. 				methods: {
  23. 					method1: function() {
  24. 						alert("1");
  25. 					},
  26. 					method2: function() {
  27. 						alert("2");
  28. 					},
  29. 					method3: function() {
  30. 						alert("3");
  31. 					},
  32. 				}
  33. 			});
  34. 		</script>
  36. 	</body>
  37. </html>

.once

作用：限定事件只触发⼀次

示例：略

按键修饰符

按键修饰符就是针对键盘事件的修饰符，限定哪个按键会触发事件。

示例说明：对于下列文本框，输入文字后，按下回车键并弹起时，会触发事件，调用 method4 方法。

  1. <input type="text" @keyup.enter="method4"/>

针对键盘操作的动作，除了 @keyup 还有：@keydown 和 @keypress

Vue 为一些常用的按键提供了别名：

  • .enter
  • .tab
  • .delete (捕获“Delete”和“Backspace”两个按键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

除了以上 vue 提供按钮的别名之外，我们还可以为按键⾃定义别名。

点击查看键盘码

示例：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  7. 	</head>
  8. 	<body>
  10. 		<div id="container">
  11. 			<!--2.使用定义的按键别名aaa作为修饰符-->
  12. 			<input type="text" @keyup.aaa="method4" />
  13. 		</div>
  15. 		<script type="text/javascript">
  16. 			//1.为按键J定于别名为 aaa
  17. 			Vue.config.keyCodes.aaa = 74;
  18. 			var vm = new Vue({
  19. 				el: "#container",
  20. 				data: {},
  21. 				methods: {
  22. 					method4: function() {
  23. 						alert("4");
  24. 					}
  25. 				}
  26. 			});
  27. 		</script>
  29. 	</body>
  30. </html>

系统修饰符

组合键

可使用以下系统按键修饰符来触发鼠标或键盘事件监听器，只有当按键被按下时才会触发：

  • .ctrl
  • .alt
  • .shift
  • .meta：windows 键

示例：Ctrl + J 触发事件

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  7. 	</head>
  8. 	<body>
  10. 		<div id="container">
  11. 			<input type="text" @keyup.ctrl.j="method4" />
  12. 		</div>
  14. 		<script type="text/javascript">
  15. 			Vue.config.keyCodes.j = 74;
  16. 			var vm = new Vue({
  17. 				el: "#container",
  18. 				data: {},
  19. 				methods: {
  20. 					method4: function() {
  21. 						alert("4");
  22. 					}
  23. 				}
  24. 			});
  25. 		</script>
  27. 	</body>
  28. </html>

表单输入绑定

表单输⼊绑定，即双向绑定，就是能够将 vue 实例的 data 数据渲染到表单输⼊视图（input\textarea\select 等），也能够将输⼊视图的数据同步更新到 vue 实例的 data 中。

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  7. 	</head>
  8. 	<body>
  10. 		<div id="container">
  12. 			<!--文本输入框、密码输入框-->
  13. 			<input type="text" v-model="text" /><br />
  14. 			<input type="password" v-model="pwd" /><br />
  16. 			<!--单选按钮-->
  17. 			<input type="radio" v-model="opt1" value="A" />A 3
  18. 			<input type="radio" v-model="opt1" value="B" />B 4
  19. 			<input type="radio" v-model="opt1" value="C" />C 5
  20. 			<input type="radio" v-model="opt1" value="D" />D 6 <br />
  22. 			<!--复选框，绑定的是一个数组-->
  23. 			<input type="checkbox" v-model="opt2" value="篮球" />篮球 <br />
  24. 			<input type="checkbox" v-model="opt2" value="足球" />足球 <br />
  25. 			<input type="checkbox" v-model="opt2" value="羽毛球" />羽毛球 <br />
  26. 			<input type="checkbox" v-model="opt2" value="乒乓球" />乒乓球 <br />
  28. 			<!--下拉菜单select：绑定一个字符串-->
  29. 			<select v-model="city">
  30. 				<option value="BJ">北京</option>
  31. 				<option value="SH">上海</option>
  32. 				<option value="GZ">广州</option>
  33. 				<option value="SZ">深圳</option>
  34. 			</select>
  35. 			<br />
  37. 			<!--下拉菜单select：如果有multiple表示可多选，需要绑定一个数组-->
  38. 			<select v-model="cities" multiple>
  39. 				<option value="BJ">北京</option>
  40. 				<option value="SH">上海</option>
  41. 				<option value="GZ">广州</option>
  42. 				<option value="SZ">深圳</option>
  43. 			</select>
  44. 			<br />
  46. 			<button type="button" @click="test">测试</button>
  48. 		</div>
  49. 		<script type="text/javascript">
  50. 			var vm = new Vue({
  51. 				el: "#container",
  52. 				data: {
  53. 					text: "aaa",
  54. 					pwd: "111111",
  55. 					opt1: "C",
  56. 					opt2: ["篮球", "羽毛球"],
  57. 					city: "SZ",
  58. 					cities: ["BJ", "SZ"]
  59. 				},
  60. 				methods: {
  61. 					test: function() {
  62. 						alert(vm.cities);
  63. 					}
  64. 				}
  65. 			});
  66. 		</script>
  68. 	</body>
  69. </html>

组件化应用构建

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>test6</title>
  7. </head>
  8. <body>
  10.     <div id="app">
  11.         <ol>
  12.             <!--构建一个组件模板：创建一个 todo-item 组件的实例，使用自定义的Vue组件，遍历数据，将数据传递给绑定的指定属性-->
  13.             <todo-item v-for="item in todoList" v-bind:todo="item"></todo-item>
  14.         </ol>
  15.     </div>
  17.     <!--  导入vue.js  -->
  18.     <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  19.     <script>
  21.         //注册组件：定义名为 todo-item 的新组件
  22.         Vue.component("todo-item", {
  23.             props: ['todo'],
  24.             template: '<li>{{todo.text}}</li>'
  25.         });
  27.         var vm = new Vue({
  28.             el: "#app",
  29.             data: {
  30.                 todoList: [
  31.                     {id: 0, text: "学英语"},
  32.                     {id: 1, text: "学技术"},
  33.                     {id: 2, text: "学做饭"}
  34.                 ]
  35.             }
  36.         });
  37.     </script>
  39. </body>
  40. </html>

组件

组件介绍及示例

组件，就是将通⽤的 HTML 模块进⾏封装——可复⽤

组件注册

将通⽤的 HTML 模块封装注册到 vue 中

  1. Vue.component("header-bar",{
  2. });

组件引用

  • 定义组件需要依赖 vue.js，在引⽤⾃定义组件的 js ⽂件之前要先引⽤ vue.js
  • 组件的引⽤必须在 vue 实例 el 指定的容器中
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  9. 		<div id="container">
  10. 			<header-bar></header-bar>
  11. 		</div>
  13. 		<script type="text/javascript" src="js/vue.js"></script>
  14. 		<script type="text/javascript" src="js/my-components.js"></script>
  15. 		<script type="text/javascript">
  16. 			var vm = new Vue({
  17. 				el: "#container",
  18. 			});
  19. 		</script>
  21. 	</body>
  22. </html>

组件注册

自定义组件的结构

  • data 定义组件的模板渲染的数据
  • template 组件的 HTML 模块（HTML标签\css样式）
  • methods 定义组件中的标签事件绑定的 JS 函数
  1. Vue.component("header-bar", {
  2. 	data: function() {
  3. 		//组件中的data是通过函数返回的对象
  4. 		return {
  5. 			title: "Java电商平台"
  6. 		};
  7. 	},
  8. 	template: `<div style="width: 100%; height: 80px; background: lightyellow;">
  9. 			<table width="100%">
  10. 				<tr>
  11. 					<td width="200" align="right" valign="middle">
  12. 						<img src="img/logo.png" height="80">
  13. 					</td>
  14. 					<td>
  15. 						<label style="color: deepskyblue;font-size:32px; font-family: 华文行楷; margin-left: 30px;">
  16. 							{{title}}
  17. 						</label>
  18. 					</td>
  19. 					<td>
  20. 						<button @click="test">组件中的按钮</button>
  21. 					</td>
  22. 				</tr>
  23. 			</table>
  24. 		</div>`,
  25. 	methods: {
  26. 		test: function() {
  27. 			alert("组件中定义的函数");
  28. 		}
  29. 	}
  30. });

组件的封装

  • 将模版中的 css 样式提出取来，单独定义到 css ⽂件存储在 css ⽬录
  • 将模版中的图⽚存在 img ⽬录
  • 将定义组件的 js ⽂件和 vue 的⽂件存放到 js ⽬录

组件的复用

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<title></title>
  6. 		<link rel="stylesheet" href="css/my-components.css" />
  7. 	</head>
  8. 	<body>
  10. 		<div id="container">
  11. 			<header-bar></header-bar>
  12. 		</div>
  14. 		<script type="text/javascript" src="js/vue.js"></script>
  15. 		<script type="text/javascript" src="js/my-components.js"></script>
  16. 		<script type="text/javascript">
  17. 			var vm = new Vue({
  18. 				el: "#container"
  19. 			});
  20. 		</script>
  21. 	</body>
  22. </html>

组件通信

vue 实例本身就是⼀个组件（模板就是 el 指定容器，data 就是组件数据，methods 就是组件的事件函数）

在 vue 实例指定的 el 容器中引⽤的组件称为⼦组件 ,当前 vue 实例就是⽗组件

父传子

vue 实例引⽤组件的时候，传递数据到引⽤的组件中

子传父

通过⼦组件的按钮“调⽤”⽗组件的函数，通过函数传值

组件插槽

当我们⾃定义 vue 组件时，允许组件中的部分内容在调⽤组件时进⾏定义——插槽

插槽的使用

在⾃定义组件时通过 slot 标签在组件的模版中定义插槽

  1. Vue.component("header-bar", {
  2. 	data: function() {
  3. 		//组件中的data是通过函数返回的对象
  4. 		return {
  5. 			str2: "子组件中的数据"
  6. 		};
  7. 	},
  8. 	template: '<div class="divStyle">
  9. 			<table class="tableStyle">
  10. 				<tr>
  11. 					<td width="200" align="right" valign="middle">
  12. 						<img src="img/logo.png" class="logoImg">
  13. 					</td>
  14. 					<td>
  15. 						<label class="titleStyle">
  16. 							{{title}}
  17. 						</label>
  18. 					</td>
  19. 					<td>
  20. 						<slot></slot>
  21. 					</td>
  22. 					<td>
  23. 						<button @click="childMethod">子组件中的按钮</button>
  24. 					</td>
  25. 				</tr>
  26. 			</table>
  27. 		</div>',
  28. 	props: ["title"],
  29. 	methods: {
  30. 		childMethod: function() {
  31. 			this.$emit("my-event", this.str2);
  32. 		}
  33. 	}
  34. });

在⽗组件中调⽤此组件时，指定插槽填充的模版

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<link rel="stylesheet" href="css/bootstrap.css" />
  7. 		<link rel="stylesheet" href="css/my-components.css" />
  8. 		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
  9. 		<script type="text/javascript" src="js/bootstrap.js"></script>
  10. 		<script type="text/javascript" src="js/vue.js"></script>
  11. 	</head>
  12. 	<body>
  14. 		<div id="container">
  15. 			<header-bar :title="sss">
  16. 				<!--组件标签包含的HTML默认为填充到插槽的模版-->
  17. 				<input /><button>搜索</button>
  18. 			</header-bar>
  19. 		</div>
  21. 		<script type="text/javascript" src="js/my-components.js"></script>
  22. 		<script type="text/javascript">
  23. 			var vm = new Vue({
  24. 				el: "#container",
  25. 				data: {
  26. 					sss: "自定义标题"
  27. 				}
  28. 			});
  29. 		</script>
  30. 	</body>
  31. </html>

具名插槽

当组件中的插槽数量 > 1 时，需要给组件中的 slot 标签添加 name 属性指定插槽的名字

定义组件

  1. Vue.component("page-frame", {
  2. 	template: '<div>
  3. 			<div id="header" style="width:100%;
  4. 		height:100px;background:pink">
  5. 				<slot name="s1"></slot>
  6. 			</div>
  7. 			<div style="width:100%; height:580px">
  8. 				<slot name="s2"></slot>
  9. 			</div>
  10. 			<div id="footer" style="width:100%;
  11. 		height:40px;background:lightgray">{{cr}}</div>
  12. 		</div>',
  13. 	props: ["title", "cr"]
  14. });

引用组件

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  9. 		<div id="container">
  10. 			<page-frame title="标题" cr="vue学习">
  12. 				<!--定义一个模版，填充到组件的name=s1的 插槽-->
  13. 				<template slot="s1">
  14. 					<input type="text" placeholder="歌曲名、歌手" />
  15. 					<button type="button" @click="doSearch">搜索</button>
  16. 				</template>
  18. 				<!--定义一个模版，填充到组件的name=s2的 插槽-->
  19. 				<template slot="s2">
  20. 					<table class="table table-bordered table-condensed">
  21. 						<tr>
  22. 							<th>序号</th>
  23. 							<th>歌曲ID</th>
  24. 							<th>歌曲名</th>
  25. 							<th>歌手</th>
  26. 							<th>专辑</th>
  27. 							<th>时长</th>
  28. 							<th>操作</th>
  29. 						</tr>
  30. 					</table>
  31. 				</template>
  33. 			</page-frame>
  34. 		</div>
  35. 	</body>
  36. </html>

插槽作用域

定义组件时，将组件中的数据绑定到 slot 标签

  1. Vue.component("page-frame", {
  2. 	template: '<div>
  3. 			<div id="header" style="width:100%;height:100px;background:pink">
  4. 				<slot name="s1"></slot>
  5. 			</div>
  6. 			<div style="width:100%; height:580px">
  7. 				<slot name="s2" v-bind:musics="songs"></slot>
  8. 			</div>
  9. 			<div id="footer" style="width:100%;height:40px;background:lightgray">{{cr}}</div>
  10. 		</div>',
  11. 	props: ["title", "cr"],
  12. 	data: function() {
  13. 		return {
  14. 			songs: [{}, {}]
  15. 		};
  16. 	}
  17. });

引⽤组件时，在填充插槽的模版上使⽤ slot-scope 属性获取插槽绑定的值

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  9. 		<div id="container">
  10. 			<page-frame title="标题" cr="vue学习">
  12. 				<template slot="s1">
  13. 					<input type="text" placeholder="歌曲名、歌手" />
  14. 					<button type="button" @click="doSearch">搜索</button>
  15. 				</template>
  17. 				<!--在使用模版填充组件插槽时，可以使用slot-scope属性获取组件插槽绑定的数据的集合 -->
  18. 				<template slot="s2" slot-scope="res">
  19. 					<table class="table table-bordered table-condensed">
  20. 						<tr>
  21. 							<th>序号</th>
  22. 							<th>歌曲ID</th>
  23. 							<th>歌曲名</th>
  24. 							<th>歌手</th>
  25. 							<th>专辑</th>
  26. 							<th>时长</th>
  27. 							<th>操作</th>
  28. 						</tr>
  29. 						<tr v-for="song,index in res.musics">
  30. 							<!--遍历省略-->
  31. 						</tr>
  32. 					</table>
  33. 				</template>
  35. 			</page-frame>
  36. 		</div>
  38. 	</body>
  39. </html>

插槽 slot 补充

内容分发：在Vue.js中我们使用<slot>元素作为承载分发内容的出口，作者称其为插槽，可应用在组合组件的场景中。

测试：如准备一个待办事项组件（to-do），该组件由待办标题（to-do-title）和待办事项（to-do-items）组成，但这三个组件又相互独立，该如何操作？

代码示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>插槽slot</title>
  6.     <!--引入Vue.js-->
  7.     <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  8. </head>
  9. <body>
  11.     <div id="app10">
  12.         <to-do>
  13.             <to-do-title slot="to-do-title" v-bind:title="toDoTitle"></to-do-title>
  14.             <to-do-items slot="to-do-items" v-for="item in toDoList" v-bind:item="item"></to-do-items>
  15.         </to-do>
  16.     </div>
  18.     <script type="text/javascript">
  20.         Vue.component("to-do", {
  21.             // template: '<div>' +
  22.             //             '<slot></slot>' +
  23.             //             '<ul>' +
  24.             //                 '<slot></slot>' +
  25.             //             '</ul>' +
  26.             //           '</div>'
  27.             // 使用折行转义字符，使多行html模板更简洁
  28.             template: '<div>\
  29.                         <slot name="to-do-title"></slot>\
  30.                         <ul>\
  31.                             <slot name="to-do-items"></slot>\
  32.                         </ul>\
  33.                       </div>'
  34.         });
  35.         Vue.component("to-do-title", {
  36.             props: ['title'],
  37.             template: '<p>{{title}}</p>'
  38.         });
  39.         Vue.component("to-do-items", {
  40.             props: ['item'],
  41.             template: '<li>{{item}}</li>'
  42.         });
  44.         var vm = new Vue({
  45.             el: "#app10",
  46.             data: {
  47.                 toDoTitle: "待办事项",
  48.                 toDoList: ['起床', '洗漱', '工作']
  49.             }
  50.         });
  51.     </script>
  53. </body>
  54. </html>

Vue 中使用 Element-UI 组件

element-ui 官网链接：https://element.eleme.cn/#/zh-CN/component/table

vue2.x 链接：https://v2.cn.vuejs.org/v2/guide/installation.html

下面是在 Vue 中使用 Element-UI 表单组件示例：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>vue + element-ui 组件使用示例</title>
  7. 		<!-- 第一步：引入样式和组件库 -->
  8. 		<!-- 引入element-ui的样式 -->
  9. 		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  10. 		<!-- 引入vue2.0的组件库，element-ui的组件库是基于vue的，需要提前引入 -->
  11. 		<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
  12. 		<!-- 引入element-ui的组件库 -->
  13. 		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
  15. 	</head>
  16. 	<body>
  18. 		<div id="container">
  20. 			<!-- 第二步：在vue容器中复制进指定element-ui组件的模板代码 -->
  21. 			<template>
  22. 				<el-table :data="tableData" border style="width: 100%">
  23. 					<el-table-column prop="date" label="日期" width="180">
  24. 					</el-table-column>
  25. 					<el-table-column prop="name" label="姓名" width="180">
  26. 					</el-table-column>
  27. 					<el-table-column prop="address" label="地址">
  28. 					</el-table-column>
  29. 				</el-table>
  30. 			</template>
  32. 		</div>
  34. 		<script type="text/javascript">
  35. 			var vm = new Vue({
  36. 				el: "#container",
  37. 				// 第三步：引入示例数据
  38. 				data: {
  39. 					tableData: [{
  40. 						date: '2016-05-02',
  41. 						name: '王小虎',
  42. 						address: '上海市普陀区金沙江路 1518 弄'
  43. 					}, {
  44. 						date: '2016-05-04',
  45. 						name: '王小虎',
  46. 						address: '上海市普陀区金沙江路 1517 弄'
  47. 					}, {
  48. 						date: '2016-05-01',
  49. 						name: '王小虎',
  50. 						address: '上海市普陀区金沙江路 1519 弄'
  51. 					}, {
  52. 						date: '2016-05-03',
  53. 						name: '王小虎',
  54. 						address: '上海市普陀区金沙江路 1516 弄'
  55. 					}]
  56. 				}
  57. 			});
  58. 		</script>
  60. 	</body>
  61. </html>

自定义事件内容分发

  • 通过组件无法直接操作 Vue 对象的数据，可以通过组件调前端，通过前端操作 Vue 对象的数据，实现组件操作 Vue 对象数据。
  • 核心：自定义事件this.$emit('myEvent')
  • 例如：在组件中添加一个删除按钮，要求点击删除，将指定列表数据删除

示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>插槽slot之自定义事件分发</title>
  6.     <!--引入Vue.js-->
  7.     <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  8. </head>
  9. <body>
  11.     <div id="app10">
  12.         <to-do>
  13.             <to-do-title slot="to-do-title" v-bind:title="toDoTitle"></to-do-title>
  14.             <to-do-items slot="to-do-items"
  15.                          v-for="(luis, index) in toDoList"
  16.                          v-bind:item="luis"
  17.                          v-bind:index="index"
  18.                          v-on:rm="removeItem(index)"></to-do-items><!--绑定自定义事件-->
  19.         </to-do>
  20.     </div>
  22.     <script type="text/javascript">
  24.         Vue.component("to-do", {
  25.             // template: '<div>' +
  26.             //             '<slot></slot>' +
  27.             //             '<ul>' +
  28.             //                 '<slot></slot>' +
  29.             //             '</ul>' +
  30.             //           '</div>'
  31.             // 使用折行转义字符，使多行html模板更简洁
  32.             template: '<div>\
  33.                         <slot name="to-do-title"></slot>\
  34.                         <ul>\
  35.                             <slot name="to-do-items"></slot>\
  36.                         </ul>\
  37.                       </div>'
  38.         });
  39.         Vue.component("to-do-title", {
  40.             props: ['title'],
  41.             template: '<p>{{title}}</p>'
  42.         });
  43.         Vue.component("to-do-items", {
  44.             props: ['item', 'index'],
  45.             // template: '<li>{{item}} <button @click="remove">删除</button></li>',
  46.             template: '<li>{{index}}---{{item}} <button v-on:click="remove">删除</button></li>',
  47.             methods: {
  48.                 remove: function (index) {
  49.                     //自定义事件分发
  50.                     //不能直接通过组件控制Vue对象中的方法；可通过组件调前端，再通过前端来控制Vue对象
  51.                     this.$emit("rm", index);
  52.                 }
  53.             }
  55.         });
  57.         var vm = new Vue({
  58.             el: "#app10",
  59.             data: {
  60.                 toDoTitle: "待办事项",
  61.                 toDoList: ['起床', '洗漱', '工作']
  62.             },
  63.             methods: {
  64.                 removeItem: function (index) {
  65.                     //删除指定数组下标处指定个数的元素
  66.                     this.toDoList.splice(index, 1);
  67.                 }
  68.             }
  69.         });
  70.     </script>
  72. </body>
  73. </html>

Vue 入门小结

核心：数据驱动，组件化

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

常用属性：

  • v-if
  • v-else-if
  • v-else
  • v-for
  • v-on绑定事件，简写@
  • v-model数据双向绑定
  • v-bind给组件绑定参数，简写:

组件化：

  • 组合组件 slot 插槽
  • 组件内部绑定事件需要使用到this.$emit("事件名", 参数);
  • 计算属性的特色，缓存计算数据

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

说明：

  • 以上属于 Vue 的基础语法，包括示例都是为了演示语法的使用，实际开发不会采用此方式！
  • Vue 的开发都是要基于 NodeJS，实际开发都是采用的 vue-cli 脚手架，vue-router 实现路由（跳转），vuex 实现状态管理（会话管理），Vue UI 界面，一般使用 ElementUI（饿了么出品），或使用 ICE（阿里巴巴出品）来快速搭建前端项目！

Axios 异步通信

vue 可以实现数据的渲染，但是如何获取数据呢？

vue 本身不具备通信能力，通常结合 axios（一个专注于异步通信的 js 框架）来使用。

如果使用 IDEA 写代码需要保证设置中 JavaScript 规范为 ECS 6+，如下：

什么是 Axios

  • Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，其主要作用就是实现 AJAX 异步通信。

为什么使用 Axios

  • 由于Vue.js是一个视图层框架，并且其开发者（尤雨溪）严格遵守 SOC（关注度分离原则），所以Vue.js并不包含 AJAX 的通信功能，为了解决通信问题，作者单独开发了一个名为 vue-resource 的插件，不过在进入 2.0 版本以后，其停止了对该插件的维护并推荐了 Axios 框架。建议少用 jQuery，因为它操作 DOM 太频繁。
  • 对于异步通信：
    • 原生 ajax：实现步骤复杂
    • jQuery：笨重
    • Axios：简洁高效，对 RESTful 支持良好

安装

可使用 npm、bower、cdn 等，此处选择使用 cdn：

  1. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

使用案例

异步请求

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<!-- vue -->
  7. 		<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
  8. 		<!-- axios -->
  9. 		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  11. 	</head>
  12. 	<body>
  14. 		<div id="container">
  15. 			<button type="button" @click="test1">测试1</button>
  16. 		</div>
  18. 		<script type="text/javascript">
  19. 			var vm = new Vue({
  20. 				el: "#container",
  21. 				methods: {
  22. 					test1: function() {
  23. 						//发送异步请求
  24. 						// axios.get(url).then(fn);
  25. 						// axios.get(url,{}).then(fn)
  26. 						axios.get("http://localhost:9999/music/detail", {
  27. 								params: {
  28. 									id: "25640392"
  29. 								}
  30. 							})
  31. 							.then(function(res) {
  32. 								console.log(res);
  33. 							});
  34. 					}
  35. 				}
  36. 			});
  37. 		</script>
  38. 	</body>
  39. </html>

Axios 提供了多种异步请求方法，实现对 RESTful 风格的支持。

get 请求

  • 无参传递：axios.get(url).then(fn);

  • 有参传递：axios.get(url,{}).then(fn)

    1. //使⽤axios的get请求传递参数，需要将参数设置在params下
    2. axios.get("http://localhost:9999/music/detail",{
    3.     params:{
    4.     	id:"25640392"
    5.     }
    6. })
    7.     .then(function(res){
    8.     console.log(res);
    9. });

post 请求

  • axios.post(url,{}).then(fn)

    1. axios.post("http://localhost:9999/music/search",{s:"阿刁"})
    2.     .then(function(res){
    3.     console.log(res);
    4. });

自定义请求：自定义请求方式、请求参数、请求头、请求体（post）

  1. axios({
  2.     url:"http://localhost:9999/music/search",
  3.     method:"post",
  4.     params:{
  5.         //设置请求⾏传值
  6.         s:"成都",
  7.         limit:15
  8.     },
  9.     headers:{
  10.         //设置请求头
  11.     },
  12.     data:{
  13.         //设置请求体（post/put）
  14.     }
  15. }).then(function(res){
  16.     console.log(res)
  17. });

其他

  • delete
  • put
  • option

并发请求

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<!-- vue -->
  7. 		<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
  8. 		<!-- axios -->
  9. 		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  11. 	</head>
  12. 	<body>
  14. 		<div id="container">
  15. 			<button type="button" @click="test1">测试1</button>
  16. 		</div>
  18. 		<script type="text/javascript">
  19. 			var vm = new Vue({
  20. 				el: "#container",
  21. 				methods: {
  22. 					test1: function() {
  23. 						//发送异步请求
  24. 						axios.all([listMusics(), getMusicDetail()]).then(axios.spread(function(r1, r2) {
  25. 							// 两个请求现在都执行完成
  26. 							console.log(r1);
  27. 							console.log(r2);
  28. 						}));
  29. 					}
  30. 				}
  31. 			});
  33. 			function listMusics() {
  34. 				return axios.get('http://localhost:9999/music/search?s=成都');
  35. 			}
  37. 			function getMusicDetail() {
  38. 				return axios.get('http://localhost:9999/music/detail?id=25640392');
  39. 			}
  41. 		</script>
  42. 	</body>
  43. </html>

箭头函数

箭头函数是一种语法，需要明白其使用格式。

先要注意：axios 的回调函数的参数 res，并不是接口返回的数据，而是表示一个响应对象；res.data 才表示接口响应回来的数据。

此知识点学习目标：需要明白这种用法的意义，还有要看得懂！

案例需求

需求：将接口返回的数据设置到 vue 中

方式一

直接通过 vue 对象设置（简单名了，但用的人少）

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<!-- vue -->
  7. 		<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
  8. 		<!-- axios -->
  9. 		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  11. 	</head>
  12. 	<body>
  14. 		<div id="container">
  15. 			<button type="button" @click="test1">测试1</button>
  16. 		</div>
  18. 		<script type="text/javascript">
  19. 			var vm = new Vue({
  20. 				el: "#container",
  21. 				data: {
  22. 					song: {}
  23. 				},
  24. 				methods: {
  25. 					test1: function() {
  26. 						//发送异步请求
  27. 						axios.get("http://localhost:9999/music/detail", {
  28. 							params: {
  29. 								id = 25640392
  30. 							}
  31. 						})
  32. 						.then(function(res) {
  33. 							// res并不是接口返回的数据，而是表示一个响应对象；res.data才表示接口响应的数据
  34. 							if (res.data.code == 200) {
  35. 								// 直接通过vm实例设置
  36. 								vm.song = res.data.songs[0];
  37. 							}
  38. 						});
  39. 					}
  40. 				}
  41. 			});
  42. 		</script>
  44. 	</body>
  45. </html>
方式二

通过定义属性，在指定位置使用（用的多）

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<!-- vue -->
  7. 		<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
  8. 		<!-- axios -->
  9. 		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  11. 	</head>
  12. 	<body>
  14. 		<div id="container">
  15. 			<button type="button" @click="test1">测试1</button>
  16. 		</div>
  18. 		<script type="text/javascript">
  19. 			var vm = new Vue({
  20. 				el: "#container",
  21. 				data: {
  22. 					song: {}
  23. 				},
  24. 				methods: {
  25. 					test1: function() {
  27. 						// 定义一个变量，将当前vue实例赋值给它
  28. 						var _this = this;
  30. 						//发送异步请求
  31. 						axios.get("http://localhost:9999/music/detail", {
  32. 							params: {
  33. 								id = 25640392
  34. 							}
  35. 						})
  36. 						.then(function(res) {
  37. 							// res并不是接口返回的数据，而是表示一个响应对象；res.data才表示接口响应的数据
  38. 							if (res.data.code == 200) {
  39. 								// 如果这里直接写this，则代表的是回调函数的对象，不是vm对象！
  40. 								// this.song = res.data.songs[0];
  41. 								// 通过外面定义的变量设置数据
  42. 								_this.song = res.data.songs[0];
  43. 							}
  44. 						});
  45. 					}
  46. 				}
  47. 			});
  48. 		</script>
  50. 	</body>
  51. </html>
方式三

使用箭头函数（需要看得懂）

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<!-- vue -->
  7. 		<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
  8. 		<!-- axios -->
  9. 		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  11. 	</head>
  12. 	<body>
  14. 		<div id="container">
  15. 			<button type="button" @click="test1">测试1</button>
  16. 		</div>
  18. 		<script type="text/javascript">
  19. 			var vm = new Vue({
  20. 				el: "#container",
  21. 				data: {
  22. 					song: {}
  23. 				},
  24. 				methods: {
  25. 					test1: function() {
  26. 						//发送异步请求
  27. 						axios.get("http://localhost:9999/music/detail", {
  28. 								params: {
  29. 									id = "25640392"
  30. 								}
  31. 							})
  32. 							.then((res) => {
  33. 								// res并不是接口返回的数据，而是表示一个响应对象；res.data才表示接口响应的数据
  34. 								if (res.data.code == 200) {
  35. 									this.song = res.data.songs[0];
  36. 								}
  37. 							});
  38. 					}
  39. 				}
  40. 			});
  41. 		</script>
  43. 	</body>
  44. </html>

router 路由（新）

router 是由 vue 官方提供的，用于组件跳转的插件。

官方文档：https://router.vuejs.org/zh/introduction.html

1. 路由插件的引用

离线模式示例：（复制并转到 CDN 中地址，保存就是对应的 js 库文件）

  1. <script type="text/javascript" src="js/vue.js" ></script>
  2. <script type="text/javascript" src="js/vue-router.js"></script>

在线 CDN：（vue-router 需要依赖 vue 才能使用）【注意：使用高版本可能会报错】

  1. <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  2. <!-- 低版本，也可以使用 -->
  3. <!-- <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script> -->
  4. <script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"></script>

2. 路由使用案例

步骤简述：

  1. 引入 vue 和 vue-router 的 js 文件
  2. 定义 vue 实例和对应的基础 vue 容器标签
  3. 在容器中使用路由专用链接和路由页面展示标签
  4. 在 js 中定义路由链接跳转的模板
  5. 在 js 中定义路由跳转的规则（在创建的 VueRouter 中定义跳转规则）
  6. vue 实例中配置路由对象，即引用路由

代码示例：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>01</title>
  6. 		<style type="text/css">
  7. 			body {
  8. 				padding: 0px;
  9. 				margin: 0px;
  10. 			}
  12. 			ul {
  13. 				list-style: none;
  14. 			}
  16. 			ul li {
  17. 				display: inline;
  18. 				float: left;
  19. 				margin-left: 15px;
  20. 				margin- bottom: 15px;
  21. 			}
  23. 			ul li a {
  24. 				text-decoration: none;
  25. 				color: white;
  26. 				font-size: 18px;
  27. 				font-weight: bold;
  28. 			}
  30. 			ul li a:hover {
  31. 				color: yellow;
  32. 			}
  33. 		</style>
  35. 		<!-- 引入vue -->
  36. 		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  37. 		<!-- 引入vue-router -->
  38. 		<!-- 低版本，也可以使用 -->
  39. 		<!-- <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script> -->
  40. 		<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"></script>
  42. 	</head>
  43. 	<body>
  44. 		<div id="container">
  45. 			<div style="width: 100%; height: 70px; background: #00BFFF;">
  46. 				<table>
  47. 					<tr>
  48. 						<td>
  49. 							<p>logo</p>
  50. 						</td>
  51. 						<td>
  52. 							<ul>
  53. 								<!-- 使用路由专用链接 -->
  54. 								<li>
  55. 									<router-link to="/a">首页</router-link>
  56. 								</li>
  57. 								<li>
  58. 									<router-link to="/b">Java</router-link>
  59. 								</li>
  60. 								<li>
  61. 									<router-link to="/c">HTML5</router-link>
  62. 								</li>
  63. 								<li>
  64. 									<router-link to="/d">Python</router-link>
  65. 								</li>
  66. 							</ul>
  67. 						</td>
  68. 					</tr>
  69. 				</table>
  70. 			</div>
  71. 			<div style="width: 100%; height: 680px; background:lemonchiffon;">
  72. 				<!-- 在此处展示路由跳转的页面 -->
  73. 				<router-view></router-view>
  74. 			</div>
  75. 		</div>
  76. 		<script type="text/javascript">
  78. 			// vue的路由旨在为单页面应用开发提供便捷
  80. 			//1.定义链接跳转的模板（组件）
  81. 			//使用const声明；var和const声明的区别是const一旦赋值不可改变
  82. 			const t1 = {
  83. 				template: `<p>index</p>`
  84. 			};
  85. 			const t2 = {
  86. 				template: `<p>Java</p>`
  87. 			};
  88. 			const t3 = {
  89. 				template: `<p>HTML5</p>`
  90. 			};
  91. 			const t4 = {
  92. 				template: `<p>PYTHON</p>`
  93. 			};
  95. 			//2.定义路由规则
  96. 			const myrouter = new VueRouter({
  97. 				routes: [{
  98. 						path: "/a",
  99. 						component: t1
  100. 					},
  101. 					{
  102. 						path: "/b",
  103. 						component: t2
  104. 					},
  105. 					{
  106. 						path: "/c",
  107. 						component: t3
  108. 					},
  109. 					{
  110. 						path: "/d",
  111. 						component: t4
  112. 					}
  113. 				]
  114. 			});
  116. 			// 3.vue实例中配置路由对象，即引用路由
  117. 			var vm = new Vue({
  118. 				el: "#container",
  119. 				router: myrouter
  120. 			});
  121. 		</script>
  122. 	</body>
  123. </html>

3. 动态路由匹配

通配符

通过使用通配符 * 实现，* 可以匹配任意路径。

例如：

  • /user-* 匹配所有以 user- 开头的任意路径
  • /* 匹配所有路径

注意：如果使用通配符定义路径，需要注意路由声明的顺序！

  1. const myrouter = new VueRouter({
  2.     routes:[
  3.         {path:"/user-*",component:xxx},
  4.         {path:"/*",component:xxx}
  5.     ]
  6. });

路由参数

  • /a/:参数名 可以匹配/a/ 开头的路径
  • {{$route.params.参数名}} 获取数据
  1. <div id="container">
  2.     <li><router-link to="/a/101">⾸⻚</router-link></li>
  3.     <router-view></router-view>
  4. </div>
  6. <script type="text/javascript">
  8.     const t1 = {template:`<p>index:{{$route.params.id}}</p>`};
  10.     const myrouter = new VueRouter({
  11.         routes:[
  12.         {path:"/a/:id",component:t1}
  13.         ]
  14.     });
  16.     var vm = new Vue({
  17.         el:"#container",
  18.         router:myrouter
  19.     });
  20. </script>

优先级

如果一个路径匹配了多个路由，则按照路由的配置顺序：路由定义的越早，优先级别就越高。

4. 嵌套路由

在一级路由的组件中显示二级路由

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>嵌套路由</title>
  7. 		<!-- 引入vue -->
  8. 		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  9. 		<!-- 引入vue-router -->
  10. 		<!-- 低版本，也可以使用 -->
  11. 		<!-- <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script> -->
  12. 		<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"></script>
  14. 	</head>
  15. 	<body>
  16. 		<div id="container">
  18. 			<router-link to="/a">首页</router-link>
  19. 			<router-link to="/a/c2">首页-c2</router-link>
  20. 			<router-link to="/a/c3">首页-c3</router-link>
  22. 			<router-view></router-view>
  24. 		</div>
  26. 		<script type="text/javascript">
  28. 			const t1 = {
  29. 				template: `<div style="width: 400px; height: 200px; border: skyblue 1px solid;">
  30. 								index
  31. 								<hr/>
  32. 								<router-view></router-view>
  33. 							</div>`
  34. 			};
  36. 			const t2 = {template: '<div>t2</div>'};
  37. 			const t3 = {template: '<div>t3</div>'};
  39. 			const myrouter = new VueRouter({
  40. 				routes: [{
  41. 					path: "/a",
  42. 					component: t1,
  43. 					children: [
  44. 						{
  45. 							path:"c2",
  46. 							component: t2
  47. 						},
  48. 						{
  49. 							path:"c3",
  50. 							component: t3
  51. 						}
  52. 					]
  53. 				}]
  54. 			});
  56. 			var vm = new Vue({
  57. 				el: "#container",
  58. 				router: myrouter
  59. 			});
  60. 		</script>
  61. 	</body>
  62. </html>

5. 编程式导航

学习目标：掌握不使用路由标签链接，通过 js 代码进行路由跳转的方式。

push()

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>luis</title>
  7. 		<!-- 引入vue -->
  8. 		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  9. 		<!-- 引入vue-router -->
  10. 		<!-- 低版本，也可以使用 -->
  11. 		<!-- <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script> -->
  12. 		<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"></script>
  14. 	</head>
  15. 	<body>
  16. 		<div id="container">
  18. 			<!-- 舍弃下面通过超链接跳转 -->
  19. 			<!-- <router-link to="/index">首页</router-link> -->
  20. 			<!-- 改用通过按钮进行跳转 -->
  21. 			<button type="button" @click="btnClick">首页跳转</button>
  22. 			<router-view></router-view>
  24. 		</div>
  26. 		<script type="text/javascript">
  28. 			const t1 = {
  29. 				template: `<div style="width: 400px; height: 200px; border: skyblue 1px solid;">
  30. 								index
  31. 							</div>`
  32. 			};
  34. 			const myrouter = new VueRouter({
  35. 				routes: [{
  36. 					path: "/index",
  37. 					component: t1
  38. 				}]
  39. 			});
  41. 			var vm = new Vue({
  42. 				el: "#container",
  43. 				router: myrouter,
  44. 				methods:{
  45. 					btnClick:function() {
  46. 						//js代码实现路由跳转，编程式导航
  47. 						myrouter.push("/index");
  48. 					}
  49. 				}
  50. 			});
  51. 		</script>
  52. 	</body>
  53. </html>

push() 参数

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>luis</title>
  7. 		<!-- 引入vue -->
  8. 		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  9. 		<!-- 引入vue-router -->
  10. 		<!-- 低版本，也可以使用 -->
  11. 		<!-- <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script> -->
  12. 		<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"></script>
  14. 	</head>
  15. 	<body>
  16. 		<div id="container">
  18. 			<!-- 舍弃下面通过超链接跳转 -->
  19. 			<!-- <router-link to="/index">首页</router-link> -->
  20. 			<!-- 改用通过按钮进行跳转 -->
  21. 			<button type="button" @click="btnClick">首页跳转</button>
  22. 			<router-view></router-view>
  24. 		</div>
  26. 		<script type="text/javascript">
  28. 			const t1 = {
  29. 				template: `<div style="width: 400px; height: 200px; border: skyblue 1px solid;">
  30. 								index：{{$route.params.id}}
  31. 							</div>`
  32. 			};
  34. 			const myrouter = new VueRouter({
  35. 				routes: [{
  36. 					path: "/index",
  37. 					name: "r1",
  38. 					component: t1
  39. 				}]
  40. 			});
  42. 			var vm = new Vue({
  43. 				el: "#container",
  44. 				router: myrouter,
  45. 				methods:{
  46. 					btnClick:function() {
  47. 						//js代码实现路由跳转，编程式导航
  49. 						//方式一：字符串
  50. 						// myrouter.push("/index");
  52. 						//方式二：对象
  53. 						// myrouter.push({path:"/index"})
  54. 						// myrouter.push({path:"/index", params:{id:121}});
  55. 						//如果要使用组件传值，可以在定义路由路径时指定如：path:'index/:id'，然后下方传值
  56. 						// myrouter.push({path:"/index/111"});
  58. 						//方式三：命名的路由，需要定义路由名字name
  59. 						// myrouter.push({name:"r1", params:{id:121}});
  61. 						//方式四，url传参，并非组件传值，相当于/index?id=101
  62. 						// myrouter.push({path:"/index", query:{id:101}});
  63. 					}
  64. 				}
  65. 			});
  66. 		</script>
  67. 	</body>
  68. </html>

replace()

replace() 和 push() 功能一致，只是 replace() 不会向 history 添加新的浏览记录（即页面没有前进后退记录）

go()

用法：路由对象.go(-1);

参数为⼀个整数，表示在浏览器历史记录中前后/后退多少步，相当于 window.history.go(-1) 的作⽤；

参数为负整数，则表示后退多少步；参数为正整数，则表示前进多少步。

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>luis</title>
  7. 		<!-- 引入vue -->
  8. 		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  9. 		<!-- 引入vue-router -->
  10. 		<!-- 低版本，也可以使用 -->
  11. 		<!-- <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script> -->
  12. 		<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"></script>
  14. 	</head>
  15. 	<body>
  16. 		<div id="container">
  18. 			<!-- 舍弃下面通过超链接跳转 -->
  19. 			<!-- <router-link to="/index">首页</router-link> -->
  20. 			<!-- 改用通过按钮进行跳转 -->
  21. 			<button type="button" @click="btnClick">首页跳转</button>
  22. 			<button type="button" @click="back">后退</button>
  23. 			<router-view></router-view>
  25. 		</div>
  27. 		<script type="text/javascript">
  29. 			const t1 = {
  30. 				template: `<div style="width: 400px; height: 200px; border: skyblue 1px solid;">
  31. 								index：{{$route.params.id}}
  32. 							</div>`
  33. 			};
  35. 			const myrouter = new VueRouter({
  36. 				routes: [{
  37. 					path: "/index",
  38. 					name: "r1",
  39. 					component: t1
  40. 				}]
  41. 			});
  43. 			var vm = new Vue({
  44. 				el: "#container",
  45. 				router: myrouter,
  46. 				methods:{
  47. 					btnClick:function() {
  48. 						//js代码实现路由跳转，编程式导航
  49. 						myrouter.push("/index");
  50. 					},
  51. 					back:function() {
  52. 						myrouter.go(-1);
  53. 					}
  54. 				}
  55. 			});
  56. 		</script>
  57. 	</body>
  58. </html>

6. 命名路由

命名路由：在定义路由的时候可以给路由指定 name，我们在进⾏路由导航时可以通过路由的名字导航

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>luis</title>
  7. 		<!-- 引入vue -->
  8. 		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  9. 		<!-- 引入vue-router -->
  10. 		<!-- 低版本，也可以使用 -->
  11. 		<!-- <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script> -->
  12. 		<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"></script>
  14. 	</head>
  15. 	<body>
  16. 		<div id="container">
  18. 			<!-- 使用路由的name进行链接跳转，注意to属性需要进行绑定，需要加冒号 -->
  19. 			<router-link :to="{name:'r1'}">name链接跳转</router-link>
  20. 			<!-- js代码进行路由跳转 -->
  21. 			<button type="button" @click="btnClick">按钮跳转</button>
  22. 			<router-view></router-view>
  24. 		</div>
  26. 		<script type="text/javascript">
  28. 			const t1 = {
  29. 				template: `<div style="width: 400px; height: 200px; border: skyblue 1px solid;">
  30. 								index：t1 skyblue
  31. 							</div>`
  32. 			};
  33. 			const t2 = {
  34. 				template: `<div style="width: 400px; height: 200px; border: red 1px solid;">
  35. 								index：t2 red
  36. 							</div>`
  37. 			};
  39. 			const myrouter = new VueRouter({
  40. 				routes: [
  41. 					{
  42. 						path: "/a",
  43. 						name: "r1",
  44. 						component: t1
  45. 					},
  46. 					{
  47. 						path: "/b",
  48. 						name: "r2",
  49. 						component: t2
  50. 					}
  51. 				]
  52. 			});
  54. 			var vm = new Vue({
  55. 				el: "#container",
  56. 				router: myrouter,
  57. 				methods:{
  58. 					btnClick:function() {
  59. 						//js代码实现路由跳转，编程式导航
  60. 						myrouter.push({name:"r2"});
  61. 					}
  62. 				}
  63. 			});
  64. 		</script>
  65. 	</body>
  66. </html>

7. 命名路由视图

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>luis</title>
  7. 		<!-- 引入vue -->
  8. 		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  9. 		<!-- 引入vue-router -->
  10. 		<!-- 低版本，也可以使用 -->
  11. 		<!-- <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script> -->
  12. 		<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"></script>
  14. 	</head>
  15. 	<body>
  16. 		<div id="container">
  18. 			<!-- 多个模板放在多个视图中展示 -->
  20. 			<router-link to="/a">a链接跳转</router-link>
  21. 			<router-link to="/b">b链接跳转</router-link>
  23. 			<!-- 命名路由视图 -->
  24. 			<!--
  25. 			如果在HTML中有一个以上的路由视图router-view，需要给router-view指定name，
  26. 			在路由中使用components映射多个组件根据name设置组件与router-view绑定关系
  27. 			-->
  28. 			<router-view name="v1"></router-view>
  29. 			<router-view name="v2"></router-view>
  31. 		</div>
  33. 		<script type="text/javascript">
  35. 			const t11 = {
  36. 				template: `<div style="width: 400px; height: 200px; border: skyblue 1px solid;">
  37. 								index：t11 skyblue
  38. 							</div>`
  39. 			};
  40. 			const t12 = {
  41. 				template: `<div style="width: 400px; height: 200px; border: yellow 1px solid;">
  42. 								index：t12 yellow
  43. 							</div>`
  44. 			};
  45. 			const t21 = {
  46. 				template: `<div style="width: 400px; height: 200px; border: skyblue 1px solid;">
  47. 								index：t21 skyblue
  48. 							</div>`
  49. 			};
  50. 			const t22 = {
  51. 				template: `<div style="width: 400px; height: 200px; border: yellow 1px solid;">
  52. 								index：t22 yellow
  53. 							</div>`
  54. 			};
  56. 			const myrouter = new VueRouter({
  57. 				routes: [
  58. 					{
  59. 						path: "/a",
  60. 						name: "r1",
  61. 						components: {
  62. 							v1: t11,
  63. 							v2: t12
  64. 						}
  65. 					},
  66. 					{
  67. 						path: "/b",
  68. 						name: "r2",
  69. 						components: {
  70. 							v1: t21,
  71. 							v2: t22
  72. 						}
  73. 					}
  74. 				]
  75. 			});
  77. 			var vm = new Vue({
  78. 				el: "#container",
  79. 				router: myrouter
  80. 			});
  81. 		</script>
  82. 	</body>
  83. </html>

8. 重定向和别名

重定向

访问 /b，重定向到 /a

  • 根据路径重定向
  • 根据路由命名重定向
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>luis</title>
  7. 		<!-- 引入vue -->
  8. 		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  9. 		<!-- 引入vue-router -->
  10. 		<!-- 低版本，也可以使用 -->
  11. 		<!-- <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script> -->
  12. 		<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"></script>
  14. 	</head>
  15. 	<body>
  16. 		<div id="container">
  18. 			<router-link to="/a">路径a</router-link>
  19. 			<router-link to="/b">路径b</router-link>
  20. 			<router-view ></router-view>
  22. 		</div>
  24. 		<script type="text/javascript">
  26. 			const t1 = {
  27. 				template: `<div style="width: 400px; height: 200px; border: skyblue 1px solid;">
  28. 								index：t11 skyblue
  29. 							</div>`
  30. 			};
  32. 			const myrouter = new VueRouter({
  33. 				routes: [
  34. 					{
  35. 						path: "/a",
  36. 						name: "r1",
  37. 						component: t1
  38. 					},
  39. 					{
  40. 						path: "/b",
  41. 						//根据路径重定向
  42. 						// redirect: "/a"
  43. 						//根据路由命名重定向
  44. 						redirect: {name: "r1"}
  45. 					}
  46. 				]
  47. 			});
  49. 			var vm = new Vue({
  50. 				el: "#container",
  51. 				router: myrouter
  52. 			});
  53. 		</script>
  54. 	</body>
  55. </html>

路由别名

给路由路径起别名，可以通过别名访问，隐藏真实路径。

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>luis</title>
  7. 		<!-- 引入vue -->
  8. 		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  9. 		<!-- 引入vue-router -->
  10. 		<!-- 低版本，也可以使用 -->
  11. 		<!-- <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script> -->
  12. 		<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"></script>
  14. 	</head>
  15. 	<body>
  16. 		<div id="container">
  18. 			<router-link to="/a">路径a</router-link>
  19. 			<router-link to="/haha">路径a的别名haha</router-link>
  20. 			<router-link to="/b">路径b</router-link>
  21. 			<router-view ></router-view>
  23. 		</div>
  25. 		<script type="text/javascript">
  27. 			const t1 = {
  28. 				template: `<div style="width: 400px; height: 200px; border: skyblue 1px solid;">
  29. 								index：t11 skyblue
  30. 							</div>`
  31. 			};
  33. 			const myrouter = new VueRouter({
  34. 				routes: [
  35. 					{
  36. 						path: "/a",
  37. 						alias: "/haha", //起别名
  38. 						name: "r1",
  39. 						component: t1
  40. 					},
  41. 					{
  42. 						path: "/b",
  43. 						//根据路径重定向
  44. 						// redirect: "/a"
  45. 						//根据路由命名重定向
  46. 						redirect: {name: "r1"}
  48. 					}
  49. 				]
  50. 			});
  52. 			var vm = new Vue({
  53. 				el: "#container",
  54. 				router: myrouter
  55. 			});
  56. 		</script>
  57. 	</body>
  58. </html>

9. 路由组件传参

方式一：可以通过 /url/:attr ⽅式实现通过路由传值给组件（耦合度较高）

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>luis</title>
  7. 		<!-- 引入vue -->
  8. 		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  9. 		<!-- 引入vue-router -->
  10. 		<!-- 低版本，也可以使用 -->
  11. 		<!-- <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script> -->
  12. 		<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"></script>
  14. 	</head>
  15. 	<body>
  16. 		<div id="container">
  18. 			<router-link to="/a/111">路径a</router-link>
  19. 			<router-view ></router-view>
  21. 		</div>
  23. 		<script type="text/javascript">
  25. 			const t1 = {
  26. 				template: `<div style="width: 400px; height: 200px; border: skyblue 1px solid;">
  27. 								参数：{{$route.params.id}}
  28. 							</div>`
  29. 			};
  31. 			const myrouter = new VueRouter({
  32. 				routes: [
  33. 					{
  34. 						path: "/a/:id",
  35. 						component: t1
  36. 					}
  37. 				]
  38. 			});
  40. 			var vm = new Vue({
  41. 				el: "#container",
  42. 				router: myrouter
  43. 			});
  44. 		</script>
  45. 	</body>
  46. </html>

方式二：通过 props 传参（常用，解耦）

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>luis</title>
  7. 		<!-- 引入vue -->
  8. 		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  9. 		<!-- 引入vue-router -->
  10. 		<!-- 低版本，也可以使用 -->
  11. 		<!-- <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script> -->
  12. 		<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"></script>
  14. 	</head>
  15. 	<body>
  16. 		<div id="container">
  18. 			<router-link to="/a/333">路径a</router-link>
  19. 			<router-view ></router-view>
  21. 		</div>
  23. 		<script type="text/javascript">
  25. 			const t1 = {
  26. 				props: ["id"], //设置属性
  27. 				template: `<div style="width: 400px; height: 200px; border: skyblue 1px solid;">
  28. 								参数：{{id}}
  29. 							</div>`
  30. 			};
  32. 			const myrouter = new VueRouter({
  33. 				routes: [
  34. 					{
  35. 						path: "/a/:id",
  36. 						props: true, //开启属性
  37. 						component: t1
  38. 					}
  39. 				]
  40. 			});
  42. 			var vm = new Vue({
  43. 				el: "#container",
  44. 				router: myrouter
  45. 			});
  46. 		</script>
  47. 	</body>
  48. </html>

PS：以上是路由一些基础的使用，其他内容或详细的使用参考官方文档。

第一个 vue-cli 程序

什么是 vue-cli

  • vue-cli 是官方提供的一个脚手架，用于快速生成一个 vue 的项目模板
  • 预先定义好的目录结构以及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，使我们的开发更加的便捷。

主要的功能：

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

需要的环境

1、安装 Node.js

确认 Node.js 安装成功：

  • cmd 下 输入node -v，查看版本号打印信息

  • cmd 下 输入npm -v，查看版本号打印信息

    npm：软件包管理工具，类似 Linux 中 apt 软件安装。

2、安装 cnpm

安装 Node.js 淘宝镜像加速器（cnpm），解决 npm 速度慢的问题：

  1. # -g 就是全局安装（推荐）
  2. npm install cnpm -g

注意：建议优先使用 npm 下载，若 npm 下载缓慢，再考虑 使用 cnpm！（通过淘宝下载的偶尔可能出现问题）

查看安装情况：查看路径C:\Users\linwe\AppData\Roaming\npm\node_modules

3、安装 vue-cli

  1. # 使用 cnpm 选择全局安装的方式安装 vue-cli
  2. cnpm install vue-cli -g
  4. # 测试是否安装成功
  5. # 查看可以基于哪些模板创建 vue 程序，通常使用 webpack
  6. vue list

查看安装情况：查看路径C:\Users\linwe\AppData\Roaming\npm\node_modules

第一个 vue-cli 程序创建

  1. 电脑上手动创建一个空目录，如D:\1a-Projects\vue-projects

  2. 在该目录下，使用 cmd 命令，进入 DOS 窗口，初始化项目：vue init webpack myvue

    依据以下模板，进行项目的创建：（一路都选择 no 即可）

    1. D:\1a-Projects\vue-projects>vue init webpack myvue
    3. # 项目名，默认，回车，即可
    4. ? Project name myvue
    5. # 项目描述，默认，回车，即可
    6. ? Project description A Vue.js project
    7. # 项目作者，默认，回车，即可
    8. ? Author luis
    9. # 选择第一种 build 方式
    10. ? Vue build standalone
    11. # 不安装 vue-router，选择 n，后续需要再手动添加
    12. ? Install vue-router? No
    13. # 是否使用 ESLint 做代码检查，选择 n，后续需要再手动添加
    14. ? Use ESLint to lint your code? No
    15. # 单元测试相关，选择 n，后续需要再手动添加
    16. ? Set up unit tests No
    17. # 单元测试相关，选择 n，后续需要再手动添加
    18. ? Setup e2e tests with Nightwatch? No
    19. # 是否创建完成后直接初始化，选择 n，我们手动执行，运行结果！
    20. ? Should we run `npm install` for you after the project has been created? (recommended) no
    22.    vue-cli · Generated "myvue".
    24. # Project initialization finished!
    25. # ========================
    27. To get started:
    29.   cd myvue
    30.   npm install (or if using yarn: yarn)
    31.   npm run dev
    33. Documentation can be found at https://vuejs-templates.github.io/webpack

    视频参考：https://www.bilibili.com/video/BV18E411a7mC?p=13&spm_id_from=pageDriver&vd_source=4b96cdd8ce60c65ca7e8639e7e9d672a

  3. 初始化并运行（可使用IDEA打开该项目，查看相关目录结构）

    1. cd myvue # 进入myvue目录
    2. npm install # 安装依赖环境
    3. npm run dev # 运行项目（运行成功后，可在浏览器输入地址访问）

    PS：可使用 Ctrl + C 终止项目

webpack 学习使用

webpack 简介

  • webpack 主要作用是打包，其核心存在两个部分，入口和出口，可以把 webpack 想象成香肠加工厂，就是活猪进去，香肠出来的那种，但是如果每次加工都需要员工亲力亲为，那多麻烦，所以我们考虑到了自动化配置。webpack 存在功能类似的配置文件，让 webpack 通过配置，全自动的执行我们需要的编译操作。
  • webpack 分成四个部分，其中最核心的就是入口和出口，当然在入口和出口配置的同时我们还需要一些加载器和插件，这就是我们所谓的 webpack 配置文件，这个配置文件我们习惯把其命名为 webpack.config.js，还有 webpackfile.js。
  • webpack 是一种模块化的解决方案，其工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），webpack 将从这个文件开始找到你的项目的所有依赖文件，使用 loaders 处理它们，最后打包为一个（或多个）浏览器可识别的 JavaScript 文件。
  • webpack 使用 ES6 模块语法

总结一下，webpack 共分为四个部分：入口、出口、加载器、插件。

什么是 webpack

  • webpack 可以看做是模块打包机：分析你的项目结构，找到 JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言（如 Scss，TypeScript 等），并将其转换和打包为合适的格式供浏览器使用。

webpack 能干什么

  • 根据入口文件的依赖，加载所有模块 js，然后合并成一个 js
  • 标准且纯粹的模块化打包工具
  • 依赖一个文件入口，打包所有依赖为当前浏览器可用的代码

安装

  1. npm install webpack -g # 安装打包工具
  2. npm install webpack-cli -g # 安装客户端
  4. webpack -v # 查看安装的版本（是否安装成功）

相关配置参数（了解）

创建webpack.config.js配置文件

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

使用 webpack

目录结构预览：

  1. 在D:\1a-Projects\vue-projects下创建名为webpack-study的空目录（自定义），作为示例项目，使用 IDEA 打开

  2. 在项目目录下，创建 modules 目录，用于存放 JS 模块等资源文件

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

    hello.js

    1. // 暴露一个方法 sayHi1
    2. exports.sayHi1 = function () {
    3.     document.write("<h1>luis1 learns ES6</h1>")
    4. };
    5. // 暴露一个方法 sayHi2
    6. exports.sayHi2 = function () {
    7.     document.write("<h2>luis2 learns ES6</h2>")
    8. };
    9. // 暴露一个方法 sayHi3
    10. exports.sayHi3 = function () {
    11.     document.write("<h3>luis3 learns ES6</h3>")
    12. };

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

    main.js

    1. // require 导入一个模块，就可以调用这个模块中的方法了
    2. var hello = require("./hello");
    3. hello.sayHi1();
    4. hello.sayHi2();
    5. hello.sayHi3();

  5. 在项目目录下，创建 webpack.config.js 配置文件，用于配置相关参数

    webpack.config.js

    1. module.exports = {
    2.     entry: './modules/main.js',
    3.     output: {
    4.         filename: "./js.bundle.js"
    5.     }
    6. }

  6. 在项目目录下，地址栏输入 cmd 进入 DOS 窗口，输入webpack命令进行打包；

    打包完成后，在指定的输出路径下就可看到打包压缩后的 js，后面如需使用，则直接引入该 js 即可，不用再使用打包前的那些 js。

    1. D:\1a-Projects\vue-projects\webpack-study>webpack

  7. 引入打包压缩后的 js：在项目目录下，创建 index.html，在其中直接引入打包压缩后的 js，浏览器打开即可

    index.html

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <body>
    8.     <!--前端的模块化开发-->
    9.     <script src="dist/js.bundle.js"></script>
    10. </body>
    11. </html>

总结：

  • vue.js 是一个前端 js 框架，是一套构建用户界面的渐进式框架
  • 前端的模块化开发：将 js 写好，使用 webpack 打包后，直接在前端引入即可

vue-router 路由（旧）

Tips：学习的时候，尽量打开官方文档。

认识 vue-router

目前前端流行的三大框架，都有自己的路由实现：

  • Angular 的 ngRouter
  • React 的 ReactRouter
  • Vue 的 vue-router

vue-router 是 Vue.js 官方的路由插件，它和 vue.js 是深度集成的，适合用于构建单页面应用。可访问其官方网站对其进行学习：https://router.vuejs.org/zh/

vue-router 是基于路由和组件的

  • 路由用户设定访问路径，将路径和组件映射起来。
  • 在 vue-router 的单页面应用中，页面路径的改变就是组件的切换。

SPA(single page application)：单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是：更新视图而不重新请求页面；vue-router 在实现单页面前端路由时，提供了两种方式：Hash 模式和 History 模式。

功能

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

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

安装

基于第一个 vue-cli 程序进行测试学习，先查看 node_modules 中是否存在 vue-router（之前创建第一个 vue-cli 程序时可选择是否安装 rue-router）

vue-router 是一个插件包，所以我们还是需要用 npm/cnpm 进行安装！

在第一个 vue-cli 项目目录地址栏输入 cmd 命令，进入 DOS 窗口，输入以下命令，进行安装：

  1. # 方式一：建议使用！（使用 cnpm 方式，安装低版本的 vue-router；经测试，高版本的使用有问题！）
  2. cnpm install vue-router@3.1.3 --save-dev
  4. # 方式二
  5. npm install vue-router --save-dev
  7. # 方式三：若以上方式安装都有问题，就使用此种 cnpm 安装
  8. cnpm install vue-router --save-dev

安装完成后，在 node_modules 目录中就会出现 vue-router 的 js 库，需要使用的地方，导入即可使用！

使用 vue-router

PS：删除无用东西，如初始的 HelloWorld 组件相关

最终目录结构预览：（基于之前创建的第一个 vue-cli 程序）

  1. components 目录下新建两个自定义的组件，用于路由组件跳转测试；

    Main.vue

    1. <template>
    2.   <h2>首页</h2>
    3. </template>
    5. <script>
    6. export default {
    7.   name: "Main"
    8. }
    9. </script>
    11. <style scoped>
    13. </style>

    Content.vue

    1. <template>
    2.   <h1>内容页</h1>
    3. </template>
    5. <script>
    6. export default {
    7.   name: "Content"
    8. }
    9. </script>
    11. <style scoped>
    13. </style>

  2. 在 src 目录下，新建 router 目录，专门存放路由；在 router 目录下，新建 index.js，用来导入、安装并配置路由；

    index.js

    1. import Vue from "vue";
    2. import VueRouter from "vue-router";
    4. import Content from "../components/Content";
    5. import Main from "../components/Main";
    7. //安装路由
    8. Vue.use(VueRouter);
    10. //配置路由
    11. export default new VueRouter({
    12.   routes: [
    13.     {
    14.       //路由路径 相当于@RequestMapping
    15.       path: '/content',
    16.       name: 'content',
    17.       //跳转的组件
    18.       component: Content
    19.     },
    20.     {
    21.       //路由路径
    22.       path: '/main',
    23.       name: 'main',
    24.       //跳转的组件
    25.       component: Main
    26.     }
    27.   ]
    28. });

  3. 在 main.js 中配置路由

    main.js

    1. import Vue from 'vue'
    2. import App from './App'
    3. //导入之前创建的路由配置目录
    4. import router from './router'
    6. Vue.config.productionTip = false 
    8. /* eslint-disable no-new */
    9. new Vue({
    10.   el: '#app',
    11.   //配置路由
    12.   router,
    13.   components: { App },
    14.   template: '<App/>'
    15. })

  4. 在 App.vue 中使用路由

    App.vue

    1. <template>
    2.   <div id="app">
    4.     <h2>路由跳转测试</h2>
    5.     <h2>Vue-Router</h2>
    6.     <router-link to="/main">首页</router-link>
    7.     <router-link to="/content">内容页</router-link>
    8.     <!--用来展示路由跳转的页面-->
    9.     <router-view></router-view>
    11.   </div>
    12. </template>
    14. <script>
    16. export default {
    17.   name: 'App'
    19. }
    20. </script>
    22. <style>
    23. #app {
    24.   font-family: 'Avenir', Helvetica, Arial, sans-serif;
    25.   -webkit-font-smoothing: antialiased;
    26.   -moz-osx-font-smoothing: grayscale;
    27.   text-align: center;
    28.   color: #2c3e50;
    29.   margin-top: 60px;
    30. }
    31. </style>

  5. 在项目目录，在其地址栏输入 cmd 命令，进入 dos 窗口（或直接在 IDEA 终端中）运行项目：npm run dev

  6. 浏览器输入相关地址，进行访问测试

Tips：后续需要添加组件跳转，只需要以下三步即可！

  1. 在 components 目录下创建自定义组件
  2. 在 router 目录的 index.js 中配置路由
  3. 在 App.vue 中使用路由

Vue+ ElementUI

说明：结合之前所学 + 使用 ElementUI 组件库，进行实战训练

Element UI官网：https://element.eleme.cn/#/zh-CN/component/installation

准备

  • 创建一个目录如vue-projects，用来存放后续创建的 vue 工程，如D:\1a-Projects\vue-projects

  • 以管理员权限打开命令行，并切换到该vue-projects目录下

    操作：点击搜索框，输入 cmd，右击以管理员方式运行命令提示符；先切换到 d 盘d:，再使用 cd 命令切换到指定目录即可！

步骤

  1. 在vue-projects目录下创建名为 hi-vue 的工程：

    1. D:\1a-Projects\vue-projects>vue init webpack hi-vue

    安装过程：项目名、描述、作者默认即可；编译环境选第一个；后续一路 no；npm install 选第三个，手动安装！

    以上，项目初始化完成！

  2. 进入到 hi-vue 项目目录下，安装依赖和插件：

    Tips：如果使用国外 npm 方式下载有问题，可尝试换国内淘宝 cnpm 方式下载！

    Tips：如果安装过程中无 ERR（即错误），则可视为正常，继续后续操作即可！

    Tips：如果最后启动失败，找不出原因，可重新新建工程、初始化项目、重新安装！

    1. # 进入工程目录
    2. cd hi-vue
    4. # 安装 vue-router
    5. # 优选方案（使用 cnpm 方式，安装低版本的 vue-router；经测试，高版本的使用有问题！）
    6. cnpm install vue-router@3.1.3 --save-dev
    7. # 备选方案
    8. # cnpm install vue-router --save-dev
    10. # 安装 element-ui（官网推荐使用npm方式安装）(如果安装有问题，就换 cnpm 方式安装！)
    11. npm i element-ui -S
    13. # 安装依赖
    14. npm install
    16. # 安装 SASS 加载器
    17. cnpm install sass-loader node-sass --save-dev
    19. # 启动测试
    20. npm run dev

Npm 命令解释

  • npm install moduleName：安装模块到项目目录下
  • npm install -g moduleName：-g 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置
  • npm install --save moduleName：--save 的意思是将模块安装到项目目录下，并在 package 文件的 dependencies 节点写入依赖，-S为该命令的缩写
  • npm install --save-dev moduleName：--save-dev的意思是将模块安装到项目目录下，并在 package 文件的 devDependencies 节点写入依赖，-D为该命令的缩写

  1. 启动成功并在浏览器成功访问后；IDEA 打开项目，删除 assets 中图片，删除 components 中 HelloWorld.vue 组件，删除 App.vue 中无用的图片引入和 HelloWorld 组件相关内容；至此，基础工程有了！

  2. 在 src 目录下，新建 router 目录，存放路由相关；新建 views 目录，存放视图相关（组件）；

    目录说明：components（放功能性相关组件）、router（放路由相关组件）、views（放视图相关组件）

  3. views 下新建 Main.vue（首页）和Login.vue（登陆页）作为视图展示页

    Main.vue

    1. <template>
    2.   <h1>首页</h1>
    3. </template>
    5. <script>
    6. export default {
    7.   name: "Main"
    8. }
    9. </script>
    11. <style scoped>
    13. </style>

    Login.vue（此登陆模板直接从 ElementUI 官网表单组件库中复制即可）

    1. <template>
    2.   <div>
    3.     <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
    4.       <h3 class="login-title">欢迎登录</h3>
    5.       <el-form-item label="账号" prop="username">
    6.         <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
    7.       </el-form-item>
    8.       <el-form-item label="密码" prop="password">
    9.         <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
    10.       </el-form-item>
    11.       <el-form-item>
    12.         <el-button type="primary" v-on:click="onSubmit( 'loginForm' )">登录</el-button>
    13.       </el-form-item>
    14.     </el-form>
    16.     <el-dialog
    17.       title="温馨提示"
    18.       :visible.sync="dialogVisible"
    19.       width="30%"
    20.       :before-close="handLeClose">
    21.       <span>请输入账号和密码</span>
    22.       <span slot="footer" class="dialog- footer">
    23.         <el-button type="primary" @click="dialogVisible = false">确定</el-button>
    24.       </span>
    25.     </el-dialog>
    26.   </div>
    27. </template>
    29. <script>
    30. export default {
    31.   name: "Login",
    32.   data() {
    33.     return {
    34.       form: {
    35.         username: '',
    36.         password: ''
    37.       },
    38.       //表单验证，需要在el-form-item 元素中增加prop 属性
    39.       rules: {
    40.         username: [
    41.           {required: true, message: " 账号不可为空", trigger: 'blur'}
    42.         ],
    43.         password: [
    44.           {required: true, message: " 密码不可为空 ", trigger: 'blur'}
    45.         ]
    46.       },
    47.       //对话框显示和隐藏
    48.       dialogVisible: false
    49.     }
    50.   },
    51.   methods: {
    52.     onSubmit(formName) {
    53.       //为表单绑定验证功能
    54.       this.$refs[formName].validate((valid) => {
    55.         if (valid) {
    56.           //使用vue-router路由到指定页面，该方式称之为编程式导航
    57.           this.$router.push("/main");
    58.         } else {
    59.           this.dialogVisible = true;
    60.           return false;
    61.         }
    62.       });
    63.     }
    64.   }
    65. }
    66. </script>
    68. <style lang="scss" scoped>
    69. .login-box {
    70.   border: 1px solid #DCDFE6;
    71.   width: 350px;
    72.   margin: 180px auto;
    73.   padding: 35px 35px 15px 35px;
    74.   border-radius: 5px;
    75.   -webkit-border-radius: 5px;
    76.   -moz-border-radius: 5px;
    77.   box-shadow: 0 0 25px #909399;
    78. }
    80. .login-title {
    81.   text-align: center;
    82.   margin: 0 auto 40px auto;
    83.   color: #303133;
    84. }
    85. </style>

  4. router 目录下新建index.js，在其中配置路由

    index.js

    1. import Vue from 'vue'
    2. import VueRouter from 'vue-router'
    3. import Main from "../views/Main";
    4. import Login from "../views/Login";
    6. //安装路由
    7. Vue.use(VueRouter);
    9. //配置路由
    10. export default new VueRouter({
    11.   routes: [
    12.     {
    13.       path: '/main',
    14.       component: Main
    15.     },
    16.     {
    17.       path: '/login',
    18.       component: Login
    19.     }
    20.   ]
    21. });

  5. main.js 中引入 ElementUI 和 router

    1. import Vue from 'vue'
    2. import App from './App'
    4. import router from './router'
    6. import ElementUI from 'element-ui';
    7. import 'element-ui/lib/theme-chalk/index.css';
    9. Vue.config.productionTip = false
    11. Vue.use(router);
    12. Vue.use(ElementUI);
    14. new Vue({
    15.   el: '#app',
    16.   router,
    17.   render: h => h(App)
    18.   // components: { App },
    19.   // template: '<App/>'
    20. })

  6. App.vue中展示使用

    App.vue

    1. <template>
    2.   <div id="app">
    3.     <router-link to="/main">首页</router-link>
    4.     <router-link to="/login">登陆</router-link>
    5.     <router-view></router-view>
    6.   </div>
    7. </template>
    9. <script>
    11. export default {
    12.   name: 'App'
    13. }
    14. </script>

  7. 终端输入npm run dev运行，浏览器访问测试

    http://localhost:8080

    http://localhost:8080/#/main

    http://localhost:8080/#/login

可能遇到的问题

  • 安装的 sass-loader版本太高？

    解决：package.json 中将 sass-loader 版本改到指定低版本如 4.0.0；终端执行npm install，不行就cnpm install，重新npm run dev启动即可。

  • vue-router 版本太高，导致路由声明无效，找不到？

    解决：安装低版本的 vue-router，执行cnpm install vue-router@3.1.3 --save-dev，重新npm run dev启动即可。

小结

vue + element-ui 使用要点：

  1. main.js 中引入 Element
  2. views 或 components 中创建组件文件，在合适的位置复制进需使用的组件代码
  3. 在如App.vue中使用

路由嵌套

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

基于前面 hi-vue 继续举例学习：

  1. 在 views 目录下新建 user 目录，在 user 目录下创建 List.vue和Profile.vue作为用户列表和个人信息展示

    List.vue

    1. <template>
    2.   <h2>用户列表</h2>
    3. </template>
    5. <script>
    6. export default {
    7.   name: "UserList"
    8. }
    9. </script>
    11. <style scoped>
    13. </style>

    Profile.vue

    1. <template>
    2.   <h2>个人信息</h2>
    3. </template>
    5. <script>
    6. export default {
    7.   name: "UserProfile"
    8. }
    9. </script>
    11. <style scoped>
    13. </style>

  2. 在 router 目录的 index.js 中导入新组件，在 Main 中嵌套子路由

    index.js

    1. import Vue from 'vue'
    3. import VueRouter from 'vue-router'
    5. import Main from "../views/Main";
    6. import Login from "../views/Login";
    8. import UserProfile from "../views/user/Profile";
    9. import UserList from "../views/user/List";
    11. import CheckPwd from "../views/CheckPwd";
    12. import Button from "../views/Button";
    14. //安装路由
    15. Vue.use(VueRouter);
    17. //配置路由
    18. export default new VueRouter({
    19.   routes: [
    20.     {
    21.       path: '/main',
    22.       component: Main,
    23.       children: [ //路由嵌套（嵌套子路由）
    24.         {
    25.           path: '/user/profile',
    26.           component: UserProfile
    27.         },
    28.         {
    29.           path: '/user/list',
    30.           component: UserList
    31.         }
    32.       ]
    33.     },
    34.     {
    35.       path: '/login',
    36.       component: Login
    37.     }
    38.   ]
    39. });

  3. 在 Main.vue 中添加侧边栏组件，实现路由嵌套（在 main 路由中嵌套子路由）的效果（侧边栏代码来自 ElementUI）

    Main.vue

    1. <template>
    2.   <div>
    3.     <el-container>
    5.       <!--侧边栏-->
    6.       <el-aside width="200px">
    7.         <el-menu :default-openeds="['1']">
    8.           <el-submenu index="1">
    9.             <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
    10.             <el-menu-item-group>
    11.               <el-menu-item index="1-1">
    12.                 <!--路由跳转-->
    13.                 <router-link to="/user/profile">个人信息</router-link>
    14.               </el-menu-item>
    15.               <el-menu-item index="1-2">
    16.                 <!--路由跳转-->
    17.                 <router-link to="/user/list">用户列表</router-link>
    18.               </el-menu-item>
    19.             </el-menu-item-group>
    20.           </el-submenu>
    21.           <el-submenu index="2">
    22.             <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
    23.             <el-menu-item-group>
    24.               <el-menu-item index="2-1">分类管理</el-menu-item>
    25.               <el-menu-item index="2-2">内容列表</el-menu-item>
    26.             </el-menu-item-group>
    27.           </el-submenu>
    28.         </el-menu>
    29.       </el-aside>
    31.       <!--顶栏-->
    32.       <el-container>
    33.         <el-header style="text-align: right; font-size: 12px">
    34.           <el-dropdown>
    35.             <i class="el-icon-setting" style="margin-right:15px"></i>
    36.             <el-dropdown-menu slot="dropdown">
    37.               <el-dropdown-item>个人信息</el-dropdown-item>
    38.               <el-dropdown-item>退出登录</el-dropdown-item>
    39.             </el-dropdown-menu>
    40.           </el-dropdown>
    41.         </el-header>
    43.         <!--主显示页-->
    44.         <el-main>
    45.           <!--这里展示路由跳转的组件样式-->
    46.           <router-view/>
    47.         </el-main>
    48.       </el-container>
    50.     </el-container>
    51.   </div>
    53. </template>
    55. <script>
    56. export default {
    57.   name: "Main"
    58. }
    59. </script>
    61. <style scoped>
    62. .el-header {
    63.   background-color: #048bd1;
    64.   color: #333;
    65.   line-height: 60px;
    66. }
    68. .el-aside {
    69.   color: #333;
    70. }
    71. </style>

  4. 终端输入npm run dev启动项目，并在浏览器访问http://localhost:8080/#/main测试

参数传递以及重定向

参数传递

例子1：（整页代码示例）

  1. 在路由跳转时，不仅仅需要路径，还需要定义参数；

    在 Main.vue 中，修改需传参的路由跳转方式：使用 v-bind，以对象形式进行传参，显示声明 name 和 params 属性

    Main.vue

    1. <template>
    2.   <div>
    3.     <el-container>
    5.       <!--侧边栏-->
    6.       <el-aside width="200px">
    7.         <el-menu :default-openeds="['1']">
    8.           <el-submenu index="1">
    9.             <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
    10.             <el-menu-item-group>
    11.               <el-menu-item index="1-1">
    12.                 <!--路由跳转-->
    13.                 <!--<router-link to="/user/profile">个人信息</router-link>-->
    14.                 <!--前端传参，需要对象，使用v-bind，name和路由配置中name一致 (v-bind:xx 可简写为 :xx)-->
    15.                 <router-link v-bind:to="{name: 'UserProfile', params: {id: 1}}">个人信息</router-link>
    16.               </el-menu-item>
    17.               <el-menu-item index="1-2">
    18.                 <!--路由跳转-->
    19.                 <router-link to="/user/list">用户列表</router-link>
    20.               </el-menu-item>
    21.               <el-menu-item index="1-3">
    22.                 <!--路由跳转（重定向）-->
    23.                 <router-link to="/goHome">回到首页</router-link>
    24.               </el-menu-item>
    25.             </el-menu-item-group>
    26.           </el-submenu>
    27.           <el-submenu index="2">
    28.             <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
    29.             <el-menu-item-group>
    30.               <el-menu-item index="2-1">分类管理</el-menu-item>
    31.               <el-menu-item index="2-2">内容列表</el-menu-item>
    32.             </el-menu-item-group>
    33.           </el-submenu>
    34.         </el-menu>
    35.       </el-aside>
    37.       <!--顶栏-->
    38.       <el-container>
    39.         <el-header style="text-align: right; font-size: 12px">
    40.           <el-dropdown>
    41.             <i class="el-icon-setting" style="margin-right:15px"></i>
    42.             <el-dropdown-menu slot="dropdown">
    43.               <el-dropdown-item>个人信息</el-dropdown-item>
    44.               <el-dropdown-item>退出登录</el-dropdown-item>
    45.             </el-dropdown-menu>
    46.           </el-dropdown>
    47.         </el-header>
    49.         <!--主显示页-->
    50.         <el-main>
    51.           <!--这里展示路由跳转的组件样式-->
    52.           <router-view/>
    53.         </el-main>
    54.       </el-container>
    56.     </el-container>
    57.   </div>
    59. </template>
    61. <script>
    62. export default {
    63.   name: "Main"
    64. }
    65. </script>
    67. <style scoped>
    68. .el-header {
    69.   background-color: #048bd1;
    70.   color: #333;
    71.   line-height: 60px;
    72. }
    74. .el-aside {
    75.   color: #333;
    76. }
    77. </style>

  2. 在 router 的 index.js 中，修改需接参路由的路径格式 path，并定义 name 和 props 属性

    index.js

    1. import Vue from 'vue'
    3. import VueRouter from 'vue-router'
    5. import Main from "../views/Main";
    6. import Login from "../views/Login";
    8. import UserProfile from "../views/user/Profile";
    9. import UserList from "../views/user/List";
    11. import CheckPwd from "../views/CheckPwd";
    12. import Button from "../views/Button";
    14. //安装路由
    15. Vue.use(VueRouter);
    17. //配置路由
    18. export default new VueRouter({
    19.   routes: [
    20.     {
    21.       path: '/main',
    22.       component: Main,
    23.       children: [ //路由嵌套（嵌套子路由）
    24.         {
    25.           // path: '/user/profile',
    26.           path: '/user/profile/:id', //接参
    27.           name: 'UserProfile', //可定义name属性
    28.           component: UserProfile,
    29.           props: true //通过声明props解耦，在任何地方都可使用该组件
    30.         },
    31.         {
    32.           path: '/user/list',
    33.           component: UserList
    34.         }
    35.       ]
    36.     },
    37.     {
    38.       path: '/login',
    39.       component: Login
    40.     },
    41.     {
    42.       path: '/goHome',
    43.       redirect: '/main' //实现重定向
    44.     }
    45.   ]
    46. });

  3. 取参展示：在 Profile.vue中获取传递的参数，并进行展示

    下面列举两种方式：{{$route.params.id}} 方式获取；{{id}} 方式是在index.js和Profile.vue均声明 props 后可用！

    Profile.vue

    1. <template>
    2.   <!-- 所有元素，不能直接暴露在根节点下！！！ -->
    3.   <div>
    4.     <h2>个人信息</h2>
    5.     {{$route.params.id}}
    6.     <br/><br/>
    7.     {{id}}
    8.   </div>
    9. </template>
    11. <script>
    12. export default {
    13.   props: ['id'], //可通过组件取参，在上面就可以直接用了
    14.   name: "UserProfile"
    15. }
    16. </script>
    18. <style scoped>
    20. </style>

  4. 终端输入npm run dev启动项目，并在浏览器访问http://localhost:8080/#/main测试

例子2：（局部代码示例）

  1. 前端页面跳转时传递用户填写的参数（如下的用户填写的姓名参数）

    Login.vue

    1. <script>
    2. export default {
    3.   name: "Login",
    4.   data() {
    5.     return {
    6.       form: {
    7.         username: '',
    8.         password: ''
    9.       },
    10.       //表单验证，需要在el-form-item 元素中增加prop 属性
    11.       rules: {
    12.         username: [
    13.           {required: true, message: " 账号不可为空", trigger: 'blur'}
    14.         ],
    15.         password: [
    16.           {required: true, message: " 密码不可为空 ", trigger: 'blur'}
    17.         ]
    18.       },
    19.       //对话框显示和隐藏
    20.       dialogVisible: false
    21.     }
    22.   },
    23.   methods: {
    24.     onSubmit(formName) {
    25.       //为表单绑定验证功能
    26.       this.$refs[formName].validate((valid) => {
    27.         if (valid) {
    28.           //使用vue-router路由到指定页面，该方式称之为编程式导航
    29.           //跳转并且传递参数(将用户填的姓名传递过去)
    30.           this.$router.push("/main/" + this.form.username);
    31.         } else {
    32.           this.dialogVisible = true;
    33.           return false;
    34.         }
    35.       });
    36.     }
    37.   }
    38. }
    39. </script>

  2. 路由配置中，配置接参路径，以及 props 属性的声明

    index.js

    1. //配置路由
    2. export default new VueRouter({
    3.   routes: [
    4.     {
    5.       path: '/main/:name', //接参
    6.       props: true, //声明为true，方便前端页面获取参数
    7.       component: Main,
    8.       children: [ //路由嵌套（嵌套子路由）
    9.         {
    10.           // path: '/user/profile',
    11.           path: '/user/profile/:id', //接参
    12.           name: 'UserProfile', //可定义name属性
    13.           component: UserProfile,
    14.           props: true //通过声明props解耦，在任何地方都可使用该组件
    15.         },
    16.         {
    17.           path: '/user/list',
    18.           component: UserList
    19.         }
    20.       ]
    21.     },
    22.     {
    23.       path: '/login',
    24.       component: Login
    25.     },
    26.     {
    27.       path: '/goHome',
    28.       redirect: '/main' //实现重定向
    29.     }
    30.   ]
    31. });

  3. 页面展示，声明 props 属性，并接参展示数据

    Main.vue

    1. <script>
    2. export default {
    3.   props: ['name'], //接参
    4.   name: "Main"
    5. }
    6. </script>
    8. -------------------
    10. <!--顶栏-->
    11. <el-container>
    12.     <el-header style="text-align: right; font-size: 12px">
    13.         <el-dropdown>
    14.             <i class="el-icon-setting" style="margin-right:15px"></i>
    15.             <el-dropdown-menu slot="dropdown">
    16.                 <el-dropdown-item>个人信息</el-dropdown-item>
    17.                 <el-dropdown-item>退出登录</el-dropdown-item>
    18.             </el-dropdown-menu>
    19.         </el-dropdown>
    20.         <!--显示用户名-->
    21.         <span>{{name}}</span>
    22.     </el-header>
    24.     <!--主显示页-->
    25.     <el-main>
    26.         <!--这里展示路由跳转的组件样式-->
    27.         <router-view/>
    28.     </el-main>
    29. </el-container>

重定向

以下简述实现方式：

  1. 在路由配置中使用 redirect进行路由重定向，如：

    index.js

    1. {
    2.     path: '/goHome',
    3. 	redirect: '/main' //实现重定向
    4. },

  2. 使用指定路径，以重定向方式进行跳转，如：

    Main.vue

    1. <el-menu-item index="1-3">
    2.     <!--路由跳转（重定向）-->
    3.     <router-link to="/goHome">回到首页</router-link>
    4. </el-menu-item>

注意

所有元素，不能直接暴露在根节点下！！！

以Profile.vue说明举例：

错误用法：直接暴露在了<template>中，程序报错！

  1. <template>
  2.   <!-- 所有元素，不能直接暴露在根节点下！！！ -->
  3.   <button></button>
  4.   <a></a>
  5.   <p></p>
  7.   <div>
  8.     <h2>个人信息</h2>
  9.     {{$route.params.id}}
  10.     <br/><br/>
  11.     {{id}}
  12.   </div>
  13. </template>
  15. <script>
  16. export default {
  17.   props: ['id'], //可通过组件取参，在上面就可以直接用了
  18.   name: "UserProfile"
  19. }
  20. </script>
  22. <style scoped>
  24. </style>

正确用法：元素建议套在<div>中使用！

  1. <template>
  2.   <!-- 所有元素，不能直接暴露在根节点下！！！ -->
  3.   <div>
  4.     <button></button>
  5.     <a></a>
  6.     <p></p>
  8.     <h2>个人信息</h2>
  9.     {{$route.params.id}}
  10.     <br/><br/>
  11.     {{id}}
  12.   </div>
  13. </template>
  15. <script>
  16. export default {
  17.   props: ['id'], //可通过组件取参，在上面就可以直接用了
  18.   name: "UserProfile"
  19. }
  20. </script>
  22. <style scoped>
  24. </style>

路由模式、404 和路由钩子

路由模式

默认情况下，如，我们在地址栏中输入地址http://localhost:8080进行访问，回车后，该地址栏中地址会自动带上#号，变为http://localhost:8080/#/，这就是一种默认的路由模式！

路由模式有两种：hash 和 history

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

路由模式设置：（不设置的话默认是 hash 模式，带#）

路由模式在路由配置中设置，一般通过在 router 目录的 index.js中设置 mode 属性，如下：

  1. import Vue from 'vue'
  3. import VueRouter from 'vue-router'
  5. import Main from "../views/Main";
  6. import Login from "../views/Login";
  8. import UserProfile from "../views/user/Profile";
  9. import UserList from "../views/user/List";
  11. import CheckPwd from "../views/CheckPwd";
  12. import Button from "../views/Button";
  14. //安装路由
  15. Vue.use(VueRouter);
  17. //配置路由
  18. export default new VueRouter({
  19.   //设置路由模式(默认hash，带#号；history，则不带#号)
  20.   mode: 'history',
  21.   routes: [
  22.     {
  23.       path: '/main/:name', //接参
  24.       props: true, //声明为true，方便前端页面获取参数
  25.       component: Main,
  26.       children: [ //路由嵌套（嵌套子路由）
  27.         {
  28.           // path: '/user/profile',
  29.           path: '/user/profile/:id', //接参
  30.           name: 'UserProfile', //可定义name属性
  31.           component: UserProfile,
  32.           props: true //通过声明props解耦，在任何地方都可使用该组件
  33.         },
  34.         {
  35.           path: '/user/list',
  36.           component: UserList
  37.         }
  38.       ]
  39.     },
  40.     {
  41.       path: '/login',
  42.       component: Login
  43.     },
  44.     {
  45.       path: '/goHome',
  46.       redirect: '/main' //实现重定向
  47.     },
  48.     {
  49.       path: '/checkPwd',
  50.       component: CheckPwd
  51.     },
  52.     {
  53.       path: '/button',
  54.       component: Button
  55.     }
  56.   ]
  57. });

404

一般情况下，地址栏输入错误的访问地址，应该给出一个 404 提示页面，而不是什么都不显示！

步骤：

  1. views 下创建一个名为NotFound.vue的视图组件，如下：

    NotFoung.vue

    1. <template>
    2.   <div>
    3.     404~ 你的页面走丢了...
    4.   </div>
    5. </template>
    7. <script>
    8. export default {
    9.   name: "NotFound"
    10. }
    11. </script>
    13. <style scoped>
    15. </style>

  2. 路由配置（router 目录下 index.js）

    1. import Vue from 'vue'
    3. import VueRouter from 'vue-router'
    5. import Main from "../views/Main";
    6. import Login from "../views/Login";
    8. import UserProfile from "../views/user/Profile";
    9. import UserList from "../views/user/List";
    11. import CheckPwd from "../views/CheckPwd";
    12. import Button from "../views/Button";
    14. import NotFound from "../views/NotFound";
    16. //安装路由
    17. Vue.use(VueRouter);
    19. //配置路由
    20. export default new VueRouter({
    21.   //设置路由模式(默认hash，带#号；history，则不带#号)
    22.   mode: 'history',
    23.   routes: [
    24.     {
    25.       path: '/main/:name', //接参
    26.       props: true, //声明为true，方便前端页面获取参数
    27.       component: Main,
    28.       children: [ //路由嵌套（嵌套子路由）
    29.         {
    30.           // path: '/user/profile',
    31.           path: '/user/profile/:id', //接参
    32.           name: 'UserProfile', //可定义name属性
    33.           component: UserProfile,
    34.           props: true //通过声明props解耦，在任何地方都可使用该组件
    35.         },
    36.         {
    37.           path: '/user/list',
    38.           component: UserList
    39.         }
    40.       ]
    41.     },
    42.     {
    43.       path: '/login',
    44.       component: Login
    45.     },
    46.     {
    47.       path: '/goHome',
    48.       redirect: '/main' //实现重定向
    49.     },
    50.     {
    51.       path: '/checkPwd',
    52.       component: CheckPwd
    53.     },
    54.     {
    55.       path: '/button',
    56.       component: Button
    57.     },
    58.     {
    59.       path: '*', //匹配不到才走*
    60.       component: NotFound
    61.     }
    62.   ]
    63. });

  3. npm run dev启动，浏览器输入规定内的不存在地址如http://localhost:8080/aa，则会展示 404 视图组件内容

路由钩子与异步请求

钩子函数

  • beforeRouteEnter：在进入路由前执行

  • beforeRouteLeave：在离开路由前执行

使用示例：

如在Profile.vue中

  1. <template>
  2.   <!-- 所有元素，不能直接暴露在根节点下！！！ -->
  3.   <div>
  4.     <h2>个人信息</h2>
  5.     {{$route.params.id}}
  6.     <br/><br/>
  7.     {{id}}
  8.   </div>
  9. </template>
  11. <script>
  12. export default {
  13.   props: ['id'], //可通过组件取参，在上面就可以直接用了
  14.   name: "UserProfile",
  15.   //路由钩子函数，类似于拦截器，在一些特殊时机自动执行！
  16.   beforeRouteEnter: (to, from, next)=>{
  17.     console.log("---》进入路由之前执行的！");
  18.     next();
  19.   },
  20.   beforeRouteLeave: (to, from, next)=>{
  21.     console.log("离开路由之前执行的！《===");
  22.     next();
  23.   }
  24. }
  25. </script>
  27. <style scoped>
  29. </style>

参数说明：

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

钩子函数中使用异步请求

  1. 安装 Axios：cnpm install --save axios vue-axios

  2. 在main.js中引用 Axios

    1. import Vue from 'vue'
    2. import App from './App'
    4. import router from './router'
    6. import ElementUI from 'element-ui';
    7. import 'element-ui/lib/theme-chalk/index.css';
    9. import axios from 'axios' //导入axios
    10. import VueAxios from 'vue-axios' //导入axios
    12. Vue.config.productionTip = false
    14. Vue.use(router);
    15. Vue.use(ElementUI);
    16. Vue.use(VueAxios, axios) //使用axios
    18. new Vue({
    19.   el: '#app',
    20.   router,
    21.   render: h => h(App)
    22.   // components: { App },
    23.   // template: '<App/>'
    24. })

  3. 在 static 目录下新建 mock 目录，在 mock 目录下创建 data.json作为测试数据（static 目录下数据，地址栏可直接访问获取）

    data.json

    1. {
    2.   "name": "luis",
    3.   "url": "https://www.baidu.com",
    4.   "page": 1,
    5.   "isNonProfit": true,
    6.   "address": {
    7.     "street": "广建路",
    8.     "city": "江苏苏州",
    9.     "country": "中国"
    10.   }
    11. }

  4. 在Profile.vue中，演示钩子函数与异步请求的使用

    Profile.vue

    1. <template>
    2.   <!-- 所有元素，不能直接暴露在根节点下！！！ -->
    3.   <div>
    4.     <h2>个人信息</h2>
    5.     {{$route.params.id}}
    6.     <br/><br/>
    7.     {{id}}
    8.   </div>
    9. </template>
    11. <script>
    12. export default {
    13.   props: ['id'], //可通过组件取参，在上面就可以直接用了
    14.   name: "UserProfile",
    15.   //路由钩子函数，类似于拦截器，在一些特殊时机自动执行！
    16.   beforeRouteEnter: (to, from, next)=>{
    17.     console.log("---》进入路由之前执行的！");
    18.     next((vm)=>{
    19.       vm.getData(); //利用组件实例调组件方法，获取数据
    20.     });
    21.   },
    22.   beforeRouteLeave: (to, from, next)=>{
    23.     console.log("离开路由之前执行的！《===");
    24.     next();
    25.   },
    26.   methods: {
    27.     getData: function () {
    28.       this.axios({ //使用Axios异步通信
    29.         method: 'get',
    30.         url: 'http://localhost:8080/static/mock/data.json' //请求的地址
    31.       }).then(function (response) {
    32.         console.log(response.data); //返回的数据
    33.       });
    34.     }
    35.   }
    36. }
    37. </script>
    39. <style scoped>
    41. </style>

  5. npm run dev启动，浏览器 F12 打开调试，输入localhost:8080/main/luis进入首页，点击个人信息链接，观察路由跳转以及控制台打印数据信息，查看是否可成功获取数据。

Vue 基础学习总结的更多相关文章

  1. Vue – 基础学习(4):事件修饰符

    Vue – 基础学习(3):事件修饰符

  2. Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别

    Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别

  3. Vue – 基础学习(2):组件间 通信及参数传递

    Vue – 基础学习(2):组件间 通信及参数传递

  4. Vue – 基础学习(1):对生命周期和钩子函的理解

    一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...

  5. 前端Vue基础学习

    Vue基础 对与vue的简洁明了的干货分享,适合小白学习观看,如果有笔误或者想了解更多的,请给笔者留言,后续会继续分享,从零开始的vue相关经验 1.创建vue实例 <div id=" ...

  6. vue基础学习（二）

    02-01  vue事件深入-传参.冒泡.默认事件 <div id="box"> <div @click="show2()"> < ...

  7. vue基础学习（一）

    01-01 vue使用雏形 <div id="box"> {{msg}} </div> <script> window.onload= func ...

  8. 【转】vue基础学习

    1.基本绑定:    new Vue(        {            el:'#elID',            data:{                // data obj     ...

  9. vue基础学习（三）

    03-01  vue的生存周期-钩子函数 <style> [v-cloak]{display:none;} </style> <div id="box" ...

  10. 【vue基础学习】vue.js开发环境搭建

    1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd ...

随机推荐

  1. Linux或Docker里安装minio / Docker中安装h5ai

    此文为单节点搭建操作 Linux中搭建minio 对象存储服务器 下载minio安装包 wget https://dl.minio.io/server/minio/release/linux-amd6 ...

  2. KFS Oracle RAC 数据解析同步配置方法

    一.logminer方式解析 1.数据库配置 - Oracle 1. 数据库中需要先设置 NSL_DATE_FORMAT,命令如下,设置好以后需要重启数据库: ALTER SYSTEM SET NLS ...

  3. Openstack Neutron：三层技术和实现

    目录 - 1.Neutron 三层技术简介 - 2.集中式router - 1.在节点上安装L3 agent - 2.配置外部网络 - 3.通过CLI或者Horizon 来创建路由 - 4.连接租户网 ...

  4. void指针；函数指针

    void 类型指针 void => 空类型 void* => 空类型指针,只存储地址的值,丢失类型,无法访问,要访问其值,我们必须对这个指针做出正确的 类型转换,然后再间接引用指针.voi ...

  5. Django 使用Pycharm 创建工程

    一.Pycharm 创建Django 工程 事实上,我们一般不使用命令行,而是直接在Pycharm 中创建Django 项目. Pycharm 是进行Django 开发的最佳 IDE,请大家自行安装, ...

  6. x-pack设置完毕后，es-head无法登陆的问题, 登录需要账号密码的问题

    在elasticsearch.yml中添加如下三行配置 http.cors.enabled: true http.cors.allow-origin: "*" http.cors. ...

  7. 分布式MinIO快速入门

    官方文档地址:http://docs.minio.org.cn/docs/master/distributed-minio-quickstart-guide Minio服务基于命令行传入的参数自动切换 ...

  8. 使用KubeOperator扩展k8s集群的worker节点

    官方文档网址:https://kubeoperator.io/docs/installation/install/ 背景说明 原先是一个三节点的k8s集群,一个master,三个woker(maste ...

  9. 授予用户/用户组访问 Kubernetes 的一个名称空间

    转载地址:https://www.kuboard.cn/learning/k8s-advanced/sec/rbac/auth-namespace.html 前提条件 已安装 Kuboard v3,版 ...

  10. python 代码执行顺序

    Python代码在执行过程中,遵循下面的基本原则: 普通语句,直接执行: 碰到函数,将函数体载入内存,并不直接执行 碰到类,执行类内部的普通语句,但是类的方法只载入,不执行 碰到if.for等控制语句 ...