与Vue.js的第九天
2018-09-24 本文已影响0人
李泽裕
今天学习了路由
路由
路由
路由vue-router
是vue的核心组件
根据不同的url访问不同页面
配合单页面使用
vue-router使用必须安装匹配插件
vue-router实例
<body>
<a></a>
<div id='app'>
<!--1.-->
<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>
//2.创建组件
var Home={
template:`
<h1>这是首页</h1>
`
}
var User={
template:`
<h1>这是用户页</h1>
`
}
//3.配置路由
const routes=[
{path:'/home',component:Home},
{path:'/user',component:User}
]
//4.创建路由实例
const router=new VueRouter({
routes:routes
})
//5.路由实例挂载到vue实例上
new Vue({
el:'#app',
router:router
})
</script>
</body>
路由的嵌套
<body>
<div id='app'>
<!--1.-->
<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>
//2.创建组件
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>
`
}
//3.配置路由
const routes=[
{path:'/',component:Index},
{path:'/index',component:Index},
{
path:'/user',
component:User,
children:[
{path:'regist',component:Regist},
{path:'login',component:Login}
]
}
]
//4.创建路由实例
const router=new VueRouter({
routes:routes
})
//5.把路由实例挂载到vue实例上
new Vue({
el:'#app',
router:router//注册路由
})
</script>
</body>
v-html,v-text,v-once,v-pre,v-cloak
v-html：v-html用于输出html
v-text：是用于操作纯文本，它会替代显示对应的数据对象上的值
v-html和v-text的区别：v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。
v-once：只能绑定一次，只能执行一次性地插值，当数据改变时，插值处的内容不会更新
（不需要表达式）
v-pre:在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。
（不需要表达式）
v-cloak：防止页面加载时出现 vuejs 的变量名，和 CSS 规则如 [v-cloak] { display: none } 一起用。
（不需要表达式）
<body>
<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>
</body>
<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='js/vue.js'></script>
<script>
new Vue({
el:'#app',
data:{
msg:'hello vue'
},
beforeMount:function(){
alert('beforeMount')
}
})
</script>
</body>
