vuejs에는 어떤 기능이 있나요?

Vuejs 기능: 1. 간결한 템플릿 구문을 사용하여 데이터를 DOM에 선언적으로 렌더링합니다. 2. "v-if" 및 "v-for" 명령을 사용하여 조건부 및 루프 구조를 구현합니다. 데이터의 양방향 바인딩을 실현합니다. 4. 이벤트 리스너를 사용하여 인터페이스 상호 작용을 실현합니다. 5. 구성 요소 기반 개발 등

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

Vue.js의 기본 기능을 알아보세요~

1. 데이터 렌더링

　Vue.js의 핵심은 간결한 템플릿 구문을 사용하여 데이터를 선언적으로 DOM에 렌더링하는 것입니다!

　예 1:

{{ message }}

이제 vue 애플리케이션이 생성되었습니다. 이제 데이터와 DOM이 함께 바인딩되었습니다. app.message가 수정되면 그에 따라 DOM이 업데이트됩니다.

예제 2:

  Hover your mouse over me for a few seconds to see my dynamically bound title!  

　 예 2에는 Vue의 특수 속성인v-bind지시문이 포함되어 있으며 해당 DOM 요소에서도 렌더링됩니다!

2. 조건 및 루프

　 Vue는 DOM 텍스트를 데이터에 바인딩할 수 있을 뿐만 아니라 DOM 구조를 데이터에 바인딩할 수도 있습니다!

　1. 조건

v-if명령을 사용하여 조건 설정을 달성할 수 있으며 실제 응용 프로그램에서 요소의 표시를 제어하는 것도 매우 간단합니다.

　　예 3:

 
Now you see me
 

　　데이터 속성을 수정하여 응답을 얻을 수도 있습니다.

　2. Loop

　　　각 명령어에는 특별한 기능이 있습니다.v-for명령어는 배열의 데이터를 바인딩하여 목록을 렌더링할 수 있습니다!

　　예 4:

 
 
 {{todo.text}} 
 
 

var app_3_2=new Vue({ el:'#app_3_2', data:{ todos:[ { text:'Learn JavaScript' }, { text:'Learn Vue' }, { text:'Learn Other ' } ] } })

　콘솔을 열고 app_3_2를 입력하세요. .todos.push({ text: 'New item' }), 새 항목이 목록에 추가된 것을 확인할 수 있습니다..todos.push({ text: '新项目' })，你会发现列表中添加了一个新项。

3、双向绑定

　　Vue 提供了一个v-model指令，它能轻松实现表单输入和应用状态之间的双向绑定。

　　例5：

  
{{msg2}}
 

var app5 = new Vue({ el: '#app5', data: { 　　msg2: '# hello ' 　　} })

4、界面交互

　　为了让用户和你的应用进行互动，我们可以用v-on

　 Vue는 양식 입력과 애플리케이션 상태 간의 양방향 바인딩을 쉽게 달성할 수 있는

지시어를 제공합니다.　예 5:

 
{{message}}
 Reverse Message 

var app6=new Vue({ el:'#app6', data:{ message:'Hello Vue.js!' }, methods:{ reverseMessage:function(e){ this.message=this.message.split('').reverse().join(''); } } })

4. 인터페이스 상호 작용

사용자가 애플리케이션과 상호 작용할 수 있도록v-on명령을 사용하여 이벤트 리스너를 바인딩할 수 있습니다. through Vue 인스턴스에 정의된 메소드를 호출합니다!

　예제 6:

Vue.component('todo-item',{ props:['todo'], template:'
{{todo.text}}
' }); var app_7=new Vue({ el:'#app_7', data:{ itemsList:[ {text:'Vegetables'}, {text:'Cheese'}, {text:'Whatever else humans are supposed to eat'} ] } })

루트 인스턴스를 초기화하기 전에 반드시 컴포넌트를 등록하세요!

그렇지 않으면 등록하지 않고 사용하면 오류가 발생합니다!

위 내용은 vuejs에는 어떤 기능이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!