1.简单实例
vue的核心插件，可创建单页面应用又叫SPA（SIWGLE PAGE APPLICATIDN）应用
Vue.js + vue-router 可以很简单的实现单页应用。
<router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。
以下实例中我们将 vue-router 加进来，然后配置组件和路由映射，再告诉 vue-router 在哪里渲染它们。代码如下所示：
引入vue-router.js是要在vue.js下方引入（顺序不能更改，否则会失效没有用）
<div id='app'>
<!--1.-->
<router-link to='/index'>首页</router-link>
<router-link to='/client'>用户页</router-link>
<!-- 盛放链接对应的内容-->
<router-view></router-view>
</div>
<script src='js/vue.js'></script>
<script src='js/vue-router.js'></script>
<script>
//2.创建组件(用var创建一个名字为Home的组件，Home为组件名)
var Home={
template:`
<h1>这是首页</h1>
`
}
var User={
template:`
<h1>这是客户页</h1>
`
}
//3.配置路由，（path写的是路径）
const routes=[
{path:'/index',component:Home},
{path:'/client',component:User}
]
//4.创建路由实例
const router=new VueRouter({
routes:routes
})
//5.路由实例挂载到vue实例上,也叫注册路由
new Vue({
el:'#app',
router:router
})
</script>
2路由的嵌套
<div id="app">
<router-link to='/home'>首页</router-link>
<router-link to='/index'>主页</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 Index={
template:`
<div>
<h1>我是主页~!!!!</h1>
<ul>
<li>
<router-link to='/index/denglu'>登录</router-link>
</li>
<li>
<router-link to='/index/zhuce'>注册</router-link>
</li>
</ul>
<router-view></router-view>
</div>
}
var Denglu={
template:`<h3>这是登录页面</h3>`
}
var Zhuce={
template:`<h3>这是注册页面</h3>`
}
const routers = [
{path:'/',component:Home},
{path:'/home',component:Home},
{
path:'/index',
component:Index,
children:[
{path:'denglu',component:Denglu},
{path:'zhuce',component:Zhuce}
]}
]
const router = new VueRouter({
routes:routers
})
new Vue({
el:'#app',
router:router
})
</script>
注意：routes:routers中间是冒号
不常用的五个标签
v-html 可以识别标签
v-text 不识别标签按文本输入
v-once 只绑定第一次
v-pre 原样输出不对数据进行解译
v-clock 数据没有完全加载之前 加载完v-clock就消失了
<div class="box">
<input type="text" v-model="msg" />
<p v-html="msg">{{msg}}</p>
<h2 v-text="msg">{{msg}}</h2>
<h4 v-once>{{msg}}</h4>
<h6 v-pre>{{msg}}</h6>
<h5 v-cloak>{{msg}}</h5>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
new Vue({
el:".box",
data:{
msg:'hello'
},
beforeMount:function(){
alert('beforeMount')
}
})
</script>
