用 Javascript 實現你的想像

20
jQuery Angular React Vue.js
2006 2009 2013 2014

<div id=“app”>{{ message }}</div>
HTML
var app = new Vue ({
el: “#app”,
data: {
message: ‘Hello Vue!’ 
}
})
JavaScript
Hello Vue!
Output
37

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

el: “#app”,
data: {
logoName: ‘Cat Coffee’,
subMessage: ‘Welcome To Cat Coffee.’,
helloMessage: `Cat Coffee With You.`,
buttonText: `Love` 
}
})
JavaScript
39

HTML
<div v-bind: =“strings or object or array”>
…
</div>
v-bind
43

44
HTML
<div v-bind: =“strings or object or array”>
…
</div>
HTML
<div : =“strings or object or array”>
…
</div>
v-bind Shorthand

45
http://jsbin.com/sagoviq/1/edit?html,js,output

<img :src=“logoImg” alt=“”>
HTML
var app = new Vue({
el: '#app',
data: {
logoImg: 'img/sun.png'
}
})
JavaScript
46

48
HTML
var app = new Vue({
el: '#app',
data: {
coverImg: 'img/header-bg.png'
}
})
JavaScript
<div :style=“{ backgroundImage: coverImg }”>
</div>

50
http://jsbin.com/jolicu/1/edit?html,js,output

<div>
<img src="img/team/1.jpg" alt="">
<h4>Rulin</h4>
<p> </p>
<ul>
<li>...</li>
<li>...</a></li>
<li>...</li>
</ul>
</div>
<div>
<h4>Anna Su</h4>
<p> </p>
<ul>
<li>...</li>
<li>...</a></li>
<li>...</li>
</ul>
</div>
<div>
<h4>Jerry Hong</h4>
<p> </p>
<ul>
<li>...</li>
<li>...</a></li>
<li>...</li>
</ul>
</div>
HTML
Output
51

<div>
<h4>Anna Su</h4>
<p> </p>
<ul>
<li>...</li>
<li>...</a></li>
<li>...</li>
</ul>
</div>
HTML
Output
52

<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

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

<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

57
http://jsbin.com/qexaguv/1/edit?html,js,output

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
HTML
var example1 = new Vue({
el: '#example-1',
data: {
message: ""
}
})
JavaScript Output
58

<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

PWAWhat’s
Progressive Web App

IOTWhat’s
Internet of Things

用 Javascript 實現你的想像

More Related Content

What's hot

More from Anna Su

用 Javascript 實現你的想像