Vue.js는 사용이 간편하고 사용하기 쉬운 JS 라이브러리입니다. 반응형 데이터 바인딩과 결합된 뷰 구성 요소를 구현할 수 있습니다.
Vue.js는 실제로 데이터를 구축하는 방법인 JavaScript UI 라이브러리입니다. -driven web 인터페이스의 프로그레시브 프레임워크의 목표는 API를 사용하여 반응형 데이터 바인딩과 결합된 뷰 구성 요소를 최대한 간단하게 구현하는 것입니다. 다음 기사에서는 Vue.js를 사용하는 이유를 자세히 소개하겠습니다
추천 강좌: Vue.js]
vue.js를 사용하는 이유
vue.js는 시작하기 쉽고 간단하며 API, 성능 등 다양한 도구를 갖추고 있습니다. 경험하려면 하나의 스크립트만 필요합니다. 그것의 아름다움
모든 Vue 애플리케이션의 진입점은 인스턴스를 통해 생성됩니다. 그런 다음 인스턴스는 애플리케이션의 나머지 부분을 구성하고 애플리케이션이 확장됨에 따라 하위 멤버를 가져옵니다.
예:
<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="app">
<p>{{ message }}</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: '这是我的第一个Vue.js文件!'
}
})
</script>Rendering
애플리케이션 정보 및 위치에 대한 정보가 포함된 개체를 전달하여 인스턴스를 구성합니다. 로드됩니다.
el 속성: 어떤 요소에 설치해야 하는지 지정하며 값은 설정된 ID 요소입니다.
data 속성: 보기 데이터의 지정된 데이터에 바인딩되기 위해 이 속성에는 템플릿을 통해 액세스할 수 있는 값이 있는 개체가 있습니다.
참고: ID가 있는 div 앱은 애플리케이션을 설치하는 곳입니다.
이중 중괄호를 사용하여 데이터를 템플릿에 바인딩하고 메시지를 사용하여 바인딩 구성 중에 데이터 개체의 값을 지정합니다.
데이터 바인딩
조건
JS 프레임워크의 매우 유용한 기능은 결정을 내리기 전에 데이터를 뷰에 바인딩하는 기능입니다. 값이 true로 확인될 때만 Vue에 바인딩하도록 지시할 수 있습니다.
<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="app">
<h2 v-if="demo1">为true时显示demo1</h2>
<h2 v-else="demo2">为true时显示demo2</h2>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data:{
demo1:true
}
})
</script>
loop
은 바인딩된 데이터 집합을 반복하는 간단한 API인 v-for 지시문을 제공합니다. 이를 위해서는 데이터 배열만 필요합니다.
사이트 양식 사이트의 특수 구문이 필요합니다. 사이트는 소스 데이터 배열이고 사이트는 배열 요소 반복의 별칭입니다.
<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="app">
<ul>
<li v-for="site in sites">{{site.name}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data:{
sites:[
{name:'张三'},
{name:'李四'},
{name:'王五'}
]
}
})
</script>
양방향 바인딩
Vue의 양방향 바인딩은 매우 간단하며 v-model을 구현하는 데 하나의 명령만 필요합니다. 텍스트 입력에 v-model 지시문을 첨부하고 동시에 데이터를 표시하여 입력 상자에 값을 표시하여 양방향 바인딩을 구현해 보겠습니다
<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="app">
<p>
<input type="text" v-model="mentor">{{mentor}}
</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data:{
message:'这是双向绑定',
mentor:'',
mentors:[]
}
})
</script>
요약: 이것이 이 글의 내용입니다. 모든 사람에게 도움이 되기를 바랍니다. 학습에 도움이 됩니다.
위 내용은 Vuejs를 사용하는 이유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!