vue2.0入门及实战开发(四)

过滤器  获取DOM元素
<div>
    请输入内容：<input type="text" name="" v-model="text">
    显示：{{text|myFilter}}
</div>

export default{
    data(){
      return{ text: ''}
   }
    filters:{
        myFilter:function(value){value就是text
        //输入的内容帮我做个反转，转换成数组，反转数组，再转为字符串
        // return 1;
         return value.split('').reverse().join(''); 
      }
  }
}


创建全局过滤器  
Vue.filter('myFilter',function(value){
    return '我是全局过滤器';
})

注意：当全局过滤器和组件内过滤器重名的时候，是以组件内过滤器为有效的

获取DOM元素

<sub-vue ref="sub"></sub-vue>   组件对象
<div ref="myDiv">{{text}}</div> DOM对象



救命稻草，前端框架就是为了减少DOM操作，但是再特定的情况下，还是给你留了后门的
在指定的元素上，添加 ref="名称A"
在获取的地方加上 this.$refs.名称A
   如果ref放在了原生DOM元素上，获取的数据就是原生的DOM对象
   如果ref放在了组件对象上，获取的就是组件对象

   export default{
       data(){
           return{
               text:'123'
           }
       },
       //组价创建后，数据已经完成初始化，但是DOM还未生成
       created(){  //事件的处理函数(created)
           console.log('created':this.$refs.myDiv);
       }   
       //数据装载到DOM上，各种数据已经就位，将数据渲染到DOM上，DOM已经生成
       mounted(){
           this.$refs.sub.$el.innerHTML='xxxxx'   组件

           console.log('mounted:',this.$refs.myDiv); DOM

           //涉及DOM类的操作
           //this.$refs.myDiv.innerHTML='hhhh';

           //涉及到数据的操作
           this.text='xxxx';
       }
   }

   总结：原生的DOM可以直接操作，若是组件对象，想获得DOM对象，通过this.$refs.sub.$el进行操作

   对应的事件：
   created完成了数据的初始化，此时还未生成DOM，无法操作DOM
   mounted将数据已经装载到了DOM之上，可以操作DOM   




重定向和404

进入后，默认就是/
重定向 {path :'/',redirect: '/home'}
重定向 {path :'/',redirect:{name:'home'}}

404:在路由规则的最后的一个规则中写一个很强大的匹配
{path : '*',component: NotFoundVue}

两种创建路由对象配置路由规则的方式
方法一：
let router=new VueRouter();
   routes:[
   {}
   ]

方法二：
let router=new VueRouter();
router.addRoutes([

])


let router=new VueRouter();
router.addRoutes([
    //重定向
    {path: '/',redirect: '/home'},
    {path: '/home',component:Home}

    {path: '/',redirect:{name: 'home'}},
    {name: 'home',path: '/home',component: Home}
    //最终无法匹配 ->404
    {path: '*',component: NotFound}

])