Vue的其他指令与路由

2018-09-24  本文已影响0人  好久不见_3217

1.Vue的其他指令

1.v-text 输出渲染后的值
2.v-html 输出解析HTML元素后的值
3.v-once 只绑定一次
4.v-pre 原样输出
5.v-cloak 渲染完之后才显示

Vue的其他指令

<div id="app">
    <input type="text" v-model='msg'>
    <p v-html='msg'>{{msg}}</p>
    <h3 v-text='msg'>{{msg}}</h3>
    <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"
        }
    })
</script>

效果如下:


Image 2.png

v-cloak

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

效果如下:


Image 3.png

2.路由

vue-router
vue的核心插件vue.router.js
根据不同的url访问不同的页面
创建单页面SPA(SINGLE PAGE APPLICATION)应用

<router-link to="/  "></router-link>用于页面跳转

例:

<style>
     /*   .router-link-active{
            color: red;
        }*/
        .active{
            color: red;
        }
    </style>
</head>
<body>
<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:`
        <h1>这是首页</h1>
        `
    }
    var User={
        template:`
        <h1>这是用户页</h1>
        `
    }
    const routes=[
        {path:"/",component:Home},
        {path:"/home",component:Home},
        {path:"/user",component:User}
    ]
    const router=new VueRouter({
        routes:routes,
        linkActiveClass:'active'

    })
    new Vue({
        el:"#app",
        router:router
    })
</script>

效果如下:


Image 4.png

3.路由的嵌套

<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>
    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:`
        <h1>这是注册页</h1>
        `
    }
    var Login={
        template:`
        <h1>这是登录页</h1>
        `
    }
    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,
        linkActiveClass:'active'

    })
    new Vue({
        el:"#app",
        router:router
    })
</script>

效果如下:


Image 5.png
上一篇 下一篇

猜你喜欢

热点阅读