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