{"action":"opened","issue":{"url":"https://api.github.com/repos/decadehew/frontend-test/issues/2","repository_url":"https://api.github.com/repos/decadehew/frontend-test","labels_url":"https://api.github.com/repos/decadehew/frontend-test/issues/2/labels{/name}","comments_url":"https://api.github.com/repos/decadehew/frontend-test/issues/2/comments","events_url":"https://api.github.com/repos/decadehew/frontend-test/issues/2/events","html_url":"https://github.com/decadehew/frontend-test/issues/2","id":348869619,"node_id":"MDU6SXNzdWUzNDg4Njk2MTk=","number":2,"title":"vue介紹","user":{"login":"decadehew","id":3433864,"node_id":"MDQ6VXNlcjM0MzM4NjQ=","avatar_url":"https://avatars0.githubusercontent.com/u/3433864?v=4","gravatar_id":"","url":"https://api.github.com/users/decadehew","html_url":"https://github.com/decadehew","followers_url":"https://api.github.com/users/decadehew/followers","following_url":"https://api.github.com/users/decadehew/following{/other_user}","gists_url":"https://api.github.com/users/decadehew/gists{/gist_id}","starred_url":"https://api.github.com/users/decadehew/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/decadehew/subscriptions","organizations_url":"https://api.github.com/users/decadehew/orgs","repos_url":"https://api.github.com/users/decadehew/repos","events_url":"https://api.github.com/users/decadehew/events{/privacy}","received_events_url":"https://api.github.com/users/decadehew/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-08-08T19:56:49Z","updated_at":"2018-08-08T19:56:49Z","closed_at":null,"author_association":"OWNER","body":"# Vue介紹\r\n\r\nVue是一套用於構建用戶界面的[漸進式框架](#漸進式框架)。所以它很簡單，Vue核心只在乎View層。\r\n學習vue首要條件是HTML/CSS/JS知識，才可以學習框架，這樣才得心應手。\r\n\r\n## 學習目標\r\n\r\n- vue起步\r\n- MVVM介紹\r\n- 應用情景/vue優點\r\n\r\n## vue起步\r\n按照vue文檔裡介紹，基本用法以及程式講解。\r\n\r\n## MVVM介紹\r\n![Image of mvvm](https://lh3.googleusercontent.com/FASbJA-zYN-brLF1EHmWUYx4INbt2GQf43R9plCe2C63PclW8z68iZNoy9uR0D-yeE77s1-C992uJSEKAmQ7MxziZkGQn6MTxrrg5gB456crS1J2IRS-D9DPMYz5geVcqjOYoN2s0QyOvTL6YBw3eObQ8iCCEkGPbWnMeQPL-kWpiy7Gp_dbAp33_2-XeVJ9kskXtBUTHVCzt5VB0TsyVAc51DGlyBxgDQoCvgeW67zvER-ed9gW7Ajs-OTzFAIuF4w1M8TnlHehOzIjDFJDhCf5q2SycmvnEt1POdCDyfTBSeZTlfgXfTrvze9FI1gWKGDgbZdGGBjP2znjxA8ZHQyYWMHiHxfN9HKsFTOFd_JLaAgFJ4qQ1y3kXl_L_zrmnTnwcpL7egaFZNW5qzX_-MNReYAOwkIzB3cMcwOT9fgTIfqABgbJ5OhJbNZckzzuJVIY8rBAxav-w7RdeIROgy8ZFLkS3bXYH2D2DLSBawNQBp3mGe5XZ8vsoMo4LxGs7RZKDZ4iT-40o5ZVcFnkvxVy6kXuJUdOQKuYvoDCktWG5lMsPIj5mjU_z0ybIs6FEu2XW7QI90uQttFeN0kmziU4XC0iK5ke3la-N7M=w700-h376-no)\r\n根據以上圖，稍微介紹，詳細說明，請到下面參考鏈接\r\n\r\n- view 表示視圖，是在頁面上展示內容\r\n- ViewModel 表示一個監聽者，包含dom listener, data binding，監聽左右層數據變化。當資料修改時，會反映給vm通知view更新，在整個過程裡是由vm去操作和處理，一句話描述**自動**更新數據是vm層。我們不需要像以前那樣枯燥方式手動去操作dom。\r\n- model 表示數據 _對象/物件_ (詞差異，意思是一樣)\r\n\r\n透過這個模式，我們就可以只寫數據就好\r\n\r\n## 應用情景/vue優點\r\n曾經使用jquery來操作DOM _添加/刪除_ 元素來更新頁面。vue出現，我們可以不用直接操作DOM。為什麼呢，你要知道直接誒操作dom的成本很大，影響性能。\r\nvue可以幫我們解決問題，達到即時響應式。也就是說當數據有變化時，會即時重新渲染頁面，以及更新數據。\r\n好處是我們不用理其他，我們只需關注數據就可以了。數據改變，視圖就會響應頁面裡數據變化。\r\n\r\n\r\n## 知識點理解\r\n\r\n-  **漸進式框架** - 漸進是vue主張的一個特點，意思是一步一步去搭建，而不是丟一堆沒用的東西去應用。例如我們在開發項目中，首先需要根據項目需求漸進式搭建項目，就是說用最小，最快成本去完成。\r\n\r\n\r\n## 參考鏈接\r\n[vue官方文檔](https://cn.vuejs.org/v2/guide/index.html)\r\n[mvvm wiki](https://zh.wikipedia.org/wiki/MVVM)\r\n[阮一峰 mvvm介紹](http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html)\r\n[mvvm框架講解，還蠻詳盡](https://segmentfault.com/a/1190000009397476#articleHeader1)\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n"}}
{"actor":{"display_login":"decadehew"}}