Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 6ffcaee

Browse files
tweaks
1 parent 2a80eff commit 6ffcaee

File tree

5 files changed

+21
-19
lines changed

5 files changed

+21
-19
lines changed

‎source/guide/composition.md‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,30 @@ order: 10
55

66
## Registering a Component
77

8-
Vue.js allows you to treat registered ViewModel constructors as reusable components that is conceptually similar to [Web Components](http://www.w3.org/TR/components-intro/), without requiring any polyfills. To register a component, use the global `Vue.component()` method:
8+
Vue.js allows you to treat registered ViewModel constructors as reusable components that is conceptually similar to [Web Components](http://www.w3.org/TR/components-intro/), without requiring any polyfills. To register a component, first create a subclass constructor of Vue using `Vue.extend()`, then use the global `Vue.component()` method to register that constructor:
99

1010
``` js
11+
// Extend Vue to get a reusable constructor
1112
var MyComponent = Vue.extend({
1213
template: 'A custom component!'
1314
})
15+
// Register the constructor with id: my-component
1416
Vue.component('my-component', MyComponent)
1517
```
1618

1719
To make things easier, you can also directly pass in the option object instead of an actual constructor:
1820

1921
``` js
22+
// Implicitly call Vue.extend, then register the returned constructor.
23+
// Use this syntax when you don't need to programatically
24+
// instantiate your component.
25+
// Note: this method returns Vue, not the registered constructor.
2026
Vue.component('my-component', {
2127
template: 'A custom component!'
2228
})
2329
```
2430

25-
Then you can use it in a parent ViewModel's template:
31+
Then you can use it in a parent ViewModel's template (make sure the component is registered **before** you instantiate your top-level ViewModel):
2632

2733
``` html
2834
<div v-component="my-component"></div>

‎themes/vue/layout/layout.ejs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="utf-8">
66
<meta name="description" content="Vue.js - Intuitive, Fast and Composable MVVM for building interactive interfaces.">
77
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
8-
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Lato' rel='stylesheet' type='text/css'>
8+
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Lato|Inconsolata' rel='stylesheet' type='text/css'>
99
<link rel="icon" href="/images/logo.png" type="image/x-icon">
1010
<script>
1111
window.PAGE_TYPE = "<%- page.type %>"

‎themes/vue/source/css/_common.styl‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@ h1, h2, h3, h4, strong
2222
code, pre
2323
font-family $code-font
2424
font-size $code-font-size
25-
background-color #f9f9f9
25+
background-color $codebg
26+
-webkit-font-smoothing initial
27+
-moz-osx-font-smoothing initial
2628

2729
code
2830
color #525252
@@ -55,10 +57,10 @@ a.button
5557
overflow-x auto
5658
position relative
5759
padding 0
58-
background-color #f9f9f9
60+
background-color $codebg
5961
padding .8em .8em .4em
60-
border-radius 2px
6162
box-shadow 0 1px 1px rgba(0,0,0,0.125)
63+
line-height 1.1em
6264
table, tr, td
6365
width 100%
6466
border-collapse collapse
@@ -69,14 +71,9 @@ a.button
6971
margin 0
7072
.gutter
7173
width 1.5em
72-
pre
73-
border-top-left-radius $radius
74-
border-bottom-left-radius $radius
7574
.code
7675
pre
7776
padding-left .5em
78-
border-top-right-radius $radius
79-
border-bottom-right-radius $radius
8077
&.html, &.js, &.bash, &.css
8178
.code:after
8279
position absolute
@@ -88,8 +85,6 @@ a.button
8885
padding 5px 10px 0
8986
line-height 15px
9087
height 15px
91-
border-top-right-radius $radius
92-
border-top-left-radius $radius
9388
font-weight 600
9489
&.html.code:after
9590
content 'HTML'

‎themes/vue/source/css/_settings.styl‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
// font faces
22
$body-font = 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif
33
$logo-font = 'Lato', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif
4-
$code-font = Monaco, courier, monospace
4+
$code-font = 'Inconsolata', Monaco, courier, monospace
55

66
// font sizes
77
$body-font-size = 16px
8-
$code-font-size = .75em
8+
$code-font-size = .9em
99

1010
// colors
1111
$dark = #2c3e50
1212
$medium = #34495e
1313
$light = #7f8c8d
1414
$green = #42b983
15-
$border = #ddd
15+
$border = #dddddd
16+
$codebg = #f9f9f9
1617

1718
$radius = 0px

‎themes/vue/source/css/_syntax.styl‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ pre
2828
.symbol.string,
2929
.value,
3030
.regexp
31-
color: #BF79DB
31+
color: $green
3232
.title
3333
color: #A6E22E
3434
.tag.value,
@@ -55,7 +55,7 @@ pre
5555
.apache.cbracket,
5656
.tex.command,
5757
.prompt
58-
color: #00b22f
58+
color: $green
5959
.comment,
6060
.java.annotation,
6161
.python.decorator,
@@ -66,7 +66,7 @@ pre
6666
.shebang,
6767
.apache.sqbracket,
6868
.tex.formula
69-
color: #999
69+
color: #b3b3b3
7070
.coffeescript.javascript,
7171
.javascript.xml,
7272
.tex.formula,

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /