Vue Template Mustache Syntax

Description of Mustache Syntax

by gbkim1988

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic" rel="stylesheet">

<div class="dsc">
  <h1> Vue.js Template 문법 : Interpolation (써넣음, 보간) </h1>

	<strong> @Interpolation 문법 </strong>
	<p>
	 이번 장에서 다루는 내용 : 
	</p>
	<ul>
		<li>double curly braces : {{ msg }}</li>
		<li>v-once: one-time interpolation </li>
		<li>v-html: raw HTML </li>
		<li>v-bind: HTML's attirbutes' interpolation </li>
		<li>Vue Component : Custom Component</li>
		<li>v-if : conditional Rendering</li>
	</ul>
</div>
<hr>
<div id="app">
  <!-- 
    double-curly braces syntax `{{}}`
  -->
  <span>Message Toggle : <strong> {{ msg }} </strong></span> <br>
	<span v-once>Message Toggle (v-once) : <strong> {{ msg }} </strong></span> <br>
	<button @click="changeMsgData"> msg 변경
	</button>
	<hr>
	<!-- 
		문자열을 기반으로 html 을 표현할 때 v-html 을 사용하면 렌더링 된다. 
		그러나 문자열 내에 interploation 은 적용되지 않는다. 
	-->
	<p>Using mustaches: {{ rawHtml }}</p>
	<p>Using v-html directive: <span v-html="rawHtml"></span></p>
	<hr>
	<button @click="isButtonDisabled = !isButtonDisabled">
	 toggle 
	</button>
	<button v-bind:disabled="isButtonDisabled">Button</button>
	<hr>
	<my-component></my-component>
	<hr>
	<button v-on:click="buttonAction">
		Toggle
	</button>
	<h1 v-if="ok">Yes</h1>
	<h1 v-else>No</h1>
</div>

CSS

body {
  font-family: 'Nanum Gothic', sans-serif;
	/* 중앙 정렬 */
}
h1 {
	text-align: center;
}
.demo {
  width: 200px;
  height: 200px;
  padding: 20px;
  display: inline-block;
  background-color: grey;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

Vue

Vue.component('my-component', {
  template: '<p class="foo bar">This is custom component</p>'
});

new Vue({
  el: "#app",
  data: function() {
  	return {
    	attachRed: false,
      msg: "이것은 msg 데이터입니다.",
			change: false,
			rawHtml: "<span> <strong> rawHtml 속성 {{ msg }} </strong> <span>",
			isButtonDisabled: false,
			ok: false,
    };
  },
	methods: {
		changeMsgData: function() {
			if (this.change){
				this.msg = "이것은 메시지 데이터가 변경된 것입니다.";
				this.change = !this.change;
			}else{
				this.msg = "이것은 msg 데이터입니다.";
				this.change = !this.change;
			}
		},
		buttonAction: function() {
			this.ok = !this.ok;
		}
	}
});