├── .gitignore ├── 01-Vue-Giris └── index.html ├── 02-Vue-Uygulama ├── app.js └── index.html ├── 03-V-IF-ve-V-SHOW ├── app.js └── index.html ├── 04-For-Loop ├── app.js └── index.html ├── 05-V-Bind ├── app.js └── index.html ├── 06-Uygulama-1 ├── app.js └── index.html ├── 07-Vue-CLI-Kurulumu ├── vue-cli-component │ ├── .browserslistrc │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── jsconfig.json │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ ├── css │ │ │ │ └── style.css │ │ │ └── logo.png │ │ ├── components │ │ │ ├── Button.vue │ │ │ └── Title.vue │ │ └── main.js │ └── vue.config.js └── vue-cli │ ├── .browserslistrc │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── jsconfig.json │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ └── main.js │ └── vue.config.js ├── 08-Form-ve-Data-Binding └── vue-form │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── jsconfig.json │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── Form.vue │ └── main.js │ └── vue.config.js ├── 09-Vue-Router └── router-app │ ├── .browserslistrc │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── jsconfig.json │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── HelloWorld.vue │ ├── main.js │ ├── router │ │ └── index.js │ └── views │ │ ├── AboutView.vue │ │ ├── HomeView.vue │ │ ├── NotFound.vue │ │ ├── StudentInfo.vue │ │ └── Students.vue │ └── vue.config.js ├── 10-Gelismis-Component └── components │ ├── .browserslistrc │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── jsconfig.json │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── Header.vue │ └── main.js │ └── vue.config.js ├── 11-Planner-Uygulama-2 └── project-planner │ ├── .browserslistrc │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── data │ └── db.json │ ├── jsconfig.json │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── FilterNav.vue │ │ ├── Navbar.vue │ │ └── SingleProject.vue │ ├── main.js │ ├── router │ │ └── index.js │ └── views │ │ ├── AddProject.vue │ │ ├── EditProject.vue │ │ └── Home.vue │ └── vue.config.js ├── 12-CompositionAPI └── composition-api │ ├── .browserslistrc │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── jsconfig.json │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── Contents.vue │ ├── composables │ │ └── getContentsFetch.js │ ├── main.js │ ├── router │ │ └── index.js │ └── views │ │ ├── AboutView.vue │ │ └── HomeView.vue │ └── vue.config.js ├── 13-ToDo-Uyguama-3 └── todo │ ├── .browserslistrc │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── jsconfig.json │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── HelloWorld.vue │ ├── main.js │ ├── router │ │ └── index.js │ └── views │ │ ├── AboutView.vue │ │ └── HomeView.vue │ └── vue.config.js ├── 14-Firebase-Vue └── fb-app │ ├── .browserslistrc │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── jsconfig.json │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── HelloWorld.vue │ ├── firebase │ │ └── config.js │ ├── main.js │ ├── router │ │ └── index.js │ └── views │ │ ├── AboutView.vue │ │ └── HomeView.vue │ └── vue.config.js ├── 15-Blog-Uygulama-4 └── blog │ ├── .browserslistrc │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── jsconfig.json │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Navbar.vue │ │ └── SinglePost.vue │ ├── composables │ │ └── getPosts.js │ ├── firebase │ │ └── config.js │ ├── main.js │ ├── router │ │ └── index.js │ └── views │ │ ├── AddPost.vue │ │ ├── Home.vue │ │ └── Post.vue │ └── vue.config.js ├── 16-ChatApp-Uygulama-5 └── chat-app │ ├── .browserslistrc │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── jsconfig.json │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── App.vue │ ├── assets │ │ ├── logo.png │ │ └── main.css │ ├── components │ │ ├── ChatWindow.vue │ │ ├── LoginForm.vue │ │ ├── Navbar.vue │ │ ├── NewChatForm.vue │ │ └── SignupForm.vue │ ├── composables │ │ ├── getCollection.js │ │ ├── getUser.js │ │ ├── useCollection.js │ │ ├── useLogin.js │ │ ├── useLogout.js │ │ └── useSignup.js │ ├── firebase │ │ └── config.js │ ├── main.js │ ├── router │ │ └── index.js │ └── views │ │ ├── Chatroom.vue │ │ └── Welcome.vue │ └── vue.config.js ├── 17-Playlist-Uygulama-6 └── playlist-app │ ├── .browserslistrc │ ├── .firebase │ └── hosting.ZGlzdA.cache │ ├── .firebaserc │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── firebase.json │ ├── firestore.indexes.json │ ├── firestore.rules │ ├── jsconfig.json │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── App.vue │ ├── assets │ │ ├── logo.png │ │ └── main.css │ ├── components │ │ ├── AddSong.vue │ │ ├── ListView.vue │ │ └── Navbar.vue │ ├── composables │ │ ├── getCollection.js │ │ ├── getDocument.js │ │ ├── getUser.js │ │ ├── useCollection.js │ │ ├── useDocument.js │ │ ├── useLogin.js │ │ ├── useLogout.js │ │ ├── useSignup.js │ │ └── useStorage.js │ ├── firebase │ │ └── config.js │ ├── main.js │ ├── router │ │ └── index.js │ └── views │ │ ├── Home.vue │ │ ├── auth │ │ ├── Login.vue │ │ └── Signup.vue │ │ └── playlists │ │ ├── CreatePlayList.vue │ │ └── PlaylistDetails.vue │ ├── storage.rules │ └── vue.config.js ├── 18-Vuex └── vuex-app │ ├── .browserslistrc │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── jsconfig.json │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── AddTodo.vue │ │ ├── List.vue │ │ └── todoCount.vue │ ├── main.js │ ├── router │ │ └── index.js │ ├── store │ │ └── index.js │ └── views │ │ └── Home.vue │ └── vue.config.js ├── LICENSE └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | -------------------------------------------------------------------------------- /01-Vue-Giris/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | VueJS Giriş 8 | 9 | 10 | 11 |
Merhaba {{message}}
12 | 22 | 23 | -------------------------------------------------------------------------------- /02-Vue-Uygulama/app.js: -------------------------------------------------------------------------------- 1 | const app = Vue.createApp({ 2 | template:` 3 |

Başlık: {{baslik}}

4 |

İçerik: {{icerik}}

5 |

Yorum Sayısı: {{yorumSayisi}}

6 | 7 |

{{yazi}}

8 | `, 9 | data() { 10 | return { 11 | baslik:'Vue Dersi', 12 | icerik:'Vue 3 Konuları', 13 | yorumSayisi: 0, 14 | yazi:'Yorum eklemek için tıklayın.' 15 | } 16 | }, 17 | methods: { 18 | ekle(){ 19 | console.log('ekle metodu çalıştı'); 20 | this.yorumSayisi++; 21 | this.yazi=`${this.yorumSayisi} tane yorum girildi.` 22 | } 23 | }, 24 | }); 25 | 26 | app.mount('#app') -------------------------------------------------------------------------------- /02-Vue-Uygulama/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue Uygulama 8 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /03-V-IF-ve-V-SHOW/app.js: -------------------------------------------------------------------------------- 1 | const app = Vue.createApp({ 2 | template:` 3 |
Deneme Yazısı
4 |
Deneme Yazısı 2
5 | 9 | `, 10 | data() { 11 | return { 12 | showInfo:true 13 | } 14 | }, 15 | methods: { 16 | toggle(){ 17 | this.showInfo=!this.showInfo; 18 | } 19 | }, 20 | }); 21 | 22 | app.mount('#app') -------------------------------------------------------------------------------- /03-V-IF-ve-V-SHOW/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue Uygulama 8 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /04-For-Loop/app.js: -------------------------------------------------------------------------------- 1 | const app = Vue.createApp({ 2 | // template:` 3 | // 6 | // `, 7 | template:` 8 | 11 | `, 12 | data() { 13 | return { 14 | // gunler:["Pazartesi","Salı","Çarşamba","Perşembe","Cuma","Cumartesi","Pazar"] 15 | persons: [ 16 | {isim:"Varol", maas:4250}, 17 | {isim:"Seyit", maas:5250}, 18 | {isim:"Elif", maas:7250} 19 | ] 20 | } 21 | }, 22 | methods: { 23 | 24 | }, 25 | }); 26 | 27 | app.mount('#app') -------------------------------------------------------------------------------- /04-For-Loop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue Uygulama 8 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /05-V-Bind/app.js: -------------------------------------------------------------------------------- 1 | const app = Vue.createApp({ 2 | template:` 3 |
Deneme Yazısı
4 | `, 5 | data() { 6 | return { 7 | style:"color:green" 8 | } 9 | }, 10 | methods: { 11 | 12 | }, 13 | }); 14 | 15 | app.mount('#app') -------------------------------------------------------------------------------- /05-V-Bind/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue Uygulama 8 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /06-Uygulama-1/app.js: -------------------------------------------------------------------------------- 1 | const app = Vue.createApp({ 2 | template:` 3 |

Frameworkler

4 | 9 |

Seçilen Frameworkler

10 | 15 | `, 16 | data() { 17 | return { 18 | frameworks: [ 19 | {name:"Vue",selected:true}, 20 | {name:"React",selected:false}, 21 | {name:"Svelte",selected:false}, 22 | {name:"Angular",selected:false} 23 | ] 24 | } 25 | }, 26 | methods: { 27 | selectTag(f) { 28 | f.selected=!f.selected; 29 | } 30 | }, 31 | computed:{ 32 | selectTags() { 33 | console.log("değişik oldu"); 34 | return selecteds=this.frameworks.filter(i=>i.selected) 35 | } 36 | } 37 | }); 38 | 39 | app.mount('#app') -------------------------------------------------------------------------------- /06-Uygulama-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue Uygulama 8 | 9 | 31 | 32 | 33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /07-Vue-CLI-Kurulumu/vue-cli-component/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | not ie 11 5 | -------------------------------------------------------------------------------- /07-Vue-CLI-Kurulumu/vue-cli-component/.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 | -------------------------------------------------------------------------------- /07-Vue-CLI-Kurulumu/vue-cli-component/README.md: -------------------------------------------------------------------------------- 1 | # vue-cli-component 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 | ### Customize configuration 19 | See [Configuration Reference](https://cli.vuejs.org/config/). 20 | -------------------------------------------------------------------------------- /07-Vue-CLI-Kurulumu/vue-cli-component/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /07-Vue-CLI-Kurulumu/vue-cli-component/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "esnext", 5 | "baseUrl": "./", 6 | "moduleResolution": "node", 7 | "paths": { 8 | "@/*": [ 9 | "src/*" 10 | ] 11 | }, 12 | "lib": [ 13 | "esnext", 14 | "dom", 15 | "dom.iterable", 16 | "scripthost" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /07-Vue-CLI-Kurulumu/vue-cli-component/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-cli-component", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "core-js": "^3.8.3", 11 | "vue": "^3.2.13" 12 | }, 13 | "devDependencies": { 14 | "@vue/cli-plugin-babel": "~5.0.0", 15 | "@vue/cli-service": "~5.0.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /07-Vue-CLI-Kurulumu/vue-cli-component/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/waroi/BTK-VueJS-Egitimi/fe52b7d428d853762d18d92ce5a0849a31d4623c/07-Vue-CLI-Kurulumu/vue-cli-component/public/favicon.ico -------------------------------------------------------------------------------- /07-Vue-CLI-Kurulumu/vue-cli-component/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /07-Vue-CLI-Kurulumu/vue-cli-component/src/App.vue: -------------------------------------------------------------------------------- 1 |