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

initial commit

parents
Branches
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'
]
}
Source diff could not be displayed: it is too large. Options to address this: view the blob.
{
"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