Skip to content

Commit dc884df

Browse files
author
User
committed
updated font color
1 parent 521900a commit dc884df

File tree

7 files changed

+34
-28
lines changed

7 files changed

+34
-28
lines changed

‎apis/builtincomp.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ const TRANSITION = {
7979
8080
${colorComment(`<!-- simple element -->`)}
8181
${chalk.blue(`<transition>
82-
<div v-if=${chalk.green(`"ok"`)}>${chalk.black(`toggled content`)}</div>
82+
<div v-if=${chalk.green(`"ok"`)}>${chalk.cyan(`toggled content`)}</div>
8383
</transition>
8484
8585
${colorComment(`<!-- dynamic component -->`)}
@@ -90,7 +90,7 @@ const TRANSITION = {
9090
${colorComment(`<!-- event hooking -->`)}
9191
<div id=${chalk.green(`"transition-demo"`)}>
9292
<transition @after-enter=${chalk.green(`"transitionComplete"`)}>
93-
<div v-show=${chalk.green(`"ok"`)}>${chalk.black(`toggled content`)}</div>
93+
<div v-show=${chalk.green(`"ok"`)}>${chalk.cyan(`toggled content`)}</div>
9494
</transition>
9595
</div>`)}
9696
@@ -135,7 +135,7 @@ const TRANSITION_GROUP = {
135135
136136
${chalk.blue(`<transition-group tag=${chalk.green(`"ul"`)} name=${chalk.green(`"slide"`)}>
137137
<li v-for=${chalk.green(`"item in items"`)} :key=${chalk.green(`"item.id"`)}>
138-
${chalk.black(`{{ item.text }}`)}
138+
${chalk.cyan(`{{ item.text }}`)}
139139
</li>
140140
</transition-group>`)}
141141
`

‎apis/directives.js

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ const V_TEXT = {
1515
details: `Updates the element’s ${colorArgs(`textContent`)}. If you need to update
1616
the part of ${colorArgs(`textContent`)}, you should use ${colorArgs(`{{ Mustache }}`)} interpolations.`,
1717
example: `
18-
${chalk.blue(`<span v-text=${chalk.green(`"msg"`)}></span>
18+
${chalk.blue(`<span v-text=${chalk.green(`"msg"`)}></span>`)}
1919
${colorComment(`<!-- same as -->`)}
20-
<span>${chalk.black(`{{msg}}`)}</span>`)}
20+
${chalk.blue(`<span>${chalk.cyan(`{{msg}}`)}</span>`)}
2121
`
2222
}
2323
const V_HTML = {
@@ -65,10 +65,10 @@ const V_ELSE = {
6565
restriction: `previous sibling element must have ${colorArgs('v-if')} or ${colorArgs(`v-else-if`)}`,
6666
usage: `Denote the “else block” for ${colorArgs(`v-if`)} or a ${colorArgs(`v-if`)}/${colorArgs(`v-else-if`)} chain.
6767
${chalk.blue(`<div v-if=${chalk.green(`"Math.random() > 0.5"`)}>
68-
${chalk.black(`Now you see me`)}
68+
${chalk.cyan(`Now you see me`)}
6969
</div>
7070
<div v-else>
71-
${chalk.black(`Now you don't`)}
71+
${chalk.cyan(`Now you don't`)}
7272
</div>`)}`
7373
}
7474
const V_ELSE_IF = {
@@ -78,16 +78,16 @@ const V_ELSE_IF = {
7878
restriction: `previous sibling element must have ${colorArgs('v-if')} or ${colorArgs(`v-else-if`)}`,
7979
usage: `Denote the “else if block” for ${colorArgs(`v-if`)}. Can be chained.
8080
${chalk.blue(`<div v-if=${chalk.green(`"type === 'A'"`)}>
81-
${chalk.black(`A`)}
81+
${chalk.cyan(`A`)}
8282
</div>
8383
<div v-else-if=${chalk.green(`"type === 'B'"`)}>
84-
${chalk.black(`B`)}
84+
${chalk.cyan(`B`)}
8585
</div>
8686
<div v-else-if=${chalk.green(`"type === 'C'"`)}>
87-
${chalk.black(`C`)}
87+
${chalk.cyan(`C`)}
8888
</div>
8989
<div v-else>
90-
${chalk.black(`Not A/B/C`)}
90+
${chalk.cyan(`Not A/B/C`)}
9191
</div>`)}
9292
`
9393
}
@@ -101,7 +101,7 @@ const V_FOR = {
101101
for the current element being iterated on:
102102
103103
${chalk.blue(`<div v-for=${chalk.green(`"item in items"`)}>
104-
${chalk.black(`{{ item.text }}`)}
104+
${chalk.cyan(`{{ item.text }}`)}
105105
</div>`)}
106106
107107
Alternatively, you can also specify an alias for the index
@@ -116,7 +116,7 @@ const V_FOR = {
116116
provide an ordering hint with the ${colorArgs(`key`)} special attribute:
117117
118118
${chalk.blue(`<div v-for=${chalk.green(`"item in items" :key="item.id"`)}>
119-
${chalk.black(`{{ item.text }}`)}
119+
${chalk.cyan(`{{ item.text }}`)}
120120
</div>`)}
121121
122122
When used together with v-if, v-for has a higher priority than v-if.
@@ -276,7 +276,7 @@ const V_PRE = {
276276
You can use this for displaying raw mustache tags. Skipping large
277277
numbers of nodes with no directives on them can also speed up compilation.`,
278278
example: `
279-
${chalk.blue(`<span v-pre>${chalk.black(`{{ this will not be compiled }}`)}</span>`)}
279+
${chalk.blue(`<span v-pre>${chalk.cyan(`{{ this will not be compiled }}`)}</span>`)}
280280
`
281281
}
282282
const V_CLOAK = {
@@ -293,7 +293,7 @@ const V_CLOAK = {
293293
}
294294
295295
${chalk.blue(`<div v-cloak>
296-
${chalk.black(`{{ message }}`)}
296+
${chalk.cyan(`{{ message }}`)}
297297
</div>`)}
298298
299299
The ${colorArgs(`<div>`)} will not be visible until the compilation is done.
@@ -310,17 +310,17 @@ const V_ONCE = {
310310
This can be used to optimize update performance.
311311
312312
${colorComment(`<!-- single element -->`)}
313-
${chalk.blue(`<span v-once>${chalk.black(`This will never change: {{msg}}`)}</span>
313+
${chalk.blue(`<span v-once>${chalk.cyan(`This will never change: {{msg}}`)}</span>
314314
${colorComment(`<!-- the element have children -->`)}
315315
<div v-once>
316-
<h1>${chalk.black(`comment`)}</h1>
317-
<p>${chalk.black(`{{msg}}`)}</p>
316+
<h1>${chalk.cyan(`comment`)}</h1>
317+
<p>${chalk.cyan(`{{msg}}`)}</p>
318318
</div>
319319
${colorComment(`<!-- component -->`)}
320320
<my-component v-once :comment=${chalk.green('"msg"')}></my-component>
321321
${colorComment(`<!-- v-for directive -->`)}
322322
<ul>
323-
<li v-for=${chalk.green(`"i in list"`)} v-once>${chalk.black(`{{i}}`)}</li>
323+
<li v-for=${chalk.green(`"i in list"`)} v-once>${chalk.cyan(`{{i}}`)}</li>
324324
</ul>`)}`
325325
}
326326

‎apis/optionsdata.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,16 @@ const DATA = {
1818
it is not recommended to observe objects with its own stateful behavior.Once observed, you
1919
can no longer add reactive properties to the root data object. It is therefore recommended
2020
to declare all root-level reactive properties upfront, before creating the instance. After the
21-
instance is created, the original data object can be accessed as ${colorArgs('vm.$data')}. The Vue instance
22-
also proxies all the properties found on the data object, so ${colorArgs('vm.a')} will be equivalent to
23-
${colorArgs('vm.$data.a')}. Properties that start with ${colorArgs('_')} or ${colorArgs('$')} will ${chalk.bold('not')} be proxied on the Vue instance because they may conflict
24-
with Vue’s internal properties and API methods. You will have to access them as ${colorArgs('vm.$data._property')}.
21+
instance is created, the original data object can be accessed as ${colorArgs('vm.$data')}.
22+
23+
The Vue instance also proxies all the properties found on the data object, so ${colorArgs('vm.a')} will be equivalent to
24+
${colorArgs('vm.$data.a')}. Properties that start with ${colorArgs('_')} or ${colorArgs('$')} will ${chalk.bold('not')}
25+
be proxied on the Vue instance because they may conflict with Vue’s internal properties and API methods.
26+
You will have to access them as ${colorArgs('vm.$data._property')}.
27+
2528
When defining a ${chalk.bold('component')}, ${colorArgs('data')} must be declared as a function that returns the initial data object,
2629
because there will be many instances created using the same definition.
30+
2731
If we still use a plain object for ${colorArgs('data')}, that same object will be ${chalk.bold('shared by reference')}
2832
across all instances created! By providing a ${colorArgs('data')} function, every time a new instance is created, we can simply
2933
call it to return a fresh copy of the initial data. If required, a deep clone of the original object can be

‎apis/specialattributes.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const KEY = {
2121
The most common use case is combined with ${colorArgs(`v-for`)}:
2222
2323
${chalk.blue(`<ul>
24-
<li v-for=${chalk.green(`"item in items" :key="item.id"`)}>${chalk.black(`...`)}</li>
24+
<li v-for=${chalk.green(`"item in items" :key="item.id"`)}>${chalk.cyan(`...`)}</li>
2525
</ul>`)}
2626
2727
It can also be used to force replacement of an element/component instead of reusing it.
@@ -32,7 +32,7 @@ const KEY = {
3232
`,
3333
example:`
3434
${chalk.blue(`<transition>
35-
<span :key=${chalk.green(`"text"`)}>${chalk.black(`{{ text }}`)}</span>
35+
<span :key=${chalk.green(`"text"`)}>${chalk.cyan(`{{ text }}`)}</span>
3636
</transition>`)}
3737
3838
When ${colorArgs(`text`)} changes, the ${colorArgs(`<span>`)} will always be replaced instead of patched,
@@ -49,7 +49,7 @@ const REF = {
4949
if used on a child component, the reference will be component instance:
5050
5151
${colorComment(`<!-- vm.$refs.p will be the DOM node -->`)}
52-
${chalk.blue(`<p ref=${chalk.green(`"p"`)}>${chalk.black(`hello`)}</p>
52+
${chalk.blue(`<p ref=${chalk.green(`"p"`)}>${chalk.cyan(`hello`)}</p>
5353
${colorComment(`<!-- vm.$refs.child will be the child comp instance -->`)}
5454
<child-comp ref=${chalk.green(`"child"`)}></child-comp>`)}
5555

‎node_modules/figlet/package.json

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"vorpal": "^1.12.0"
2222
},
2323
"devDependencies": {
24-
"chalk": "^2.0.1"
24+
"chalk": "^2.0.1",
25+
"figlet": "^1.2.0"
2526
}
2627
}

‎vue-help.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const d = api.Directives
2323
const sa = api.SpecialAttributes
2424
const bc = api.BuiltInComponents
2525

26-
// brief about intro screen
26+
2727
figlet('vue - help', 'Standard', (err, data) => {
2828
if(err){
2929
console.log(err)

0 commit comments

Comments
 (0)