發(fā)現Vue

最近公司在做一個H5的項目，涉及到用戶數據綁定，由于用的是Html+webApi的形式，所以每次綁定用戶數據的時候感覺寫的特別累，js文件里寫了一大堆東西，每次改的時候格式看的讓人很頭痛。剛好最近接觸了微信小程序，看到里面數據綁定的時候特別方便，于是就想一定也有這樣的js框架來實現類似小程序里數據綁定的方式吧！于是乎就找到了vue.js。簡單用了下還是很給力的。

Vue.js 介紹

Vue.js（讀音 /vju?/, 類似于 view） 是一套構建用戶界面的 漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發(fā)的設計。Vue 的核心庫只關注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)的復雜單頁應用。
Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。

上幾個簡單的例子

聲明式渲染

Vue.js 的核心是一個允許你采用簡潔的模板語法來聲明式的將數據渲染進 DOM 的系統(tǒng)：

    <div id="app">
        {{ message }}
    </div>

    var app = new Vue({
      el: '#app',
      data: {
       message: 'Hello Vue!'
      }
    })

條件

控制切換一個元素的顯示也相當簡單：

    <div id="app-3">
      <p v-if="seen">Now you see me</p>
    </div>

    var app3 = new Vue({
      el: '#app-3',
      data: {
      seen: true
      }
    })

繼續(xù)在控制臺設置 app3.seen = false，你會發(fā)現 “Now you see me” 消失了。

循環(huán)

v-for指令可以綁定數據到數據來渲染一個列表：

    <div id="app-4">
      <ol>
        <li v-for="todo in todos">
          {{ todo.text }}
        </li>
      </ol>
    </div>

     var app4 = new Vue({
        el: '#app-4',
        data: {
        todos: [
            { text: 'Learn JavaScript' },
            { text: 'Learn Vue' },
            { text: 'Build something awesome' }
            ]
        }
      })

Paste_Image.png

重點

以上就是Vue.js的簡單介紹
更詳細的內容大家可以訪問官網http://cn.vuejs.org/