网站做联盟还赚钱吗,网站正在建设中 html 模板,网站备案拍照背景幕布,北京工商局网站如何做股东变更视频笔记是根据B站 千锋 涛哥 - SpringBootvue前后端分离项目《锋迷商城》实战课-完结版 进行整理的 笔记可上 gitee仓库 自取 千锋 Vue 笔记整理 一、vue 的简介1.1 使用 JQuery 的复杂性问题1.2 VUE 简介1.2.1 前端框架1.2.2 MVVM 二、 vue 入门使用2.1 vue 的引入2.2 入门案… 视频笔记是根据B站 千锋 涛哥 - SpringBootvue前后端分离项目《锋迷商城》实战课-完结版 进行整理的 笔记可上 gitee仓库 自取 千锋 Vue 笔记整理 一、vue 的简介1.1 使用 JQuery 的复杂性问题1.2 VUE 简介1.2.1 前端框架1.2.2 MVVM 二、 vue 入门使用2.1 vue 的引入2.2 入门案例 -- Hello World 三、 vue 的语法3.1 基本类型数据和字符串3.2 对象类型数据3.3 条件 v-if3.4 循环 v-for3.5 绑定标签属性 v-bind3.6 表单标签的双向绑定 v-model 四、vue 实例4.1 vue 实例的生命周期4.2 钩子函数 五、 计算属性和侦听器5.1 计算属性5.2 侦听器 六、class 与 style 绑定6.1 class 绑定6.2 style 绑定 七、条件与列表渲染7.1 条件渲染7.1.1 v-if7.1.2 v-else7.1.3 v-else-if7.1.4 v-show 7.2 列表渲染 八、事件处理8.1 使用 JS 函数传值8.2 使用 dataset 对象传值 推荐8.3 混合使用8.4 事件修饰符8.4.1 事件修饰符使用示例8.4.2 事件修饰符 8.5 按键修饰符8.6 系统修饰符 九、表单输入绑定十、组件10.1 组件介绍及示例10.1.1 组件注册10.1.2 组件引用 10.2 组件注册10.2.1 自定义组件的结构10.2.2 组件的封装10.2.3 组件的复用 10.3 组件通信10.3.1 父传子10.3.2 子传父 -- 使用 props 属性动态传递参数10.3.3 总结 10.4 组件插槽10.4.1 插槽的使用10.4.2 具名插槽10.4.3 插槽作用域 十一、axios 异步通信11.1 axios 介绍11.2 axios 入门使用11.3 axios 异步请求方法11.3.1 GET 格式的请求11.3.2 POST 格式的请求11.3.3 自定义请求11.3.4 请求方法别名 11.4 并发请求11.5 箭头函数11.5.1 axios 回调函数的参数 res11.5.2 箭头函数 十二、 路由 router12.1 路由插件的引用12.1.1 离线12.1.2 在线 CDN 12.2 动态路由匹配12.2.1 通配符12.2.2 路由参数12.2.3 优先级 12.3 嵌套路由12.4 编程式导航12.4.1 push()12.4.2 push() 参数12.4.3 replace()12.4.4 go() 12.5 命名路由12.6 命名视图12.7 重定向12.7.1 重定向12.7.2 路由别名 12.8 路由组件传参 一、vue 的简介 1.1 使用 JQuery 的复杂性问题
使用 JQuery 进行前后端分离开发既可以实现前后端交互 (ajax) 又可以完成数据渲染存在的问题 JQuery 需要通过 HTML 标签拼接、DOM 节点操作完成数据的显示开发效率低且容易出错渲染效率较低vue 是继 JQuery 之后的又一优秀的前端框架专注于前端数据的渲染 ———— 语法简单、渲染效率高
1.2 VUE 简介
1.2.1 前端框架 前端三框架HTML、CSS、JavaScript HTML 决定网页结构CSS 决定显示效果JavaScript 决定网页功能 (交互、数据显示) UI 框架(只提供样式、显示效果) BootstrapamazeUILayui JS 框架 JQuery (JQuery UI)Reactangularnodejs ---- 后端开发vue 集各种前端框架的优势发展而来
1.2.2 MVVM 项目结构经历的三个阶段 后端 MVC 可以理解为单体结构流程控制是由后端控制器来完成
前端 MVC 前后端分离开发后端只负责接收响应请求
MVVM是MVC的增强版实质上和MVC没有本质区别只是代码的位置变动而已
MVVM 前端请求后端接口后端返回数据前端接收数据并将接收到的数据设置为 “VM”HTML 从 vm 取值
M model 数据模型指的是后端接口返回的数据V view 视图VM ViewModel 视图模型 数据模型与视图之间的桥梁后端返回的 model 转换前端所需的 vm视图层可以直接从 vm 中提取数据 Model-View-ViewModel —— 概念图 二、 vue 入门使用 Vue (读音 /vjuː/类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层不仅易于上手还便于与第三方库或既有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时Vue 也完全能够为复杂的单页应用提供驱动。 2.1 vue 的引入 离线引用下载 vue 的 js 文件添加到前端项目在网页中通过 script 标签引用 vue.js 文件 CDN 引用 直接使用在线 CDN 的方式引入
!-- 开发环境版本包含了有帮助的命令行警告 --
script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script2.2 入门案例 – Hello World 文本数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值{{message}} 创建一个 HTML 文件 引入 vue.js 文件 script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!-- 引入vue.js--script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script
/head
bodydiv idapp-1从 0 开始 {{message}}/divscript typetext/javascriptvar vm new Vue({el: #app-1,data: {message: Hello World!}})/script
/body
/htmlMustache 标签将会被替代为对应数据对象上 message property 的值。无论何时绑定的数据对象上 message property 发生了改变插值处的内容都会更新。
三、 vue 的语法
3.1 基本类型数据和字符串
div idapp-2{{code}}从 0 开始 {{message}}
/divscript typetext/javascriptvar vm new Vue({el: #app-2,data: {code: 1_3_3,message: Hello World!}})/script3.2 对象类型数据
支持 ognl 语法
div idapp-3学号{{stu.stuNum}} br /姓名{{stu.stuName}} br /性别{{stu.stuGender}} br /年龄{{stu.stuAge}}
/divscript typetext/javascriptvar vm new Vue({el: #app-3,data: {stu: {stuNum: 10001,stuName: 张三,stuGender: M,stuAge: 20}}})/script3.3 条件 v-if
v-if : 用来控制切换一个元素是否显示 底层控制是 DOM 元素操作 DOM
注在浏览器中网页打开这个文件 F12从标签上可以看到没有 stu.stuGender F 对应的元素。即条件不成立网页不会渲染该 DOM连标签都不会有。
div idapp-4学号{{stu.stuNum}} br /姓名{{stu.stuName}} br /性别label v-ifstu.stuGender M男/labellabel v-ifstu.stuGender F女/labelbr /年龄{{stu.stuAge}}/divscript typetext/javascriptvar vm new Vue({el: #app-4,data: {stu: {stuNum: 10001,stuName: 张三,stuGender: M,stuAge: 20}}})/script3.4 循环 v-for v-for 指令基于一个数组来渲染一个列表。 在 v-for 块中我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数即当前项的索引。 div idapp-5table border1 cellspacing0 width400trth序号/thth学号/thth姓名/thth性别/thth年龄/th/trtr v-for(stu, index) in stustd{{index 1}}/tdtd{{stu.stuNum}}/tdtd{{stu.stuName}}/tdtdtable v-ifstu.stuGender M男/tabletable v-ifstu.stuGender F女/table/tdtd{{stu.stuAge}}/td/tr/table/divscript typetext/javascriptvar vm new Vue({el: #app-5,data: {stus: [{stuNum: 10001,stuName: 张三,stuGender: M,stuAge: 20},{stuNum: 10002,stuName: 李四,stuGender: M,stuAge: 23},{stuNum: 10003,stuName: 郑红,stuGender: F,stuAge: 19}]}})/script3.5 绑定标签属性 v-bind
v-bind:属性名 缩写:属性名
div idapp-6input typetext v-bind:valuemessagehr /br /table border1 cellspacing0 width400trth序号/thth学号/thth姓名/thth性别/thth年龄/th/trtr v-for(stu, index) in stustd{{index 1}}/tdtd{{stu.stuNum}}/tdtdimg height30 :srcstu.stuImg / /tdtd{{stu.stuName}}/tdtdtable v-ifstu.stuGender M男/tabletable v-ifstu.stuGender F女/table/tdtd{{stu.stuAge}}/td/tr/table/divscript typetext/javascriptvar vm new Vue({el: #app-6,data: {message: Hello World!!,stus: [{stuNum: 10001,stuName: 张三,stuGender: M,stuAge: 20,stuImg: img/1.jpg},{stuNum: 10002,stuName: 李四,stuGender: M,stuAge: 23,stuImg: img/2.jpg},{stuNum: 10003,stuName: 郑红,stuGender: F,stuAge: 19,stuImg: img/3.jpg}]}})/script3.6 表单标签的双向绑定 v-model
只能使用在表单输入标签v-model:value 可以简写为 v-model
div idapp-7input typetext v-modelmessagehr /br /双向绑定{{message}}/divscript typetext/javascriptvar vm new Vue({el: #app-7,data: {message: Hello World!!}})/script四、vue 实例 每个使用 vue 进行数据渲染的网页文档都需要创建一个 vue 实例 — — ViewModel 4.1 vue 实例的生命周期 vue 实例生命周期 — — vue 实例从创建到销毁的过程 创建 vue 实例 初始化 data加载 el数据挂载 将 vue 实例 data 中的数据渲染到网页 HTML 标签重新渲染 当 vue 的 data 数据发生变化会重新渲染到 HTML 标签销毁实例
创建对象 ---- 属性初始化 ---- 获取属性值 ----- GC 回收
4.2 钩子函数 为了便于开发者在 vue 实例生命周期的不同阶段进行特定的操作vue 在生命周期四个阶段的前后分别提供了一个函数这个函数无需开发者调用当 vue 实例到达生命周期的指定阶段会自动调用对应的函数。 div idapp-8label v-once{{message}}/labelbr /label{{message}}/labelbr /input typetext v-modelmessage/divscript typetext/javascriptvar vm new Vue({el: #app-8,data: {message: Hello World!!},beforeCreate: function () {// 1. data 初始化之前执行不能操作 data},create: function () {// 2. data 初始化之后执行模板加载之前可以修改 / 获取 data 中的值console.log(this.message);// this.message Hello World!! create(;},beforeMount: function () {// 3. 模板加载之后数据初始渲染挂载之前可以修改 / 获取 data 中的值// this.message Hello World!! beforeMount;},mounted: function () {// 4. 数据初始渲染挂载之后可以对 data 中的变量进行修改但是不会影响 v-once 的渲染// this.message Hello World!! mounted;},beforeUpdate: function () {// 5. 数据渲染之后当 data 中的数据发生变化触发重新渲染渲染之前执行此函数console.log(--- this.message);this.message Hello World!! beforeUpdate;},update: function () {// 6. data 数据被修改之后重新渲染到页面之后// this.message Hello World!! update;},beforeDestroy: function () {// 7. 实例销毁之前},destroy: function () {// 8. 实例销毁之后}})/script五、 计算属性和侦听器
5.1 计算属性 data 中的属性可以通过声明获得也可以通过在 computed 计算属性的 getter 获得 特性计算属性所依赖的属性值发生变化会影响计算属性的值同时发生变化 示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srcjs/vue.js/script
/head
bodydiv idapp-9input typetext v-modelmessage1br /input typetext v-modelmessage2br /{{message3}}/divscript typetext/javascriptvar vm new Vue({el: #app-9,data: {message1: Hello,message2: World},computed: {message3: function () {return this.message1 this.message2;}}})/script
/body
/html5.2 侦听器 侦听器就是 data 中属性的侦听器当 data 中的属性值发生变化就会触发侦听器函数的执行 虽然计算属性在大多数情况下更合适但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时这个方式是最有用的。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srcjs/vue.js/script
/head
bodydiv idapp-10input typetext v-modelmessage1br /input typetext v-modelmessage2br /{{message3}}/divscript typetext/javascriptvar vm new Vue({el: #app-10,data: {message1: Hello,message2: World,message3: Hello World},watch: {message1: function () {this.message3 this.message1 this.message2;},message2: function () {this.message3 this.message1 this.message2;}}})/script
/body
/html六、class 与 style 绑定
6.1 class 绑定
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.my-style1 {width: 200px;height: 100px;background: orange;}.my-style2 {border-radius: 10px;}.my-style3 {width: 200px;height: 100px;background: black;}/stylescript srcjs/vue.js/script
/head
bodydiv idapp-11!-- 如果 message1 为 true, 就加载 my-style1如果 message2 为 true, 就加载 my-style2 --div :class{my-style1: message1, my-style2 : message2}/divhr /!-- 为 class 属性加载多个样式名 --div :class[booleanValue1, booleanValue2]/divhr /!-- 如果 message3 为 true, 则 class my-style3,否则 class my-style1如果在三目运算中使用样式名则需要加单引号不加单引号则表示从 data 变量中获取样式名--div :class[message3 ? my-style3 : my-style1]/divdiv :class[message1 ? booleanValue1 : booleanValue3]/div/divscript typetext/javascriptvar vm new Vue({el: #app-11,data: {message1: true,message2: true,message3: true,booleanValue1: my-style1,booleanValue2: my-style2,booleanValue3: my-style3}})/script
/body
/html6.2 style 绑定
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srcjs/vue.js/script
/head
bodydiv idapp-12!-- 当使用 v-bind 绑定内联样式时1. 使用 {} 定义 style 样式才能获取 data 的值 {} 要遵循 JSON 格式2. {} 中不在使用 style 样式属性名 “font-size”, 而要使用对应的 js 属性名border-style-width --- borderStyleWidth--div v-bind:style{color: colorName, fontSize: fontsize px }Hello World!/div!-- 我们可以直接为 style 属性绑定一个 data 中定义好的内联样式的字符串 --div v-bind:stylemyStyle1Hello World!!/div!-- 我们可以直接为 style 属性绑定一个 data 中定义好的内联样式的对象 --div v-bind:stylemyStyle2Hello World!!!/div!-- 我们可以在同一个 style 属性通过数组引用多个内联样式的对象 --div v-bind:style[myStyle2, myStyle3]Hello World!!!!/div/divscript typetext/javascriptvar vm new Vue({el: #app-12,data: {colorName: yellow,fontsize: 40,myStyle1: color: orange; font-size: 50px,myStyle2: {color: blue,fontSize: 60px},myStyle3: {textShadow: orange 3px 3px 5px}}})/script
/body
/html七、条件与列表渲染
7.1 条件渲染
条件判断语句
v-ifv-else-ifv-else
7.1.1 v-if v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srcjs/vue.js/script
/head
bodydiv idapp-13h3 v-ifcode 1Hello 可以看到/h3h3 v-ifflagflag 为 true, 可以看到/h3/divscript typetext/javascriptvar vm new Vue({el: #app-13,data: {code: 1,flag: false}})/script
/body
/html7.1.2 v-else v-else 指令来表示 v-if 的“else 块” div idapp-13!-- v-else 标签需要紧跟在 v-if 的标签之后中间不能有其他标签, 否则它将不会被识别 --h3 v-ifcode 1Hello 可以看到/h3h3 v-elseWorld 可以看到/h3/divscript typetext/javascriptvar vm new Vue({el: #app-13,data: {code: 1}})/script7.1.3 v-else-if div idapp-13分数 {{code}}对应的等级h3 v-ifcode 90优秀/h3h3 v-else-ifcode 80良好/h3h3 v-else-ifcode 70中等/h3h3 v-else-ifcode 60及格/h3h3 v-else挂科/h3/divscript typetext/javascriptvar vm new Vue({el: #app-13,data: {code: 85}})/script7.1.4 v-show v-show 同样用于根据条件展示元素。 从功能上 v-show 与 v-if 作用是相同的只是渲染过程有区别。 v-if 与 v-show 的区别
v-if 是“真正”的条件渲染因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的如果在初始渲染时条件为假则什么也不做——直到条件第一次变为真时才会开始渲染条件块。相比之下v-show 就简单得多——不管初始条件是什么元素总是会被渲染并且只是简单地基于 CSS 进行切换。一般来说v-if 有更高的切换开销而 v-show 有更高的初始渲染开销。因此如果需要非常频繁地切换则使用 v-show 较好如果在运行时条件很少改变则使用 v-if 较好。
7.2 列表渲染
编码过程中发现网页出现报错
Uncaught Error: Bootstraps JavaScript requires jQuery at bootstrap.min.js:6
解决方法在引进JQuery文件时将其放在 bootstrap 前面即可。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srchttps://cdn.staticfile.org/jquery/1.10.2/jquery.min.js/script!-- 最新版本的 Bootstrap 核心 CSS 文件 --link relstylesheet hrefhttps://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css integritysha384-HSMxcRTRxnNBdg0JdbxYKrThecOKuH5zCYotlSAcp1c8xmyTe9GYg1l9a69psu crossoriginanonymous!-- 最新的 Bootstrap 核心 JavaScript 文件 --script srchttps://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js integritysha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd crossoriginanonymous/scriptscript srcjs/vue.js/script
/head
bodydiv idapp-14ulli v-forc in categoriesa :hrefquery?cid c.cid{{c.cname}}/a/li/ultable classtable table-borderedtrth学号/thth照片/thth姓名/thth性别/thth年龄/thth操作/th/trtemplate v-for(s, index) in stutr :idtr s.stuNumtd{{s.stuNum}}/tdtdimg height30 :srcs.stuImg //tdtd{{s.stuName}}/tdtd!-- {{s.stuGender M ? 男 : 女}} --img v-ifs.stuGender M srcimg/m.bmpimg v-else srcimg/f.bmp/tdtd{{s.stuAge}}/tdtda classbtn btn-danger :hrefstu/delete?cid s.stuNum删除/aa classbtn btn-success :hrefstu/update?cid s.stuNum修改/a/td/tr/template/table/divscript typetext/javascriptvar vm new Vue({el: #app-14,data: {categories:[{cid: 1,cname: 华为},{cid: 2,cname: 小米},{cid: 3,cname: OPPO},{cid: 4,cname: VIVO}],stu: [{stuNum: 10010,stuImg: img/1.jpg,stuName: Tom,stuGender: M,stuAge: 20},{stuNum: 10011,stuImg: img/2.jpg,stuName: Joker,stuGender: M,stuAge: 21},{stuNum: 10012,stuImg: img/3.jpg,stuName: Ling,stuGender: F,stuAge: 20},{stuNum: 10013,stuImg: img/1.jpg,stuName: Jack,stuGender: F,stuAge: 18},]}})/script
/body
/html八、事件处理 在使用 vue 进行数据渲染时如果使用原生 js 事件绑定 例如 onclick如果需要获取 vue 实例中的数据并传参则需要通过拼接来完成 vue 提供了 v-on 指令用于绑定各种事件 v-on:click简化了从 vue 取值的过程但是触发的方法需要定义在 vue 实例的 methods 中 button classbtn btn-danger v-on:clickdoDelete(s.stuNum,s.stuName)删除/buttonscript typetext/javascriptvar vm new Vue({el: #app-15,data: {stu: [{stuNum: 10010,stuImg: img/1.jpg,stuName: Tom,stuGender: M,stuAge: 20}]},methods: {doDelete: function (sNum, sName) {alert(---delete: sNum sName)}}})
/scriptv-on:click 可以简写为 click !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srchttps://cdn.staticfile.org/jquery/1.10.2/jquery.min.js/script!-- 最新版本的 Bootstrap 核心 CSS 文件 --link relstylesheet hrefhttps://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css integritysha384-HSMxcRTRxnNBdg0JdbxYKrThecOKuH5zCYotlSAcp1c8xmyTe9GYg1l9a69psu crossoriginanonymous!-- 最新的 Bootstrap 核心 JavaScript 文件 --script srchttps://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js integritysha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd crossoriginanonymous/scriptscript srcjs/vue.js/script
/head
bodydiv idapp-15ulli v-forc in categoriesa :hrefquery?cid c.cid{{c.cname}}/a/li/ultable classtable table-borderedtrth学号/thth照片/thth姓名/thth性别/thth年龄/thth操作/th/trtemplate v-for(s, index) in stutr :idtr s.stuNumtd{{s.stuNum}}/tdtdimg height30 :srcs.stuImg //tdtd{{s.stuName}}/tdtd!-- {{s.stuGender M ? 男 : 女}} --img v-ifs.stuGender M srcimg/m.bmpimg v-else srcimg/f.bmp/tdtd{{s.stuAge}}/tdtdbutton classbtn btn-danger v-on:clickdoDelete(s.stuNum,s.stuName)删除/buttonbutton classbtn btn-success clickdoUpdate :data-snums.stuNum:data-snames.stuName :data-simgs.stuImg修改/button/td/tr/template/table/divscript typetext/javascriptvar vm new Vue({el: #app-15,data: {categories:[{cid: 1,cname: 华为},{cid: 2,cname: 小米},{cid: 3,cname: OPPO},{cid: 4,cname: VIVO}],stu: [{stuNum: 10010,stuImg: img/1.jpg,stuName: Tom,stuGender: M,stuAge: 20},{stuNum: 10011,stuImg: img/2.jpg,stuName: Joker,stuGender: M,stuAge: 21},{stuNum: 10012,stuImg: img/3.jpg,stuName: Ling,stuGender: F,stuAge: 20},{stuNum: 10013,stuImg: img/1.jpg,stuName: Jack,stuGender: F,stuAge: 18},]},methods: {doDelete: function (sNum, sName) {alert(---delete: sNum sName)},doUpdate: function (event) {// 如果 v-on 绑定的 js 函数没有参数调用的时候可以省略 (), 同时可以给 js 函数一个 event 参数事件对象// 1. event 表示触发当前函数的事件// 2. event.srcElement 表示发生事件的元素 --- 修改按钮// 3. event.srcElement.dataset 表示按钮上绑定的数据集 data-开头的属性alert(---update:);let stu event.srcElement.dataset;}}})/script
/body
/html8.1 使用 JS 函数传值
button classbtn btn-danger v-on:clickdoDelete(s.stuNum,s.stuName)删除/buttonscript typetext/javascriptvar vm new Vue({el: #app-15,data: {stu: [{stuNum: 10010,stuImg: img/1.jpg,stuName: Tom,stuGender: M,stuAge: 20}]},methods: {doDelete: function (sNum, sName) {alert(---delete: sNum sName)}}})
/script8.2 使用 dataset 对象传值 推荐
button classbtn btn-success clickdoUpdate :data-snums.stuNum:data-snames.stuName :data-simgs.stuImg修改/buttonscript typetext/javascriptvar vm new Vue({el: #app-15,data: {stu: [{stuNum: 10010,stuImg: img/1.jpg,stuName: Tom,stuGender: M,stuAge: 20}]},methods: {doUpdate: function (event) {// 如果 v-on 绑定的 js 函数没有参数调用的时候可以省略 (), 同时可以给 js 函数一个 event 参数事件对象// 1. event 表示触发当前函数的事件// 2. event.srcElement 表示发生事件的元素 --- 修改按钮// 3. event.srcElement.dataset 表示按钮上绑定的数据集 data-开头的属性alert(---update:);let stu event.srcElement.dataset;}}})
/script8.3 混合使用
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法
button classbtn btn-danger v-on:clickdoDelete(s.stuNum,s.stuName, $event) :data-simgs.stuImg删除/buttonscript typetext/javascriptvar vm new Vue({el: #app-15,data: {stu: [{stuNum: 10010,stuImg: img/1.jpg,stuName: Tom,stuGender: M,stuAge: 20}]},methods: {doDelete: function (sNum, sName, event) {alert(---delete: sNum sName)console.log(event.srcElement.dataset)}}})
/script8.4 事件修饰符 修饰符是由点开头的指令后缀来表示的。 当使用 v-on 进行事件绑定的时候可以添加特定后缀设置事件触发的特性 8.4.1 事件修饰符使用示例
button typesubmit classbtn btn-success click.preventtest修改/button8.4.2 事件修饰符 常用的事件修饰符: .stop.prevent.capture.self.once.passive .prevent 用来阻止标签的默认行为
div idapp-16form actionhttps://www.baidu.com!-- 此处不加 .prevent ,网页会跳转到 https://www.baidu.com --button typesubmit classbtn btn-success click.preventtest修改/button/form
/divscript typetext/javascriptvar vm new Vue({el: #app-16,data: {},methods: {test: function (event) {alert(--test);}}})
/script.stop 阻止事件冒泡
.self 设置只能自己触发事件子标签不能触发
div idapp-16!-- .prevent 示例 --form actionhttps://www.baidu.com!-- 此处不加 .prevent ,网页会跳转到 https://www.baidu.com --button typesubmit classbtn btn-success click层test修改/button/form!-- .stop 示例 .self 示例只能点击自己触发 --div stylewidth: 200px; height: 200px; background: red; click.selfoutsidediv stylewidth: 100px; height: 100px; background: yellow; clickinside!-- 此处加了 .stop , 网页的外层 div 父标签不会触发 --button click.stopitselftest stop 修饰符/button/div/div/divscript typetext/javascriptvar vm new Vue({el: #app-16,data: {},methods: {test: function (event) {alert(--test);},inside: function () {alert(--inside);},outside: function () {alert(--outside);},itself: function () {alert(--itself);}}})
/script.once 限定事件只能触发一次
!-- .once 示例test()方法只执行一次 --
form actionhttps://www.baidu.com!-- 加了 .prevent第一次点击执行 test(),默认跳转被阻止, 第二次点击按钮直接跳转 test()不执行 --button typesubmit classbtn btn-success click.prevent.oncetest修改/button
/form8.5 按键修饰符 按键修饰符针对键盘事件的修饰符限定哪个按键会触发事件 常用的按键修饰符 .enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right .enter 只有在 key 是 Enter 时调用(触发 enter 按键之后触发事件)
div idapp-17input typetext keyup.entertest
/divscript typetext/javascriptvar vm new Vue({el: #app-17,data: {},methods: {test: function () {alert(enter松开触发)}}})
/script还可以通过全局 config.keyCodes 对象自定义按键修饰符别名
// 输入 按键 j 触发事件 test
input typetext keyup.aaatest
// 按键 j 的别名
Vue.config.keyCodes.aaa 748.6 系统修饰符 组合键 示例CTRL J 触发事件
div idapp-17input typetext keyup.ctrl.jtest
/divscript typetext/javascriptVue.config.keyCodes.j 74var vm new Vue({el: #app-17,data: {},methods: {test: function () {alert(enter松开触发)}}})
/script常用的修饰符 .ctrl.alt.shift.meta windows 键 九、表单输入绑定 表单输入绑定即双向绑定就是能够将 vue 实例的 data 数据渲染到表单输入视图 input\textarea\select, 也能够将输入视图的数据同步到 vue 实例的 data中。 div idapp-18!-- 文本输入框 密码输入框 --input typetext v-modelname /br /input typepassword v-modelpassword /hr /!-- 单选按钮 --input typeradio v-modelradioTest valueA / Ainput typeradio v-modelradioTest valueB / Binput typeradio v-modelradioTest valueC / Cinput typeradio v-modelradioTest valueD / Dhr /!-- 复选框绑定的是一个数组 --input typecheckbox v-modelcheckBox value篮球 / 篮球 br /input typecheckbox v-modelcheckBox value足球 / 足球 br /input typecheckbox v-modelcheckBox value羽毛球 / 羽毛球 br /input typecheckbox v-modelcheckBox value乒乓球 / 乒乓球 br /!-- 下拉菜单 select绑定一个字符串 --select v-modelcityoption valueBJ北京/optionoption valueSH上海/optionoption valueSZ深圳/optionoption valueGZ广州/option/selecthr /!-- 下拉菜单 select加上了 multiple 表示可多选需要绑定一个数组 --select v-modelcities multipleoption valueBJ北京/optionoption valueSH上海/optionoption valueSZ深圳/optionoption valueGZ广州/option/selectbutton typebutton clicktest测试/button
/divscript typetext/javascriptvar vm new Vue({el: #app-18,data: {name: admin,password: 123456,radioTest: C,checkBox: [],city: ,cities: []},methods: {test: function () {alert(vm.cities)}}})
/script十、组件
10.1 组件介绍及示例 组件就是讲通用的 HTML 模块进行封装 —— 可复用的 Vue 实例 通常一个应用会以一棵嵌套的组件树的形式来组织 10.1.1 组件注册 将通用的 HTML 模块封装注册到 vue 中 自定义组件 my-components.js
Vue.component(header-button, {template: div stylewidth: 100%; height: 80px; background: salmontable width100%trtd width200 alignright valignmiddleimg srcimg/1.jpg height80 //tdtdlabel stylecolor: deepskyblue; font-size: 32px; font-family: Adobe 楷体 Std R; margin-left: 30px登录/label/td/tr/table/div
});10.1.2 组件引用
定义组件需要依赖 vue.js在引用自定义组件 js 文件要先引用 vue.js组件的引用必须在 vue 实例 el 指定的容器中 即要在Vue实例范围内
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srchttps://cdn.staticfile.org/jquery/1.10.2/jquery.min.js/script!-- 最新版本的 Bootstrap 核心 CSS 文件 --link relstylesheet hrefhttps://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css integritysha384-HSMxcRTRxnNBdg0JdbxYKrThecOKuH5zCYotlSAcp1c8xmyTe9GYg1l9a69psu crossoriginanonymous!-- 最新的 Bootstrap 核心 JavaScript 文件 --script srchttps://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js integritysha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd crossoriginanonymous/scriptscript srcjs/vue.js/script
/head
bodydiv idapp-19header-button/header-buttonhr /header-button/header-button/divscript srcjs/my-components.js/scriptscript typetext/javascriptvar vm new Vue({el: #app-19})/script
/body
/html10.2 组件注册
10.2.1 自定义组件的结构
Vue.component() 注册组件data 定义组件的模板渲染的数据template 组件的 HTML 模块HTML 标签 \ CSS 样式methods 定义组件中的标签事件中绑定的 JS 函数
my-components.js
Vue.component(header-button, {data: function () {// 组件中 data 是通过函数返回的对象return {name: 貂蝉};},template: div stylewidth: 100%; height: 80px; background: salmontable width100%trtd width200 alignright valignmiddleimg srcimg/1.jpg height80 //tdtdlabel stylecolor: deepskyblue; font-size: 32px; font-family: Adobe 楷体 Std R; margin-left: 30px登录人 {{name}}/label/tdtdbutton clicktest组件按钮/button/td/tr/table/div,methods: {test: function () {alert(组件中 header-button 定义的函数事件)}}
});10.2.2 组件的封装
将模板中的 css 样式提取出来单独封装到 css 文件存储在 css 目录将模板中的图片存储在 img 目录将定义组件的 js 文件和 vue 文件存放到 js 目录
Vue 组件封装的结构
注在编码过程中学到Vue 中同一个 DOM 元素绑定多个点击事件可以使用逗号分隔。
10.2.3 组件的复用
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet hrefcss/my-components.css /script srchttps://cdn.staticfile.org/jquery/1.10.2/jquery.min.js/script!-- 最新版本的 Bootstrap 核心 CSS 文件 --link relstylesheet hrefhttps://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css integritysha384-HSMxcRTRxnNBdg0JdbxYKrThecOKuH5zCYotlSAcp1c8xmyTe9GYg1l9a69psu crossoriginanonymous!-- 最新的 Bootstrap 核心 JavaScript 文件 --script srchttps://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js integritysha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd crossoriginanonymous/scriptscript srcjs/vue.js/script
/head
bodydiv idapp-19header-button/header-buttonhr /header-button/header-button/divscript srcjs/my-components.js/scriptscript typetext/javascriptvar vm new Vue({el: #app-19})/script
/body
/html10.3 组件通信 vue 实例本身就是一个组件模板就是 el 指定容器data 就是组件数据methods 就是组件的事件函数 在 vue 实例指定的 el 容器中引用的组件称为子组件当前 vue 实例就是父组件 注子组件按钮模板不能触发父组件的方法子组件的按钮可以触发子组件的方法。
10.3.1 父传子 vue 实例引用组件的时候传递数据到引用的组件中 通过组件的属性实现父组件传递数据到子组件
示意图
10.3.2 子传父 – 使用 props 属性动态传递参数 通过子组件的按钮“调用”父组件的函数通过函数传值 流程示意图
父组件
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet hrefcss/my-components.css /script srcjs/vue.js/script
/head
bodydiv idapp-21!-- 组件的引用必须在 vue 实例指定的容器中 --header-bar :namemessage my-eventparentMethod/header-bar子组件传到父组件的标题名称: {{title}}hr /header-bar name关羽/header-bar/divscript srcjs/my-components-bar2.js/scriptscript typetext/javascriptvar vm new Vue({el: #app-21,data: {message: 貂蝉,title: },methods: {parentMethod: function (res) {vm.title res;}}})/script
/body
/html子组件
Vue.component(header-bar, {data: function() {return {title: 三国 -- √}},template: div classdivStyletable classtableStyletrtd width200 alignright valignmiddleimg srcimg/1.jpg classlogoImg //tdtdlabel classnameStyle登录人 {{name}}/label/tdtdbutton clickchildMethod组件按钮点击次数/button/td/tr/table/div,props: [name],methods: {childMethod: function () {this.$emit(my-event, this.title);}}
});10.3.3 总结
父组件通信子组件 props: 子组件通过props获取定义父组件传递的自定义属性 this.$refs 引用子组件 this.$children 父组件childrens属性存储着所有的子组件
子组件通信父组件或根组件 this.$emit 子组件通过$emit访问父组件传递的自定义事件 this.$parent 访问父组件 this.$root: 访问根组件。根组件root就是new Vue({el: #app}); 中的el元素
10.4 组件插槽 当我们自定义 vue 组件时允许组件中的部分内容在调用组件时进行定义 —— 插槽 10.4.1 插槽的使用
在自定义组件时通过 slot 标签在组件的模板中定义插槽
my-components-bar-slot.js
Vue.component(header-bar, {data: function() {return {title: 三国 -- √}},template: div classdivStyletable classtableStyletrtd width200 alignright valignmiddleimg srcimg/1.jpg classlogoImg //tdtdlabel classnameStyle登录人 {{name}}/label/tdtdslot/slot/tdtdbutton clickchildMethod组件按钮点击次数/button/td/tr/table/div,props: [name],methods: {childMethod: function () {this.$emit(my-event, this.title);}}
});在父组件中调用此组件时指定插槽填充的模板
示例1插槽填充 搜索框
header-bar :namemessageinput / button搜索/button
/header-bar示例2插槽填充 按钮
header-bar :namemessage my-eventparentMethoddiva href#首页/aa href#后台/aa href#管理/aa href#关于/a/div
/header-bar10.4.2 具名插槽 当组件中的插槽数量 1 时需要给组件中的 slot 标签添加 name 属性指定插槽的名字 定义组件
Vue.component(page-frame, {template: divdiv idheader stylewidth: 100%; height: 100px; background: pink{{title}}br /slot1 : br /slot nameslot1/slot/divdiv stylewidth: 100%; height: 580pxslot2 : br /slot nameslot2/slot/divdiv idfooter stylewidth: 100%; height: 40px; background: lightblue{{cr}}/div/div,props: [title, cr]
});引用组件
div idapp-22!-- 组件的引用必须在 vue 实例指定的容器中 --page-frame title标题 cr地址template slotslot1input / button搜索/button/templatetemplate slotslot2diva href#首页/aa href#后台/aa href#管理/aa href#关于/a/div/template/page-frame
/div10.4.3 插槽作用域
定义组件时将组件中的数据绑定到 slot 标签
my-components-bar-slot.js
Vue.component(page-frame-scope, {template: divdiv idheader stylewidth: 100%; height: 100px; background: pink{{title}}br /slot1 : br /slot nameslot1/slot/divdiv stylewidth: 100%; height: 580pxslot2 : br /slot nameslot2 v-bind:sitessites/slot/divdiv idfooter stylewidth: 100%; height: 40px; background: lightblue{{cr}}/div/div,props: [title, cr],data: function () {return {sites: [{name: 菜鸟教程,url: www.runoob.com},{name: google,url: www.google.com},{name: 微博,url: www.weibo.com}]}}
});引用组件时在填充插槽的模板上使用 slot-scopt 属性获取插槽绑定的值
page-frame-scope title标题 cr地址template slotslot1input / button搜索/button/templatetemplate slotslot2 slot-scoperestable classtable table-borderedtrth名称/thth网站/th/trtr v-forsite in res.sitestd{{site.name}}/tdtd{{site.url}}/td/tr/table/template
/page-frame-scope十一、axios 异步通信
11.1 axios 介绍 vue 可以实现数据的渲染但是如何获取数据呢 vue 本身不具备通信能力通常结合 axios —— 一个专注于异步通信的 js 框架来使用Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。 axios 数据通信vue 数据渲染 什么是 axios ?
Axios 是一个基于 promise 的 HTTP 库可以用在浏览器和 node.js 中。
菜鸟教程 axios 说明文档https://www.runoob.com/vue2/vuejs-ajax-axios.html中文文档http://www.axios-js.com/
11.2 axios 入门使用
axios —— 实现步骤复杂JQuery 笨重axios 简洁、高效对 RESTful 支持良好
11.3 axios 异步请求方法 axios 提供了多种异步请求方法实现对 RESTful 风格的支持 11.3.1 GET 格式的请求 axios.get(url).then(function); 使用 response.data 读取 JSON 数据 axios.get(json/json_demo.json).then(response (this.info response.data.sites)).catch(function (error) {console.log(error)
})axios.get(url,{}).then(function); GET 方法传递参数格式 使用 axios 的 get 请求传递参数需要将参数设置在 params 下 // 直接在 URL 上添加参数 ID12345
axios.get(/user?ID12345).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});// 也可以通过 params 设置参数
axios.get(/user, {params: {ID: 12345}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});11.3.2 POST 格式的请求 axios.post(url, {}).then(function); axios.post(https://localhost:9098/blog/upload, {name: 张三,age: 20}).then(response (this.info2 response)).catch(function (error) {console.log(error)
})11.3.3 自定义请求 自定义请求自定义请求方式、请求参数、请求头、请求体post axios({url: https://localhost:9098/blog/upload,method: post,params: {// 设置请求行传值name: 张三,limit: 15},headers: {// 设置请求头},data: {// 设置请求体 post / put}
}).then(function (res) {console.log(res)
});11.3.4 请求方法别名
axios.request(config)axios.get(url[, config])axios.delete(url[, config])axios.head(url[, config])axios.post(url[, data[, config]])axios.put(url[, data[, config]])axios.patch(url[, data[, config]])
当使用别名方法时不需要在config中指定urlmethod和data属性。
11.4 并发请求 axios.all()、axios.spread() 两个辅助函数用于处理同时发送多个请求可以实现在多个请求都完成后再执行一些逻辑。 处理并发请求的助手函数 axios.all(iterable)axios.spread(callback) div idapp-25button typebutton clicktest测试/button
/divscript typetext/javascriptvar vm new Vue({el: #app-25,data: {},methods: {test: function () {// 发送异步请求axios.all([f1(), f2()]).then(axios.spread(function (res1, res2) {// 两个请求都要执行完毕console.log(所有请求都完成)console.log(res1);console.log(res2);}));}}});function f1() {console.log(调用第一个接口)return axios.get(json/json_demo.json);}function f2() {console.log(调用第二个接口)return axios.get(json/json_demo2.json);}
/script注两个请求执行完成后才执行 axios.spread() 中的函数且 axios.spread() 回调函数的的返回值中的请求结果的顺序和请求的顺序一致 F12 查看控制台输出情况 11.5 箭头函数
11.5.1 axios 回调函数的参数 res res 并不是接口返回的数据而是表示一个响应数据res.data 才表示接口响应的数据 11.5.2 箭头函数
script typetext/javascriptvar vm new Vue({el: #app-24,data: {songs: },methods: {test4: function () {// 发送异步请求axios.get(json/json_demo2.json).then((res) {// res 并不是接口返回的数据而是表示一个响应数据res.data 才表示接口响应的数据this.songs res.data;console.log(res.data)})}}})
/script十二、 路由 router router 是由 vue 官方提供的用于实现组件跳转的插件。 Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成让构建单页面应用变得易如反掌。 12.1 路由插件的引用
12.1.1 离线
12.1.2 在线 CDN
script srchttps://unpkg.com/vue/dist/vue.js/script
script srchttps://unpkg.com/vue-router/dist/vue-router.js/script当你要把 Vue Router 添加进来我们需要做的是将组件 (components) 映射到路由 (routes)然后告诉 Vue Router 在哪里渲染它们。 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle typetext/cssbody {padding: 0px;margin: 0px;}ul {list-style: none;}ul li {display: inline;float: left;margin-left: 15px;}/stylescript srchttps://unpkg.com/vue/dist/vue.js/scriptscript srchttps://unpkg.com/vue-router/dist/vue-router.js/script
/head
bodydiv idapp-26div stylewidth: 100%; height: 70px; background: #00BFFF;tabletrtdimg srcimg/1.jpg height70 stylemargin-left: 100px; //tdtdullirouter-link to/index首页/router-link/lilirouter-link to/javaJava/router-link/lilirouter-link to/pythonPython/router-link/lilirouter-link to/vueVue/router-link/li/ul/td/tr/table/divdiv stylewidth: 100%; height: 680px; background: salmon;router-view/router-view/div/divscript typetext/javascript!-- vue 的路由旨在为单页面应用开发提供便携 --// 定义链接跳转的模板组件const t1 {template: p aligncenterindex/p};const t2 {template: p aligncenter Java/p};const t3 {template: p aligncenterPython/p};const t4 {template: p aligncenterVue/p};const my_router new VueRouter({routes: [{path: /index,component: t1},{path: /java,component: t2},{path: /python,component: t3},{path: /vue,component: t4}]});var vm new Vue({el: #app-26,router: my_router});/script/body
/html点击链接根据路由跳转并显示对应的组件模板 12.2 动态路由匹配
12.2.1 通配符 * 可以匹配任意路径 例如
/user-* 匹配所有以 user-开头的任意路径/* 匹配所有路径
const my_router new VueRouter({routes: [{path: /user-*,component: t4},{path: /*,component: t5}]
});注意如果使用通配符定义路径需要注意路由声明的顺序
12.2.2 路由参数
/index/:id 可以匹配/index/开头的路径
div idapp-27router-link to/index/101首页/router-linkrouter-view/router-view
/divscript typetext/javascript!-- vue 的路由旨在为单页面应用开发提供便携 --// 1. 定义链接跳转的模板组件const t1 {template: p aligncenterindex {{$route.params.id}}/p};// 2. 定义路由const my_router new VueRouter({routes: [{path: /index/:id,component: t1}]});// 3. 引用路由var vm new Vue({el: #app-27,router: my_router});
/script12.2.3 优先级
如果一个路径匹配了多个路由则按照路由的配置顺序路由定义的越早优先级就越高。
12.3 嵌套路由 在一级路由的组件中显示二级路由 div idapp-28div stylewidth: 100%; height: 20px; background: #00BFFF;router-link to/index首页/router-linkrouter-link to/index/t2首页-t2/router-linkrouter-link to/index/t3首页-t3/router-linkrouter-view/router-view/div
/divscript typetext/javascript!-- vue 的路由旨在为单页面应用开发提供便携 --// 1. 定义链接跳转的模板组件const t1 {template: div stylewidth: 400px; height: 200px; border: blue 1px solid indexhr /router-view/router-view/div};const t2 {template: divt2/div};const t3 {template: divt3/div};// 2. 定义路由const my_router new VueRouter({routes: [{path: /index,component: t1,children: [{path: t2,component: t2},{path: t3,component: t3}]},]});// 3. 引用路由var vm new Vue({el: #app-28,router: my_router});
/script12.4 编程式导航
12.4.1 push()
div idapp-29div stylewidth: 100%; height: 20px; background: #00BFFF;!-- router-link to/index首页/router-link --button typebutton clicktest首页按钮/buttonrouter-view/router-view/div
/divscript typetext/javascript!-- vue 的路由旨在为单页面应用开发提供便携 --// 1. 定义链接跳转的模板组件const t1 {template: div stylewidth: 400px; height: 200px; border: blue 1px solid index/div};// 2. 定义路由const my_router new VueRouter({routes: [{path: /index,component: t1}]});// 3. 引用路由var vm new Vue({el: #app-29,router: my_router,methods: {test: function () {// js 代码实现路由跳转编程式导航my_router.push(/index);}}});
/script12.4.2 push() 参数
// 1. 字符串
my_router.push(/index);// 2. 对象
my_router.push({path: /index});// 3. 命名的路由 name 参数指的是定义路由时指定的名字
my_router.push({name: r1, params: {id: 101}});// 4. URL 传值相当于 /index?id101
my_router.push({path: /index, query: {id: 101}});12.4.3 replace() 功能与 push() 一致区别在于 replace() 不会向 history 添加新的浏览记录 12.4.4 go() 参数为一个整数表示在浏览器历史记录中前进或后退多少步 相当于 windows.history.go(-1) 的作用 12.5 命名路由 命名路由在定义路由的时候可以给路由指定 name我们在进行路由导航时可以通过路由的名字导航 div idapp-30div stylewidth: 100%; height: 20px; background: #00BFFF;input typetext v-modelrName /router-link :to{name: rName}t1/router-linkbutton typebutton clicktest首页按钮2/buttonrouter-view/router-view/div
/divscript typetext/javascript!-- vue 的路由旨在为单页面应用开发提供便携 --// 1. 定义链接跳转的模板组件const t1 {template: div stylewidth: 400px; height: 200px; border: blue 1px solid t1/div};const t2 {template: div stylewidth: 400px; height: 200px; border: blue 1px solid t2/div};// 2. 定义路由const my_router new VueRouter({routes: [{path: /index,name: r1,component: t1},{path: /index2,name: r2,component: t2}]});// 3. 引用路由var vm new Vue({el: #app-30,data: {rName: r1},router: my_router,methods: {test: function () {// js 代码实现路由跳转编程式导航my_router.push({name: vm.rName});}}});
/script12.6 命名视图
div idapp-31div stylewidth: 100%; height: 20px; background: #00BFFF;router-link to/indext1/router-linkrouter-link to/index2t2/router-link!-- 路由视图 --!-- 如果在 HTML 中有一个以上的路由视图 router-view需要给 router-view 指定 name
在路由中需要使用 components 映射多个组件根据 name 设置组件与 router-view 的绑定关系 --router-view namev1/router-viewrouter-view namev2/router-view/div
/divscript typetext/javascript!-- vue 的路由旨在为单页面应用开发提供便携 --// 1. 定义链接跳转的模板组件const t11 {template: div stylewidth: 400px; height: 200px; border: blue 1px solid t11/div};const t12 {template: div stylewidth: 400px; height: 200px; border: red 1px solid t12/div};const t21 {template: div stylewidth: 400px; height: 200px; border: yellow 1px solid t21/div};const t22 {template: div stylewidth: 400px; height: 200px; border: wheat 1px solid t22/div};// 2. 定义路由const my_router new VueRouter({routes: [{path: /index,components: {v1: t11,v2: t12}},{path: /index2,components: {v1: t21,v2: t22}}]});// 3. 引用路由var vm new Vue({el: #app-31,data: {rName: r1},router: my_router,methods: {test: function () {// js 代码实现路由跳转编程式导航my_router.push({name: vm.rName});}}});
/script
12.7 重定向
12.7.1 重定向
访问 /index, 重定向到 /login
div idapp-32router-link to/login登录/router-linkrouter-link to/index首页/router-linkrouter-view/router-view
/divscript typetext/javascript!-- vue 的路由旨在为单页面应用开发提供便携 --// 1. 定义链接跳转的模板组件const t1 {template: div stylewidth: 400px; height: 200px; border: blue 1px solid 登录/div};// 2. 定义路由const my_router new VueRouter({routes: [{path: /login,component: t1},{path: /index,redirect: /login}]});// 3. 引用路由var vm new Vue({el: #app-32,router: my_router});
/script根据路由命名重定向
// 2. 定义路由
const my_router new VueRouter({routes: [{path: /login,name: r1,component: t1},{path: /index,// 根据路由路径重定向// redirect: /login// 根据路由命名重定向redirect: {name: r1}}]
});12.7.2 路由别名
div idapp-32router-link to/login登录/router-linkbr /router-link to/alias-login(别名)-登录/router-link br /router-view/router-view
/divscript typetext/javascriptconst t1 {template: div stylewidth: 400px; height: 200px; border: blue 1px solid 登录/div};// 2. 定义路由const my_router new VueRouter({routes: [{path: /login,alias: /alias-login,component: t1}]});// 3. 引用路由var vm new Vue({el: #app-32,router: my_router});
/script12.8 路由组件传参
可以通过 /url/:attr 方式实现通过路由传值给组件
div idapp-33router-link to/login/101登录/router-linkbr /router-view/router-view
/divscript typetext/javascriptconst t1 {template: div stylewidth: 400px; height: 200px; border: blue 1px solid 登录:{{$route.params.id}}/div};// 2. 定义路由const my_router new VueRouter({routes: [{path: /login/:id,component: t1}]});// 3. 引用路由var vm new Vue({el: #app-33,router: my_router});
/script通过 props 传参 div idapp-33router-link to/index/102首页t2/router-linkbr /router-view/router-view
/divscript typetext/javascriptconst t2 {props:[id],template: div stylewidth: 400px; height: 200px; border: blue 1px solid 首页t2:{{id}}/div};const my_router new VueRouter({routes: [{path: /index/:id,component: t2,props: true}]});// 3. 引用路由var vm new Vue({el: #app-33,router: my_router});
/script
