3.Reactivityの実施

7767 ワード

vue.js テキストリンク

板橋隊長張基孝のVuejs入門基礎授業を聞いて、内容を整理しました.
毎日20分ちょっとVuejs頑張れ.

Vue.jsのコア特性Reactivity

「反応型」とは、オブジェクトのプロパティを定義または変更することを意味します.
オブジェクトのプロパティを変更し、ビューで自動的に変更を更新します.

Object.defineProperty() API

オブジェクトアクションを再定義するAPIです.mdnで構文をチェックします.

MDN web docs

WebテクノロジーとJavaScriptの構文、API、および例を表示できます.
Object.defineProperty()の検索結果は次のとおりです.

Object.defineProperty()の例

関数のパラメータは、オブジェクト名、属性名、および新しく定義されたオブジェクトの順に配置されます.

   Object.defineProperty(객체 이름, 속성 이름, 새로운 객체)

次のget、setアクセス記述子を定義します
viewModel.参照str
viewModel.str=newValueはオブジェクトを割り当てます.
属性にアクセスすると、値を割り当てるときの動作を定義できます.

    <div id="app">안녕</div>

    <script>
        var div  = document.querySelector('#app');
        var viewModel = {};  // 객체를 정의했다. 

        Object.defineProperty(viewModel, 'str', {
            // 속성에 접근했을 때의 동작을 정의 
            get: function(){
             
            }, 
            // 속성에 값을 할당했을 때의 동작을 정의 
            set: function(newvalue){

            }
        })
    </script>

Object.definePropertyを定義し、開発者ツールで呼び出します.

<body>
    <div id="app">안녕</div>

    <script>
        var div  = document.querySelector('#app');
        var viewModel = {};

        Object.defineProperty(viewModel, 'str', {
            // 속성에 접근했을 때의 동작을 정의 
            get: function(){
                console.log('접근');
            },
            set: function(newvalue){
                console.log('할당', newvalue);
                div.innerHTML = newvalue;
            }
        })
    </script>
</body>

get:プロパティのアクセス者

viewModel.str

set:プロパティの設定器

viewModel.str=「いってらっしゃい」

Reference

この問題について(3.Reactivityの実施), 我々は、より多くの情報をここで見つけました https://velog.io/@freejia/3.-Reactivity-구현

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

9～1～3つのオブジェクトクラスとequals()

AOP PointCut (XML)