vue-router Vue路由器
Git 安装 npm install vue-router
路由中有三个基本的概念 route, routes, router。
1， route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容， 这是一条route, about按钮 => about 内容， 这是另一条路由。
2， routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]
3， router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../diyitain/js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div class="box">
<router-link to='/home'>dd</router-link>
<router-link to='/list'>qq</router-link>
<router-view></router-view>
</div>
<script>
var Home={
template:`<h1>这是首页</h1>`
}
var List={
template:`<h1>这是下首页</h1>`
}
const routes=[
{path:'/home',component:Home},
{path:'/list',component:List}
]
const router=new VueRouter({
routes:routes
})
new Vue({
el:'.box',
router:
router
})
</script>
</body>
</html>
路由的嵌套 : VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="../diyitain/js/vue.js"></script>
<script src="js/vue-router.js"></script>
<div class="box">
<router-link to='/home'>第一页</router-link>
<router-link to='/list'>第二页</router-link>
<router-view></router-view>
</div>
<script>
var Home={
template:`<h1>第一页</h1>`
}
var List={
template:`<div>
<h1>第二页</h1>
<ul>
<li><router-link to='/list/index'>第三页</router-link></li>
<li><router-link to='/list/newq'>第亖页</router-link></li>
</ul>
<router-view></router-view>
</div>
`
}
var Index={
template:`<h1>第三页</h1>`
}
var Newq={
template:`<h1>第亖页</h1>`
}
const routes=[
{path:'/',component:Home},
{path:'/home',component:Home},
{path:'/list',component:List,
children:[
{path:'index',component:Index},
{path:'newq',component:Newq}
]
}
]
const router=new VueRouter({
routes:routes
})
new Vue({
el:'.box',
router:router
})
</script>
</body>
</html>
v-html v-html 指令用于输出 html 代码 v-html解释标签
v-text v-text 指令用于输出 text 代码 v-text不解释标签
v-once 只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能
v-pre 在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了
v-cloak 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕
var let const的区别
1.const定义的变量不可以修改，而且必须初始化。
2.var定义的变量可以修改，如果不初始化会输出undefined，不会报错。
3.let是块级作用域，函数内部使用let定义后，对函数外部无影响。
