├── README.md
├── .gitattributes
├── 1-week
    ├── 01
    │   ├── babel.config.js
    │   ├── public
    │   │   ├── favicon.ico
    │   │   └── index.html
    │   ├── src
    │   │   ├── assets
    │   │   │   └── logo.png
    │   │   ├── main.js
    │   │   └── App.vue
    │   ├── .gitignore
    │   ├── README.md
    │   └── package.json
    ├── 02
    │   ├── babel.config.js
    │   ├── public
    │   │   ├── favicon.ico
    │   │   └── index.html
    │   ├── src
    │   │   ├── assets
    │   │   │   └── logo.png
    │   │   ├── main.js
    │   │   └── App.vue
    │   ├── .gitignore
    │   ├── README.md
    │   └── package.json
    ├── 03
    │   ├── babel.config.js
    │   ├── public
    │   │   ├── favicon.ico
    │   │   └── index.html
    │   ├── src
    │   │   ├── assets
    │   │   │   └── logo.png
    │   │   ├── main.js
    │   │   └── App.vue
    │   ├── .gitignore
    │   ├── README.md
    │   └── package.json
    ├── 04
    │   ├── babel.config.js
    │   ├── public
    │   │   ├── favicon.ico
    │   │   └── index.html
    │   ├── src
    │   │   ├── assets
    │   │   │   └── logo.png
    │   │   ├── main.js
    │   │   ├── components
    │   │   │   └── Message.vue
    │   │   └── App.vue
    │   ├── .gitignore
    │   ├── README.md
    │   └── package.json
    └── 05
    │   ├── babel.config.js
    │   ├── public
    │       ├── favicon.ico
    │       └── index.html
    │   ├── src
    │       ├── assets
    │       │   └── logo.png
    │       ├── main.js
    │       ├── App.vue
    │       └── components
    │       │   └── HelloWorld.vue
    │   ├── .gitignore
    │   ├── README.md
    │   └── package.json
└── LICENSE


/README.md:
--------------------------------------------------------------------------------
1 | # learning-vue
2 |  Learning Vue v3
3 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/1-week/01/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/1-week/01/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/asyncfinkd/learning-vue/HEAD/1-week/01/public/favicon.ico


--------------------------------------------------------------------------------
/1-week/01/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/asyncfinkd/learning-vue/HEAD/1-week/01/src/assets/logo.png


--------------------------------------------------------------------------------
/1-week/02/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/1-week/02/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/asyncfinkd/learning-vue/HEAD/1-week/02/public/favicon.ico


--------------------------------------------------------------------------------
/1-week/02/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/asyncfinkd/learning-vue/HEAD/1-week/02/src/assets/logo.png


--------------------------------------------------------------------------------
/1-week/03/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/1-week/03/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/asyncfinkd/learning-vue/HEAD/1-week/03/public/favicon.ico


--------------------------------------------------------------------------------
/1-week/03/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/asyncfinkd/learning-vue/HEAD/1-week/03/src/assets/logo.png


--------------------------------------------------------------------------------
/1-week/04/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/1-week/04/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/asyncfinkd/learning-vue/HEAD/1-week/04/public/favicon.ico


--------------------------------------------------------------------------------
/1-week/04/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/asyncfinkd/learning-vue/HEAD/1-week/04/src/assets/logo.png


--------------------------------------------------------------------------------
/1-week/05/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/1-week/05/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/asyncfinkd/learning-vue/HEAD/1-week/05/public/favicon.ico


--------------------------------------------------------------------------------
/1-week/05/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/asyncfinkd/learning-vue/HEAD/1-week/05/src/assets/logo.png


--------------------------------------------------------------------------------
/1-week/01/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | 
4 | createApp(App).mount('#app')


--------------------------------------------------------------------------------
/1-week/02/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | 
4 | createApp(App).mount('#app')
5 | 


--------------------------------------------------------------------------------
/1-week/03/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | 
4 | createApp(App).mount('#app')
5 | 


--------------------------------------------------------------------------------
/1-week/04/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | 
4 | createApp(App).mount('#app')
5 | 


--------------------------------------------------------------------------------
/1-week/05/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | 
4 | createApp(App).mount('#app')
5 | 


--------------------------------------------------------------------------------
/1-week/04/src/components/Message.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1 v-once>{{ messageText }}</h1>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: "Message",
10 |   props: {
11 |     messageText: String,
12 |   },
13 | };
14 | </script>


--------------------------------------------------------------------------------
/1-week/01/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/1-week/02/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/1-week/03/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/1-week/04/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/1-week/05/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/1-week/01/README.md:
--------------------------------------------------------------------------------
 1 | # 1-week
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/1-week/02/README.md:
--------------------------------------------------------------------------------
 1 | # 02
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/1-week/03/README.md:
--------------------------------------------------------------------------------
 1 | # 03
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/1-week/04/README.md:
--------------------------------------------------------------------------------
 1 | # 04
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/1-week/05/README.md:
--------------------------------------------------------------------------------
 1 | # 05
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/1-week/04/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Message messageText="Hello This is vue new project" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import Message from "./components/Message.vue";
 9 | export default {
10 |   name: "App",
11 |   components: {
12 |     Message,
13 |   },
14 | };
15 | </script>
16 | 
17 | <style>
18 | #app {
19 |   font-family: Avenir, Helvetica, Arial, sans-serif;
20 |   -webkit-font-smoothing: antialiased;
21 |   -moz-osx-font-smoothing: grayscale;
22 |   text-align: center;
23 |   color: #2c3e50;
24 |   margin-top: 60px;
25 | }
26 | </style>
27 | 


--------------------------------------------------------------------------------
/1-week/05/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <img alt="Vue logo" src="./assets/logo.png">
 3 |   <HelloWorld msg="Welcome to Your Vue.js App"/>
 4 | </template>
 5 | 
 6 | <script>
 7 | import HelloWorld from './components/HelloWorld.vue'
 8 | 
 9 | export default {
10 |   name: 'App',
11 |   components: {
12 |     HelloWorld
13 |   }
14 | }
15 | </script>
16 | 
17 | <style>
18 | #app {
19 |   font-family: Avenir, Helvetica, Arial, sans-serif;
20 |   -webkit-font-smoothing: antialiased;
21 |   -moz-osx-font-smoothing: grayscale;
22 |   text-align: center;
23 |   color: #2c3e50;
24 |   margin-top: 60px;
25 | }
26 | </style>
27 | 


--------------------------------------------------------------------------------
/1-week/01/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/1-week/02/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/1-week/03/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/1-week/04/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/1-week/05/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/1-week/01/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "1-week",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "vue": "^3.0.0"
13 |   },
14 |   "devDependencies": {
15 |     "@vue/cli-plugin-babel": "~4.5.0",
16 |     "@vue/cli-plugin-eslint": "~4.5.0",
17 |     "@vue/cli-service": "~4.5.0",
18 |     "@vue/compiler-sfc": "^3.0.0",
19 |     "babel-eslint": "^10.1.0",
20 |     "eslint": "^6.7.2",
21 |     "eslint-plugin-vue": "^7.0.0"
22 |   },
23 |   "eslintConfig": {
24 |     "root": true,
25 |     "env": {
26 |       "node": true
27 |     },
28 |     "extends": [
29 |       "plugin:vue/vue3-essential",
30 |       "eslint:recommended"
31 |     ],
32 |     "parserOptions": {
33 |       "parser": "babel-eslint"
34 |     },
35 |     "rules": {}
36 |   },
37 |   "browserslist": [
38 |     "> 1%",
39 |     "last 2 versions",
40 |     "not dead"
41 |   ]
42 | }
43 | 


--------------------------------------------------------------------------------
/1-week/02/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "02",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "vue": "^3.0.0"
13 |   },
14 |   "devDependencies": {
15 |     "@vue/cli-plugin-babel": "~4.5.0",
16 |     "@vue/cli-plugin-eslint": "~4.5.0",
17 |     "@vue/cli-service": "~4.5.0",
18 |     "@vue/compiler-sfc": "^3.0.0",
19 |     "babel-eslint": "^10.1.0",
20 |     "eslint": "^6.7.2",
21 |     "eslint-plugin-vue": "^7.0.0"
22 |   },
23 |   "eslintConfig": {
24 |     "root": true,
25 |     "env": {
26 |       "node": true
27 |     },
28 |     "extends": [
29 |       "plugin:vue/vue3-essential",
30 |       "eslint:recommended"
31 |     ],
32 |     "parserOptions": {
33 |       "parser": "babel-eslint"
34 |     },
35 |     "rules": {}
36 |   },
37 |   "browserslist": [
38 |     "> 1%",
39 |     "last 2 versions",
40 |     "not dead"
41 |   ]
42 | }
43 | 


--------------------------------------------------------------------------------
/1-week/03/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "03",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "vue": "^3.0.0"
13 |   },
14 |   "devDependencies": {
15 |     "@vue/cli-plugin-babel": "~4.5.0",
16 |     "@vue/cli-plugin-eslint": "~4.5.0",
17 |     "@vue/cli-service": "~4.5.0",
18 |     "@vue/compiler-sfc": "^3.0.0",
19 |     "babel-eslint": "^10.1.0",
20 |     "eslint": "^6.7.2",
21 |     "eslint-plugin-vue": "^7.0.0"
22 |   },
23 |   "eslintConfig": {
24 |     "root": true,
25 |     "env": {
26 |       "node": true
27 |     },
28 |     "extends": [
29 |       "plugin:vue/vue3-essential",
30 |       "eslint:recommended"
31 |     ],
32 |     "parserOptions": {
33 |       "parser": "babel-eslint"
34 |     },
35 |     "rules": {}
36 |   },
37 |   "browserslist": [
38 |     "> 1%",
39 |     "last 2 versions",
40 |     "not dead"
41 |   ]
42 | }
43 | 


--------------------------------------------------------------------------------
/1-week/04/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "04",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "vue": "^3.0.0"
13 |   },
14 |   "devDependencies": {
15 |     "@vue/cli-plugin-babel": "~4.5.0",
16 |     "@vue/cli-plugin-eslint": "~4.5.0",
17 |     "@vue/cli-service": "~4.5.0",
18 |     "@vue/compiler-sfc": "^3.0.0",
19 |     "babel-eslint": "^10.1.0",
20 |     "eslint": "^6.7.2",
21 |     "eslint-plugin-vue": "^7.0.0"
22 |   },
23 |   "eslintConfig": {
24 |     "root": true,
25 |     "env": {
26 |       "node": true
27 |     },
28 |     "extends": [
29 |       "plugin:vue/vue3-essential",
30 |       "eslint:recommended"
31 |     ],
32 |     "parserOptions": {
33 |       "parser": "babel-eslint"
34 |     },
35 |     "rules": {}
36 |   },
37 |   "browserslist": [
38 |     "> 1%",
39 |     "last 2 versions",
40 |     "not dead"
41 |   ]
42 | }
43 | 


--------------------------------------------------------------------------------
/1-week/05/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "05",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "vue": "^3.0.0"
13 |   },
14 |   "devDependencies": {
15 |     "@vue/cli-plugin-babel": "~4.5.0",
16 |     "@vue/cli-plugin-eslint": "~4.5.0",
17 |     "@vue/cli-service": "~4.5.0",
18 |     "@vue/compiler-sfc": "^3.0.0",
19 |     "babel-eslint": "^10.1.0",
20 |     "eslint": "^6.7.2",
21 |     "eslint-plugin-vue": "^7.0.0"
22 |   },
23 |   "eslintConfig": {
24 |     "root": true,
25 |     "env": {
26 |       "node": true
27 |     },
28 |     "extends": [
29 |       "plugin:vue/vue3-essential",
30 |       "eslint:recommended"
31 |     ],
32 |     "parserOptions": {
33 |       "parser": "babel-eslint"
34 |     },
35 |     "rules": {}
36 |   },
37 |   "browserslist": [
38 |     "> 1%",
39 |     "last 2 versions",
40 |     "not dead"
41 |   ]
42 | }
43 | 


--------------------------------------------------------------------------------
/1-week/01/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="body">
 3 |     <div>Counter: {{ counter }}</div>
 4 |     <div class="flex:buttons">
 5 |       <button @click="increment">Increment</button>
 6 |       <button @click="decrement">Decrement</button>
 7 |       <button @click="defaultCounter">Default</button>
 8 |     </div>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |   name: "App",
15 |   data() {
16 |     return {
17 |       counter: 0,
18 |     };
19 |   },
20 |   methods: {
21 |     increment() {
22 |       this.counter++;
23 |     },
24 |     decrement() {
25 |       this.counter--;
26 |     },
27 |     defaultCounter() {
28 |       this.counter = 0;
29 |     },
30 |   },
31 | };
32 | </script>
33 | 
34 | <style scoped>
35 | .body {
36 |   display: flex;
37 |   align-items: center;
38 |   justify-content: center;
39 |   flex-direction: column;
40 |   height: 100vh;
41 |   font-family: sans-serif;
42 |   gap: 10px;
43 | }
44 | .flex\:buttons {
45 |   display: flex;
46 |   align-items: center;
47 |   gap: 20px;
48 | }
49 | </style>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Nika Shamiladze
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/1-week/05/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <p>
 5 |       For a guide and recipes on how to configure / customize this project,<br>
 6 |       check out the
 7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
 8 |     </p>
 9 |     <h3>Installed CLI Plugins</h3>
10 |     <ul>
11 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
13 |     </ul>
14 |     <h3>Essential Links</h3>
15 |     <ul>
16 |       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
17 |       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
18 |       <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
19 |       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
20 |       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
21 |     </ul>
22 |     <h3>Ecosystem</h3>
23 |     <ul>
24 |       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
25 |       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
26 |       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
27 |       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
28 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
29 |     </ul>
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 | export default {
35 |   name: 'HelloWorld',
36 |   props: {
37 |     msg: String
38 |   }
39 | }
40 | </script>
41 | 
42 | <!-- Add "scoped" attribute to limit CSS to this component only -->
43 | <style scoped>
44 | h3 {
45 |   margin: 40px 0 0;
46 | }
47 | ul {
48 |   list-style-type: none;
49 |   padding: 0;
50 | }
51 | li {
52 |   display: inline-block;
53 |   margin: 0 10px;
54 | }
55 | a {
56 |   color: #42b983;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/1-week/02/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <form @submit.prevent="onSubmit" class="Application">
 3 |     <input type="text" v-model="name" placeholder="First name" />
 4 |     <div v-if="nameError" class="text">Please enter your first name</div>
 5 |     <br />
 6 |     <br />
 7 |     <input type="text" v-model="surname" placeholder="Last name" />
 8 |     <div v-if="surnameError" class="text">Please enter your last name</div>
 9 |     <br />
10 |     <button @click="identification">Sign in</button>
11 |     <br />
12 |     <div v-if="successMessage" class="title">Good Job!</div>
13 |   </form>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 |   name: "App",
19 |   data() {
20 |     return {
21 |       name: "",
22 |       nameError: false,
23 |       surname: "",
24 |       surnameError: false,
25 |       successMessage: false,
26 |     };
27 |   },
28 |   methods: {
29 |     identification() {
30 |       if (!this.name) {
31 |         this.nameError = true;
32 |         this.surnameError = false;
33 |       } else if (!this.surname) {
34 |         this.nameError = false;
35 |         this.surnameError = true;
36 |       } else {
37 |         this.nameError = false;
38 |         this.surnameError = false;
39 |         this.successMessage = true;
40 |       }
41 |     },
42 |   },
43 | };
44 | </script>
45 | 
46 | <style>
47 | * {
48 |   margin: 0;
49 |   padding: 0;
50 |   box-sizing: border-box;
51 | }
52 | body {
53 |   display: flex;
54 |   align-items: center;
55 |   justify-content: center;
56 |   height: 100vh;
57 | }
58 | .Application {
59 |   font-family: sans-serif;
60 | }
61 | .Application input {
62 |   width: 250px;
63 |   height: 44px;
64 |   border: 1px solid lightgray;
65 |   border-radius: 5px;
66 |   outline: none;
67 |   padding-left: 10px;
68 |   transition: all 0.2s ease;
69 | }
70 | .Application input:focus {
71 |   border: 1px solid #070720;
72 | }
73 | .Application button {
74 |   margin-top: 10px;
75 |   width: 250px;
76 |   height: 44px;
77 |   border: 1px solid lightgray;
78 |   background-color: transparent;
79 |   border-radius: 5px;
80 |   transition: all 0.2s ease;
81 |   cursor: pointer;
82 | }
83 | .Application button:hover {
84 |   border: 1px solid gray;
85 | }
86 | .Application .text {
87 |   margin-top: 20px;
88 | }
89 | .Application .title {
90 |   margin-top: 10px;
91 | }
92 | </style>
93 | 


--------------------------------------------------------------------------------
/1-week/03/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="Application">
  3 |     <div
  4 |       v-for="item in UsersData"
  5 |       :key="item.user_id"
  6 |       class="Application__item"
  7 |       @click="addItemToList(item)"
  8 |     >
  9 |       {{ item.name }} {{ item.surname }}
 10 |     </div>
 11 |     <button class="Application__button" @click="showMeResult">
 12 |       Show Me Result
 13 |     </button>
 14 |     <div v-if="this.showResultPopup">
 15 |       <div class="Application__backgroundBlackBlur" @click="showMeResult"></div>
 16 |       <div class="Application__Header">
 17 |         <h1>Your Result:</h1>
 18 |         <div
 19 |           v-for="item in SavedData"
 20 |           :key="item.user_id"
 21 |           class="Application__item"
 22 |         >
 23 |           {{ item }}
 24 |         </div>
 25 |       </div>
 26 |     </div>
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script>
 31 | export default {
 32 |   name: "App",
 33 |   data() {
 34 |     return {
 35 |       showResultPopup: false,
 36 |       UsersData: [
 37 |         {
 38 |           user_id: 0,
 39 |           name: "Nika",
 40 |           surname: "Shamiladze",
 41 |         },
 42 |         {
 43 |           user_id: 1,
 44 |           name: "Mark",
 45 |           surname: "Zuckerberg",
 46 |         },
 47 |         {
 48 |           user_id: 2,
 49 |           name: "Bill",
 50 |           surname: "Gates",
 51 |         },
 52 |         {
 53 |           user_id: 3,
 54 |           name: "Elon",
 55 |           surname: "Musk",
 56 |         },
 57 |       ],
 58 |       SavedData: [],
 59 |     };
 60 |   },
 61 |   methods: {
 62 |     addItemToList(item) {
 63 |       let fullName = item.name + " " + item.surname;
 64 |       this.SavedData = [...new Set([...this.SavedData, fullName])];
 65 |     },
 66 |     showMeResult() {
 67 |       this.showResultPopup = !this.showResultPopup;
 68 |     },
 69 |   },
 70 | };
 71 | </script>
 72 | 
 73 | <style>
 74 | * {
 75 |   margin: 0;
 76 |   padding: 0;
 77 |   box-sizing: border-box;
 78 |   font-family: sans-serif;
 79 | }
 80 | .Application {
 81 |   display: flex;
 82 |   align-items: center;
 83 |   justify-content: center;
 84 |   flex-direction: column;
 85 |   height: 100vh;
 86 | }
 87 | .Application__item {
 88 |   width: 250px;
 89 |   height: 44px;
 90 |   border: 1px solid lightgray;
 91 |   border-radius: 5px;
 92 |   display: flex;
 93 |   align-items: center;
 94 |   padding-left: 10px;
 95 |   margin-top: 10px;
 96 |   cursor: pointer;
 97 |   transition: all 0.2s ease;
 98 | }
 99 | .Application__item:hover {
100 |   border: 1px solid gray;
101 | }
102 | .Application__button {
103 |   width: 250px;
104 |   height: 44px;
105 |   margin-top: 20px;
106 |   border: 1px solid lightgray;
107 |   outline: none;
108 |   border-radius: 5px;
109 |   background-color: transparent;
110 | }
111 | .Application__backgroundBlackBlur {
112 |   position: absolute;
113 |   top: 0;
114 |   left: 0;
115 |   width: 100%;
116 |   height: 100vh;
117 |   background-color: rgba(0, 0, 0, 0.5);
118 | }
119 | .Application__Header {
120 |   width: 500px;
121 |   height: 500px;
122 |   background-color: #fff;
123 |   z-index: 999;
124 |   position: absolute;
125 |   top: 50%;
126 |   left: 50%;
127 |   transform: translate(-50%, -50%);
128 |   border-radius: 5px;
129 |   display: flex;
130 |   align-items: center;
131 |   justify-content: center;
132 |   flex-direction: column;
133 | }
134 | .Application__Header h1 {
135 |   font-size: 24px;
136 | }
137 | </style>
138 | 


--------------------------------------------------------------------------------