-
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
bootodo.html에서 Vue 코드가 적용되지 않습니다.
23.01.27 00:04 작성 23.01.27 00:20 수정 조회수 373
0
vue 코드를 아래와 같이 작성하면 브라우저에서 적용된게 보여야 하는데 안보입니다.
혹시 몰라서 vs code에다가 vue도 설치했는데도 안되네요. 얼른 답변 해주세요ㅠㅠ 첫 부분부터 막혔어요...
정확히 HTML로 todo앱 코딩하기에서 'Vue.js 골격 잡기' 이 강의내용에서 막혔습니다...
혹시 장고 버전 문제 때문에 적용이 안되는건가요?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue-Django ToDo App</title>
<style>
body {
text-align: center;
background-color: #ddd;
}
.inputBox {
margin: auto;
width: 70%;
background: white;
height: 50px;
border-radius: 50px;
line-height: 50px;
}
.inputBox .name {
border-style: none;
border-bottom: 1px solid #ddd;
width: 70px;
padding-left: 20px;
}
.inputBox .item {
border-style: none;
border-bottom: 1px solid #ddd;
width: 400px;
margin-left: 50px;
padding-left: 20px;
}
.todoList {
list-style: none;
padding: 10px 0;
text-align: left;
}
.todoList li {
display: flex;
height: 50px;
line-height: 50px;
margin: 0.5rem 0;
padding: 0 0.9rem;
background: white;
border-radius: 5px;
}
.removeBtn {
margin-left: auto;
font-size: 20px;
}
</style>
</head>
<body>
<div id='app'>
<h1>My Todo App !</h1>
<strong>서로 할 일이나 의견을 공유해 봅시다.</strong>
<br>
<div class="inputBox">
<input class="name" type="text" placeholder="name ..." v-model="name">
<input class="item" type="text" placeholder="type anything welcomed ..." v-model="newTodoItem">
<button v-on:click="add_todo()">ADD</button>
</div>
<ul class="todoList">
<li v-for="todo in todoItems">
<span>{{ todo.name }}:: {{ todo.item }}</span>
<span class="removeBtn">×</span>
</li>
</ul>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
todoItems:[
{name: '김석훈', item: 'Django 와 Vue.js 연동 프로그램을 만들고 있습니다.'},
{name: '홍길동', item: '이름을 안쓰면 홍길동으로 나와요...'},
{name: '이순신', item: '신에게는 아직 열두 척의 배가 있사옵니다.'},
{name: '성춘향', item: '그네 타기'},
],
},
methods: {},
})
</script>
</body>
</html>
답변을 작성해보세요.
0
김석훈
지식공유자2023.01.27
안녕하세요. 독자님.
바로 직전 독자님의 올려주신 내용입니다. 참고하여 해보시고, 안되면 다시 질문 올려주세요.
https://www.inflearn.com/questions/746185/cdn-vue%EB%B2%84%EC%A0%84
chanullity
질문자2023.01.29
네 그리고 최신버전으로 적용되는 cdn으로 '<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>' 이렇게 바꿔줘도 적용 됐습니다..!
답변 1