![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>
???](https://image.slidesharecdn.com/vue21-190109120305/85/Vue-js-02-8-320.jpg)
![[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기](https://cdn.slidesharecdn.com/ss_thumbnails/xeconphpfest2014-angularjs-141110181025-conversion-gate01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[문디 10주차] d3.js 상호작용](https://cdn.slidesharecdn.com/ss_thumbnails/10-150521023910-lva1-app6892-thumbnail.jpg?width=640&height=640&fit=bounds)
Vue.js 입문 02 템플릿 문법
- 1.
- 2.
- 3. Interpolations 두겹의 중괄호( {{와 }} ) 사이에 JS문법 사용 (= 보간법) Mustache
- 4. Interpolations 유효 범위 <body> <divid="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> <divid="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> <scriptsrc="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