v-bind

  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<body>
  <div id="simple">
    <h2 v-html="message"></h2>
  </div>
  <script type="text/javascript">
    var model = {
      message : '첫번째 Vue.js 앱 입니다!'
    };

    var simple = new Vue({
      el : '#simple',
      data : model
    })
  </script>
</body>

단방향바인딩
- model에서 값이 바뀌면 view에서는 값이 바뀐다.
- 하지만 view서 값이 바뀌면 model에 영향을 끼치지 못한다.

v-model

  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
  <div id="simple">
    <input type="text" v-model="name" placeholder="이름을 입력하세요" />
    <br />
    입력된 이름 : <h2 v-html="name"></h2>
  </div>
  <script type="text/javascript">
    var twoway = new Vue({
      el : '#simple',
      data : {
          name : ''
      }
    })
  </script>
</body>

양방향 바인딩
- v-bind 와는 다르게 view 에서 값이 바뀌면 model 에도 영향을 끼쳐서 model 데이터까지 교체가 된다.

조건문

## v-show

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
  <div id="account">
    예금액 : <input type="text" v-model="amount" />
    <img v-show="amount < 0" src="http://sample.bmaster.kro.kr/img/error.png" 
        title="마이너스는 허용하지 않습니다"
        style="width:15px; height:15px; vertical-align:middle" />
  </div>
  <script type="text/javascript">
  var simple1 = new Vue({
    el : '#account',
    data : {
        amount : 0
    }
  })
  </script>

이미 랜더링 되어있고 disply:none 속성이 지정되어 있다.

## v-if, v-else, v-else-if

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
  <div id="account">
    잔고 : <input type="text" v-model="balance" />
      <img v-show="balance < 0" src="http://sample.bmaster.kro.kr/img/error.png"
           title="마이너스는 허용하지 않습니다"
           style="width:15px; height:15px; vertical-align:middle" />
    <br />
    회원님의 등급 : 
    <span v-if="balance >= 1000000">Gold</span>
    <span v-else-if="balance >= 500000">Silver</span>
    <span v-else-if="balance >= 200000">Bronze</span>
    <span v-else>Basic</span>
  </div>
  <script type="text/javascript">
  var simple1 = new Vue({
    el : '#account',
    data : {
        balance : 0
    }
  })
  </script>

조건에 맞지 않으면 랜더링 하지 않는다.

v-for : 반복문

<style>
    #list  { width: 400px; border:1px solid black; border-collapse:collapse; }
    #list td, #list th { border:1px solid black;  text-align:center; }
    #list > thead > tr { color:yellow; background-color: purple; }
    .divider { height:2px; background-color: gray; }
</style>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="exmaple">
	<table id="list">
		<thead>
			<tr>
                <th>번호</th><th>이름</th><th>전화번호</th><th>주소</th>
            </tr>
		</thead>
        <tbody id="contacts">
            <template  v-for="(contact, index) in contacts"
                v-if="contact.address.indexOf('서울') > -1 ">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr class="divider" v-if="index % 5===4">
                <td colspan="4"></td>
            </tr>
            </template>
        </tbody>
	</table>
    </div>
    <script type="text/javascript">
    var model = {
        "pageno": 1,
        "pagesize": 10,
        "totalcount": 100,
        "contacts": [
            { "no": 100,"name": "설현", "tel": "010-3456-8299", "address": "서울" },
            { "no": 99, "name": "혜리", "tel": "010-3456-8298", "address": "서울" },
            { "no": 98, "name": "하니", "tel": "010-3456-8297", "address": "경기" },
            { "no": 97, "name": "성소", "tel": "010-3456-8296", "address": "제주" },
            { "no": 96, "name": "지아", "tel": "010-3456-8295", "address": "서울" },
            { "no": 95, "name": "정연", "tel": "010-3456-8294", "address": "강원" },
            { "no": 94, "name": "쯔위", "tel": "010-3456-8293", "address": "경기" },
            { "no": 93, "name": "사나", "tel": "010-3456-8292", "address": "서울" },
            { "no": 92, "name": "모모", "tel": "010-3456-8291", "address": "충남" },
            { "no": 91, "name": "소진", "tel": "010-3456-8290", "address": "서울" }
        ]
    };

    var list = new Vue({
        el : "#exmaple",
        data : model
    });
    </script>
</body>

template 태그로 여러 요소 반복 랜더링

V-pre

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="example">
    <span v-pre></span>
</div>
<script type="text/javascript">
var vm = new Vue({
    el : "#example",
    data : { 
        message : "Hello World"
    }
})
</script>
</body>

v-pre 태그안에 데이터를 컴파일을 하지 않고 그대로 출력한다.

v-once

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="example">
    <span v-once></span>
</div>
<script type="text/javascript">
var vm = new Vue({
    el : "#example",
    data : { 
        message : "Hello World"
    }
})

model 에 값이 바뀌더라도 값이 변하지 않는다. 한번만 랜더링 한다.

computed

computed : {
        sum : function() {
            var n = Number(this.num);
            if (Number.isNaN(n) || n < 1)  return 0;
            return ((1+n) * n) / 2;
        }
    }
    

함수를 속성처럼 쓸수 있게 해준다.
계산결과값이 속성처럼 쓰는것( 계산형 속성)