Vue.js는 무엇입니까?
Vue.js를 사용하면 지시문 이라는 HTML 속성으로 HTML 을 확장 할 수 있습니다.
Vue.js 지시문은 HTML 애플리케이션에 기능 을 제공합니다.
Vue.js는 내장 지시문 및 사용자 정의 지시문 을 제공합니다.
Vue.js 지시문
Vue.js는 {{ }}데이터의 자리 표시자로 이중 중괄호를 사용합니다.
Vue.js 지시문은 접두사가 있는 HTML 속성입니다. v-
보기 보기
아래 예제에서는 new Vue() 를 사용하여 새 Vue 객체를 만듭니다 .
el: 속성 은 새 Vue 개체를 id="app" 인 HTML 요소에 바인딩합니다 .
예시
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Vue.js 바인딩
Vue 객체가 HTML 요소에 바인딩되면 Vue 객체가 변경될 때 HTML 요소가 변경됩니다.
예시
<div id="app">
{{ message }}
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
function
myFunction() {
myObject.message = "John Doe";
}
</script>
Vue.js 양방향 바인딩
v-model지시문은 HTML 요소의 값을 애플리케이션 데이터에 바인딩합니다 .
이를 양방향 바인딩이라고 합니다.
예시
<div id="app">
<p>{{ message }}</p>
<p><input v-model="message"></p>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Vue.js 루프 바인딩
지시문을 사용하여 v-forVue 객체 배열을 HTML 요소의 "배열"에 바인딩:
예시
<div id="app">
<ul>
<li v-for="x in todos">
{{
x.text }}
</li>
</ul>
</div>
<script>
myObject =
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn
JavaScript' },
{ text: 'Learn
Vue.js' },
{ text: 'Build
Something Awesome' }
]
}
})
</script>