Vue.js-組件化前端開發新思路
12017.04.14 18:31:25字數 6228閱讀 5632
本文章是我最近在公司的一場內部分享的內容。我有個習慣就是每次分享都會先將要分享的內容寫成文章。所以這個文集也是用來放這些文章的，順便也當圖床用。
1. 認識Vue.js
Vue.js（讀音 /vjuː/，類似於view）是一套構建用戶界面的漸進式框架。
如果你有react或者Angular開發經驗，你肯定不會對Vue.js感到太過陌生。Vue.js是踩在Angular和React肩膀上的后來者，它充分吸收了二者的優點，是MVVM框架的集大成者。我們只需要花10分鍾寫一點代碼，就能大概窺見Vue的本質。
1.1 數據綁定
所有的MVVM框架要解決的第一件事都是數據綁定。首先要將Model的變化渲染到View中，當有用戶輸入還需要把用戶的修改反映到Model中。所謂的MVVM就是這么來的。
<!DOCTYPE html> <html> <head> <title>Hello Vue</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ message }} </div> </body> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue' } }) </script> </html> 在瀏覽器打開這個HTML文件后，可以看到頁面上顯示了“Hello Vue”字樣。我們在控制台輸入app.message = 'hello world'並回車后，發現頁面上的消息也變成了“Hello World”。你會發現這一切都是響應式的！Vue在背后為我們搞定了數據到視圖的綁定，然而這一切並沒有什么黑魔法，這背后的原理是Object.defineProperty和對象的存取器屬性。
vue的數據綁定
這是Vue官網的一張圖，高度概括了響應式數據綁定的原理。使用Object.defineProperty將data中的所有屬性都轉為存取器屬性，然后在首次渲染過程中把屬性的依賴關系記錄下來並為這個Vue實例添加觀察者。當數據變化時，setter會通知觀察者數據變動，最后由觀察者觸發render函數進行再次渲染。
理解了這個，就不難理解Vue中視圖到數據的綁定了：
<!DOCTYPE html> <html> <head> <title>Hello Vue</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>Welcom {{ name }}!</p> <input type="text" placeholder="Enter your name" v-model="name"> </div> </body> <script> var app = new Vue({ el: '#app', data: { name: '' } }) </script> </html> 1.2 條件、循環與事件
Vue中可以很方便地進行條件渲染、循環渲染和事件綁定。我們將通過一個列表的例子來體驗：
<!DOCTYPE html> <html> <head> <title>Hello Vue</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <style> body, html { margin: 0; padding: 0; } body { padding: 20px; } .students { margin: 0; padding: 0 0 20px 0; list-style: none; } .students > li { padding: 20px; border-bottom: 1px solid #ddd; } </style> </head> <body> <div id="app"> <ul class="students"> <li v-for="student in students"> <h3 class="name"> {{student.name}} <span>{{student.age}}</span> </h3> <p v-if="Number(student.age) > 18">{{student.profile}}</p> <button v-on:click="sayHi(student.name)">Say hi</button> </li> </ul> </div> </body> <script> var students = [ { name: 'Susan', age: 17, profile: 'Hi there I\'m a dog! Wang Wang!' }, { name: 'Amanda', age: 21, profile: 'Kneel Down, Human! Miao~' }, { name: 'Lench', age: 25, profile: 'боевой народ!!' } ] new Vue({ el: '#app', data: { students }, methods: { sayHi (name) { window.alert('Hi '+ name) } } })