Vue는 vue함수로 새 vue 인스턴스를 만드는 것 부터 시작한다.
<body>
<div>
{{화면에}} {{출력되는 영역}}
</div>
<script>
var vm = new Vue({ // vm인스턴스 부분
// 옵션 (함수 영역)
})
</script>
</body>
뷰 인스턴스 유효 범위 확인하기
<template>
<div id='test'> ------------- 여기부터
{{ message }}
</div> ---------------------- 여기까지가 test인스턴스의 유효범위
</template>
<script>
new Vue({
el: '#test', ------------- 얘도 사실 vue/cli로 설정해주면
vue를 html파일에 직접 삽입할 때 말고는 쓸 일 많이 없음.
data: {
message: 'hello ~~'
}
})
</script>
ex)
return에 data의 정보를 불러올 때는
Vue.js에서 정해준 data를 this에 바로 담아주기 때문에
Data를 따로 적어주지 않아도 됨.
ex) this.data.person.name ( x )
this.person.name ( o )
• 화면에 출력되는 부분에 함수로 만든 컴포넌트를 출력시키고 싶으면, 소괄호를 달아줘야 함. (인자)
함수 안에서 함수 불러오기(사용)도 가능함. 앞에 this붙여서
함수 안에 매개변수를 받아서 함수 안에서 사용 가능함
vue.js에서의 함수를 선언하는 2가지 방법
1) 함수명 : function ( ){ } ex) nextYear: function(greeting){ return }
2) 함수명( ) { } ex) nextYear(greeting){ return }
참고) vue.js
Front-end