Vue中的模板
當(dāng)我們創(chuàng)建一個(gè)Vue實(shí)例的時(shí)候，可以設(shè)置兩個(gè)屬性，el和template。其中el是用來設(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屬性中，以字符串形式來描述，不便于編寫和調(diào)試。所以，Vue提供了將模板寫入到<script>或者
<template>中的形式。
使用<script>標(biāo)簽編寫模板：
<!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)簽編寫模板：
<!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è)功能是通過創(chuàng)建Vue實(shí)例。創(chuàng)建Vue實(shí)例，就是在調(diào)用Vue.js中的構(gòu)造器來創(chuàng)建對(duì)象，因此我們可以獲取到創(chuàng)建的JavaScript對(duì)象。在Vue實(shí)例中通過$data可以獲取到數(shù)據(jù)模型?；蛘咄ㄟ^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è)方法。這些方法可以用來處理事件或其它用途。在綁定事件處理方法的時(shí)候，需要用v-on指令，后續(xù)會(huì)詳細(xì)介紹Vue中的指令。
下面，我們來實(shí)現(xiàn)一個(gè)輸入框，用來輸入名字，點(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>
