[공부] 프로그래밍/Vue.js
-
최종 과제[공부] 프로그래밍/Vue.js 2023. 11. 5. 16:34
추가 {{ item.text }} X const app = Vue.createApp({ data() { return { newItem: '', items: [], }; }, methods: { addItem() { if (this.newItem.trim() !== '') { const color = this.newItem || 'black'; this.items.push({ text: this.newItem, color }); this.newItem = ''; } }, removeItem(index) { this.items.splice(index, 1); }, }, }); app.mount('#app');
-
router[공부] 프로그래밍/Vue.js 2023. 11. 5. 15:24
router Top Top 画面A 画面A 画面B 画面B Page A Top Page B Top const { createApp } = Vue; const { createRouter, createWebHistory } = VueRouter; const Home = { template: '#page-top' }; const routes = [ { path: "/", component: { template: '#page-top' } }, { path: "/page_a", component: { template: '#page_a' } }, { path: "/page_b", component: { template: '#page_b' } }, { path: "/:pathMatch(.*)", redirect: "/"..
-
Vue 인스턴스[공부] 프로그래밍/Vue.js 2023. 11. 5. 14:52
Vue 인스턴스 test add {{ item.id }} : {{ item.name }} new Vue({ el: '#root', data() { return { list: [ { id: 1, name: "test1" }, { id: 2, name: "test2" } ], add_name: "" }; }, methods: { add() { if (this.add_name) { const newItem = { id: this.list.length + 1, name: this.add_name }; this.list.push(newItem); this.add_name = ""; } } } });