2018-09-24

01

        <div id="app">
            <input type="text" name="" id="" value="" v-model="msg"/>
            <br />
                <!--v-text-->
            <p v-text="msg">{{msg}}</p>
                <!--v-html-->
            <h1 v-html="msg">{{msg}}</h1>
            <br />
                <!--v-once-->
            <a href="#" v-once>{{msg}}</a>
            <br></br>
                <!--v-pre-->
            <h2 v-pre>{{msg}}</h2>
        </div>
            <!--------------------->
        <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            new Vue({
                el:'#app',
                data:{
                    msg:'frdshgsdfrh'
                }
            })
        </script>

{E4H)HD6%9ZF8(Y3_AXB2RW.png

02 v-cloak

<!--------------------->
    <style>
        [v-cloak]{ display:none; }
    </style>
<!--------------------->
   <div id='app'>
       <h1 v-cloak>{{msg}}</h1>
   </div>
<!--------------------->
    <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
    <script>
       new Vue({
           el:'#app',
           data:{
               msg:'hello vue'
           },
           beforeMount:function(){
               alert('beforeMount')
           }
       })
    </script>

03 路由

<!--------------------->
    <style type="text/css">
        .active{color: yellow;background: #EEA236;}a{text-decoration: none;}
    </style>
<!--------------------->
        <div id="app">
            <router-link to='/home'>首页</router-link>
            <router-link to='/user'>用户</router-link>
            <!-- 盛放链接对应的内容-->
            <router-view></router-view>
        </div>
<!--------------------->
        <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/vue-router.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //2.创建组件
            var Home={template:`<h1>ftjhsrdf</h1>`}
            
            var User={template:`<h1>user</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>

GIJZQ`C(M)8NFGZWRL5(1$Q.png

04 路由嵌套

        <style type="text/css">
            .active{color: red;}a{text-decoration: none;}li{list-style: none;}
        </style>
<!--------------------->
        <div id="app">
            <router-link to='/home'>首页</router-link>
            <router-link to='/user'>用户</router-link>
                        <!-- 盛放链接对应的内容-->
                    <router-view></router-view>
        </div>
<!--------------------->
        <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/vue-router.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
                       //2.创建组件
            var Home={
                        template:` <h1>这是首页</h1>  `   }
            var User={
                template:`
                <div>
                    <h1>这是用户页</h1>
                    <ul>
                        <li><router-link to="/user/register">注册</router-link></li>
                        <li><router-link to="/user/logo">登录</router-link></li>
                    </ul>
                    <router-view></router-view>
                </div>
                `
            }
            var Register = {template:`<h1>这是注册页</h1>`}
            var Logo = {template:`<h1>这是登录页</h1>`}
        //3.配置路由    
            const  routes=[
                {path:'/',component:Home},
                {path:'/home',component:Home},
                {path:'/user',component:User,
                    children:[
                        {path:'register',component:Register},
                        {path:'logo',component:Logo}
                    ]
                }
            ]
        //4.创建路由实例
        const router=new VueRouter({
            routes:routes,
            linkActiveClass:'active'
        })
        //5.路由实例挂载vue实例上
         new Vue({
           el:'#app',
           router:router
       })
        </script>

---

![IS(9Y]Q(H%}OJ1YJLC~T}F.png

---