路由、补vue指令

1，补vue指令
(1) v-html :可以解析html标签
(2) v-text :不论什么都解析成文本格式
(3) v-once :只绑定一次
(4) v-pre : 原样输出
(5) v-clock : 不需要表达式，在css样式中将 [v-cloak] 属性设为 display:none;

v-once，v-pre，v-cloak都不需要表达式

2，路由
（1），vue-router ： vue的核心插件，引入 vue-router.js 插件；
（2），根据不同的url访问不同的页面（也就是进行页面跳转）；
（3），创建单页面应用（又叫SPA（SINGLE PAGE APPLICATION）应用）。
（4），以 / 开头的嵌套路径会被当作根路径

3，路由的步骤

    <div id='app'>
             <!--1.-->
        <router-link to='/home'>首页</router-link>
       <router-link to='/user'>用户页</router-link> 
 
        <!--1， 盛放链接对应的内容-->
        <router-view></router-view>
    </div>
   <script src='js/vue.js'></script> 
   <script src='js/vue-router.js'></script>
   <script>

        //2.创建组件
        var Home={
               template:`
                    <h1>这是首页</h1>
               `
        }
       var User={
              template:`
                   <h1>这是用户页</h1>
              `
       }

   //3.配置路由
   const  routes=[
       {path:'/',component:Home},
       {path:'/home',component:Home},
       {path:'/user',component:User}
   ]

   //4.创建路由实例
   const router=new VueRouter({
       routes:routes,
       linkActiveClass:'active'
   })

   //5.路由实例挂载到vue实例上（注册路由）
   new Vue({
       el:'#app',
       router:router
   })
</script>

4，路由的嵌套：

<div id='app'>
       <!--1.-->
       <router-link to='/index'>首页</router-link>
       <router-link to='/user'>用户页</router-link>
       <router-view></router-view>
</div>
       <script src='js/vue.js'></script> 
       <script src='js/vue-router.js'></script>
       <script>
   //2.创建组件
   var  Index={
       template:`
         <h1>这是首页</h1>
       `
   }
   var User={
       template:`
       <div>
         <h1>这是用户页</h1>
         <ul>
           <li>
              <router-link to='/user/regist'>注册</router-link>
           </li> 
            <li>
              <router-link to='/user/login'>登录</router-link>
           </li>
        </ul>
        <router-view></router-view>
       </div>
     `
   }
   
   
   var Regist={
       template:`
         <h3>这是注册页</h3>
      `
   }
   
    var Login={
       template:`
         <h3>这是登录页</h3>
      `
   }
   
   //3.配置路由
   const routes=[
       {path:'/',component:Index},
       {path:'/index',component:Index},
       {
           path:'/user',
           component:User,
           children:[
               {path:'regist',component:Regist},
               {path:'login',component:Login}
           ]
       }
   ]
   
   //4.创建路由实例
   const router=new VueRouter({
       routes:routes
   })
   
   //5.把路由实例挂载到vue实例上
  new Vue({
      el:'#app',
      router:router//注册路由
  })
</script>