Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vim and Vuejs

Inndy
October 28, 2016

Vim and Vuejs

2016/10/28 at NTUOSC

Inndy

October 28, 2016
Tweet

More Decks by Inndy

Other Decks in Technology

Transcript

  1. "EWFOUVSF7
    *OOEZBU/5604$

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. 䭾♴JꟚ㨥䩧㶶

    View full-size slide

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

    View full-size slide

  6. ꨆꟚ7JN涸♧涰珏倰岁
    ˙ ?$?$R&OUFS
    ˙ ?$?$;2
    ˙ ?$?$?;LJMM
    ˙ Ꟛ♧⦐倞涸5FSNJOBMQLJMMWJN
    ˙
    鏽?9➞$USM9

    View full-size slide

  7. 䩛䭸⨴䐁乽
    WJNUVUPSFO

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. ♲⦐垸䒭
    ˙ /PSNBM.PEF
    ˙ *OTFSU.PEF
    ˙ 7JTVBM.PEF鼇《俒㶶

    View full-size slide

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

    View full-size slide

  12. /PSNBM.PEF
    ˙ ♶腋䩧㶶
    ˙ 〳⟃獵⹛麉垦
    ˙ 鱲䳖ⵌ*OTFSU.PEFJ P 0 B " T 4 D $
    ˙ 鱲䳖ⵌ7JTVBM.PEFW 7 ?W
    ˙ ) + , -瘞倴̒ ̕ ̓ ̔렽⺑欽IKLM

    View full-size slide

  13. *OTFSU.PEF
    ˙ 〳⟃䩧㶶
    ˙ ⭽ꆀ♶銴㖈鸏䧴ⵅꤑ俒㶶獵⹛
    ˙ 㖈/PSNBM.PEF獵⹛麉垦

    View full-size slide

  14. 7JTVBM.PEF
    ˙ 兜鸒鼇《㼭W
    ˙ 㽠⫹⡹㖈⟤⡦俒㶶管鱀㐼鼇《俒㶶
    ˙ 遤鼇《㣐7
    ˙ ♧妄鼇♧遤
    ˙ ⼦㝆鼇《?7
    ˙ ♧妄鼇♧⦐瀄䕎

    View full-size slide

  15. ⥜佖乽⡲
    ˙ EⵅꤑYⵅꤑ♧⦐㶶
    ˙ D⥜佖T⥜佖♧⦐㶶
    ˙ V䗂⾲?Sꅾ⨞
    ˙ :ZZ醳醢♧遤Q顦♳醳醢䧴ⵅꤑ涸俒㶶

    1ずQ⡎僽顦㖈麉垦⛓⵹

    View full-size slide

  16. 鴾鸠獵⹛
    ˙ X8騥♧⦐XPSE803%
    ˙ C#겳⡂X8⡎僽䖃⵹騥
    ˙ ?E ?V1BHF%PXO 1BHF6Q
    ˙ G '䖃䖕⵹锅ⵌ厥⦐㶶
    ˙ U 5騈G'䖎⫹⡎僽⨢㖈⵹♧⦐㶶
    ˙ 獵⹛ㄐ⟂⵹〳⟃⸈♧⦐侸㶶⦔鸠獵⹛

    View full-size slide

  17. 鴾鸠獵⹛
    ˙ HH騥ⵌ痧♧遤
    ˙ (騥ⵌ剓䖕♧遤
    ˙ HH锅ⵌ痧遤
    ˙ \䖃⵹♧⦐媯衆
    ˙ ^䖃䖕♧⦐媯衆

    View full-size slide

  18. 俒㶶暟⟝
    ⹛⡲5FYU0CKFDU
    IFMQUFYUPCKFDU

    View full-size slide

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

    View full-size slide

  20. 俒㶶暟⟝
    ˙ Ⰽ珏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

    View full-size slide

  21. 俒㶶䵃㼦
    ˙ XPSEUPTFBSDI
    ˙ TFBSDICBDLXBSE
    ˙ O /
    ˙ TFUIMTFBSDI
    ˙ OPI

    View full-size slide

  22. 7JN䭸⟂
    ˙ T=H
    ˙ T=H
    ˙ 鼇《俒㶶搭䖕ⱄ䭾TBYYY
    ˙ TFUGUKBWBTDSJQU

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. 來箻䧮䟝隶䘰

    View full-size slide

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

    View full-size slide

  29. 6TF7JN -JLFBCPTT

    View full-size slide

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

    View full-size slide

  31. !
    ⯝顑耫僈䧮♶僽⵹畮䊨玑䌌

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. "OHVMBS+4
    ˙ .PEFM7JFX$POUSPMMFS卺圓
    ˙ 䧮⦛♶鎣锸稣眏㹁纏ꅾ럊僽耷顑ⴕꨆ
    ˙ ꧱ぢ竁㹁XBZCJOEJOH
    ˙ 佖隶须俲㽠湬䱺⿾䥰ⵌ7JFX笪갤♳꬗
    ˙ 笪갤♳佖Ⰹ㺂⛳剚佖隶须俲

    View full-size slide

  35. 3FBDU+4
    ˙ $PNQPOFOU僽♧ⴗ涸呍䗱
    ˙ 须俲䙦랃崩僽⡹㹻涸✲䞕
    ˙ $PEF銴䙦랃㻨僽⡹㹻涸✲䞕デ鏰䧮䙦랃3FOEFS
    鸏⦐$PNQPOFOU㽠㥪
    ˙ $MBTTCBTFE001PO8FC'SPOUFOE
    ˙ 鸏♶僽荈歋鮿넓

    View full-size slide

  36. 7VFKT
    ˙ 㛇劥♳⛳僽.7$
    ˙ $PNQPOFOUXBZCJOEJOH
    ˙ 嫲"OHVMBS+4刿剤䔞䚍
    ˙ XBZCJOEJOH㻜⨞饱⢵⛳♶ꨈ
    ˙ 嫲3FBDU+4刿鰋䊫
    ˙ 7VFKTꟚ㨥〳⟃欽+49ㄤSFOEFSGVODUJPO

    View full-size slide

  37. 㸻來䨞昰㉻

    View full-size slide

  38. HJUIVCDPNJOOEZWVFTBNQMFT

    View full-size slide

  39. )FMMP 8PSME

    {{message}}


    <br/>new Vue({<br/>el: '#app',<br/>data: { message: 'Hello, World' }<br/>})<br/>

    View full-size slide

  40. 50%0-JTU



    {{item}}
    X


    You dont have any TODO!


    Add


    View full-size slide

  41. 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) }
    }
    })

    View full-size slide

  42. 'JMUFS

    {{ email | censor }}

    <br/>Vue.filter('censor', function (val ){<br/>var l = (val.length / 3)|0<br/>return (val.substr(0, l) +<br/>val.substr(l, l).replace(/./g, '*') +<br/>val.substr(l*2))<br/>})<br/>new Vue({<br/>el: '#app',<br/>data: {<br/>email: '[email protected]'<br/>}<br/>})<br/>

    View full-size slide

  43. 哭⟝庪厪
    ˙ CVUUPOWJGVTFSQFSNBENJO

    荈旙

    CVUUPO
    ˙ EJWWTIPXVTFS

    BISFGMPHJO涬ⰅB

    EJW

    View full-size slide

  44. 8FCQBDL
    ˙ ⵹畮䩧⺫䊨Ⱘ
    ˙ 䖰⡹窍涸匌銯荈⹛鍑區剤ㆭ❉⣜飅
    ˙ ♶ず涸墂呪❜窍♶ず涸MPBEFS贖椚WVFMPBEFS
    DTTMPBEFS IUNMMPBEFS 
    ˙ 鿈䩧⺫䧭♧⦐KT墂呪䧴♶ず涸꣡⸈须彂墂呪

    View full-size slide

  45. WVFDMJ莅XFCQBDL
    ˙ ♧⦐WVF墂呪㽠僽♧⦐DPNQPOFOU
    ˙ UFNQMBUFTUZMFTDSJQU
    ˙ 剓䖕❜窍XFCQBDL䩧⺫
    ˙ WVFMPBEFS酭꬗欽✫♧❉VOEPDVNFOU"1*䩞㸤
    䧭9%

    View full-size slide

  46. WVFDMJ莅XFCQBDL
    ˙ 㸞酤
    ˙ OQNJOTUBMMHWVFDMJ
    ˙ ZBSOHMPCBMBEEWVFDMJ
    ˙ 䒊用㼠呪
    ˙ WVFJOJUXFCQBDLNZWVFBQQ

    View full-size slide

  47. 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
    ? 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

    View full-size slide

  48. 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

    View full-size slide

  49. 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$

    View full-size slide

  50. WVFDMJ莅XFCQBDL
    ZBSO鼩♶㣖琽22
    駵♧妄酤♶饱⢵⡹剤尝剤酤Ⰽ妄

    View full-size slide

  51. WVFDMJ莅XFCQBDL
    " Press ? for help | 1 import Vue from 'vue'
    | 2 import App from './App'
    .. (up a dir) | 3
    ▸ build/ | 5 new Vue({
    ▸ config/ | 6 el: '#app',
    ▾ src/ | 7 template: '',
    ▸ assets/ | 8 components: { App }
    ▾ components/ | 9 })
    Hello.vue |~
    App.vue |~
    main.js |~
    ▸ static/ |~
    index.html |~
    package.json |~
    README.md |~
    yarn.lock |~
    ~ |~
    ~ |~
    ~ |~
    ~ |~
    ~ |~
    "src/main.js" 9L, 146C

    View full-size slide

  52. 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.

    View full-size slide

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

    View full-size slide

  54. 倞㟞$PNQPOFOU
    " Press ? for help | 1
    | 2
    .. (up a dir) | 3

    ▸ build/ | 5
    ▸ config/ | 6
    ▾ src/ | 7
    ▸ assets/ | 8
    ▾ components/ | 9 <br/>Hello.vue | 10 import Hello from './components/Hello'<br/>Test.vue | 11 import Test from './components/Test'<br/>App.vue | 12<br/>main.js | 13 export default {<br/>▸ static/ | 14 name: 'app',<br/>index.html | 15 components: {<br/>package.json | 16 Hello, Test<br/>README.md | 17 }<br/>yarn.lock | 18 }<br/>~ | 19
    ~ | 20
    ~ | 21 <br/><sers/inndy/my-vue-app src/App.vue 1,1 殸ᒒ<br/>"src/App.vue" 30L, 521C<br/>

    View full-size slide

  55. ♧럊㼭䊴殯
    24 export default {
    25 name: 'hello',
    26 data () {
    27 return {
    28 msg: 'Welcome to Your Vue.js App'
    29 }
    30 }
    31 }

    View full-size slide