补充Vue指令和路由

v-html:自动识别输入的信息。
v-text：原样输出。
v-once：只绑定一次。
v-pre：原样输出。

<div id="app">
            <input  type='text'  v-model="msg"></input>
            <p v-html="msg">{{msg}}</p>
            <h1 v-text="msg">{{msg}}</h1>
            
            <a href="" v-once>{{msg}}</a>
            <h1 v-pre>{{msg}}</h1>
        </div>
        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    msg:'hello  vue'
                }
            })
        </script>

路由：vue-router

1.vue的核心插件 2.根据不同的url访问对应的页面 3.创建单页面SPA应用。
路由创建：

<a></a>
        <div id="app">
            <router-link to='/home'>首页</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>
//          创建路由器组件
            var Home={
                template:`
                   <h2>我是老大,我在第一页</h2>
                `
            }
            var User={
                template:`
                   <h2>我是老二,我在第二页</h2>
                `
            }
            
//          配置路由器
            const  routes=[
                {path:'/home',component:Home},
                {path:'/user',component:User}
            ]
            
//          创建路由器实例
            const  router=new VueRouter({
                routes:routes
            })
            
            
            new Vue({
                el:'#app',
                router:router
            })
        </script>

路由器的嵌套：

<div id="app">
            <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 type="text/javascript">
//          创建组件
            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>
                `
            }
            
            const routes=[
               {path:'/',component:Index},
               {path:'/index',component:Index},
               {
                path:'/user',
                component:User,
                children:[
                   {path:'regist',component:Regist},
                   {path:'login',component:Login}
                ]
               }
            ]
            
            const router=new VueRouter({
                routes:routes
            })
            new Vue({
                el:'#app',
                router:router
            })
        </script>

var: es5 声明变量
const: 声明常量
let: es6 声明变量