Vuejs demo

     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是否正常運行吧。

     

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章