vue指令
v-for=''（循環(huán)數(shù)組 對(duì)象 數(shù)組對(duì)象）
v-model=''（雙向數(shù)據(jù)綁定，用于表單元素）
v-on:click='alt函數(shù)名'
v-show（控制元素的顯示和隱藏使用display：none隱藏）
v-if （visibility:hidden;隱藏）
v-else
v-else-if
v-bind:src='值'
補(bǔ)充：
①：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>
屏幕展示：①能識(shí)別標(biāo)簽、②按書(shū)寫(xiě)輸出、③只綁定一次、④按原樣輸出
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>
屏幕展示：點(diǎn)擊按鈕
2.png
3.png
路由樣式
vue-router
vue的核心插件vue-router.js
根據(jù)不同的url訪問(wèn)不同的頁(yè)面，創(chuàng)建單頁(yè)面SPA應(yīng)用
<!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'>首頁(yè)</router-link>
<router-link to='/user'>用戶頁(yè)</router-link>
<router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
var Home={
template:`
<div>
<h1>這是一個(gè)首頁(yè)</h1>
<p>這是一句話</p>
</div>
`
}
var User={
template:`
<h1>這是一個(gè)用戶頁(yè)</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'>首頁(yè)</router-link>
<router-link to='/index'>用戶頁(yè)</router-link>
<router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
var Home={
template:`
<h1>這是首頁(yè)①</h1>
`
}
var Index={
template:`
<div>
<h1>這是用戶頁(yè)②</h1>
<ul>
<li>
<router-link to='/index/a'>注冊(cè)</router-link>
</li>
<li>
<router-link to='/index/b'>登錄</router-link>
</li>
</ul>
<router-view></router-view>
</div>
`
}
var A={
template:`
<h2>這是注冊(cè)</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
