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 1873c7e

Browse files
committed
more components
1 parent 0a3ebeb commit 1873c7e

File tree

16 files changed

+228
-7
lines changed

16 files changed

+228
-7
lines changed

‎Basics/Basic-Structure/2.2.B/src/App.vue

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<template>
22
<!-- template for Vue to be rendered -->
3+
<!-- a Vue file is just an extension of a component -->
4+
<!-- represents the template property in the Vue.component() function -->
35
<div id="app">
46
<img src="./assets/logo.png">
57
<h1>{{ msg }}</h1>
@@ -22,9 +24,12 @@
2224

2325
<script>
2426
// script logic
27+
28+
// exporting an object so we can access data from this component
29+
// represents the second param in the original Vue.component() function
2530
export default {
26-
name: 'app',
27-
data () {
31+
name: 'app',// name of the component
32+
data () {// same as data: function()
2833
return {
2934
msg: 'Welcome to Your Vue.js App'
3035
}
@@ -33,7 +38,7 @@ export default {
3338
</script>
3439

3540
<style>
36-
// style to be applied to all pages (since it's not scoped)
41+
/* style to be applied to all pages (since it's not scoped)*/
3742
#app {
3843
font-family: 'Avenir', Helvetica, Arial, sans-serif;
3944
-webkit-font-smoothing: antialiased;
Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
// entry point for webpack.config.js
2+
23
import Vue from 'vue'
3-
import App from './App.vue'
4+
import App from './App.vue'// import is an ES6 feature but we can use it because Webpack bundles ES6 code and allows all browsers to read it
45

5-
new Vue({
6-
el: '#app', // connects the HTML to the Vue instance
6+
new Vue({// creating new Vue instance
7+
el: '#app', // connects the HTML to the Vue instance
78
render: h => h(App) // short for createElement(App)
8-
// createElement() renders the code from App.vue
9+
// takes our root component (App) and renders it to the el in the index.html file (the <div>)
910
})

‎Components/Intermediate/3.2.A/info.txt

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
This project: 3.2.A
2+
Refers to Chapter 3: Components
3+
Section 2: Intermediate
4+
Example A: Nesting Components
5+
6+
Description: How to register components locally and globally as well as how to nest them in other components.

‎Components/Intermediate/contents.txt

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
Contents:
2+
3+
3.2.A - Nesting Components

‎Components/Intro/3.1.C/.babelrc

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"presets": [
3+
["env", { "modules": false }],
4+
"stage-3"
5+
]
6+
}

‎Components/Intro/3.1.C/.editorconfig

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true

‎Components/Intro/3.1.C/.gitignore

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.DS_Store
2+
node_modules/
3+
dist/
4+
npm-debug.log
5+
yarn-error.log
6+
7+
# Editor directories and files
8+
.idea
9+
*.suo
10+
*.ntvs*
11+
*.njsproj
12+
*.sln

‎Components/Intro/3.1.C/README.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# webpack-simple
2+
3+
> A Vue.js project
4+
5+
## Build Setup
6+
7+
``` bash
8+
# install dependencies
9+
npm install
10+
11+
# serve with hot reload at localhost:8080
12+
npm run dev
13+
14+
# build for production with minification
15+
npm run build
16+
```
17+
18+
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).

‎Components/Intro/3.1.C/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>webpack-simple</title>
6+
</head>
7+
<body>
8+
<div id="app"></div>
9+
<script src="/dist/build.js"></script>
10+
</body>
11+
</html>

‎Components/Intro/3.1.C/info.txt

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
This project: 3.1.C
2+
Refers to Chapter 3: Components
3+
Section 1: Intro
4+
Example C: Components with .Vue files
5+
6+
Description: We start to "component"ize our project by separating components into .vue files. We use the webpack-simple template.

0 commit comments

Comments
(0)

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