Python全栈（六）项目前导之10.Vue练习和路由基本使用
Vue练习和路由基本使用一、过滤器的使用1.过滤器概念2.过滤器的定义和使用二、用Vue实现简单的图书管理系统三、Router路由基本使用1.Vue路由基本概念2.基本使用四、动态路由和组件复用1.动态路由2.组件复用
一、过滤器的使用
1.过滤器概念
在一个组件的选项中定义。
创建 Vue 实例之前定义。
作者：cutercorley
过滤器就是数据在真正渲染到页面中的时候，可以使用过滤器进行一些处理，把最终处理的结果渲染到网页中。
可以把过滤器理解成一个方法对变量进行处理。
过滤器包括本地和全局两种，定义方法分别如下：
本地过滤器在一个组件的选项中定义。
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
全局过滤器创建 Vue 实例之前定义。
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
使用也有两种方式：
在文本值即双花括号中{{ message|capitalize }}
在v-bind表达式中（从版本2.1.0中开始支持）
对于两种方式，过滤器都应该被添加在JavaScript表达式的尾部，由管道符号指示。
进行测试：
Vue模板语法
{{user|strstrip}}
Vue.filter('strstrip',function(value){
return value.replace(' ', '')
})
new Vue({
el: '#app',
data:{
user:' Cor ley'
},
methods:{
},
})
显示：
显然，过滤器过滤掉了字符串前面的空格，显然JS中的replace()函数只能替换第一次匹配到的字符串。
再次传入参数测试：
Vue模板语法
{{user|strstrip('-')}}
Vue.filter('strstrip',function(value,str){
return value.replace(' ', str)
})
new Vue({
el: '#app',
data:{
user:' Cor ley'
},
methods:{
},
})
显示：
显然，只是第一个字符串被替换掉了。
代码中样式部分引用了Bootstrap的样式，可以利用其模板更高效地建立美观的样式。
初始开发测试如下：
图书管理系统
图书管理系统
序号
名称
作者
价格
时间
操作
{{index + 1}}
{{book.name}}
{{book.author}}
{{book.price}}
{{book.addtime}}
删除
new Vue({
el: '#app',
data: {
books: [{
name: 'Python',
author: 'AUPY',
price: 50,
addtime: new Date()
},
{
name: 'Java',
author: 'AUJA',
price: 40,
addtime: new Date()
},
]
},
methods: {
},
})
显示：
增加图书添加功能测试：
图书管理系统
图书管理系统
序号
名称
作者
价格
时间
操作
{{index + 1}}
{{book.name}}
{{book.author}}
{{book.price}}
{{book.addtime}}
删除
new Vue({
el: '#app',
data: {
books: [{
name: 'Python',
author: 'AUPY',
price: 50,
addtime: new Date()
},
{
name: 'Java',
author: 'AUJA',
price: 40,
addtime: new Date()
},
],
adding_book:{
name: '',
author: '',
price: 0,
addtime:new Date()
}
},
methods: {
add(){
// JSON.parse()将参数转化为JS可识别的变量，JSON.stringify()将对象转化为字符串
var book = JSON.parse(JSON.stringify(this.adding_book))
this.books.push(book)
// 添加完成后清空输入框
this.adding_book = {
name: '',
author: '',
price: 0,
addtime:new Date()
}
}
},
})
显示：
在add()方法中，JSON.stringify()用于将对象转化为字符串，JSON.parse()用于将字符串等变量转化为JavaScript可识别的变量，从而摆脱因v-model的双向绑定带来的浅拷贝问题，JSON的两个函数相当于做了一次深拷贝。
在添加功能中可能会遇到一个问题：输入信息点击添加按钮不能正常添加，即添加的信息并不显示出来，如下：
点击添加按钮时可以看到左上角的刷新图标在变化，意思是每次点击添加时页面都重新刷新了一遍，这是因为点击触发了表单的默认提交操作，使得页面刷新，添加的数据也就不存在了，所以未显示，要想正常添加，需要阻止表单的自动提交，这只需要给click属性添加 .prevent 修饰符即可，如下：
图书管理系统
图书管理系统
序号
名称
作者
价格
时间
操作
{{index + 1}}
{{book.name}}
{{book.author}}
{{book.price}}
{{book.addtime}}
删除
new Vue({
el: '#app',
data: {
books: [{
name: 'Python',
author: 'AUPY',
price: 50,
addtime: new Date()
},
{
name: 'Java',
author: 'AUJA',
price: 40,
addtime: new Date()
},
],
adding_book:{
name: '',
author: '',
price: 0,
addtime:new Date()
}
},
methods: {
add(){
// JSON.parse()将参数转化为JS可识别的变量，JSON.stringify()将对象转化为字符串
var book = JSON.parse(JSON.stringify(this.adding_book))
this.books.push(book)
// 添加完成后清空输入框
this.adding_book = {
name: '',
author: '',
price: 0,
addtime:new Date()
}
}
},
})
显示：
显然，此时再添加可以正常添加，并且页面也没有再刷新。
增加删除功能进行测试：
图书管理系统
图书管理系统
序号
名称
作者
价格
时间
操作
{{index + 1}}
{{book.name}}
{{book.author}}
{{book.price}}
{{book.addtime}}
new Vue({
el: '#app',
data: {
books: [{
name: 'Python',
author: 'AUPY',
price: 50,
addtime: new Date()
},
{
name: 'Java',
author: 'AUJA',
price: 40,
addtime: new Date()
},
],
adding_book:{
name: '',
author: '',
price: 0,
addtime:new Date()
}
},
methods: {
add(){
// JSON.parse()将参数转化为JS可识别的变量，JSON.stringify()将对象转化为字符串
var book = JSON.parse(JSON.stringify(this.adding_book))
this.books.push(book)
this.adding_book = {
name: '',
author: '',
price: 0,
addtime:new Date()
}
},
del:function(index){
this.books.splice(index, 1)
}
},
})
显示：
增加搜索功能测试：
图书管理系统
图书管理系统
序号
名称
作者
价格
时间
操作
{{index + 1}}
{{book.name}}
{{book.author}}
{{book.price}}
{{book.addtime}}
new Vue({
el: '#app',
data: {
books: [{
name: 'Python',
author: 'AUPY',
price: 50,
addtime: new Date()
},
{
name: 'Java',
author: 'AUJA',
price: 40,
addtime: new Date()
},
],
adding_book:{
name: '',
author: '',
price: 0,
addtime:new Date()
},
keyword:''
},
methods: {
add(){
// JSON.parse()将参数转化为JS可识别的变量，JSON.stringify()将对象转化为字符串
var book = JSON.parse(JSON.stringify(this.adding_book))
this.books.push(book)
this.adding_book = {
name: '',
author: '',
price: 0,
addtime:new Date()
}
},
del:function(index){
this.books.splice(index, 1)
}
},
computed:{
book_result(){
kw = this.keyword
// const that = this
if(this.keyword){
// filter()是数组中的过滤方法，item代表books中的每一条数据
var newbooks = this.books.filter(function(item){
if(item.name.indexOf(kw) >= 0){
// if(item.name.indexOf(that.keyword) >= 0){
// 返回true代表返回当前的item数据
return true
}
else{
// 返回false代表不返回当前的item数据
return false
}
})
return newbooks
}
else{
return this.books
}
}
}
})
显示：
其中：
filter()函数是用来过滤数组的，对数组中的每一项进行判断，如果返回true则返回当前元素，否则不返回；
由于filter()函数内部独立于外部，因此不能通过this来引用Vue中data的数据，有两种解决的办法：
filter()外部给keyword重新赋值，并在内部引用
book_result(){
kw = this.keyword
if(this.keyword){
// filter()是数组中的过滤方法，item代表books中的每一条数据
var newbooks = this.books.filter(function(item){
if(item.name.indexOf(kw) >= 0){
// 返回true代表返回当前的item数据
return true
}
else{
// 返回false代表不返回当前的item数据
return false
}
})
return newbooks
}
else{
return this.books
}
}
在filter()外部重命名this关键字并在内部调用keyword属性
book_result(){
const that = this
if(this.keyword){
// filter()是数组中的过滤方法，item代表books中的每一条数据
var newbooks = this.books.filter(function(item){
if(item.name.indexOf(that.keyword) >= 0){
// 返回true代表返回当前的item数据
return true
}
else{
// 返回false代表不返回当前的item数据
return false
}
})
return newbooks
}
else{
return this.books
}
}
三、Router路由基本使用
1.Vue路由基本概念
在网页中，经常需要发生页面更新或者跳转，这时候我们就可以使用Vue-Router来帮我们实现。
Vue-Router是用来将一个Vue程序的多个页面进行路由的，比如一个Vue程序（或者说一个网站）有登录、注册、首页等模块，那么我们就可以定义 /login、/register、/ 来映射每个模块。
Vue-Router是定义了url规则与具体的View映射的关系，可以在一个单页面中实现数据的更新。
安装方式也有3种：
使用CDN 加载最新版
加载指定版本
下载到本地
使用npm安装
npm install vue-router
2.基本使用
进行测试：
Document
首页
var index = Vue.extend({
template:'这是首页
'
})
var router = new VueRouter({
routes:[
{path:'/',component:index}
]
})
new Vue({
el:'#app',
data:{
},
router:router
})
显示：
说明：
Vue.extend是用来加载模板的。
Vue-Router创建一个路由对象。
routes定义一个url与组件的映射，这个就是路由。
用component和extend都可以创建组件，但是有一定区别：
component创建的组件有名字； extend创建的组件没有名字。多页之间动态切换测试：
Document
首页
音乐频道
var index = Vue.extend({
template:'这是首页
'
})
var music = Vue.extend({
template:'这是音乐频道
'
})
var router = new VueRouter({
routes:[
{path:'/',component:index},
{path:'/music',component:music},
]
})
new Vue({
el:'#app',
data:{
},
router:router
})
显示：
在路由中有一些参数是会变化的，比如查看某个用户的个人中心，那肯定需要在url中加载这个人的id，这时候就需要用到动态路由了。
测试：
Document
首页
个人中心
var index = Vue.extend({
template:'首页
'
})
var profile = Vue.extend({
template:'{{$route.params.userid}}个人中心
'
})
var router = new VueRouter({
routes:[
{path:'/',component:index},
{path:'/profile/:userid',component:profile},
]
})
new Vue({
el:'#app',
data:{
},
router:router
})
显示：
说明：
this.$route.params中记录了路由中的参数
可以查看 $route和 $router属性：
Document
首页
个人中心
var index = Vue.extend({
template:'首页
'
})
var profile = Vue.extend({
template:'{{$route.params.userid}}个人中心
',
mounted(){
console.log(this.$route)
console.log(this.$router)
}
})
var router = new VueRouter({
routes:[
{path:'/',component:index},
{path:'/profile/:userid',component:profile},
],
})
new Vue({
el:'#app',
data:{
},
router:router
})
显示：
显然，都是关于渲染路由的相关信息，都含有userid参数，但是router的数据显然比route更多。
当使用路由参数时，例如从/user/foo导航到/user/bar，原来的组件实例会被复用。因为两个路由都渲染同一个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
测试如下：
Document
首页
个人中心
个人中心
var index = Vue.extend({
template:'首页
'
})
var profile = Vue.extend({
template:'{{$route.params.userid}}个人中心
',
mounted(){
console.log(this.$route)
console.log(this.$router)
}
})
var router = new VueRouter({
routes:[
{path:'/',component:index},
{path:'/profile/:userid',component:profile},
],
})
new Vue({
el:'#app',
data:{
},
router:router
})
显示：
显然，在两个个人中心之间切换时，没有再调用生命周期函数，直接复用之前已经渲染出来的Vue组件和元素。
复用组件时，想要对路由参数的变化作出响应即重新渲染，有两种方式：
const User = {
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}
}
使用导航守卫
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}
}
作者：cutercorley
