嘗試 Vue.js 最簡單的方法是使用 JSFiddle Hello World 例子。你可以在瀏覽器新標簽頁中打開它,跟著我們學習一些基礎示例。或者你也可以創建一個本地的 .html 文件,然后通過如下方式引入 Vue:
~~~
<script src="https://unpkg.com/vue/dist/vue.js"></script>
~~~
聲明式渲染
Vue.js 的核心是一個允許你采用簡潔的模板語法來聲明式的將數據渲染進 DOM 的系統:
~~~
<div id="app">
{{ message }}
</div>
~~~
~~~
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
Hello Vue!
~~~
我們已經生成了我們的第一個 Vue 應用!看起來這跟單單渲染一個字符串模板非常類似,但是 Vue.js 在背后做了大量工作。現在數據和 DOM 已經被綁定在一起,所有的元素都是響應式的。我們如何知道?打開你的瀏覽器的控制臺,并修改 app.message,你將看到上例相應地更新。
除了綁定插入的文本內容,我們還可以采用這樣的方式綁定 DOM 元素屬性:
~~~
<div id="app-2">
<span v-bind:title="message">
Hover your mouse over me for a few seconds to see my dynamically bound title!
</span>
</div>
~~~
~~~
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date()
}
})
~~~
這里我們遇到點新東西。你看到的 v-bind 屬性被稱為指令。指令帶有前綴 v-,以表示它們是 Vue.js 提供的特殊屬性。可能你已經猜到了,它們會在渲染過的 DOM 上應用特殊的響應式行為。這個指令的簡單含義是說:將這個元素節點的 title 屬性和 Vue 實例的 message 屬性綁定到一起。
你再次打開瀏覽器的控制臺輸入 app2.message = 'some new message',你就會再一次看到這個綁定了title屬性的HTML已經進行了更新。