Vue中的模板
當(dāng)我們創(chuàng)建一個(gè)Vue實(shí)例的時(shí)候筷弦，可以設(shè)置兩個(gè)屬性娶聘，el和template。其中el是用來(lái)設(shè)置掛載元素的傍菇，通常是一個(gè)CSS選擇器。
var model = {
message:'Hello World'
};
new Vue({
el:'#app',
data:model
})
template屬性的作用是界赔，將HTML內(nèi)容插入到對(duì)應(yīng)的掛載元素中丢习。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script>
var model = {
message: 'Hello World!'
}
// 創(chuàng)建一個(gè) Vue 實(shí)例
new Vue({
el: '#app',
data: model,
template:"<div><input type='text' value='你好世界！' /></div>"
})
</script>
</body>
</html>
運(yùn)行的結(jié)果是淮悼，template中的內(nèi)容會(huì)替換掛載元素咐低。
由于將HTML、CSS及JavaScript模板直接定義到template屬性中袜腥，以字符串形式來(lái)描述见擦，不便于編寫(xiě)和調(diào)試。所以羹令，Vue提供了將模板寫(xiě)入到<script>或者
<template>中的形式鲤屡。
使用<script>標(biāo)簽編寫(xiě)模板：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script type="text/x-template" id="temp">
<div>
<input type="text" value="你好世界！">
</div>
</script>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script>
var model = {
message: 'Hello World!'
}
// 創(chuàng)建一個(gè) Vue 實(shí)例
new Vue({
el: '#app',
data: model,
template:"#temp"
})
</script>
</body>
</html>
使用<template>標(biāo)簽編寫(xiě)模板：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<template id="temp">
<div>
<input type="text" value="你好世界福侈！">
</div>
</template>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script>
var model = {
message: 'Hello World!'
}
// 創(chuàng)建一個(gè) Vue 實(shí)例
new Vue({
el: '#app',
data: model,
template:"#temp"
})
</script>
</body>
</html>
Vue中的數(shù)據(jù)
Vue主要的工作內(nèi)容就是將DOM和數(shù)據(jù)模型進(jìn)行雙向綁定酒来。完成這個(gè)功能是通過(guò)創(chuàng)建Vue實(shí)例。創(chuàng)建Vue實(shí)例肪凛，就是在調(diào)用Vue.js中的構(gòu)造器來(lái)創(chuàng)建對(duì)象堰汉，因此我們可以獲取到創(chuàng)建的JavaScript對(duì)象辽社。在Vue實(shí)例中通過(guò)$data可以獲取到數(shù)據(jù)模型『獍拢或者通過(guò)Vue實(shí)例直接獲取數(shù)據(jù)模型中的數(shù)據(jù)爹袁。
var model = {
name:'悟空',
birthday:'1998-10-10',
major:'計(jì)算機(jī)科學(xué)與技術(shù)'
};
//創(chuàng)建Vue實(shí)例，完成雙向綁定
var viewmodel = new Vue({
el:'#app',
data:model
});
console.log(viewmodel.$data===model) //打印結(jié)果為true
console.log(viewmodel.name===model.name) //打印結(jié)果為true
model.name='孫悟空'
console.log(viewmodel.name) //打印結(jié)果為孫悟空
viewmodel.name='八戒'
console.log(model.name) //打印結(jié)果為八戒
方法
在創(chuàng)建Vue實(shí)例的時(shí)候矮固，可以創(chuàng)建方法對(duì)象失息，其中可以包含多個(gè)方法。這些方法可以用來(lái)處理事件或其它用途档址。在綁定事件處理方法的時(shí)候盹兢，需要用v-on指令，后續(xù)會(huì)詳細(xì)介紹Vue中的指令守伸。
下面绎秒，我們來(lái)實(shí)現(xiàn)一個(gè)輸入框，用來(lái)輸入名字尼摹，點(diǎn)擊按鈕后顯示“你好见芹，XXX”。
運(yùn)行結(jié)果：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message"><br>
<button v-on:click="hello">點(diǎn)擊我</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script>
var model = {
message: 'Hello World!'
}
// 創(chuàng)建一個(gè) Vue 實(shí)例
new Vue({
el: '#app',
data: model,
methods:{
hello:function(){
alert("你好蠢涝，"+this.message);
}
}
})
</script>
</body>
</html>
