<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: '안녕하세요 Vue!'
}
})
Vue.component('my-component', {
template: '<span></span>',
data: {
message: 'hello'
}
})
vue file
<!-- .vue 파일 구조 -->
<template>
<!-- html (뷰 컴포넌트의 표현단, 템플릿 문법) -->
</template>
<script>
// 자바스크립트 (뷰 컴포넌트 내용)
</script>
<style>
/* CSS (뷰 템플릿의 스타일링) */
</style>
<div id="app-2">
<span v-bind:title="message">
내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다'
}
})
<body>
<div id="app">
<h1 v-if="!message">You must send a message for help!</h1>
<my-component v-else v-bind:msg="message"></my-component>
<textarea v-model="message"></textarea>
<button v-show="message">
Send word to allies for help!
</button>
<pre>
{{ $data }}
</pre>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
// 등록
Vue.component('my-component', {
props: ['msg'],
template: '<div></div>',
beforeCreate: function() {
console.log('beforecreated')
},
created: function() {
console.log('created');
},
beforeMount: function() {
console.log('beforemount')
},
mounted: function() {
console.log('mounted')
},
beforeUpdate: function() {
console.log('beforeupdate')
},
updated: function() {
console.log('updated')
},
beforeDestroy: function() {
console.log('beforedestroy')
},
destroyed: function() {
console.log('destroyed')
}
})
new Vue({
el: '#app',
data: {
message: 'Our king is dead! Send help!'
}
})