什麼是 Vue.js？
Vue.js 允許您透過稱為 **指令 (directives)** 的 HTML 屬性來 **擴充套件** HTML。
Vue.js 指令為 HTML 應用程式提供 **功能**。
Vue.js 提供 **內建** 指令和 **使用者自定義** 指令。
有關完整的 Vue.js 教程
前往我們的 Vue.js 教程 ❯Vue.js 指令
Vue.js 使用雙大括號 {{ }} 作為資料的佔位符。
Vue.js 指令是帶有 **v-** 字首的 HTML 屬性。
Vue 示例
在下面的示例中，使用 **new Vue()** 建立了一個新的 Vue 物件。
屬性 **el:** 將新的 Vue 物件繫結到 **id="app"** 的 HTML 元素。
示例
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Vue.js 繫結
當 Vue 物件繫結到 HTML 元素時，當 Vue 物件更改時，HTML 元素也會隨之更改。
示例
<div id="app">
{{ message }}
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
function myFunction() {
myObject.message = "John Doe";
}
</script>
Vue.js 雙向繫結
**v-model** 指令將 HTML 元素的值繫結到應用程式資料。
這稱為雙向繫結。
示例
<div id="app">
<p>{{ message }}</p>
<p><input v-model="message"></p>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Vue.js 迴圈繫結
使用 **v-for** 指令將 Vue 物件陣列繫結到 HTML 元素的“陣列”。
示例
<div id="app">
<ul>
<li v-for="x in todos">
{{ x.text }}
</li>
</ul>
</div>
<script>
myObject = new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue.js' },
{ text: 'Build Something Awesome' }
]
}
})
</script>
