vue过滤器和路由

过滤器

过滤器就是数据在真正渲染到页面中的时候，可以使用这个过滤器进行一些处理，把最终处理结果渲染到网页中。
过滤器的使用：
过滤器可以用在两个地方“双花括号插值** 和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由”管道“符号指示。
## 全局过滤器：

<div id="app">        
	<!-- 添加p标签，显示data数据里的名字 -->        
	<!-- 使用过滤器时页面不在显示，需要一个返回值，即return -->        
	<!-- <p>{{username|vstrip}}</p> -->        
	<!-- vstrip 可以传值，有值时下面也需要传进参数 -->        
	<p>{{username|vstrip("-")}}</p>    
</div>

<script>    
	// 第一个参数是我们自己起的名字，第二个参数是一个方法    
	// 去空格的过滤器    
	Vue.filter('vstrip',function(value,string){        
		// 打印        
		console.log(value)        
		// return value        
		// 返回值 做一定的处理 replace只能处理一次，且是第一个出现的位置        
		// return value.replace(" ","")        
		return value.replace(" ",string)    
		})    
	new Vue({        
		el: "#app",        
		data: {            
			username: "happy year   "        
	     }    
	})
</script>

在一个组件的选项中定义本地的过滤器器：

filter: {
   capitalize: function(value) {
       if (!value) return ''
       value = value.toString()
       return value.charAt(0).toUpperCase() + value.slice(1)
       }
 }

路由

在网页中，经常需要发生页面的更新或者跳转。这时候我们就可以使用 Vue-Router 来帮我们实现。Vue-Router 是用来做路由的，也就是定义 url 规则与具体的view 映射的关系。可以在一个单页面中实现数据的更新。

安装

使用CDN:
加载最新版：

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

加载指定版本：

<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>

下载到本地：<script src="../../lib/vue-router.js"></script>
使用npm安装： npm install vue-router

路由基本应用

<div id="app">        
	<router-link to="/">首页</router-link>        
	<router-link to="/music">音乐</router-link>        
	<!-- 路由匹配到的组件将渲染到这里 -->        
	<router-view></router-view>    
</div>

<script src="./vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<script>    
     // component 组件的名字 extend 是没有组件的名字的    
     var index= Vue.extend({template:"<h1>这是首页</h1>"})    
     var music= Vue.extend({template:"<h1>音乐歌曲</h1>"})    
     var router = new VueRouter({        
     	routes:[            
            {path:"/",component:index},            
            {path:"/music",component:music}        
            ]    
        })    
        new Vue({        
        el:"#app",        
        data:{
        
        },       
         router:router    
    })
</script>

动态路由

<div id="app">        
      <router-link to="/">首页</router-link>        
      <router-link to='/profile/12'>个人中心</router-link>
        
      <router-view></router-view>    
</div>

<script>   
     var index = Vue.extend({template:"<h1>首页</h1>"})    
     // $route.params获取参数的值    
     var profile = Vue.extend({template:"<h1>个人中心 {{$route.params.id}}</h1>",        
         mounted(){            
              console.log(this.$route)            
              console.log(this.$router)        
              }    
          })   
      var router = new VueRouter({        
          routes: [            
              {path:"/",component:index},            
              {path:"/profile/:id",component: profile},       
           ]    
      })   
      new Vue({        
           el: "#app",       
           data:{
        
        },        
           router:router    
      })
</script>

组件复用

当使用路由参数时，例如从 /user/foo 导航到 /user/bar ,原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也以为这组件的生命周期钩子（函数）不会再被调用。
复用组件时，相对路由参数的变化做出响应的话，可以简单的 watch $route 对象。