Skip to content
Snippets Groups Projects
Commit 0ac3127b authored by altanmk93's avatar altanmk93
Browse files

initial commit

parents
No related branches found
No related tags found
No related merge requests found
.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?
# tutorial
## 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/).
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
This diff is collapsed.
{
"name": "tutorial",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.5",
"vue": "^2.6.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
public/favicon.ico

4.19 KiB

<!DOCTYPE html>
<html lang="en">
<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>
<template>
<div id="app">
<tutorial></tutorial>
<tutorial2 message="Hello"></tutorial2>
<tutorial3></tutorial3>
<tutorial4></tutorial4>
<tutorial5></tutorial5>
</div>
</template>
<script>
import Tutorial from './components/Tutorial.vue'
import Tutorial2 from './components/Tutorial2.vue'
import Tutorial3 from './components/Tutorial3.vue'
import Tutorial4 from './components/Tutorial4.vue'
import Tutorial5 from './components/Tutorial5.vue'
export default {
name: 'App',
components: {
Tutorial,
Tutorial2,
Tutorial3,
Tutorial4,
Tutorial5
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
margin-top: 60px;
}
</style>
src/assets/logo.png

6.69 KiB

<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
<template>
<div>
<span>{{message}}</span>
</div>
</template>
<script>
export default {
el: "Tutorial",
data: function () {
return {
message: 'Hello World'
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
<template>
<div>{{message}}</div>
</template>
<script>
export default {
el: "Tutorial2",
props: ['message']
}
</script>
\ No newline at end of file
<template>
<div id="tutorial3">
<ul>
<li v-for="student in students" :key="student.name"> {{student.name}}</li>
</ul>
</div>
</template>
<script>
export default {
el: "Tutorial3",
data: function () {
return {
students: [
{name: 'Paul'},
{name: 'Muhammad'},
{name: 'Emre'},
{name: 'Büsra'},
{name: 'Nirmin'}
]
}
}
}
</script>
<style>
</style>
\ No newline at end of file
<template>
<div>
<p>{{ message }}</p>
<input v-model="message">
</div>
</template>
<script>
export default {
el: "Tutorial4",
watch: {
message(){
alert('message changed!')
}
},
data: function(){
return {
message : 'Hello World!'
}
}
}
</script>
\ No newline at end of file
<template>
<div>
<ul>
<li v-for="result in results" v-bind:key="result.employee_name">{{result.employee_name}}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
el: "Tutorial5",
data(){
return {
results: null
}
},
mounted() {
axios
.get('http://dummy.restapiexample.com/api/v1/employees')
.then( response => (this.results = response.data.data))
}
}
</script>
\ No newline at end of file
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment