Vue3_Frontend Init..
This commit is contained in:
commit
56a3b1dad0
5
.editorconfig
Normal file
5
.editorconfig
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
[*.{js,jsx,ts,tsx,vue}]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
insert_final_newline = true
|
||||||
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
#참고 : https://www.youtube.com/watch?v=b0ImUEsqaAA
|
||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
8
.prettierrc
Normal file
8
.prettierrc
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"semi": false,
|
||||||
|
"bracketSapcing": true,
|
||||||
|
"singleQuote": true,
|
||||||
|
"useTabs": false,
|
||||||
|
"trailingComma": "none",
|
||||||
|
"printWith": 80
|
||||||
|
}
|
||||||
24
README.md
Normal file
24
README.md
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# frontend
|
||||||
|
|
||||||
|
## Project setup
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and hot-reloads for development
|
||||||
|
```
|
||||||
|
npm run serve
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and minifies for production
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lints and fixes files
|
||||||
|
```
|
||||||
|
npm run lint
|
||||||
|
```
|
||||||
|
|
||||||
|
### Customize configuration
|
||||||
|
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||||
5
babel.config.js
Normal file
5
babel.config.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/cli-plugin-babel/preset'
|
||||||
|
]
|
||||||
|
}
|
||||||
19
jsconfig.json
Normal file
19
jsconfig.json
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"module": "esnext",
|
||||||
|
"baseUrl": "./",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"src/*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"lib": [
|
||||||
|
"esnext",
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"scripthost"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
21327
package-lock.json
generated
Normal file
21327
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
55
package.json
Normal file
55
package.json
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "frontend",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@popperjs/core": "^2.11.6",
|
||||||
|
"bootstrap": "^5.2.0",
|
||||||
|
"bootstrap-vue-3": "^0.2.8",
|
||||||
|
"core-js": "^3.8.3",
|
||||||
|
"vue-router": "^4.0.3",
|
||||||
|
"vuex": "^4.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.12.16",
|
||||||
|
"@babel/eslint-parser": "^7.12.16",
|
||||||
|
"@vue/cli-plugin-babel": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-router": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-vuex": "~5.0.0",
|
||||||
|
"@vue/cli-service": "~5.0.0",
|
||||||
|
"@vue/eslint-config-standard": "^6.1.0",
|
||||||
|
"eslint": "^7.32.0",
|
||||||
|
"eslint-plugin-import": "^2.25.3",
|
||||||
|
"eslint-plugin-node": "^11.1.0",
|
||||||
|
"eslint-plugin-promise": "^5.1.0",
|
||||||
|
"eslint-plugin-vue": "^8.0.3"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/vue3-essential",
|
||||||
|
"@vue/standard"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"parser": "@babel/eslint-parser"
|
||||||
|
},
|
||||||
|
"rules": {
|
||||||
|
"space-before-function-paren": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not dead",
|
||||||
|
"not ie 11"
|
||||||
|
]
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
17
public/index.html
Normal file
17
public/index.html
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
40
src/App.vue
Normal file
40
src/App.vue
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<HeaderLayout />
|
||||||
|
<router-view />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
// @ is an alias to /src
|
||||||
|
import HeaderLayout from '@/components/layout/HeaderLayout.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'App',
|
||||||
|
components: {
|
||||||
|
HeaderLayout
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#app {
|
||||||
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
text-align: center;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
nav {
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a.router-link-exact-active {
|
||||||
|
color: #42b983;
|
||||||
|
} */
|
||||||
|
</style>
|
||||||
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
60
src/components/HelloWorld.vue
Normal file
60
src/components/HelloWorld.vue
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
<template>
|
||||||
|
<div class="hello">
|
||||||
|
<h1>{{ msg }}</h1>
|
||||||
|
<p>
|
||||||
|
For a guide and recipes on how to configure / customize this project,<br>
|
||||||
|
check out the
|
||||||
|
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||||
|
</p>
|
||||||
|
<h3>Installed CLI Plugins</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||||
|
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
|
||||||
|
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
|
||||||
|
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
||||||
|
</ul>
|
||||||
|
<h3>Essential Links</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||||
|
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||||
|
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||||
|
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||||
|
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||||
|
</ul>
|
||||||
|
<h3>Ecosystem</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||||
|
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||||
|
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||||
|
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||||
|
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'HelloWorld',
|
||||||
|
props: {
|
||||||
|
msg: String
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
<style scoped>
|
||||||
|
h3 {
|
||||||
|
margin: 40px 0 0;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: #42b983;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
71
src/components/layout/HeaderLayout.vue
Normal file
71
src/components/layout/HeaderLayout.vue
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<b-navbar toggleable="lg" type="dark" variant="info">
|
||||||
|
<b-navbar-brand href="#">NavBar</b-navbar-brand>
|
||||||
|
|
||||||
|
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
|
||||||
|
|
||||||
|
<b-collapse id="nav-collapse" is-nav>
|
||||||
|
<b-navbar-nav>
|
||||||
|
<b-nav-item href="/">Home</b-nav-item>
|
||||||
|
<b-nav-item href="/about">About</b-nav-item>
|
||||||
|
<b-nav-item-dropdown text="DataBinding" right>
|
||||||
|
<b-dropdown-item href="/databinding/string">String</b-dropdown-item>
|
||||||
|
<b-dropdown-item href="/databinding/html">HTML</b-dropdown-item>
|
||||||
|
<b-dropdown-item href="/databinding/input">Input</b-dropdown-item>
|
||||||
|
<b-dropdown-item href="/databinding/select">Select</b-dropdown-item>
|
||||||
|
<b-dropdown-item href="/databinding/checkbox"
|
||||||
|
>Checkbox</b-dropdown-item
|
||||||
|
>
|
||||||
|
<b-dropdown-item href="/databinding/radio">Radio</b-dropdown-item>
|
||||||
|
<b-dropdown-item href="/databinding/attribute"
|
||||||
|
>Attribute</b-dropdown-item
|
||||||
|
>
|
||||||
|
<b-dropdown-item href="/databinding/list">List</b-dropdown-item>
|
||||||
|
<b-dropdown-item href="/databinding/class">Class</b-dropdown-item>
|
||||||
|
</b-nav-item-dropdown>
|
||||||
|
<b-nav-item-dropdown text="Event" right>
|
||||||
|
<b-dropdown-item href="/event/click">Click</b-dropdown-item>
|
||||||
|
<b-dropdown-item href="/event/change">Change</b-dropdown-item>
|
||||||
|
<b-dropdown-item href="/event/key">Key</b-dropdown-item>
|
||||||
|
</b-nav-item-dropdown>
|
||||||
|
</b-navbar-nav>
|
||||||
|
|
||||||
|
<!-- Right aligned nav items -->
|
||||||
|
<b-navbar-nav class="ml-auto">
|
||||||
|
<b-nav-form>
|
||||||
|
<b-form-input
|
||||||
|
size="sm"
|
||||||
|
class="mr-sm-2"
|
||||||
|
placeholder="Search"
|
||||||
|
></b-form-input>
|
||||||
|
<b-button size="sm" class="my-2 my-sm-0" type="submit"
|
||||||
|
>Search</b-button
|
||||||
|
>
|
||||||
|
</b-nav-form>
|
||||||
|
|
||||||
|
<b-nav-item-dropdown text="Lang" right>
|
||||||
|
<b-dropdown-item href="#">EN</b-dropdown-item>
|
||||||
|
<b-dropdown-item href="#">ES</b-dropdown-item>
|
||||||
|
<b-dropdown-item href="#">RU</b-dropdown-item>
|
||||||
|
<b-dropdown-item href="#">FA</b-dropdown-item>
|
||||||
|
</b-nav-item-dropdown>
|
||||||
|
|
||||||
|
<b-nav-item-dropdown right>
|
||||||
|
<!-- Using 'button-content' slot -->
|
||||||
|
<template #button-content>
|
||||||
|
<em>User</em>
|
||||||
|
</template>
|
||||||
|
<b-dropdown-item href="#">Profile</b-dropdown-item>
|
||||||
|
<b-dropdown-item href="#">Sign Out</b-dropdown-item>
|
||||||
|
</b-nav-item-dropdown>
|
||||||
|
</b-navbar-nav>
|
||||||
|
</b-collapse>
|
||||||
|
</b-navbar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'HeaderLayout'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
10
src/main.js
Normal file
10
src/main.js
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
import store from './store'
|
||||||
|
import { BootstrapVue3 } from 'bootstrap-vue-3'
|
||||||
|
|
||||||
|
import 'bootstrap/dist/css/bootstrap.css'
|
||||||
|
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
|
||||||
|
|
||||||
|
createApp(App).use(store).use(router).use(BootstrapVue3).mount('#app')
|
||||||
122
src/router/index.js
Normal file
122
src/router/index.js
Normal file
@ -0,0 +1,122 @@
|
|||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
import HomeView from '../views/HomeView.vue'
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'home',
|
||||||
|
component: HomeView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/about',
|
||||||
|
name: 'about',
|
||||||
|
// route level code-splitting
|
||||||
|
// this generates a separate chunk (about.[hash].js) for this route
|
||||||
|
// which is lazy-loaded when the route is visited.
|
||||||
|
component: () =>
|
||||||
|
import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/databinding/string',
|
||||||
|
name: 'DataBindingStringView',
|
||||||
|
component: () =>
|
||||||
|
import(
|
||||||
|
/* webpackChunkName: "databinding", webpackPrefetch:true */ '../views/1_databinding/DataBindingStringView.vue'
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/databinding/html',
|
||||||
|
name: 'DataBindingHtmlView',
|
||||||
|
component: () =>
|
||||||
|
import(
|
||||||
|
/* webpackChunkName: "databinding", webpackPrefetch:true */ '../views/1_databinding/DataBindingHtmlView.vue'
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/databinding/input',
|
||||||
|
name: 'DataBindingInputView',
|
||||||
|
component: () =>
|
||||||
|
import(
|
||||||
|
/* webpackChunkName: "databinding", webpackPrefetch:true */ '../views/1_databinding/DataBindingInputView.vue'
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/databinding/select',
|
||||||
|
name: 'DataBindingSelectView',
|
||||||
|
component: () =>
|
||||||
|
import(
|
||||||
|
/* webpackChunkName: "databinding", webpackPrefetch:true */ '../views/1_databinding/DataBindingSelectView.vue'
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/databinding/checkbox',
|
||||||
|
name: 'DataBindingCheckboxView',
|
||||||
|
component: () =>
|
||||||
|
import(
|
||||||
|
/* webpackChunkName: "databinding", webpackPrefetch:true */ '../views/1_databinding/DataBindingCheckboxView.vue'
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/databinding/radio',
|
||||||
|
name: 'DataBindingRadioView',
|
||||||
|
component: () =>
|
||||||
|
import(
|
||||||
|
/* webpackChunkName: "databinding", webpackPrefetch:true */ '../views/1_databinding/DataBindingRadioView.vue'
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/databinding/attribute',
|
||||||
|
name: 'DataBindingAttributeView',
|
||||||
|
component: () =>
|
||||||
|
import(
|
||||||
|
/* webpackChunkName: "databinding", webpackPrefetch:true */ '../views/1_databinding/DataBindingAttributeView.vue'
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/databinding/list',
|
||||||
|
name: 'DataBindingListView',
|
||||||
|
component: () =>
|
||||||
|
import(
|
||||||
|
/* webpackChunkName: "databinding", webpackPrefetch:true */ '../views/1_databinding/DataBindingListView.vue'
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/databinding/class',
|
||||||
|
name: 'DataBindingClassView',
|
||||||
|
component: () =>
|
||||||
|
import(
|
||||||
|
/* webpackChunkName: "databinding", webpackPrefetch:true */ '../views/1_databinding/DataBindingClassView.vue'
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/event/click',
|
||||||
|
name: 'EventClickView',
|
||||||
|
component: () =>
|
||||||
|
import(
|
||||||
|
/* webpackChunkName: "event", webpackPrefetch:true */ '../views/2_event/EventClickView.vue'
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/event/change',
|
||||||
|
name: 'EventChangeView',
|
||||||
|
component: () =>
|
||||||
|
import(
|
||||||
|
/* webpackChunkName: "event", webpackPrefetch:true */ '../views/2_event/EventChangeView.vue'
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/event/key',
|
||||||
|
name: 'EventKeyView',
|
||||||
|
component: () =>
|
||||||
|
import(
|
||||||
|
/* webpackChunkName: "event", webpackPrefetch:true */ '../views/2_event/EventKeyView.vue'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(process.env.BASE_URL),
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
14
src/store/index.js
Normal file
14
src/store/index.js
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { createStore } from 'vuex'
|
||||||
|
|
||||||
|
export default createStore({
|
||||||
|
state: {
|
||||||
|
},
|
||||||
|
getters: {
|
||||||
|
},
|
||||||
|
mutations: {
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
},
|
||||||
|
modules: {
|
||||||
|
}
|
||||||
|
})
|
||||||
35
src/views/1_databinding/DataBindingAttributeView.vue
Normal file
35
src/views/1_databinding/DataBindingAttributeView.vue
Normal file
File diff suppressed because one or more lines are too long
52
src/views/1_databinding/DataBindingCheckboxView.vue
Normal file
52
src/views/1_databinding/DataBindingCheckboxView.vue
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
name=""
|
||||||
|
id="html"
|
||||||
|
value="HTML"
|
||||||
|
v-model="favoriteLang"
|
||||||
|
/>
|
||||||
|
<label for="html">HTML</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
name=""
|
||||||
|
id="css"
|
||||||
|
value="CSS"
|
||||||
|
v-model="favoriteLang"
|
||||||
|
/>
|
||||||
|
<label for="css">CSS</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
name=""
|
||||||
|
id="js"
|
||||||
|
value="JS"
|
||||||
|
v-model="favoriteLang"
|
||||||
|
/>
|
||||||
|
<label for="js">JS</label>
|
||||||
|
</div>
|
||||||
|
<div>선택한 지역: {{ favoriteLang }}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
favoriteLang: ['JS']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setup() {},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
unmounted() {},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped></style>
|
||||||
43
src/views/1_databinding/DataBindingClassView.vue
Normal file
43
src/views/1_databinding/DataBindingClassView.vue
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div :class="{ 'text-red': hasError, active: isActive }">클래스 바인딩</div>
|
||||||
|
<div :class="class2attribue">클래스 바인딩2</div>
|
||||||
|
<hr />
|
||||||
|
<div style="color: red; font-size: 30px">스타일 바인딩</div>
|
||||||
|
<div :style="style1">스타일 바인딩</div>
|
||||||
|
<button @click="style1.color = 'blue'">색상바꾸기</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isActive: false,
|
||||||
|
hasError: false,
|
||||||
|
class2attribue: { 'text-red': true, active: true },
|
||||||
|
|
||||||
|
style1: {
|
||||||
|
color: 'green',
|
||||||
|
fontSize: '30px'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setup() {},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
unmounted() {},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.active {
|
||||||
|
background-color: greenyellow;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-red {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
23
src/views/1_databinding/DataBindingHtmlView.vue
Normal file
23
src/views/1_databinding/DataBindingHtmlView.vue
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>{{ htmlString }}</div>
|
||||||
|
<div v-html="htmlString"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
htmlString: '<p style="color: red;">빨간색 문자</p>'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setup() {},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
unmounted() {},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped></style>
|
||||||
46
src/views/1_databinding/DataBindingInputView.vue
Normal file
46
src/views/1_databinding/DataBindingInputView.vue
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<input type="text" v-model="userId" />
|
||||||
|
<button @click="myFunction">클릭</button>
|
||||||
|
<button @click="changeData">변경</button>
|
||||||
|
<br />
|
||||||
|
문자 계산함:
|
||||||
|
<input type="text" v-model="num1" /> +
|
||||||
|
<input type="text" v-model="num2" /> =
|
||||||
|
<span>{{ num1 + num2 }}</span>
|
||||||
|
<br />
|
||||||
|
숫자 계산함:
|
||||||
|
<input type="text" v-model.number="num3" /> +
|
||||||
|
<input type="text" v-model.number="num4" /> =
|
||||||
|
<span>{{ num3 + num4 }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
userId: 'test.go',
|
||||||
|
num1: 0,
|
||||||
|
num2: 0,
|
||||||
|
num3: 0,
|
||||||
|
num4: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setup() {},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
unmounted() {},
|
||||||
|
methods: {
|
||||||
|
myFunction() {
|
||||||
|
console.log('userid:' + this.userId)
|
||||||
|
},
|
||||||
|
changeData() {
|
||||||
|
this.userId = '변경값 적용'
|
||||||
|
this.myFunction()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped></style>
|
||||||
55
src/views/1_databinding/DataBindingListView.vue
Normal file
55
src/views/1_databinding/DataBindingListView.vue
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<select name="" id="">
|
||||||
|
<option value="">선택</option>
|
||||||
|
<option :value="city.code" :key="city.code" v-for="city in cities">
|
||||||
|
{{ city.title }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<th>번호</th>
|
||||||
|
<th>지역코드</th>
|
||||||
|
<th>지역명</th>
|
||||||
|
<th>수량</th>
|
||||||
|
<th>포인트</th>
|
||||||
|
<th>합계</th>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr :key="city.code" v-for="(city, idx) in cities">
|
||||||
|
<td>{{ idx }}</td>
|
||||||
|
<td>{{ city.code }}</td>
|
||||||
|
<td><input type="text" name="" id="" v-model="city.title" /></td>
|
||||||
|
<td><input type="number" name="" id="" v-model="city.cnt" /></td>
|
||||||
|
<td><input type="number" name="" id="" v-model="city.point" /></td>
|
||||||
|
<td>{{ city.cnt * city.point }}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
cities: [
|
||||||
|
{ title: '서울', code: '02', cnt: 1, point: 300 },
|
||||||
|
{ title: '부산', code: '051', cnt: 1, point: 200 },
|
||||||
|
{ title: '제주', code: '064', cnt: 1, point: 100 }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setup() {},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
unmounted() {},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped></style>
|
||||||
40
src/views/1_databinding/DataBindingRadioView.vue
Normal file
40
src/views/1_databinding/DataBindingRadioView.vue
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name=""
|
||||||
|
id="html"
|
||||||
|
value="HTML"
|
||||||
|
v-model="favoriteLang"
|
||||||
|
/>
|
||||||
|
<label for="html">HTML</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="radio" name="" id="css" value="CSS" v-model="favoriteLang" />
|
||||||
|
<label for="css">CSS</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="radio" name="" id="js" value="JS" v-model="favoriteLang" />
|
||||||
|
<label for="js">JS</label>
|
||||||
|
</div>
|
||||||
|
<div>선택한 지역: {{ favoriteLang }}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
favoriteLang: 'JS'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setup() {},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
unmounted() {},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped></style>
|
||||||
27
src/views/1_databinding/DataBindingSelectView.vue
Normal file
27
src/views/1_databinding/DataBindingSelectView.vue
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<select name="" id="" v-model="selectedCity">
|
||||||
|
<option value="">선택</option>
|
||||||
|
<option value="02">서울</option>
|
||||||
|
<option value="051">부산</option>
|
||||||
|
<option value="064">제주</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
selectedCity: '064'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setup() {},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
unmounted() {},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped></style>
|
||||||
23
src/views/1_databinding/DataBindingStringView.vue
Normal file
23
src/views/1_databinding/DataBindingStringView.vue
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>Hello {{ userName }}</h1>
|
||||||
|
<p>{{ message }}</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
userName: 'John Doe',
|
||||||
|
message: 'Welcome 개발자의 품격',
|
||||||
|
arr: [],
|
||||||
|
obj: {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.text-red {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
73
src/views/2_event/EventChangeView.vue
Normal file
73
src/views/2_event/EventChangeView.vue
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<select name="" id="" @change="changeCity($event)" v-model="selectedCity">
|
||||||
|
<option value="">--도시선택--</option>
|
||||||
|
<option
|
||||||
|
:value="city.cityCode"
|
||||||
|
:key="city.cityCode"
|
||||||
|
v-for="city in cities"
|
||||||
|
>
|
||||||
|
{{ city.title }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<select name="" id="">
|
||||||
|
<option
|
||||||
|
:value="dong.dongCode"
|
||||||
|
:key="dong.dongCode"
|
||||||
|
v-for="dong in selectedDongs"
|
||||||
|
>
|
||||||
|
{{ dong.dongTitle }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<!-- <select name="" id="">
|
||||||
|
<option
|
||||||
|
:value="dong.dongCode"
|
||||||
|
:key="dong.dongCode"
|
||||||
|
v-for="dong in dongs.filter((dong) => dong.cityCode === selectedCity)"
|
||||||
|
>
|
||||||
|
{{ dong.dongTitle }}
|
||||||
|
</option>
|
||||||
|
</select> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
selectedCity: '',
|
||||||
|
cities: [
|
||||||
|
{ cityCode: '02', title: '서울' },
|
||||||
|
{ cityCode: '051', title: '부산' },
|
||||||
|
{ cityCode: '064', title: '제주' }
|
||||||
|
],
|
||||||
|
dongs: [
|
||||||
|
{ cityCode: '02', dongCode: '1', dongTitle: '서울 1동' },
|
||||||
|
{ cityCode: '02', dongCode: '2', dongTitle: '서울 2동' },
|
||||||
|
{ cityCode: '02', dongCode: '3', dongTitle: '서울 3동' },
|
||||||
|
{ cityCode: '02', dongCode: '4', dongTitle: '서울 4동' },
|
||||||
|
{ cityCode: '051', dongCode: '51', dongTitle: '부산 1동' },
|
||||||
|
{ cityCode: '051', dongCode: '52', dongTitle: '부산 2동' },
|
||||||
|
{ cityCode: '051', dongCode: '53', dongTitle: '부산 3동' },
|
||||||
|
{ cityCode: '064', dongCode: '61', dongTitle: '제주 1동' },
|
||||||
|
{ cityCode: '064', dongCode: '62', dongTitle: '제주 2동' },
|
||||||
|
{ cityCode: '064', dongCode: '63', dongTitle: '제주 3동' }
|
||||||
|
],
|
||||||
|
selectedDongs: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setup() {},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
unmounted() {},
|
||||||
|
methods: {
|
||||||
|
changeCity($event) {
|
||||||
|
console.log(event.target.tagName)
|
||||||
|
this.selectedDongs = this.dongs.filter(
|
||||||
|
(dong) => dong.cityCode === this.selectedCity
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped></style>
|
||||||
26
src/views/2_event/EventClickView.vue
Normal file
26
src/views/2_event/EventClickView.vue
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<button @click="increaseCounter">Add 1</button>
|
||||||
|
<p>{{ counter }}</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
counter: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setup() {},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
unmounted() {},
|
||||||
|
methods: {
|
||||||
|
increaseCounter() {
|
||||||
|
this.counter += 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped></style>
|
||||||
44
src/views/2_event/EventKeyView.vue
Normal file
44
src/views/2_event/EventKeyView.vue
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- <input
|
||||||
|
type="search"
|
||||||
|
name=""
|
||||||
|
id=""
|
||||||
|
@keyup="checkEnter($event)"
|
||||||
|
v-model="searchText"
|
||||||
|
/> -->
|
||||||
|
<input
|
||||||
|
type="search"
|
||||||
|
name=""
|
||||||
|
id=""
|
||||||
|
@keyup.enter="doSearch"
|
||||||
|
v-model="searchText"
|
||||||
|
/>
|
||||||
|
<button @click="doSearch">조회</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchText: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setup() {},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
unmounted() {},
|
||||||
|
methods: {
|
||||||
|
doSearch() {
|
||||||
|
console.log(this.searchText)
|
||||||
|
},
|
||||||
|
checkEnter($event) {
|
||||||
|
if (event.keyCode === 13) {
|
||||||
|
this.doSearch()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped></style>
|
||||||
5
src/views/AboutView.vue
Normal file
5
src/views/AboutView.vue
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<template>
|
||||||
|
<div class="about">
|
||||||
|
<h1>This is an about page</h1>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
18
src/views/HomeView.vue
Normal file
18
src/views/HomeView.vue
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<template>
|
||||||
|
<div class="home">
|
||||||
|
<img alt="Vue logo" src="../assets/logo.png" />
|
||||||
|
<HelloWorld msg="Welcome to Your Vue.js App" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// @ is an alias to /src
|
||||||
|
import HelloWorld from '@/components/HelloWorld.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'HomeView',
|
||||||
|
components: {
|
||||||
|
HelloWorld
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
4
vue.config.js
Normal file
4
vue.config.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
const { defineConfig } = require('@vue/cli-service')
|
||||||
|
module.exports = defineConfig({
|
||||||
|
transpileDependencies: true
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user