뷰(Vue) 인스턴스 생성

vue 라이브러리 추가

<script src="~/Scripts/vue.min.js"></script>

html에 뷰 소스 코드 추가

<h3>VueJS 2 in ASP.NET MVC 5</h3> <div id="aboutPage">     {{ message }} </div>

<script>     new Vue({         el: "#aboutPage",         data: {             message:"Hello Vue! in About Page"         }     }); </script>

뷰 인스턴스 형식

new Vue({    ... });

뷰 인스턴스 옵션 속성

뷰 인스턴스 옵션 속성은 인스턴스를 생성할 때 재정의할 data, el, template 등의 속성을 의미 이 외에도 template, methods, created등 미리 정의되어 있는 속성을 사용할 수 있음.

뷰 인스턴스 정의 el 속성, data 속성에 message 정의 추가 new Vue()로 인스턴스를 생성 el 속성에 지정한 화면 요소에 인스턴스가 할당 div 화면의 {{message}} 에 data.message 값 치환