양방향 데이터 바인딩이란 무엇입니까? 간단한 양방향 데이터 바인딩 구현(코드 예)-JS 튜토리얼-php.cn

양방향 데이터 바인딩이란 무엇입니까? 간단한 양방향 데이터 바인딩 구현(코드 예)

青灯夜游

풀어 주다： 2018-10-26 11:55:09

원래의

3831명이 탐색했습니다.

양방향 데이터 바인딩이란 무엇인가요? 이 글의 내용은 양방향 데이터 바인딩 관련 내용을 소개하여 누구나 양방향 데이터 바인딩이 구현되는 이유와 간단한 양방향 데이터 바인딩을 구현하는 방법을 이해할 수 있도록 하는 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

먼저 단방향 데이터 바인딩과 양방향 데이터 바인딩이 무엇인지 알아볼까요?

단방향 데이터 바인딩이란 무엇인가요?

데이터 모델(모듈)과 뷰(View) 간의 단방향 바인딩.

먼저 템플릿을 작성한 다음 템플릿과 데이터(아마도 백그라운드에서)를 통합하여 HTML 코드를 형성한 다음 이 HTML 코드를 문서 흐름에 삽입해야 합니다. 간단히 말해서 HTML 요소를 DOM으로 조작하는 것입니다.

단방향 데이터 바인딩의 단점: HTML 코드가 생성되면 변경할 수 없습니다. 새 데이터가 나타나면 먼저 이전 HTML 코드를 삭제한 후 새 데이터를 다시 입력해야 합니다. 템플릿은 함께 결합되어 새로운 HTML 코드를 형성한 다음 문서 흐름에 삽입됩니다.

양방향 데이터 바인딩이란 무엇인가요?

데이터 모델과 뷰 간의 양방향 바인딩.

데이터가 변경되면 뷰도 변경됩니다. 뷰에 대한 사용자의 수정 사항이 자동으로 데이터 모델에 동기화된다고 할 수 있습니다. 변화. 같은 변화.

양방향 데이터 바인딩의 장점: 단방향 데이터 바인딩과 같은 CRUD(생성, 검색, 업데이트, 삭제) 작업을 수행할 필요가 없습니다. 사용자가 프런트 엔드 페이지에서 입력을 완료합니다. 마지막으로 아무런 작업 없이 사용자가 입력한 데이터를 가져와 데이터 모델에 넣었습니다.

Native js는 간단한 양방향 데이터 바인딩을 구현합니다.

코드 예: 태그에 표시된 콘텐츠는 사용자가 입력한 콘텐츠에 따라 변경됩니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>原生js实现简单的双向数据绑定</title>
</head>
<body>
<input type="text" id="userName">
<span id ="uName"></span>
<script>
    var obj={
        pwd:"1234"
    };
    //主要使用到了get和set方法，最为关键
    Object.defineProperty(obj,"userName",{
        get:function(){
            console.log(&#39;get init&#39;);
        },
        set:function(val){
            console.log("set init");
            document.getElementById("uName").innerText=val;
            document.getElementById("userNmae").value=val;
        }
    });
    document.getElementById("userName").addEventListener("keyup",function(event){
        obj.userName=event.target.value;
    }
    )
</script>
</body>
</html>

로그인 후 복사

렌더링:

양방향 데이터 바인딩이란 무엇입니까? 간단한 양방향 데이터 바인딩 구현(코드 예)

요약: 위 이 글에서 소개한 양방향 데이터 바인딩에 대한 모든 내용은 이해를 돕기 위해 직접 시도해 볼 수 있습니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면 JavaScript Video Tutorial, jQuery Video Tutorial, bootstrap Tutorial을 방문하세요!

위 내용은 양방향 데이터 바인딩이란 무엇입니까? 간단한 양방향 데이터 바인딩 구현(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!