Vim and Vuejs

7f110257501127300df3f923119ba043?s=47 Inndy
October 28, 2016

Vim and Vuejs

2016/10/28 at NTUOSC

7f110257501127300df3f923119ba043?s=128

Inndy

October 28, 2016
Tweet

Transcript

  1. "EWFOUVSF7 *OOEZBU/5604$

  2. XIPBNJ ˙ *OOEZBLB加啄 ˙ JOOEZUX!HNBJMDPN ˙ 䩧꧹余㙹柲BU4IBSFMJLF ˙ 湡垦僽䧭捀♧⦐莇馱⢪搭涸4FDVSJUZ.BTUFS IBDLFS

    QZUIPO PQFOTPVSDF SFWFSTJOH
  3. 7JN 7VFKT 鿪僽7Ꟛ걧♶銴ⴕ齡랃稣

  4. None
  5. WJNOPUFTUYU

  6. 䭾♴JꟚ㨥䩧㶶

  7. 㥶⡦ꨆꟚ7JN 宕黇涸-FTTPO ⢪欽7JN涸❀⼧麥䗱椚ꤥ䕧 齡❉䎃䧮⦛ꡠ♶䱈涸7JN 㥶卓鸏⚆歲7JN嶋㣟✫ 7JN꥙Ꟁ 7JN倰玑䒭 ♶㶸㖈涸7JN 7JN란し

  8. ꨆꟚ7JN涸♧涰珏倰岁 ˙ ?$?$R&OUFS ˙ ?$?$;2 ˙ ?$?$?;LJMM ˙ Ꟛ♧⦐倞涸5FSNJOBMQLJMMWJN ˙

     鏽?9➞$USM9
  9. 䩛䭸⨴䐁乽 WJNUVUPSFO

  10. YEEPPQTFTD

  11. ˙ Yⵅꤑ康垦湡⵹㶶⯋ ˙ EEⵅꤑ湡⵹鸏遤俒㶶 ˙ P妄PP邍爚䖃♴䳄Ⰵ♧遤俒㶶 ˙ PQT鱒Ⰵ涸俒㶶 ˙ FTD穡勲鱒Ⰵ

  12. V 䗂⾲ 

  13. 7JN㛇劥嚌䙂 ˙ ♲珏垸䒭 ˙ ⥜佖乽⡲ ˙ 鴾鸠獵⹛ ˙ 俒㶶暟⟝5FYU0CKFDUT ˙

    䭸⟂ ˙ 鏤㹁墂
  14. ♲⦐垸䒭 ˙ /PSNBM.PEF ˙ *OTFSU.PEF ˙ 7JTVBM.PEF鼇《俒㶶

  15. /PSNBM.PEF $PNNBOE.PEF *OTFSU.PEF 7JTVBM.PEF

  16. /PSNBM.PEF ˙ ♶腋䩧㶶 ˙ 〳⟃獵⹛麉垦 ˙ 鱲䳖ⵌ*OTFSU.PEFJ P 0 B

    " T 4 D $ ˙ 鱲䳖ⵌ7JTVBM.PEFW 7 ?W ˙ ) + , -瘞倴̒ ̕ ̓ ̔렽⺑欽IKLM
  17. *OTFSU.PEF ˙ 〳⟃䩧㶶 ˙ ⭽ꆀ♶銴㖈鸏䧴ⵅꤑ俒㶶獵⹛ ˙ 㖈/PSNBM.PEF獵⹛麉垦

  18. 7JTVBM.PEF ˙ 兜鸒鼇《㼭W ˙ 㽠⫹⡹㖈⟤⡦俒㶶管鱀㐼鼇《俒㶶 ˙ 遤鼇《㣐7 ˙ ♧妄鼇♧遤 ˙

    ⼦㝆鼇《?7 ˙ ♧妄鼇♧⦐瀄䕎
  19. ⥜佖乽⡲ ˙ EⵅꤑYⵅꤑ♧⦐㶶 ˙ D⥜佖T⥜佖♧⦐㶶 ˙ V䗂⾲?Sꅾ⨞ ˙ :ZZ醳醢♧遤Q顦♳醳醢䧴ⵅꤑ涸俒㶶
 1ずQ⡎僽顦㖈麉垦⛓⵹

  20. 鴾鸠獵⹛ ˙ X8騥♧⦐XPSE803% ˙ C#겳⡂X8⡎僽䖃⵹騥 ˙ ?E ?V1BHF%PXO 1BHF6Q ˙

    G ' 䖃䖕⵹锅ⵌ厥⦐㶶  ˙ U 5 騈G'䖎⫹⡎僽⨢㖈⵹♧⦐㶶 ˙ 獵⹛ㄐ⟂⵹〳⟃⸈♧⦐侸㶶⦔鸠獵⹛
  21. 鴾鸠獵⹛ ˙ HH騥ⵌ痧♧遤 ˙ (騥ⵌ剓䖕♧遤 ˙ HH锅ⵌ痧遤 ˙ \䖃⵹♧⦐媯衆 ˙

    ^䖃䖕♧⦐媯衆
  22. 俒㶶暟⟝ ⹛⡲ 5FYU0CKFDU IFMQUFYUPCKFDU

  23. 俒㶶暟⟝ ˙ WJQ鼇《♧⦐媯衆 ˙ EB8ⵅꤑ♧⦐803% ˙ DJ ⥜佖䭍䓞⚥涸俒㶶 ˙ EBⵅꤑ俒㶶⺫わ꧱䒸贫

  24. 俒㶶暟⟝ ˙ Ⰽ珏QSFYJ B JOOFS FOUJSF  ˙ X8XPSEㄤ803% ˙

    T4TFOUFODFㄤ4&/5&/$& ˙ Q1QBSBHSBQIㄤ1"3"(3"1) ˙ J J J< J J\ JB B B< B B\ B
  25. 俒㶶䵃㼦 ˙ XPSEUPTFBSDI  ˙ TFBSDI CBDLXBSE ˙ O /

    ˙ TFUIMTFBSDI ˙ OPI
  26. 7JN䭸⟂ ˙ T<BCDEFGH>= H ˙  T<BCDE>= H ˙ 鼇《俒㶶搭䖕ⱄ䭾TBYYY

    ˙ TFUGUKBWBTDSJQU
  27. 7JN涸緄럊 ˙ 剚㼩衽8SJUFS1BHFT8PSE䭾R

  28. 7JN涸緄럊 ˙ 剚㼩衽8SJUFS1BHFT8PSE䭾R ˙ 剚绢䢫䚍䪾K L殹⡲倰ぢ꒳

  29. 7JN涸緄럊 ˙ 剚㼩衽8SJUFS1BHFT8PSE䭾R ˙ 剚绢䢫䚍䪾K L殹⡲倰ぢ꒳ ˙ 剚雊ꥬ㠗涸ず㷸騈♶♳⡹涸鸠䏞

  30. 7JN涸緄럊 ˙ 剚㼩衽8SJUFS1BHFT8PSE䭾R ˙ 剚绢䢫䚍䪾K L殹⡲倰ぢ꒳ ˙ 剚雊ꥬ㠗涸ず㷸騈♶♳⡹涸鸠䏞 ˙ 剚尝鳵岁⢪欽Ⱖ➮管鱀㐼

  31. 來箻䧮䟝隶䘰

  32. 搂➮䟂䩛擿晋 嫦鹋㷸♧⦐倞䬸䒭♧䎃䖕⡹㽠剚䬸✫

  33. 6TF7JN -JLFBCPTT

  34. 7JN须彂 ˙ !CF@WJNNFS@UX ˙ IUUQTHJUIVCDPNWJNUXBNB ˙ IUUQXXXWJNUX ˙ 7JNUX⛳剤5FMFHSBN(SPVQ 'BDFCPPL(SPVQ

    ˙ 7JN)BDLTCZDT
  35. None
  36. ! ⯝顑耫僈䧮♶僽⵹畮䊨玑䌌

  37. #BDLCPOF K2VFSZ "OHVMBS+4 3FBDU &NCFS 7VFKT 㣖㢵㣖㢵鼇乵

  38. 8IZOPUK2VFSZ ˙ 㥶卓⡹涸笪갤⸆腋䖎㢵 ˙ 㥶卓⡹䟝⨞41"4JOHMF1BHF"QQMJDBUJPO ˙ 㥶卓⡹「♶✫♧⦐+4墂呪剤Ⰽ⼪遤 ˙ 㥶卓⡹銴㻨♧⦐⵹畮⸆腋䖎醳꧹涸笪갤 ˙

    㥶卓⡹䟝㿋㻡♧⦐'BDFCPPL
  39. "OHVMBS+4 ˙ .PEFM7JFX$POUSPMMFS卺圓 ˙ 䧮⦛♶鎣锸稣眏㹁纏ꅾ럊僽耷顑ⴕꨆ ˙ ꧱ぢ竁㹁XBZCJOEJOH ˙ 佖隶须俲㽠湬䱺⿾䥰ⵌ7JFX笪갤♳꬗ ˙

    笪갤♳佖Ⰹ㺂⛳剚佖隶须俲
  40. 3FBDU+4 ˙ $PNQPOFOU僽♧ⴗ涸呍䗱 ˙ 须俲䙦랃崩僽⡹㹻涸✲䞕 ˙ $PEF銴䙦랃㻨僽⡹㹻涸✲䞕デ鏰䧮䙦랃3FOEFS 鸏⦐$PNQPOFOU㽠㥪 ˙ $MBTTCBTFE001PO8FC'SPOUFOE

    ˙ 鸏♶僽荈歋鮿넓
  41. 7VFKT ˙ 㛇劥♳⛳僽.7$ ˙ $PNQPOFOU XBZCJOEJOH ˙ 嫲"OHVMBS+4刿剤䔞䚍 ˙ XBZCJOEJOH㻜⨞饱⢵⛳♶ꨈ

    ˙ 嫲3FBDU+4刿鰋䊫 ˙ 7VFKTꟚ㨥〳⟃欽+49ㄤSFOEFSGVODUJPO
  42. 㸻來䨞昰㉻

  43. HJUIVCDPNJOOEZWVFTBNQMFT

  44. )FMMP 8PSME <div id="app"> <h1>{{message}}</h1> </div> <script src="vue.js"></script> <script> new

    Vue({ el: '#app', data: { message: 'Hello, World' } }) </script>
  45. 50%0-JTU <div id="app"> <ul v-if="todo.length > 0"> <li v-for="(item, index)

    in todo"> {{item}} <button @click="del(index)">X</button> </li> </ul> <p v-else>You dont have any TODO!</p> <div> <input type="text" v-model="to_add"> <button @click="add(to_add)">Add</button> </div> </div>
  46. 50%0-JTU new Vue({ el: '#app', data: { todo: [ 'Vue.js',

    'Hack the world' ], to_add: '' }, methods: { add: function (item) { this.todo.push(item) }, del: function (idx) { this.todo.splice(idx, 1) } } })
  47. 'JMUFS <div id="app"> {{ email | censor }} </div> <script>

    Vue.filter('censor', function (val ){ var l = (val.length / 3)|0 return (val.substr(0, l) + val.substr(l, l).replace(/./g, '*') + val.substr(l*2)) }) new Vue({ el: '#app', data: { email: 'inndy.tw@gmail.com' } }) </script>
  48. 哭⟝庪厪 ˙ CVUUPOWJGVTFSQFSNBENJO
 荈旙
 CVUUPO ˙ EJWWTIPXVTFS
 BISFGMPHJO涬ⰅB
 EJW

  49. 8FCQBDL ˙ ⵹畮䩧⺫䊨Ⱘ ˙ 䖰⡹窍涸匌銯荈⹛鍑區剤ㆭ❉⣜飅 ˙ ♶ず涸墂呪❜窍♶ず涸MPBEFS贖椚WVFMPBEFS  DTTMPBEFS IUNMMPBEFS

     ˙ 鿈䩧⺫䧭♧⦐KT墂呪䧴♶ず涸꣡⸈须彂墂呪
  50. WVFDMJ莅XFCQBDL ˙ ♧⦐WVF墂呪㽠僽♧⦐DPNQPOFOU ˙ UFNQMBUF TUZMF TDSJQU ˙ 剓䖕❜窍XFCQBDL䩧⺫ ˙

    WVFMPBEFS酭꬗欽✫♧❉VOEPDVNFOU"1*䩞㸤 䧭9%
  51. WVFDMJ莅XFCQBDL ˙ 㸞酤 ˙ OQNJOTUBMMHWVFDMJ ˙ ZBSOHMPCBMBEEWVFDMJ ˙ 䒊用㼠呪 ˙

    WVFJOJUXFCQBDLNZWVFBQQ
  52. WVFDMJ莅XFCQBDL inndy ~$ vue init webpack my-vue-app This will install

    Vue 2.x version of template. For Vue 1.x use: vue init webpack#1.0 my-vue-app ? Project name my-vue-app ? Project description A Vue.js project ? Author Inndy <inndy.tw@gmail.com> ? Vue build standalone ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Setup unit tests with Karma + Mocha? No ? Setup e2e tests with Nightwatch? No
  53. WVFDMJ莅XFCQBDL vue-cli · Generated "my-vue-app". To get started: cd my-vue-app

    npm install npm run dev Documentation can be found at 
 https://vuejs-templates.github.io/webpack
  54. WVFDMJ莅XFCQBDL inndy ~$ cd my-vue-app/ inndy my-vue-app$ yarn yarn install

    v0.15.1 info No lockfile found. [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... warning Incorrect peer dependency "eslint-plugin- promise@>=3.3.0". [4/4] Building fresh packages... success Saved lockfile. ✨ Done in 24.25s. inndy my-vue-app$
  55. WVFDMJ莅XFCQBDL ZBSO鼩♶㣖琽22 駵♧妄酤♶饱⢵⡹剤尝剤酤Ⰽ妄

  56. WVFDMJ莅XFCQBDL " Press ? for help | 1 import Vue

    from 'vue' | 2 import App from './App' .. (up a dir) | 3 </inndy/my-vue-app/ | 4 /* eslint-disable no-new */ ▸ build/ | 5 new Vue({ ▸ config/ | 6 el: '#app', ▾ src/ | 7 template: '<App/>', ▸ assets/ | 8 components: { App } ▾ components/ | 9 }) Hello.vue |~ App.vue |~ main.js |~ ▸ static/ |~ index.html |~ package.json |~ README.md |~ yarn.lock |~ ~ |~ ~ |~ ~ |~ ~ |~ ~ |~ <sers/inndy/my-vue-app src/main.js 1,1 獊蟂 "src/main.js" 9L, 146C
  57. WVFDMJ莅XFCQBDL inndy my-vue-app$ yarn dev yarn dev v0.15.1 $ node

    build/dev-server.js Listening at http://localhost:8080 webpack: wait until bundle finished: /index.html webpack built dbc14f94059ef4462d5f in 3242ms Hash: dbc14f94059ef4462d5f Version: webpack 1.13.3 Time: 3242ms Asset Size Chunks Chunk Names app.js 884 kB 0 [emitted] app index.html 252 bytes [emitted] Child html-webpack-plugin for "index.html": Asset Size Chunks Chunk Names index.html 1.46 MB 0 webpack: bundle is now VALID.
  58. 倞㟞$PNQPOFOU " Press ? for help | 1 <template> |

    2 <p>Hello, {{name}}. This is test component</p> .. (up a dir) | 3 </template> </inndy/my-vue-app/ | 4 ▸ build/ | 5 <script> ▸ config/ | 6 export default { ▾ src/ | 7 props: ['name'] ▸ assets/ | 8 } ▾ components/ | 9 </script> Hello.vue | 10 Test.vue | 11 <style scoped> App.vue | 12 * { color: red; } main.js | 13 </style> ▸ static/ |~ index.html |~ package.json |~ README.md |~ yarn.lock |~ ~ |~ ~ |~ ~ |~ <sers/inndy/my-vue-app src/components/Test.vue 1,1 獊蟂 "src/components/Test.vue" 13L, 172C
  59. 倞㟞$PNQPOFOU " Press ? for help | 1 <template> |

    2 <div id="app"> .. (up a dir) | 3 <img src="./assets/logo.png"> </inndy/my-vue-app/ | 4 <hello></hello> ▸ build/ | 5 <test name="Vue.js"></test> ▸ config/ | 6 </div> ▾ src/ | 7 </template> ▸ assets/ | 8 ▾ components/ | 9 <script> Hello.vue | 10 import Hello from './components/Hello' Test.vue | 11 import Test from './components/Test' App.vue | 12 main.js | 13 export default { ▸ static/ | 14 name: 'app', index.html | 15 components: { package.json | 16 Hello, Test README.md | 17 } yarn.lock | 18 } ~ | 19 </script> ~ | 20 ~ | 21 <style> <sers/inndy/my-vue-app src/App.vue 1,1 殸ᒒ "src/App.vue" 30L, 521C
  60. ♧럊㼭䊴殯 24 export default { 25 name: 'hello', 26 data

    () { 27 return { 28 msg: 'Welcome to Your Vue.js App' 29 } 30 } 31 }