Vim and Vuejs

"EWFOUVSF7 *OOEZBU/5604$

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

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

WJNOPUFTUYU

䭾♴JꟚ㨥䩧㶶

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

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

䩛䭸⨴䐁乽 WJNUVUPSFO

YEEPPQTFTD

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

V 䗂⾲

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

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

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

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

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

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

⥜佖乽⡲ ˙ EⵅꤑYⵅꤑ♧⦐㶶 ˙ D⥜佖T⥜佖♧⦐㶶 ˙ V䗂⾲?Sꅾ⨞ ˙ :ZZ醳醢♧遤Q顦♳醳醢䧴ⵅꤑ涸俒㶶  1ずQ⡎僽顦㖈麉垦⛓⵹

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

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

俒㶶暟⟝ ⹛⡲ 5FYU0CKFDU IFMQUFYUPCKFDU

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

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

俒㶶䵃㼦 ˙ XPSEUPTFBSDI ˙ TFBSDI CBDLXBSE ˙ O /
˙ TFUIMTFBSDI ˙ OPI

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

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

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

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

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

來箻䧮䟝隶䘰

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

6TF7JN -JLFBCPTT

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

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

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

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

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

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

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

㸻來䨞昰㉻

HJUIVCDPNJOOEZWVFTBNQMFT

)FMMP 8PSME <div id="app"> <h1>{{message}}</h1> </div> <script src="vue.js"></script> <script> new
Vue({ el: '#app', data: { message: 'Hello, World' } }) </script>

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>

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

'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>

哭⟝庪厪 ˙ CVUUPOWJGVTFSQFSNBENJO  荈旙  CVUUPO ˙ EJWWTIPXVTFS  BISFGMPHJO涬ⰅB  EJW

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

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

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

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

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

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$

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

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

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.

倞㟞$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

倞㟞$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

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

Vim and Vuejs

Vim and Vuejs

More Decks by Inndy

Other Decks in Technology

Featured

Transcript