💡ビューテンプレート

01.ビューテンプレート

01-1. ビューテンプレートとは?

<div id="app">
         <h3>{{message}}}}</h3> 
</div>
<script>
	 new Vue({
	 	el:'#app', 
	 	data:{
	 		message: 'Hello Vue.js!'
	 	}
	 });
</script> 

<div id="app"></div>
<script>
	new Vue({
		el:'#app',
		data: {
		  message: 'Hello Vue.js!'	
		},
		template: '<h3>{{ message }}</h3>'
	});
</script>

01-2. データのバインド

	<div id="app" v-once>
		{{ message }}
	</div>
	<script>
		new Vue({
			el: '#app',
			data:{
			 	message:'Hello vue.js!'
			}
		})
	</script>

<div id="app">
	<p v-bind:id="idA">아이디 바인딩</p>
	<p v-bind:class="classA">클래스 바인딩</p>
	<p v-bind:style="styleA">스타일 바인딩</p>
</div>
<script>
	new Vue({
		el:'#app',
		data:{
			   idA: 10, 
			   classA: 'container', 
			   styleA: 'color:blue'
		}
	});
</script>

01-3. JavaScript式

<div id="app">
    <p>{{message}}</p>
    <p>{{message + '!!!'}}</p>
    <p>{{message.split('').reverse().join('')}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data: {
            message: 'Hello Vue!'
        }
    });
</script>

<div id="app">
    {{ var a = 10; }} <!-- X, 선언문은 사용 불가능  -->
    {{ if (true) {return 100} }} <!-- X, 분기 구문은 사용 불가능 -->
    {{ true ? 100 : 0 }} <!-- O, 삼항 연산자로 표현 가능 -->

    {{ message.split('').reverse().join('') }} <!-- X, 복잡한 연산은 인스턴스 안에서 수행 -->
    {{ reversedMessage }} <!-- O, 스크립트에서 computed 속성으로 계산한 후 최종 값만 표현 -->
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({ 
        el:'#app',
        data: {
            message: 'Hello Vue!'
        },
        computed : { //데이터 속성을 자동으로 계산해 주는 속성
            reversedMessage :  function() { // {{ reversedMessage }}에 표현되지 전에 연산을 수행하는 함수
                return this.message.split('').reverse().join('');
            }
        }
    });
</script>

01-4. ガイド人

<div id="app">
    <a v-if="flag">두잇 vue</a>
    <ul>
        <li v-for="system in systems">{{ system }}</li>
        <!-- v-for = "아이템명 in array" -->
    </ul>
    <p v-show="flag">두잇 vue</p>
    <h5 v-bind:id = "uid">뷰 입문서</h5>
    <!-- v-bind:속성 = "속성이름" -->
    <button v-on:click = "popupAlert">경고 창 버튼</button>
    <!-- v-on:이벤트이름 = "메소드이름" -->
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({ 
        el:'#app',
        data: {
            flag:true,
            systems : ['andoroid', 'ios', 'window'],
            uid: 10
        },
        methods : {
            popupAlert : function() {
                return alert('경고 창 표시');
            }
        }
    });
</script>

01-5. 高度なテンプレート技術

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMsg">문자열 역순</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({ 
        el:'#app',
        data: {
            message:'Hello Vue!'
        },
        // methods 속성
        methods: {
            reverseMsg: function(){
                this.message =  this.message.split('').reverse().join('');
                return this.message;
            }
        }
    });
</script>

<div id="app">
    <input v-model="message">
    <!-- v-model 뷰 인스턴스의 데이터와 즉시 동기화한다. 화면에 입력된 값을 저장하여 서버에 보내거나 watch와 같은 고급 속성을 이용하여 추가 로직을 수행한다 -->
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({ 
        el:'#app',
        data: {
            message: 'Hello Vue!'
        },
        watch: {
            message: function(data){
                console.log("message의 값이 바뀝니다 :", data);
            }
        }
    });
</script>

doit vueを参照してください。js