用 Javascript 實現你的想像
- 37. <div id=“app”>{{ message }}</div>
HTML
var app = new Vue ({
el: “#app”,
data: {
message: ‘Hello Vue!’
}
})
JavaScript
Hello Vue!
Output
37
- 38. var app = new Vue ({
el: “#app”,
data: {
logoName: ‘Anna Studio’,
subMessage: ‘Welcome To Anna Studio.’,
helloMessage: `Nice To Meet You.`,
buttonText: `More`
}
})
JavaScript
38
http://jsbin.com/xaqubag/1/edit?html,js,output
- 39. var app = new Vue ({
el: “#app”,
data: {
logoName: ‘Cat Coffee’,
subMessage: ‘Welcome To Cat Coffee.’,
helloMessage: `Cat Coffee With You.`,
buttonText: `Love`
}
})
JavaScript
39
- 48. 48
HTML
var app = new Vue({
el: '#app',
data: {
coverImg: 'img/header-bg.png'
}
})
JavaScript
<div :style=“{ backgroundImage: coverImg }”>
</div>
- 51. <div>
<img src="img/team/1.jpg" alt="">
<h4>Rulin</h4>
<p> </p>
<ul>
<li>...</li>
<li>...</a></li>
<li>...</li>
</ul>
</div>
<div>
<img src="img/team/2.jpg" alt="">
<h4>Anna Su</h4>
<p> </p>
<ul>
<li>...</li>
<li>...</a></li>
<li>...</li>
</ul>
</div>
<div>
<img src="img/team/3.jpg" alt="">
<h4>Jerry Hong</h4>
<p> </p>
<ul>
<li>...</li>
<li>...</a></li>
<li>...</li>
</ul>
</div>
HTML
Output
51
- 53. <ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
HTML
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
JavaScript •Foo
•Bar
Output
53
- 54. var app = new Vue({
el: '#app',
data: {
teamMembers: [
{
avatar: '...',
name: 'Rulin',
jobTitle: ' '
},
{
avatar: '...',
name: 'Anna Su',
jobTitle: ' '
},
{
avatar: '...',
name: 'Jerry Hong',
jobTitle: ' '
}
]
}
})
Output
JavaScript
54
- 55. <div v-for="member in teamMembers">
<img :src="member.avatar" alt="">
<h4>{{ member.name }}</h4>
<p>{{ member.jobTitle }}</p>
<ul>
<li>...</li>
<li>...</a></li>
<li>...</li>
</ul>
</div>
HTML
Output
55
- 59. <form id="app">
<input v-model="customerName" type="text">
<input v-model="customerEmail" type="email">
<input v-model="customerPhone" type="tel">
<div>
<div> : {{ customerName }}</div>
<div> : {{ customerEmail }}</div>
<div> : {{ customerPhone }}</div>
</div>
</form>
HTML
var app = new Vue({
el: '#app',
data: {
customerName: '',
customerEmail: '',
customerPhone: '',
}
})
JavaScript
Output
59
