Vue.js 是用於構建交互式的 Web 界面的庫。它提供了 MVVM 數據綁定和一個可組合的組件系統,具有簡單、靈活的 API。從技術上講, Vue.js 集中在 MVVM 模式上的視圖模型層,並通過雙向數據綁定連接視圖和模型。實際的 DOM 操作和輸出格式被抽象出來成指令和過濾器。相比其它的 MVVM 框架,Vue.js 更容易上手。
剛做了一個小的demo,作爲自己的“helloworld” 代碼,
首先,自己需要去官網下載安裝:http://cn.vuejs.org/guide/installation.html (支持node,bower)
然後,我們需要知道,Vue不依賴於其他的腳本,所以只需要在header裏直接引入<script src="dist/vue.js"></script>,值得注意的是,這裏要引入的必須是dist目錄下的vue,我剛開始的時候引入的是src下面的vue,結果沒有解析出來。
接着我們就可以把官網上的例子直接拷貝到body下:
<body>
<div id="demo">
<h1>{{title | uppercase}}</h1>
<ul>
<li
v-repeat="todos"
v-on="click: done = !done"
class="{{done ? 'done' : ''}}">
{{content}}
</li>
</ul>
</div>
最後是我們的js部分,我們需要書寫我們的js代碼
<script>
var demo = new Vue({
el: '#demo',
data: {
title: 'todos',
todos: [
{
done: true,
content: 'Learn JavaScript'
},
{
done: false,
content: 'Learn Vue.js'
}
]
}
})
</script>
很容易我們就能看出這是一樣點擊切換樣式的一個demo,接下來讓我們測試一下我們的demo是否正常運行吧。