Vue
一、Vue入门
官网：https://cn.vuejs.org/
1.1、Vue简介
1.1.1.什么是Vue？
- 简单的说，Vue 就是一个用于搭建表单项繁多且内容需要根据用户的操作进行修改的网页应用的框架
- Vue.js渐进式JavaScript框架，渐进式：由浅入深，由简单到困难
1.1.2.它有什么优点？
- 体积小
- 运行效率高
- 双向数据绑定
- 生态丰富，学习成本低
1.2、Vue的使用
-
在 html 中，使用 script 标签引入 vue.js 文件：
-
<script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>
-
-
在 html 标签内添加一个 dom 元素作为 Vue 实例的挂载目标：
-
<body><div id="app" class="app"> </div> <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script> </body>
-
-
创建 Vue 对象的实例：
-
<script> var vm = new Vue({ el:"#app",//可以是 css 选择器.例如: #app 或.app //model：数据 data:{ msg:"hello Vue！" } }); </script>
-
二、Vue 插值及表达式绑定数据
2.1、插值
<body>
<!-- view层 模板 -->
<div id="app">
{{msg}}
</div>
<script>
var vm = new Vue({
el:"#app",//可以是 css 选择器.例如: #app 或.app
//model：数据
data:{
msg:"hello Vue！",
count:0
}
});
</script>
</body>
2.2、表达式
-
简述：Vue的数据支持JavaScrpit绑定
-
<body> <!-- view层 模板 --> <div id="app"> <!-- 绑定三元表达式 --> {{count > 0 ? 'yes' : 'no'}} <!-- 绑定一个计算 --> {{count+1}} <!-- 绑定函数 --> {{msg.toUpperCase()}} </div> <script> var vm = new Vue({ el:"#app",//可以是 css 选择器.例如: #app 或.app //model：数据 data:{ msg:"hello Vue！", count:0 } }); </script> </body>
三、Vue常用指令
3.1、v-text/html
效果：等价于{{}}，替换文本内容，v-html可解析html语法
3.2、v-show
效果：v-show 指令实现指定内容的显示与否。
指令后的内容解析为布尔值
3.3、v-bind
v-bind：为元素绑定属性
写法：1）v-bind：属性名
2）简写 : 属性
效果：鼠标悬停几秒查看动态绑定的信息
<body>
<div id="app">
<p v-bind:title="msg">鼠标悬停几秒查看动态绑定的信息</p>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
msg:"这是v-bind"
}
});
</script>
</body>
3.4、v-if/v-else-if/v-else 指令
v-if 指令的作用：根据表达式的真假切换元素的显示状态
3.5、v-for指令
v-for 指令的作用是：根据数据生成列表结构
数组经常和 v-for 结合使用
语法：（item,index）in 数据
<body>
<div id="app">
<!-- item in items 倒着读，循环items里的item -->
<!-- {{item.msg}} 循环的内容 -->
<li v-for="(item,index) in items">
{{item.msg}}--{{index}}
</li>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
items:[
{msg: '苏'},
{msg: '苏1'}
]
}
});
</script>
</body>
3.6、v-cloak防止闪烁
**作用：**v-cloak能够解决插值表达式的闪烁问题
用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用v-cloak能够解决插值表达式闪烁的问题 -->
<div v-cloak>{{ msg }}</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
msg:"你好 v-cloak"
}
})
</script>
</body>
</html>
3.7、v-for 根据数据生成列表结构
3.8、v-model
作用：获取和设置表单元素的值（双向绑定数据）
四、绑定事件
4.4、v-on方法绑定
- 作用
- 为元素绑定事件
- 时间名不需要写on
- 指令可以简写为@
- 绑定的方法定义在methods属性中
传参
- 事件绑定的方法写成函数调用的形式，可以传入自定义参数
- 定义方法时需要定义形参来接受传入的实参
- 时间后面跟上
.修饰符可以对事件进行限制.enter可以出限制触发的按键为回车- 如果 v-on 绑定的 js 函数
没有参数，调用的时候可以省略 （），同时可以给 js 函数一个 event 参数- event：获取事件对象
<body>
<div id="app">
<!-- 绑定点击事件v-on:click -->
<button v-on:click="sayHi">click me</button>
<button @click="sayHi">click me</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
msg:"苏"
},
methods:{
//方法必须定义在vue的Methods中,v-on绑定事件
sayHi:function(){
alert(this.msg);
}
}
});
</script>
</body>
4.4.1 使用 js 函数传值
------------html-------------
<button type="button" class="btn btn-danger" @click="doDelete(a.stuNum,a.stuName)">删除</button>
------------js-----------------
doDelete: function(stuname,,stunum){
console.log("----delete:"+stuname+stunum);
}
4.4.2 使用 dataset 对象传值
------------html-------------
<button type="button" class="btn btn-success" @click="doUpdate" :data-stunum="a.stuNum" :data-stunanme="a.stuName">编辑</button>
------------js-----------------
doUpdate:function(event){
var c = event.srcElement.dataset;
/* 取值只能取 */
console.log(c.stunanme);
}
4.4.3 混合使用
如果想用这两个传值方式 html的 event 前需加 $ 符号
$event
------------------html------------------
<button type="button" class="btn btn-success" @click="doUpdate(a.stuNum,a.stuName,$event)" >编辑</button>
------------------js---------------------
doUpdate:function(stunum,stuname,event){
var c = event.srcElement.dataset;
/* 取值只能取 */
console.log(c.stunanme);
}
4.5、v-model数据双向绑定
作用：
- 便捷的设置和获取表单元素的值
- 绑定的数据会和表单元素值相关联
- 绑定的数据< >表单元素的值
4.5.1.什么是双向绑定？
- Vue.js是一个MVVM框架，即数据双向绑定，当数据发生变化的时候，试图也发生变化；当视图发生变化时，数据也会跟着同步变化。
4.5.2为什么要实现数据的双向绑定？
- 在全局性数据使用单项绑定，方便跟踪；局部性数据流使用双向，简单易操作。
4.5.3在表单中使用双向数据绑定的好处
- 可以负责监听用户输入事件以更新数据，并对一些极端场景进行一些特殊处理。
4.5.4怎么使用？
-
在表单
<input>及<textarea>元素上创建双向数据绑定-
<body> <div id="app"> input输入的文本：<input type="text" v-model="msg"/>{{msg}} <br /> <br /> textarea输入的文本：<textarea rows="" cols="" v-model="msg01"></textarea>{{msg01}} </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ msg:"123", msg01:"2580" } }); </script> </body> -
结果：
-
-
单选框radio&下拉框select
-
<body> <div id="app"> 性别： <input type="radio" name="sex" id="" value="男" v-model="msg" />男 <input type="radio" name="sex" id="" value="女" v-model="msg"/>女 <br/>选中了谁：{{msg}} <select v-model="selected"> <option value="" disabled>-请选择-</option> <option>A</option> <option>B</option> <option>C</option> </select> <p>{{selected}}</p> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ msg:'', selected:'' } }); </script> </body>
-
小黑记事本
- 新增
- 生成列表结构
v-for - 获取用户输入
v-model - 回车，新增数据
v-on .enter 添加数据
- 生成列表结构
- 删除
- 点击删除指定内容
v-on splice 索引通过下标删除指定元素
- 点击删除指定内容
- 统计
- 统计信息个数
v-text length
- 统计信息个数
- 清空
- 点击清除所有信息
v-on 清空数组
- 点击清除所有信息
- 隐藏
- 没有数据时，隐藏元素
v-show v-if 数组非空
- 没有数据时，隐藏元素
4.6、事件修饰符
当使用 v-on 进行事件绑定的时候，可以添加特定后缀，设置事件触发的特性
4.6.1 事件修饰符使用示例
<button type="submit" @click.prevent="test">测试</button>
4.6.2 常用事件修饰符
- .prevent：消除元素的默认事件，不重载页面
- .stop：阻止事件冒泡（阻止子标签向上冒泡）
- .self：设置只能自己触发事件（子标签不能触发）
- .once：限定事件只触发一次
-------------html----------------
<div id="app">
<!-- .prevent -->
<form action="https://www.baidu.com" method="">
<button type="submit" class="btn btn-success " @click.prevent="test">测试</button>
</form><br />
<!-- .stop 和 .self -->
<div style="width: 200px;height: 200px;background-color: red;" @click.self="method1">
<div style="width: 100px;height: 100px;background-color: green;" @click="method2">
<button type="button" @click.prevent="method3">测试</button>
</div>
</div>
</div>
-------------js----------------
<script>
var app = new Vue({
el: "#app",
data: {
},
methods: { //方法
test: function() {
console.log("---test---");
},
method1: function() {
alert("1");
},
method2: function() {
alert("2");
},
method3: function() {
alert("3");
},
}
})
</script>
4.7、按键修饰符
按键修饰符针对键盘事件的修饰符，限定哪个按键会触发事件
4.7.1 案件修饰符常用示例
<input type="text" @keyup.enter="method4" />
- .enter.
- .tab
- .delete （捕获”删除“ 和 ”退格键“）
- .esc
- .space
- .up
- .down
- .left
- .right
除以上 vue 体哦概念股别名外，还可以根据键盘为按键自定义别名
4.7.2 系统修饰符
可以使用修饰符来是实现尽在按下相应键时才触发鼠标或键盘事件的监听器
- .ctrl
- .alt
- .shift
- .meta
五、表单输入绑定
表单输入绑定，即双向绑定，就是能够将 vue 实例的 data 数据渲染到表单输入视图，也能将输入视图的数据同步更新到 vue 的 data 中
<div id="app">
<!-- v-bind 单项渲染 -->
<input type="text" :value="str" /><br />
<!-- v-model 文本框、密码框 双向绑定 -->
文本框：<input type="text" v-model="str" /><br />
密码框：<input type="password" v-model="pwd" /><br />
<!-- 单选按钮 -->
<input type="radio" v-model="opt1" value="A" />A
<input type="radio" v-model="opt1" value="B" />B
<input type="radio" v-model="opt1" value="C" />C
<input type="radio" v-model="opt1" value="D" />D <br />
<!-- 复选框 绑定的是数组 -->
<input type="checkbox" v-model="opt2" value="篮球" />篮球 <br />
<input type="checkbox" v-model="opt2" value="足球" />足球 <br />
<input type="checkbox" v-model="opt2" value="排球" />排球 <br />
<input type="checkbox" v-model="opt2" value="羽毛球" />羽毛球 <br /><br />
<!-- 下拉菜单 select，绑定的是字符串-->
<select v-model="city">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="GZ">广州</option>
<option value="SZ">深圳</option>
</select>
<!-- 如果有 multiple 表示可多选，需要绑定一个数组-->
<select v-model="cities" multiple>
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="GZ">广州</option>
<option value="SZ">深圳</option>
</select>
<button type="button" @click="doSearch">点击</button><br />
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
str: "",
pwd: "666",
opt1:"A",
opt2:["羽毛球"],
city:"SZ",
cities:[]
},
methods: {
doSearch: function() {
//console.log(app.opt1);
//window.location.href = "https://www.baidu.com/s?kw=" + app.str;
//alert(app.opt2);
alert(app.cities);
}
}
})
</script>
Vue 使用案例
接口说明
六、Vue组件化
组件，就是将通用的 HTML 模块进行封装——
可复用
6.1 什么是组件？
-
组件是可复用的Vue实例，说白了就是一组可以重复使用的模板。跟JSTL的自定义标签、Thymeleaf的
th:fragment等框架有着异曲同工之妙。通常一个应用会以一颗嵌套的组件树的形式来组织 -
组件也是一个 vue 实例，因此在定义时也会接收：data，methods，生命周期函数等
-
data 必须是一个函数，不再是一个对象
-
组件不是跟页面元素绑定，因此没有 el 属性
-
使用：hbuilder，谷粒商城-vue
6.2 组件注册
6.2.1 组件注册
将通用的 HTML模块封装注册到 Vue 中
Vue.component("hearder-bar", {
template: `<table style="width: 100%;background-color: lightgoldenrodyellow;">
<tr>
<td><img src="image/black.png"></td>
<td>测试-------------------</td>
<td></td>
</tr>
</table>`
});
6.2.3 组件引用
- 组件需要依赖 vue.js 在引用自定义组件的 js 文件之前先引用 vue.js
- 组建的应用必须在 vue 实例 el 指定的容器中
---------------html---------------
<div id="app" >
<hearder-bar></hearder-bar>
</div>
---------------js------------------
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/my-components.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
});
</script>
6.2.4 自定义组件的结构
-
data定义组件的模板渲染的数据，组件中的 data 是通过函数返回的对象 -
template组件的 HTML 模块 （HTML 标签\CSS 样式） -
methods定义组件中的标签事件绑定的 JS 函数Vue.component("hearder-bar", { data:function(){ //组件中的 data 是通过函数返回的对象 return { title:"我真谢谢你", count:0 }; }, template: `<table style="width: 100%;background-color: lightgoldenrodyellow;"> <tr> <td><img src="image/black.png"></td> <td>{{title}}</td> <td>点击次数{{count}}</td> <td><button @click="count++">组件中的按钮</button></td> </tr> </table>`, methods: { test: function() { count++; } } });
6.2.5 组件的封装
- 将模板中的 css 样式提取出来，单独定义到 css 中
- 将模板中的图片存方在 img 目录
- 将定义组件的 js 文件和 vue 的文件存放到 js 目录
6.2.6 组件的复用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/my-component.css" />
</head>
<body>
<div id="app">
<hearder-bar></hearder-bar>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/my-components.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
});
</script>
</body>
</html>
6.2.7 组件的通信
- vue 实例本身就是一个组件 （模板就是 el 指定容器，data 就是组件数据，methods 就是组件的事件函数）
- 在 vue 实例指定的el 容器中引用的组件 称为子组件，当前 vue实例就是父组件
-
**父传子：**vue 实例引用组件的时候，传递数据到引用的组件中
示意图 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f0ppFlo6-1654593128827)(E:\study\studySoftWare\Typora\Typora\笔记存放处\Vue.assets\image-20220426174339065.png)] -
**子传父：**通过子组件的按钮”调用“父组件的函数，通过函数传值
6.3 组件插槽
当我们自定义 vue 组件时，允许组件中的部分内容在调用组件时进行定义——插槽
6.3.1 插槽的使用
-
在自定义组件时通过
slot标签在组件的模板中定义插槽template: `<table class="tableStyle"> <tr> <td><img src="image/black.png"></td> <td>{{title}}</td> <td>点击次数{{count}}</td> <td> <slot></slot> </td> <td><button @click="test">子组件中的按钮</button></td> </tr> </table>`, -
在父组件中调用此组件时，指定插槽填充的模板
<hearder-bar :title="str" @click="parentMethod"> <!-- 插槽使用：组件标签包含的 HTML 默认为填充到插槽的模板 --> <input type="text" /><button>搜索</button> </hearder-bar>
6.3.2 具名插槽
当组建的中的插槽数量 > 1 时，需要给组件中的 slot 标签添加 name 属性指定插槽的名字
-
定义组件
Vue.component("page-frame", { template: `<div> <div id="header" style="width:100%;height:100px;background:pink"> <slot name="s1"></slot> </div> <div style="height:500px"> <slot name="s2"></slot> </div> <div id="footer" style="width:100%;height:40px;background:gray"></div> </div>` }); -
引用组件
slot="xx"<div id="app"> <page-frame> <!-- 定义一个模板，填充到 name 等于 s1 的插槽 --> <template slot="s1"> <div> <input type="text" /><button>搜索</button> </div> <!-- 定义一个模板，填充到 name 等于 s2 的插槽 --> <template slot="s2"> <ul> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> </ul> </template> </page-frame> </div>
6.3.3 插槽的作用域
-
定于组件时，将组件中的数据绑定到
slot标签Vue.component("page-frame", { template: `<div> <div id="header" style="width:100%;height:100px;background:pink"> <slot name="s1" :stu01="stu1" :stu0class="stuclass"></slot> </div> <div style="height:500px"> <slot name="s2"></slot> </div> <div id="footer" style="width:100%;height:40px;background:gray"></div> </div>`, data: function() { //组件中的 data 是通过函数返回的对象 return { stu1:[{ "sname":"张三", "sage":20, "ssex":"男" }], stuclass: [{ "stcame":"羊村一班", "stcteacher":"老师1", "slogan":"一般最强" }] }; } }); -
引用组件时，在填充插槽的模板上使用
slot-scope属性获取插槽上绑定的值<!-- 在使用模板填充组件插槽时，可以使用 slot-scope 属性获取组件插槽绑定的数据的集合 --> <template slot="s1" slot-scope="res"> <div> {{res.stu0class}} </div> <br /> <div v-for="a,index in res.stu0class"> <div>{{index+1}}</div> <div>{{a.stcame}}</div> <div>{{a.stcteacher}}</div> <div>{{a.slogan}}</div> </div> </template>
七、Vue 实例
每个使用 vue 进行数据渲染的网页文档都要创建一个 vue 实例
7.1、vue 实例的生命周期
- vue 实例生命周期——vue 实例从创建到销毁的过程
- 总共分为三个阶段：
初始化、运行中、销毁
-
创建 vue 实例（初始化 data，加载 el）
-
数据挂载啊（将 vue 实例 data 中的数据渲染到网页的 html 标签中）
-
重新渲染（当 vue 的 data 数据发生变化，会重新渲染到html 标签）
-
销毁实例
7.2、钩子函数
为了便于开发者在 vue 实例生命周期的不同阶段进行特定的操作，vue 在生命周期四个阶段的前后分别提供了一个函数，这个函数无需开发者调用，当vue 实例
- beforeCreate
- 对象被创建，开始初始化但尚未完成时
- Vue实例内对象是undefined不可访问
- 巧用：这加个
开始 loading,设置加载时的提示信息等
- created
- beforeMount
- mounted
- beforeUpdate
- updated
7.3、使用脚手架进行模块化开发
win+R 输入👇
- 全局安装 webpack：
npm install webpack -g - 全局安装 vue 脚手架：
npm install -g @vue/cli-init - 初始化 vue 项目：``
八、Axios通信
| 官方文档 |
|---|
| http://www.axios-js.com/ |
8.1、Axios简介
vue 可以实现数据的渲染，但是如何获取数据呢
vue 本身并不具备通信能力，通常结合 axios——一个专注于异步通信的 js 框架来使用
- axios 数据通信
- vue 数据渲染
8.1.1.什么是Axios？
- Axios是一个开源的可以用在
浏览器端和NodeJs的异步通信框架，它的主要作用就是实现Ajax异步通信 - Axios 是一个
基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求
8.1.2.Axios有什么特点？
1、可以在浏览器中发送 XMLHttpRequests
2、可以在 node.js 发送 http 请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求数据和响应数据
6、能够取消请求
7、自动转换 JSON 数据
8、客户端支持保护安全免受 XSRF 攻击
8.2 Axios使用
axios必须先导入再使用- 使用
get或post方法 即可发送对应请求 then方法中的回调函数会在请求或失败时触发- 通过回调函数的形参可以获取响应信息，或错误内容
8.3 axios 异步请求方法
axios 提供了多种异步请求方法，实现对RESTful 风格的支持
-
get 请求
- axios.get(url).then(fn)
- axios.get(url,{}).then(fn)
注意：使用 axios 的gent 请求传递参数，需要将参数设置在 params 下
-
post 请求
- axios.post(url,{}).then(fn)
-
自定义请求：⾃定义请求⽅式、请求参数、请求头、请求体（post）
axios({ url:"http://localhost:9999/music/search", method:"post", params:{ //设置请求⾏传值 s:"成都", limit:15 }, headers:{ //设置请求头 }, data:{ //设置请求体（post/put） } }).then(function(res){ console.log(res) });
8.4 axios 并行请求
<div id="container">
<button type="button" @click="test1">测试1</button>
</div> <script type="text/javascript">
var vm = new Vue({
el:"#container",
methods:{
test1:function(){
//发送异步请求
axios.all([listMusics(),getMusicDetail()]).then(axios.spread(function (r1, r2) {
// 两个请求现在都执⾏完成
console.log(r1);
console.log(r2);
}));
}
}
});
function listMusics() {
return axios.get('http://localhost:9999/music/search?s=成都');
}
function getMusicDetail() {
return axios.get('http://localhost:9999/music/detail?id=25640392');
}
</script>
8.5 箭头函数
8.5.1 axios 回调函数的参数 res
res 并不是接口返回的数据，而是表示一个响应对象
8.5.2 箭头函数使用案例
<script type="text/javascript">
var vm = new Vue({
el:"#container",
data:{
song:{
}
},
methods:{
test1:function(){
//发送异步请求
axios.get("http://localhost:9999/music/detail?id=25640392").then( (res)=>{
// res并不是接⼝返回的数据，⽽是表示⼀个响应对象；res.data才表示接⼝响应的数据
⼗三、路由 router
router是由vue官⽅提供的⽤于实现组件跳转的插件
13.1 路由插件的引⽤
13.3.1 离线
13.3.2 在线CDN
13.2 路由使⽤案例
if(res.data.code == 200){
this.song = res.data.songs[0];
}
});
}
}
});
</script>
8.6 axios、jquery、ajax 区别
- 原生 ajax——实现步骤复杂
- jQuery——笨重
- axios——简洁、高效、对 RESTful 支持良好
8.7 axios+vue 案例
axios结合vue开发网络应用：获取笑话
- axios 回调函数中的
this已经无法改变，无法访问到data中的数据 - 可把
this保存起来，回调函数直接使用保存的 this 即可
天知道：天气查询
应用的逻辑代码建议和页面分离，使用单独的 js 文件编写
axios 回调函数中 this 指向改变了，需要额外的保存一份
-
回车查询
- 按下回车
v-on .enter - 查询数据
axios 接口 v-model - 渲染数据
v-for 数组 that
- 按下回车
-
点击查询
- 自定义参数可以让代码的复用率更高
- methods 中定义的方法内部，可以通过this关键字点出其他的方法
音乐播放器
功能
-
歌曲搜索
- 按下回车
v-on .enter - 查询数据
axios 接口 v-model - 渲染数据
v-for 数组 that
- 按下回车
-
歌曲播放
- 点击播放
v-on - 歌曲地址获取
接口 歌曲id - 歌曲地址设置
v-bind
- 点击播放
-
歌曲封面
- 点击播放
增加逻辑 - 歌曲封面获取
接口 歌曲id - 歌曲封面设置
v-bind
- 点击播放
-
歌曲评论
-
播放动画
- 监听音乐播放
v-on play - 监听音乐暂停
v-on pause - 操纵类名
v-bind 对象
- 监听音乐播放
-
mv 播放
-
mv 图标显示
v-if -
mv 地址获取
接口 mvid -
遮罩层
v-show v-on -
mv 地址设置
v-bind
-
九、路由 router
router 是由 vue 官方提供的用于实现组件跳转的插件
9.1 路由插件的引用
<script src="https://unpkg.com/vue-router@4"></script>
9.2 路由使用案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{padding: 0px;margin: 0px;}
ul{list-style: none;}
ul li{display: inline; float: left; margin-left: 15px; margin-bottom: 15px;}
ul li a{text-decoration: none; color: white; font-size: 18px; font-weight: bold;}
ul li a:hover{color: yellow;}
</style>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js"></script>
</head>
<body>
<div id="container">
<div style="width: 100%; height: 70px; background: #00BFFF;">
<table>
13.3 动态路由匹配
13.3.1 通配符
* 可以匹配任意路径
例如：
<tr>
<td><img src="img/logo.png" height="70" style="margin-left:100px;"/></td>
<td>
<ul>
<li><router-link to="/a">⾸⻚</router-link></li>
<li><router-link to="/b">Java</router-link></li>
<li><router-link to="/c">HTML5</router-link></li>
<li><router-link to="/d">Python</router-link></li>
</ul>
</td>
</tr>
</table>
</div>
<div style="width: 100%; height: 680px; background: lemonchiffon;">
<router-view></router-view>
</div>
</div>
<script type="text/javascript">
// vue的路由旨在为单⻚⾯应⽤开发提供便捷
//1.定义链接跳转的模板（组件）
const t1 = {template:`<p>index</p>`};
const t2 = {template:`<p>Java</p>`};
const t3 = {template:`<p>HTML5</p>`};
const t4 = {template:`<p>PYTHON</p>`};
const myrouter = new VueRouter({
routes:[
{path:"/a",component:t1},
{path:"/b",component:t2},
{path:"/c",component:t3},
{path:"/d",component:t4}
]
});
var vm = new Vue({
el:"#container",
router:myrouter
});
</script>
</body>
</html>
9.3 动态路由匹配
9.3.1 通配符
*可以匹配任意路径
-
例如：
\user-*匹配所有以 user 开头的{path:"*",component:...} {path:"/user-*,component:..."} -
*匹配所有路径 -
注意：如果使用通配符定义路径，需要注意路由生命的顺序
9.3.2 路由参数
/a/:id可以匹配 /a/ 开头的路径
<div id="container">
<li><router-link to="/a/101">⾸⻚</router-link></li>
<router-view></router-view>
</div>
<script type="text/javascript">
const t1 = {template:`<p>index:{{$route.params.id}}</p>`};
const myrouter = new VueRouter({
routes:[
{path:"/a/:id",component:t1}
]
});
var vm = new Vue({
el:"#container",
router:myrouter
});
</script>
9.3.3 路由的优先级
如果⼀个路径匹配了多个路由，则按照路由的配置顺序：路由定义的越早优先级就越⾼。
9.3.4 嵌套路由
在一级路由的组件中使用二级路由
<div id="container">
<router-link to="/a">⾸⻚</router-link>
<router-link to="/a/c1">⾸⻚-c1</router-link>
<router-link to="/a/c2">⾸⻚-c2</router-link>
<router-view></router-view>
</div> <script type="text/javascript">
13.5 编程式导航
13.5.1 push()
const t1 = {
template:"<div style='width:400px; height:200px; border:blue 1px solid'>index<hr/>
<router-view></router-view></div>"
};
const t2 = {template:`<div>t2</div>`};
const t3 = {template:`<div>t3</div>`};
const myrouter = new VueRouter({
routes:[
{
path:"/a",
component:t1,
children:[
{
path:"c1",
component:t2
},
{
path:"c2",
component:t3
}
]
}
]
});
var vm = new Vue({
el:"#container",
router:myrouter
});
</script>
9.4 编程式导航
9.4.1 .push()
<div id="container">
<button type="button" @click="test">按钮</button>
<router-view></router-view>
</div> <script type="text/javascript">
const t1 = {
template:"<div style='width:400px; height:200px; border:blue 1px solid'>index</div>"
};
const myrouter = new VueRouter({
routes:[
{
path:"/a",
component:t1
}
]
});
var vm = new Vue({
el:"#container",
router:myrouter,
methods:{
test:function(){
//js代码实现路由跳转：编程式导航
myrouter.push("/a");
}
}
});
</script>
9.4.2 push() 参数
//1.字符串
myrouter.push("/a");
//2.对象
myrouter.push({path:"/a"});
//3.命名的路由 name参数指的是定义路由时指定的名字
myrouter.push({name:"r1",params:{id:101}});
//4.URL传值，相当于/a?id=101
myrouter.push({path:"/a",query:{id:101}});
9.4.3 replace()
replace 功能与 push 一致，区别在于 replace() 不会向 history 添加新的浏览记录
9.4.4 go()
参数为一个整数，表示在浏览器历史记录中前进/后退 多少步，相当于
window.history.go(-1)的作用
9.5 命名路由
命名路由：在定义路由的时候可以给路由指定name，我们在进行路由导航时可以通过路由的名字导航
9.5.1 命名视图
如果在HTML中有⼀个以上的路由视图router-view，需要给router-view指定name，在路由中使⽤components映
射多个组件根据name设置组件与router-view绑定关系
<div id="container">
<router-link to="/a">t1</router-link>
<router-link to="/b">t2</router-link>
<!--路由视图-->
<!--如果在HTML中有⼀个以上的路由视图router-view，需要给router-view指定name，在路由中使⽤components映
射多个组件根据name设置组件与router-view绑定关系-->
<router-view name="v1"></router-view>
<router-view name="v2"></router-view>
</div> <script type="text/javascript">
const t11 = {
template:"<div style='width:400px; height:200px; border:blue 1px solid'>t11</div>"
13.8 重定向和别名
13.8.1 重定向
访问 /b ，重定向到 /a
};
const t12 = {
template:"<div style='width:400px; height:200px; background:pink'>t12</div>"
};
const t21 = {
template:"<div style='width:400px; height:200px; border:red 1px solid'>t21</div>"
};
const t22 = {
template:"<div style='width:400px; height:200px; background:yellow'>t22</div>"
};
const myrouter = new VueRouter({
routes:[
{
path:"/a",
components:{
v1:t11,
v2:t12
}
},
{
path:"/b",
components:{
v1:t21,
v2:t22
}
}
]
});
var vm = new Vue({
el:"#container",
router:myrouter
});
</script>
9.6 重定向
9.6.1 重定向
访问/b，重定向到/a
-
<div id="container"> <router-link to="/a">路径A</router-link> <router-link to="/b">路径B</router-link> <router-view></router-view> </div> <script type="text/javascript"> const t1 = { 根据路由命名重定向 13.8.2 路由别名 template:"<div style='width:400px; height:200px; border:blue 1px solid'>index</div>" }; const myrouter = new VueRouter({ routes:[ { path:"/a", component:t1 }, { path:"/b", redirect:"/a" } ] }); var vm = new Vue({ el:"#container", router:myrouter }); </script> -
根据路由命名重定向
const myrouter = new VueRouter({ routes:[ { path:"/a", name:"r1", component:t1 }, { path:"/b", //redirect:"/a" //根据路由路径重定向 redirect:{name:"r1"} //根据路由命名重定向 } ] });
9.6.2 路由别名
<div id="container">
<router-link to="/a">路径A</router-link>
<router-link to="/wahaha">路径wahaha（别名）</router-link>
<router-view></router-view>
</div> <script type="text/javascript">
const t1 = {
template:"<div style='width:400px; height:200px; border:blue 1px solid'>index</div>"
};
const myrouter = new VueRouter({
13.9 路由组件传参
可以通过 /url/:attr ⽅式实现通过路由传值给组件
通过props传参
routes:[
{
path:"/a",
alias:"/wahaha",
component:t1
}
]
});
var vm = new Vue({
el:"#container",
router:myrouter
});
</script>
9.7 路由组件传参
可以通过
/url/:attr方式实现通过路由传值给组件
<div id="container">
<router-link to="/a/101">路径A</router-link> <router-view></router-view>
</div> <script type="text/javascript">
const t1 = {
template:`<div style='width:400px; height:200px; border:blue 1px solid'>
index：{{$route.params.id}}
</div>`
};
const myrouter = new VueRouter({
routes:[
{
path:"/a/:id",
component:t1
}
]
});
var vm = new Vue({
el:"#container",
router:myrouter
});
</script>
通过
props传参
<div id="container">
<router-link to="/a/102">路径A</router-link>
<router-view></router-view>
</div> <script type="text/javascript">
const t1 = {
props:["id"],
template:`<div style='width:400px; height:200px; border:blue 1px solid'>
index：{{id}}
</div>`
};
const myrouter = new VueRouter({
routes:[
{
path:"/a/:id",
props:true,
component:t1
}
]
});
var vm = new Vue({
el:"#container",
router:myrouter
});
</script>
扫一扫
124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
