Last active
February 14, 2018 14:07
-
-
Save ShinJJang/8b5f42a8c359a2444ed4f11596c1f98c to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>Vue - Hello World</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Noto Sans KR', 'Helvetica Neue', sans-serif; | |
| } | |
| a { | |
| color: #369; | |
| text-decoration: none; | |
| } | |
| </style> | |
| <!-- <link rel="stylesheet" | |
| href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script> --> | |
| </head> | |
| <body> | |
| <h1>Hello World with Vue.js!</h1> | |
| <p> | |
| <a href='https://kr.vuejs.org/v2/guide/#컴포넌트를-사용한-작성방법'>Vue 튜토리얼</a>을 참고 하였습니다 | |
| </p> | |
| <h2>선언적 렌더링 Declarative Rendering</h2><hr/> | |
| <div id="app"> | |
| {{ message }} | |
| </div> | |
| <h2>선언적 렌더링 - directive(v-bind)</h2><hr/> | |
| <div id="app-2"> | |
| <span v-bind:title="message"> | |
| 위에 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다! (마우스 오버로 컨텐츠가 바뀌는게 아니라 툴팁) | |
| </span> | |
| </div> | |
| <h2>조건문</h2><hr/> | |
| <div id="app-3"> | |
| <p v-if="seen">이제 나를 볼 수 있어요</p> | |
| </div> | |
| <h2>반복문</h2><hr/> | |
| <div id="app-4"> | |
| <ol> | |
| <li v-for="todo in todos"> | |
| {{ todo.text }} | |
| </li> | |
| </ol> | |
| </div> | |
| <h2>사용자 입력 핸들링(이벤트 리스너)</h2><hr/> | |
| <div id="app-5"> | |
| <p>{{ message }}</p> | |
| <button v-on:click="reverseMessage">메세지 뒤집기</button> | |
| </div> | |
| <h2>사용자 입력 핸들링(양방향 바인딩)</h2><hr/> | |
| <div id="app-6"> | |
| <p>{{ message }}</p> | |
| <input v-model="message"> | |
| </div> | |
| <h2>컴포넌트를 사용한 작성방법</h2><hr/> | |
| <div id="app-7"> | |
| <ol> | |
| <todo-item | |
| v-for="item in todos" | |
| v-bind:todo="item" | |
| v-bind:key="item.id"> | |
| </todo-item> | |
| </ol> | |
| </div> | |
| <!-- <pre v-highlightjs="sourcecode"><code class="javascript"></code></pre> --> | |
| <script src="https://cdn.jsdelivr.net/npm/vue"></script> | |
| <script> | |
| // 선언적 렌더링 Declarative Rendering - Hello World | |
| var app = new Vue({ | |
| el: '#app', | |
| data: { | |
| message: '안녕하세요 Vue!' | |
| } | |
| }) | |
| // 선언적 렌더링 - directive(v-bind) | |
| var app2 = new Vue({ | |
| el: '#app-2', | |
| data: { | |
| message: '이 페이지는 ' + new Date() + '에 로드 되었습니다' | |
| } | |
| }) | |
| // 조건문 | |
| var app3 = new Vue({ | |
| el: '#app-3', | |
| data: { | |
| seen: true | |
| } | |
| }) | |
| // 반복문 | |
| var app4 = new Vue({ | |
| el: '#app-4', | |
| data: { | |
| todos: [ | |
| { text: 'JavaScript 배우기' }, | |
| { text: 'Vue 배우기' }, | |
| { text: '무언가 멋진 것을 만들기' } | |
| ] | |
| } | |
| }) | |
| // 사용자 입력 핸들링(이벤트 리스너) | |
| var app5 = new Vue({ | |
| el: '#app-5', | |
| data: { | |
| message: '안녕하세요! Vue.js!' | |
| }, | |
| methods: { | |
| reverseMessage: function () { | |
| this.message = this.message.split('').reverse().join('') | |
| } | |
| } | |
| }) | |
| // 사용자 입력 핸들링(양방향 바인딩) | |
| var app6 = new Vue({ | |
| el: '#app-6', | |
| data: { | |
| message: '안녕하세요 Vue!' | |
| } | |
| }) | |
| // 컴포넌트를 사용한 작성방법 | |
| Vue.component('todo-item', { | |
| props: ['todo'], | |
| template: '<li>{{ todo.text }}</li>' | |
| }) | |
| var app7 = new Vue({ | |
| el: '#app-7', | |
| data: { | |
| todos: [ | |
| { id: 1, text: '크림 치즈를 구매' }, | |
| { id: 2, text: '젓갈을 크림 치즈에 올려서 플레이팅' }, | |
| { id: 3, text: '위스키와 함께 먹는다' } | |
| ] | |
| } | |
| }) | |
| // Vue.directive('highlightjs', { | |
| // deep: true, | |
| // bind: function(el, binding) { | |
| // // on first bind, highlight all targets | |
| // let targets = el.querySelectorAll('code') | |
| // targets.forEach((target) => { | |
| // // if a value is directly assigned to the directive, use this | |
| // // instead of the element content. | |
| // if (binding.value) { | |
| // target.textContent = binding.value | |
| // } | |
| // hljs.highlightBlock(target) | |
| // }) | |
| // }, | |
| // componentUpdated: function(el, binding) { | |
| // // after an update, re-fill the content and then highlight | |
| // let targets = el.querySelectorAll('code') | |
| // targets.forEach((target) => { | |
| // if (binding.value) { | |
| // target.textContent = binding.value | |
| // hljs.highlightBlock(target) | |
| // } | |
| // }) | |
| // } | |
| // }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Vue 튜토리얼 사이트처럼 코드를 뷰에서 보이게 highlight.js를 넣으려다 코드가 지져분하여 주석 처리함