More Related Content
What's hot
What's hot (20)
Similar to Vue.js 입문 02 템플릿 문법
Similar to Vue.js 입문 02 템플릿 문법 (20)
More from 승빈이네 공작소
More from 승빈이네 공작소 (19)
Vue.js 입문 02 템플릿 문법
- 3. Interpolations 두겹의 중괄호( {{ 와 }} ) 사이에 JS문법 사용 (= 보간법) Mustache
- 4. Interpolations 유효 범위 <body> <div id="app"> <h1> Hello {{ str }} world!</h1> <h2 class="{{ str }}"> Hello world!</h2> <h3 {{ str }}> Hello world!</h3> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { str: 'Vue.js' } }); </script> </body>
- 5. 오류가 납니다!
- 6. Interpolations에서 가능한 문법 <body> <div id="app"> <h1>{{ new Date() }}</h1> <h1>{{ (Math.floor(Math.random()*6)%2 == 1) ? '홀' : '짝' }}</h1> <h1>{{ ('내'+'힘들다').split('').reverse().join('') + "!" }}</h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app' }); </script>
- 7. Interpolations에서 가능한 문법 IF문은 사용 금지 입니다! => 3항 연산자 또 복잡한 문법은 사용 X => 메소드 작성 후 호출
- 8. Quiz Time 화면에 [내힘 들다] 처럼 중간에 기울림꼴 문자를 사용하려면? <body> <div id="app"> <h1>{{ str }}</h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { str: '어떻게 입력해야 할까요?' } }); </script> </body> ???
- 9. v-html <body> <div id="app"> <h1 v-html='str'></h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { str: '문자를 <strong>굵게</strong> 또는 <em>기울리고</em> 싶은데...' } }); </script> </body>
- 10. Directive html 태그 속성에 v-라는 접두가 붙어있는 속성 Angular.js 따라 만들었다고 하던데?
- 11. Directive의 종류 https://vuejs.org/v2/api/#Directives v-html v-if , v-show v-for v-on v-bind , v-model