├── README.md ├── Section #01 ├── 00_Js_vs_Vue │ ├── JavaScript │ │ ├── app.js │ │ └── index.html │ └── Vue │ │ ├── app.js │ │ └── index.html ├── 01_Vue_Instance │ ├── app.js │ ├── index.html │ └── style.css ├── 02_Events │ ├── app.js │ └── index.html ├── 03_Counter_App │ ├── app.js │ └── index.html ├── 04_Reactivity_Example │ ├── app.js │ └── index.html ├── 05_Life_Cycle_Hooks │ ├── app.js │ └── index.html ├── 06_Class_and_Style_Binding │ ├── app.js │ ├── index.html │ └── style.css ├── 07_Conditions │ ├── app.js │ └── index.html ├── 08_Loops_and_ToDo │ ├── app.js │ └── index.html └── README.md ├── Section #02 ├── .prettierrc ├── 00_Component │ ├── app.js │ ├── index.html │ └── style.css ├── 01-vue-cli │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── App.vue │ │ ├── assets │ │ ├── logo.png │ │ └── style.css │ │ ├── components │ │ ├── CounterItem.vue │ │ └── appHeader.vue │ │ └── main.js ├── 02-todo-app │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── App.vue │ │ ├── assets │ │ ├── logo.png │ │ └── style.css │ │ ├── components │ │ ├── AddSection.vue │ │ ├── ListSection.vue │ │ ├── ResultBar.vue │ │ ├── TodoList.vue │ │ └── TodoListItem.vue │ │ └── main.js └── README.md ├── Section #03 ├── 00_components_communications │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── App.vue │ │ ├── assets │ │ ├── logo.png │ │ └── style.css │ │ ├── components │ │ ├── AddSection.vue │ │ ├── ListSection.vue │ │ └── UserSection.vue │ │ └── main.js ├── 01_component-slots │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── App.vue │ │ ├── assets │ │ ├── logo.png │ │ └── style.css │ │ ├── components │ │ └── Modal.vue │ │ └── main.js ├── 02_dynamic_components │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── App.vue │ │ ├── assets │ │ ├── logo.png │ │ └── style.css │ │ ├── components │ │ ├── Blue.vue │ │ ├── Green.vue │ │ └── Red.vue │ │ └── main.js ├── 03_http_request │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── db.json │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── App.vue │ │ ├── assets │ │ ├── logo.png │ │ └── style.css │ │ └── main.js └── README.md ├── Section #04 ├── 00_vuex_intro │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── App.vue │ │ ├── assets │ │ ├── logo.png │ │ └── style.css │ │ ├── components │ │ ├── NewUser.vue │ │ └── UserList.vue │ │ ├── main.js │ │ └── store.js ├── 01_vuex_modules │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── App.vue │ │ ├── assets │ │ ├── logo.png │ │ └── style.css │ │ ├── components │ │ └── HelloWorld.vue │ │ ├── main.js │ │ └── store │ │ ├── index.js │ │ └── modules │ │ ├── contact.js │ │ └── taskmanager.js └── README.md ├── Section #05 ├── 00_vue_router │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── App.vue │ │ ├── assets │ │ ├── logo.png │ │ └── style.css │ │ ├── components │ │ └── HelloWorld.vue │ │ ├── main.js │ │ ├── router.js │ │ └── views │ │ ├── About.vue │ │ ├── Details.vue │ │ └── Home.vue ├── 01_vue_router_app │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── db.json │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── App.vue │ │ ├── assets │ │ └── logo.png │ │ ├── components │ │ └── HelloWorld.vue │ │ ├── main.js │ │ ├── router.js │ │ ├── utils │ │ └── appAxios.js │ │ └── views │ │ ├── HomePage.vue │ │ └── NewBookmark.vue └── README.md ├── Section #06 ├── README.md └── social-like │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── db.json │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── server │ ├── app.js │ ├── package-lock.json │ └── package.json │ └── src │ ├── App.vue │ ├── assets │ ├── logo.png │ └── style.css │ ├── components │ ├── Account │ │ └── sideBar.vue │ ├── HelloWorld.vue │ ├── Home │ │ └── Sidebar.vue │ └── Shared │ │ ├── appBookmarkList │ │ ├── BookmarkListItem.vue │ │ └── index.vue │ │ └── appHeader.vue │ ├── main.js │ ├── router │ └── index.js │ ├── store │ └── index.js │ ├── utils │ └── appAxios.js │ └── views │ ├── Account.vue │ ├── Favorites.vue │ ├── Home.vue │ ├── Login.vue │ ├── NewBookmark.vue │ └── Register.vue ├── Section #07 ├── 00-composition-api │ ├── .gitignore │ ├── .vscode │ │ └── extensions.json │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── composables │ │ │ ├── Counter.js │ │ │ ├── Header.js │ │ │ ├── Search.js │ │ │ └── Toggle.js │ │ └── main.js │ └── vite.config.js ├── 01-todo-list │ ├── .vscode │ │ └── extensions.json │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.js │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ ├── index.css │ │ │ └── logo.png │ │ ├── components │ │ │ ├── Summary.vue │ │ │ ├── addSection.vue │ │ │ ├── todoList.vue │ │ │ └── todoListItem.vue │ │ └── main.js │ ├── tailwind.config.js │ ├── vite.config.js │ └── yarn.lock └── README.md ├── Section #08 ├── 00_script_setup │ ├── .gitignore │ ├── .vscode │ │ └── extensions.json │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── oddOrEven.vue │ │ ├── composables │ │ │ └── Utils.js │ │ └── main.js │ └── vite.config.js ├── 01-item-list-app │ ├── .gitignore │ ├── .vscode │ │ └── extensions.json │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.js │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ ├── index.css │ │ │ └── logo.png │ │ ├── components │ │ │ ├── appSidebar.vue │ │ │ ├── contactSection.vue │ │ │ ├── invoiceItem.vue │ │ │ ├── invoiceItems.vue │ │ │ ├── invoiceSummary.vue │ │ │ ├── invoinceContent.vue │ │ │ └── ui │ │ │ │ └── appHeading.vue │ │ └── main.js │ ├── tailwind.config.js │ └── vite.config.js └── README.md ├── Section #09 ├── 00_intro_to_suspense │ ├── .gitignore │ ├── .vscode │ │ └── extensions.json │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── Todos.vue │ │ │ └── Users.vue │ │ └── main.js │ └── vite.config.js ├── 01_intro_to_teleport │ ├── .gitignore │ ├── .vscode │ │ └── extensions.json │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── HelloWorld.vue │ │ └── main.js │ └── vite.config.js ├── 02_namespaced_components │ ├── .gitignore │ ├── .vscode │ │ └── extensions.json │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── Forms │ │ │ │ ├── Input.vue │ │ │ │ ├── Label.vue │ │ │ │ └── Select.vue │ │ │ └── form-components.js │ │ └── main.js │ └── vite.config.js └── README.md └── Section #10 ├── README.md └── social-like-script-setup ├── .gitignore ├── README.md ├── babel.config.js ├── db.json ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html ├── server ├── app.js ├── package-lock.json ├── package.json └── yarn.lock ├── src ├── App.vue ├── assets │ ├── logo.png │ └── style.css ├── components │ ├── Account │ │ └── sideBar.vue │ ├── HelloWorld.vue │ ├── Home │ │ └── Sidebar.vue │ └── Shared │ │ ├── appBookmarkList │ │ ├── BookmarkListItem.vue │ │ └── index.vue │ │ └── appHeader.vue ├── main.js ├── router │ └── index.js ├── store │ └── index.js ├── utils │ └── appAxios.js └── views │ ├── Account.vue │ ├── Favorites.vue │ ├── Home.vue │ ├── Login.vue │ ├── NewBookmark.vue │ └── Register.vue └── yarn.lock /Section #01/00_Js_vs_Vue/JavaScript/app.js: -------------------------------------------------------------------------------- 1 | // Html etiketlerinin id değerleri ile alınması 2 | const todoText = document.querySelector('#todoText'); 3 | const addButton = document.querySelector('#addButton'); 4 | const todoList = document.querySelector('#todoList'); 5 | 6 | // Buton için event tanımlaması ve tıklanma durumu için atanan arrow func 7 | addButton.addEventListener("click", () => { 8 | // Tıklandığında li etiketi oluşturacak 9 | const listItem = document.createElement("li"); 10 | //
  • etiketleri içeriğini input alanı değeri olarak atanması 11 | listItem.textContent = todoText.value; 12 | //
  • etiketlerinin