Tweet
Tweet

Slide 1

Slide 1 text

"EWFOUVSF7 *OOEZBU/5604$

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

WJNOPUFTUYU

Slide 6

Slide 6 text

䭾♴JꟚ㨥䩧㶶

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

䩛䭸⨴䐁乽 WJNUVUPSFO

Slide 10

Slide 10 text

YEEPPQTFTD

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

V 䗂⾲ 

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

俒㶶暟⟝ ⹛⡲ 5FYU0CKFDU IFMQUFYUPCKFDU

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

來箻䧮䟝隶䘰

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

6TF7JN -JLFBCPTT

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

㸻來䨞昰㉻

Slide 43

Slide 43 text

HJUIVCDPNJOOEZWVFTBNQMFT

Slide 44

Slide 44 text

)FMMP 8PSME

{{message}}

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

Slide 45

Slide 45 text

50%0-JTU
  • {{item}} X

You dont have any TODO!

Add

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

'JMUFS
{{ email | censor }}
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: '[email protected]' } })

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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$

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

WVFDMJ莅XFCQBDL " Press ? for help | 1 import Vue from 'vue' | 2 import App from './App' .. (up a dir) | 3 ', ▸ assets/ | 8 components: { App } ▾ components/ | 9 }) Hello.vue |~ App.vue |~ main.js |~ ▸ static/ |~ index.html |~ package.json |~ README.md |~ yarn.lock |~ ~ |~ ~ |~ ~ |~ ~ |~ ~ |~

Slide 57

Slide 57 text

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.

Slide 58

Slide 58 text

倞㟞$PNQPOFOU " Press ? for help | 1 | 2

Hello, {{name}}. This is test component

.. (up a dir) | 3 ▸ config/ | 6 export default { ▾ src/ | 7 props: ['name'] ▸ assets/ | 8 } ▾ components/ | 9 Hello.vue | 10 Test.vue | 11 App.vue | 12 * { color: red; } main.js | 13 ▸ static/ |~ index.html |~ package.json |~ README.md |~ yarn.lock |~ ~ |~ ~ |~ ~ |~

Slide 59

Slide 59 text

倞㟞$PNQPOFOU " Press ? for help | 1 | 2
.. (up a dir) | 3 ▸ build/ | 5 ▸ config/ | 6
▾ src/ | 7 ▸ assets/ | 8 ▾ components/ | 9 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 ~ | 20 ~ | 21 <sers/inndy/my-vue-app src/App.vue 1,1 殸ᒒ "src/App.vue" 30L, 521C

Slide 60

Slide 60 text

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