Vue前端框架的学习——05—(过滤器、图书管理系统实例、Vue-Router、基本使用、解释说明、动态路由)
1、过滤器
过滤器就是数据在真正渲染到页面中的时候，可以使用这个过滤器进行一些处理，把最终处理的结果渲染到网页中。
过滤器使用：
过滤器可以用在两个地方：双花括号插值**和v-bind表达式 (后者从2.1.0+开始支持)。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示：
<!-- 在双花括号中 -->
{{ message|capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId|formatId"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{username|vstrip("-")}}</p>
</div>
</body>
</html>
<!--vue引入 必须联网-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
//过滤器 去空格功能
Vue.filter('vstrip',function(value,string){
console.log(value)
// return value.replace(" ","")
return value.replace(" ",string) //只能替代字符串中出现的第一个空格
}),
Vue.component('1',{
template:`
`,
data:function(){
return {
}
}
}),
new Vue({
el:"#app",
data:{
username:"xx xxxxx x001 ", //只能替代字符串中出现的第一个空格
}
})
</script>
过滤器定义：
你可以在一个组件的选项中定义本地的过滤器：
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({
// ...
})
2、图书管理系统实例
需要引入工具bootstrap：Bootstrap官网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入css链接 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<div class="container">
<h1>图书管理系统</h1>
<!-- 下面form中的代码是bootstrap官网 https://v3.bootcss.com/components/ 中的 表单项目 复制过来的封装好的模块 -->
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</body>
</html>
<!--vue引入 必须联网-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el:"#app",
data:{
}
})
</script>
图书管理系统案例完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入css链接 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<!-- bootstrap的居中样式 -->
<div class="container">
<h1>图书管理系统</h1>
<!-- 下面form中的代码是bootstrap官网 https://v3.bootcss.com/components/ 中的 表单项目 复制过来的封装好的模块 -->
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<label>名称：</label>
<input type="text" class="form-control" v-model="add_book.name" placeholder="请输入图书的名字">
</div>
<div class="form-group">
<label>作者：</label>
<input type="text" class="form-control" v-model="add_book.author" placeholder="请输入图书的作者">
</div>
<div class="form-group">
<label>价格：</label>
<input type="text" class="form-control" v-model="add_book.price" placeholder="请输入图书的价格">
</div>
<div class="form-group">
<label>搜索：</label>
<input type="text" class="form-control" v-model="keywords" placeholder="请输入搜索的关键字">
</div>
<!-- 提交添加的信息 @click.prevent 阻止表单提交-->
<button type="submit" class="btn btn-default" @click.prevent="add()">添加</button>
</form>
<!-- class="table" 引入表格 -->
<table class="table">
<tr>
<th>序号</th>
<th>名称</th>
<th>价格</th>
<th>时间</th>
<th>操作</th>
</tr>
<!-- books不能写死 -->
<tr v-for="(book,index) in book_result">
<td>{{index+1}}</td>
<td>{{book.name}}</td>
<td>{{book.price}}</td>
<td>{{book.atime}}</td>
<!-- 注意这里button的标签在td标签里面 class="btn btn-danger"在bootstrap中的按钮组件中找 -->
<td><button type="submit" class="btn btn-danger" @click="del(index)">删除</button></td>
</tr>
</table>
</div>
</div>
</body>
</html>
<!--vue引入 必须联网-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el:"#app",
data:{
books:[
{"name":"python",author:"1",price:89,atime:new Date()}, // new Date() D必须大写，区分大小写，否则不显示数据
{"name":"java",author:"2",price:88,atime:new Date()},
],
add_book:{
name:"",
author:"",
price:"",
atime:new Date(),
},
keywords:"",
},
methods:{
add:function(){
// console.log(this.add_book)
//JSON.stringify() 转换成字符串 JSON.parse() 转成JS认识的代码 功能：相当于做了python的深度拷贝，创建了一个新的对象
var book = JSON.parse(JSON.stringify(this.add_book))
// 因为this.add_book是双向绑定的，add_book在添加一次元素后，就会被绑定成固定元素
this.books.push(book)
//元素添加完成之后，清空输入框，使得输入信息恢复默认
this.add_book={
name:"",
author:"",
price:"",
atime:new Date(),
}
},
del:function(index){
//删除index元素
this.books.splice(index,1)
}
},
computed:{
book_result(){
console.log(this.books)
kw = this.keywords //这里将keyeords的值传入kw，方便后面的调用。否则有时候的this指向不是keywords的方法
if(this.keywords){
//
console.log(this.keywords) //这里的this.keywords不同于下面面的，这里指的是
//数组里面的过滤方法
//item是books当中的每一条数据
var newbooks = this.books.filter(function(item){ //var let 用于定义变量 const常量
console.log(this.keywords) //这里的this.keywords不同于上面的，这里指的是filter这个方法的this
console.log(item)
//判断字符是否在item.name中包含
if(item.name.indexOf(kw)>=0){ //这里的kw也可以使用that.keywords
return true //返回当前的item数据
}else{
return false
}
})
return newbooks //返回过滤的数组
}else{
return this.books
}
}
}
})
</script>
3、Vue-Router
Vue-Router是用来将一个Vue程序的多个页面进行路由的。比如一个Vue程序（或者说一个网站）有登录、注册、首页等模块，那么我们就可以定义/login、/register、/来映射每个模块。
安装：
通过script加载进来：<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
通过npm安装：npm install vue-router
路由基本
在网页中，经常需要发生页面更新或者跳转。这时候我们就可以使用Vue-Router来帮我们实现。Vue-Router是用来做路由的，也就是定义url规则与具体的View映射的关系。可以在一个单页面中实现数据的更新。
安装：
使用CDN：
加载最新版的：<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
加载指定版本的：<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>。
下载到本地：<script src="../../lib/vue-router.js"></script>。
使用npm安装：npm install vue-router
路由的基本使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<router-link to="/">首页</router-link>
<router-link to="/music">音乐</router-link>
<!-- 路由匹配到的组件将渲染到这里 vue-router的出口 -->
<router-view></router-view>
</div>
</body>
</html>
<!--vue引入 必须联网-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 加载vue-router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
//component 有组件名字 extend是没有组件的名字的
var index = Vue.extend({template:"这是首页
"})
var music = Vue.extend({template:"这是音乐界面
"})
//vue-router
var router = new VueRouter({
routes:[ //这里的routes需要注意，不同于其他
{path:"/", component:index},
{path:"/music", component:music},
]
})
new Vue({
el:"#app",
data:{
},
router:router //router 是关键字
})
</script>
解释：
1、在vue-router中，使用<router-link>来加载链接，然后使用to表示跳转的链接。vue-router最终会把<router-link>渲染成<a>标签。
2、<router-view>是路由的出口，也就是相应url下的代码会被渲染到这个地方来。
3、Vue.extend是用来加载模板的。
4、routes是定义一个url与组件的映射，这个就是路由。
5、VueRouter创建一个路由对象。
4、动态路由：
在路由中有一些参数是会变化的，比如查看某个用户的个人中心，那肯定需要在url中加载这个人的id，这时候就需要用到动态路由了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<router-link to="/">首页</router-link>
<router-link to="/profile">个人中心</router-link>
<!-- 路由匹配到的组件将渲染到这里 vue-router的出口 -->
<router-view></router-view>
</div>
</body>
</html>
<!--vue引入 必须联网-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 加载vue-router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
//component 有组件名字 extend是没有组件的名字的
var index = Vue.extend({template:"这是首页
"})
var profile = Vue.extend(
{template:"这是个人中心{{$route.params.userid}}
",
mounted(){
console.log(this.$route) //输出路由中的参数数据
console.log(this.$router) //加强版本输出数据项目
}
}) //输出动态绑定的路由id
//vue-router
var router = new VueRouter({
routes:[ //这里的routes需要注意，不同于其他
{path:"/", component:index},
{path:"/profile/:userid", component:profile}, // 动态绑定id /:userid
],
})
new Vue({
el:"#app",
data:{
},
router:router //router 是关键字
})
</script>
解释：
:userid：动态的参数。
this.$route.params：这个里面记录了路由中的参数。
5、组件复用：
当使用路由参数时，例如从/user/foo导航到/user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
复用组件时，想对路由参数的变化作出响应的话，你可以简单地watch(监测变化)``$route对象：
const User = {
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}
}
或者是使用后面跟大家讲到的导航守卫：
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}
}