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
