二灿里、基本語(yǔ)法
目錄：v-bind、v-if程腹、v-else-if匣吊、v-else、v-for寸潦、v-on
1.v-bind
已經(jīng)成功創(chuàng)建了第一個(gè)Vue應(yīng)用色鸳。看起來(lái)這跟渲染一個(gè)字符串模板非常類(lèi)似见转，但是Vue在背后做了大量的工作∶福現(xiàn)在數(shù)據(jù)和DOM已經(jīng)被建立了關(guān)聯(lián)，所有東西都是響應(yīng)式的斩箫。在控制臺(tái)操作對(duì)象屬性吏砂，界面可以實(shí)時(shí)更新撵儿。
可以使用v-bind來(lái)綁定元素特性。
<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>v-bind</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span v-bind:title="message">
鼠標(biāo)懸停幾秒鐘查看此處動(dòng)態(tài)綁定的時(shí)間信息
</span>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: '頁(yè)面加載時(shí)間：' + new Date().toLocaleString()
}
})
</script>
</body>
</html>
像v-bind等被成為指令狐血。指令帶有前綴v-统倒，以表示它們是Vue提供的特殊特性。它們會(huì)在渲染的DOM上應(yīng)用特殊的響應(yīng)式行為氛雪。在這里該指令的意思是：將這個(gè)元素節(jié)點(diǎn)的title特性和Vue實(shí)例的message屬性保持一致房匆。
如果再次打開(kāi)瀏覽器的JavaScript控制臺(tái)，輸入app.message='新消息'报亩，就會(huì)再一次看到這個(gè)綁定了title特性的HTML已經(jīng)進(jìn)行了更新浴鸿。
2.v-if,v-else
條件判斷語(yǔ)句
- v-if
- v-else
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-if,v-else</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="vue">
<h1 v-if="ok">YES</h1>
<h1 v-else>NO</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue',
data: {
ok: true
}
});
</script>
</body>
</html>
測(cè)試：①在瀏覽器上運(yùn)行，打開(kāi)控制臺(tái)弦追。
②在控制臺(tái)輸入vm.ok=false岳链，然后回車(chē)，會(huì)發(fā)現(xiàn)瀏覽器中顯示的內(nèi)容會(huì)直接變成NO劲件。
注：使用v-*屬性綁定數(shù)據(jù)是不需要雙花括號(hào)包裹的掸哑。
3.v-else-if
- v-if
- v-else-if
- v-else
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-else-if</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="vue">
<h2 v-if="type === 'A' ">A</h2>
<h2 v-else-if="type === 'B' ">B</h2>
<h2 v-else-if="type === 'C' ">C</h2>
<h2 v-else>who</h2>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue',
data: {
type: 'A'
}
});
</script>
</body>
</html>
測(cè)試：觀察在控制臺(tái)分別輸入vm.type='B'、'C'零远、'D'的變化苗分。
注：===三個(gè)等號(hào)在JS中表示絕對(duì)等于（就是數(shù)據(jù)與類(lèi)型都要相等）。
4.v-for
格式說(shuō)明：
<div id="vue">
<li v-for="item in items">
{{ item.message }}
</li>
</div>
注：items是數(shù)組牵辣，item是數(shù)組元素迭代的別名摔癣。之后學(xué)習(xí)的Thymeleaf模板引擎的語(yǔ)法與之十分的相似。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-for</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="vue">
<li v-for="item in items">
{{ item.message }}
</li>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue',
data: {
//items數(shù)組
items: [
{message: '前端'},
{message: 'Vue'},
{message: 'Java'}
]
}
});
</script>
</body>
</html>
測(cè)試：在控制臺(tái)輸入vm.items.push({message: '運(yùn)維'})纬向，嘗試追加一條數(shù)據(jù)择浊，會(huì)發(fā)現(xiàn)瀏覽器中顯示的內(nèi)容會(huì)增加一條 運(yùn)維。
5.v-on
監(jiān)聽(tīng)事件
事件有Vue的事件和前端頁(yè)面本身的一些事件逾条。下面的click是Vue的事件琢岩，可以綁定到Vue中的methods中的方法事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-on</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="vue">
<!--在這里使用了v-on綁定了click事件师脂，并指定了名為sayHi的方法-->
<button v-on:click="sayHi">點(diǎn)我</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue',
data: {
message: 'Hello World'
},
//方法必須定義在Vue實(shí)例的methods對(duì)象中
methods: {
sayHi: function (e) {
//this在方法里指向Vue實(shí)例
alert(this.message);
}
}
});
</script>
</body>
</html>
