2018-09-24（vue指令）路由嵌套
2018-09-24 本文已影响0人
酒窝仙女
vue指令
v-for=''（循环数组 对象 数组对象）
v-model=''（双向数据绑定，用于表单元素）
v-on:click='alt函数名'
v-show（控制元素的显示和隐藏使用display：none隐藏）
v-if （visibility:hidden;隐藏）
v-else
v-else-if
v-bind:src='值'
补充：
①：v-html=' ' ②：v-text=' '
③：v-once（只绑定一次）④：v-pre（原样输出）⑤：v-cloak
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model='name'>
<h2 v-html='name'>{{name}}</h2>
<p v-text='name'>{{name}}</p>
<h1 v-once>{{name}}</h1>
<h5 v-pre>{{name}}</h5>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
name:'hello'
}
})
</script>
</body>
</html>
屏幕展示：①能识别标签、②按书写输出、③只绑定一次、④按原样输出
1.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<h1 v-cloak>{{msg}}</h1>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'hello'
},
beforeMount:function(){
alert('beforeMount')
}
})
</script>
</body>
</html>
屏幕展示：点击按钮
2.png
3.png
路由样式
vue-router
vue的核心插件vue-router.js
根据不同的url访问不同的页面，创建单页面SPA应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*.router-link-active{
color: orange
}*/
.a{
color: palegreen
}
</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="vue.js"></script>
<script src="vue-router.js"></script>
<script>
var Home={
template:`
<div>
<h1>这是一个首页</h1>
<p>这是一句话</p>
</div>
`
}
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:'a'
})
new Vue({
el:'#app',
router:router
})
</script>
</body>
</html>
4.png
5.png
路由嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.router-link-active{
color: orange
}
</style>
</head>
<body>
<div id="app">
<router-link to='/home'>首页</router-link>
<router-link to='/index'>用户页</router-link>
<router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
var Home={
template:`
<h1>这是首页①</h1>
`
}
var Index={
template:`
<div>
<h1>这是用户页②</h1>
<ul>
<li>
<router-link to='/index/a'>注册</router-link>
</li>
<li>
<router-link to='/index/b'>登录</router-link>
</li>
</ul>
<router-view></router-view>
</div>
`
}
var A={
template:`
<h2>这是注册</h2>
`
}
var B={
template:`
<h2>这是登录</h2>
`
}
const routes=[
{path:'/',component:Home},
{path:'/home',component:Home},
{
path:'/index',
component:Index,
children:[
{path:'a',component:A},
{path:'b',component:B}
]
}
]
const router=new VueRouter({
routes:routes
})
new Vue({
el:'#app',
router:router
})
</script>
</body>
</html>
6.png
7.png
