路由的理解：
路由：vue-router
vue的核心插件
vue-router.js
npm install vue
npm install vue-router
根據(jù)不同的url訪問不同的頁面
創(chuàng)建單頁面SPA(SINGLE PAGE APPLICATION)應(yīng)用
1.路由分為5部分
①創(chuàng)建<router-link></router-link>盛放鏈接對(duì)應(yīng)的內(nèi)容<router-view></router-view>
②創(chuàng)建組件
③配置路由
④創(chuàng)建路由實(shí)例
⑤路由實(shí)例掛在的vue
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a></a>
<div id='app'>
<!--1.-->
<router-link to='/home'>首頁</router-link>
<router-link to='/user'>用戶頁</router-link>
<!-- 盛放鏈接對(duì)應(yīng)的內(nèi)容-->
<router-view></router-view>
</div>
<script src='js/vue.js'></script>
<script src='js/vue-router.js'></script>
<script>
//2.創(chuàng)建組件
var Home={
template:`
<h1>這是首頁</h1>
`
}
var User={
template:`
<h1>這是用戶頁</h1>
`
}
//3.配置路由
const routes=[
{path:'/home',component:Home},
{path:'/user',component:User}
]
//4.創(chuàng)建路由實(shí)例
const router=new VueRouter({
routes:routes
})
//5.路由實(shí)例掛載到vue實(shí)例上
new Vue({
el:'#app',
router:router
})
</script>
</body>
</html>
2.路由的嵌套
①.用這個(gè)就是嵌套路由children：[]，在分配路由里面添加嵌套路由children：[]
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<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.創(chuàng)建組件
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.創(chuàng)建路由實(shí)例
const router=new VueRouter({
routes:routes
})
//5.把路由實(shí)例掛載到vue實(shí)例上
new Vue({
el:'#app',
router:router//注冊路由
})
</script>
</body>
</html>
3. v-html黄痪、 v-text紧帕、、 v-once 只綁定一次桅打、 v-pre 原樣輸出是嗜、 v-cloak講解
v-html：
你不能使用 v-html 來復(fù)合局部模板愈案，因?yàn)?Vue 不是基于字符串的模板引擎。組件更適合擔(dān)任 UI 重用與復(fù)合的基本單元
v-tex:
作用 ： 操作元素中的純文本
快捷方式 ： {{}}
v-tex:解釋
這里v-text=""鹅搪，雙引號(hào)并不是代表字符串站绪，而是vue自定義的劃定界限的符號(hào)。如果我們里邊輸出字符串丽柿，就要在里邊再添加一對(duì)單引號(hào)崇众。而且經(jīng)測驗(yàn)，要想輸出字符串航厚，必須添加單引號(hào)顷歌，否則會(huì)報(bào)錯(cuò)
這里month默認(rèn)是從0開始的，所以我們要+1
這里{{}}代表的就是""幔睬，所以在v-text=""中眯漩，我們在內(nèi)容里邊就不需要再寫{{}}了，直接寫data值就行
v-once：
只渲染元素和組件一次麻顶，隨后的渲染赦抖，使用了此指令的元素/組件及其所有的子節(jié)點(diǎn)，都會(huì)當(dāng)作靜態(tài)內(nèi)容并跳過辅肾，這可以用于優(yōu)化更新性能队萤。
常見用法如下：
當(dāng)修改input框的值時(shí)，使用了v-once指令的p元素不會(huì)隨之改變矫钓，而第二個(gè)p元素時(shí)可以隨之改變的
<div id="app">
<p v-once>{{msg}}</p> //msg不會(huì)改變
<p>{{msg}}</p>
<p>
<input type="text" v-model = "msg" name="">
</p>
</div>
<script type="text/javascript">
let vm = new Vue({
el : '#app',
data : {
msg : "hello"
}
});
</script>
v-pre :
表示該會(huì)跳過該標(biāo)簽及其子元素的編譯要尔。
v-cloa:
這個(gè)指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯。和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時(shí)新娜，這個(gè)指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實(shí)例準(zhǔn)備完畢
