bootodo.html에서 Vue 코드가 적용되지 않습니다.
577
2 asked
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>
Answer 1
0
안녕하세요. 독자님.
바로 직전 독자님의 올려주신 내용입니다. 참고하여 해보시고, 안되면 다시 질문 올려주세요.
https://www.inflearn.com/questions/746185/cdn-vue%EB%B2%84%EC%A0%84
1
네 그리고 최신버전으로 적용되는 cdn으로 '<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>' 이렇게 바꿔줘도 적용 됐습니다..!
들여쓰기 단축키가 어떻게 되나요?
0
253
1
mixin 에러가 나서 실행이 안되요.
0
420
4
화면 에러화면이 자꾸 뜨네요..
0
418
4
todo_form.html 하단에 todo_List.html의 리스트가 오게 하고 싶습니다.
0
353
1
cdn vue버전
3
720
2
bootstrap 팝업창 만들기 단원에서 질문있습니다.
0
920
3
MultipleObjectMixin get 메소드 상속
0
252
1
Vue에서 파일 업로드시
0
718
1
vue django 연동 질문
0
500
1
장고 프론트엔드 백엔드 분리 관련 질문입니다 !
0
491
1
home화면에서 이미지가 안보입니다.
0
293
2
이 강의와 새로 만드신 강의의 차이점을 알고 싶습니다.
0
301
1
좋은 강의 감사합니다.
0
249
1
staticfiles가 static으로 바뀌었습니다.
0
278
1
장고 3.1에서 다음과 같이 바뀌었습니다.
0
292
2
Vuejs 와 Reactjs의 차이
0
356
1
vue js 오픈소스 연동
0
495
2
createView에서 success_url
0
252
1
강의자료 HtmlTodo.zip 파일 구글드라이브에서 바이러스로 인식해서 다운로드 안됩니다.
1
269
2
object에 왜 todo 컬럼이 추가되는지?
0
206
2
django_only 실습중 에러 제보
0
277
3
BaseListView
1
275
1
todo_confirm_delete.html
1
344
1
값이 전달 안됩니다
1
219
2