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:

<div>{{ message }}</div>

<script type="text/javascript">
        var app=new Vue({
            el:"#app",
            data:{
                message:"hello vue"
            }
        })
    </script>

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

예제 2:

    <div>
        <span>
            Hover your mouse over me for a few seconds to see my dynamically bound title!
        </span>
    </div>

<script type="text/javascript">
        var app_2=new Vue({
            el:&#39;#app_2&#39;,
            data:{
                message:&#39;You loaded this page on &#39;+new Date()
            }
        })
    </script>

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

2. 조건 및 루프

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

　1. 조건

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

　　예 3:

<div>
  <p>Now you see me</p>
</div>

<script>
        var app_3=new Vue({
            el:&#39;#app_3&#39;,
            data:{
                flags:true
            }
        })
    </script>

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

　2. Loop

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

　　예 4:

<div id="app_3_2">
        <ul>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ul>
    </div>

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：

    <div id="app5">
        <input type="text" v-model="msg2" />
        <p>{{msg2}}</p>
    </div>

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

4、界面交互

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

3. 양방향 바인딩

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

v-model

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

     <div id="app6">
         <p>{{message}}</p>
         <button v-on:click="reverseMessage">Reverse Message</button>
    </div>

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:

     <div>
         <ol>
            <todo-item></todo-item>
        </ol>
    </div>

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

참고: 메소드 메소드에서는 상태만 업데이트되고 DOM은 건드리지 않습니다!

5. 컴포넌트 구성(간단한 버전)

　

반드시 컴포넌트를 먼저 등록한 후 인스턴스화하세요!

　

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

　

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

🎜🎜　 컴포넌트는 상대적으로 강력하고, 확장이 가능하고, 재사용 가능한 코드를 캡슐화하지만 꽤 귀찮습니다(*@ο@*) 와~ 익숙하시겠네요! 🎜🎜예 7: 🎜rrreeerrreee🎜컴포넌트는 매우 중요한 부분입니다. 위 내용을 숙지한 후에는 컴포넌트 시스템을 주의 깊게 공부해야 합니다. 🎜🎜🎜실제 프로젝트에서 사용하면 여러 페이지에 동일한 파트와 컴포넌트가 있습니다 🎜재사용🎜완전 멋지네요~O(∩_∩)O~~🎜🎜관련 추천 : "🎜vue.js tutorial🎜 》🎜

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