Vue.js入門:入門、インスタンス、コンポーネント、コンポーネント通信

90243 ワード

テキストリンク

Visual Studioコードの使用
section 1)_vue.jsの起動
Section 2)例-21820
Section 3)素子-21823
Section 4)素子通信方式-210824

1.vue.紹介する

反応性=>ビューのコア
ライブラリでデータの変化を検出し、直ちに画面を変更する

ショートカットキー

VSCDEで右クリックして「Open with Live Server」を実行
開発者ツールのショートカット

ウィンドウ:ctrl+shift+i/F 12

マイク:cmd+option+i

パネルショートカットの切り替え

窓口:CTRL+

マイク:CMD+

example

ex1-1

<!--210819 -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Getting Started</title>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js'
        }
      })
    </script>
  </body>
</html>

+ TIP!!! 
- html 파일 구성 자동완성 : ! 쓰고 Tab키 => html 기본 코드구조 완성
- div#app 작성 후 Tab/Enter키 누르면 에밋 작동 => <div id="app"></div> 완성
- console 창에서 직접 쓸때 줄 바꿈 단축키 : shift+enter

ex1-2

<!--210819 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
  
    <script>
      var div = document.querySelector('#app');
      var viewModel = {};
      
      //객체의 동작을 재정의하는 API - 기본 문법  
      // Object.defineProperty(대상 객체, 객체의 속성, {
      //   // 정의할 내용
      // })
      
      //자바스크립트 - 즉시 실행함수
      (function() {
        function init() {
          Object.defineProperty(viewModel, 'str', {
            // 속성에 접근했을 때의 동작을 정의
            get: function() {
              console.log('접근');
            },
            // 속성에 값을 할당했을 때의 동작을 정의
            set: function(newValue) {
              console.log('할당', newValue);
              render(newValue);
            }
          });
        }
  
        function render(value) {
          div.innerHTML = value;
        }
        //호출
        init();
      })();    
    </script>
  </body>
  </html>

Object.defineProperty():オブジェクトの動作を再定義するAPI-デフォルト構文

Object.defineProperty(대상 객체, 객체의 속성, {
      // 정의할 내용
})

Object.引き続き勉強する
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
JavaScriptインスタント実行関数(IIFE):

(function() {
	//내용
})();

即時実行関数表示(IIFE、即時暗黙機能表示)>>
https://developer.mozilla.org/ko/docs/Glossary/IIFE

2.例

インスタンス作成者、プロトタイプ

インスタンスを作成すると、開発者ツールはVueのRoot構成部品と見なします.
関数名が大文字の場合は、コンストラクション関数を表します.

Console : 
function Person(name, job) { 
    this.name = name;
    this.job = job;
}

// p객체에 new Person 값을 넣어주고 console에 값을 찍어보면 
var p = new Person('josh', 'developer'); 
p

>> Person {name: "josh", job: "developer"}
job: "developer"
name: "josh"
=> 기본적인 생성자 함수의 정의

コンストラクション関数:オブジェクトを作成するための関数
->同じアウトラインを複数持つオブジェクトを作成する必要があります.
JavaScriptコンストラクタ
https://www.zerocho.com/category/JavaScript/post/573c2acf91575c17008ad2fc
プロトタイプ説明ファイル
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor

example

<!-- 210820 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- ... -->
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //var options = 
        var vm = new Vue({
            el: '#app',
            data: { //개발자도구에서 Vue <Root> 가면 message 확인가능
                message: 'hi'
            }, 
            methods: {

            },
            created: function() {
                
            }
        });
    </script>
</body>
</html>

=>クリア

function Vue() {
    this.logText = function() {
   	  console.log('hello');   
    }
}
-> Vue라는 생성자 함수를 이용, logText라는 함수를 미리 정의해놓는다.  'hello'

var vm = new Vue();
-> vm으로 new Vue를 생성할때마다 

vm.logText();
>>hello //hello값 나옴 
-> 객체 안에는 미리 정의한 logText라는 함수가 들어가있음, 매번 함수를 정의하는 것이 아니라 미리 정의된 함수를 가져다 사용할 수 있음

インスタンスのプロパティ、API
https://joshua1988.github.io/vue-camp/vue/instance.html#%E1%84%8B%E1%85%B5%E1%86%AB%E1%84%89%E1%85%B3%E1%84%90%E1%85%A5%E1%86%AB%E1%84%89%E1%85%B3-%E1%84%89%E1%85%A2%E1%86%BC%E1%84%89%E1%85%A5%E1%86%BC

3.構成部品

構成部品

画面上でエリアを区切って開発できるビュー機能
使用時の利点:コードは*を繰り返し使用でき、画面をすばやく作成できます.

グローバル構成部品、ゾーン構成部品

グローバル構成部品:構成部品を登録する最も簡単な方法
ゾーン構成部品:サービス作成時に最もよく使用される構成部品を登録する方法
グローバル構成部品とゾーン構成部品の違い:ゾーン構成部品は、グローバル構成部品と下部に何が登録されているかを知ることができます.サービスを実装するときは、コンポーネントの登録、使用、検証を継続できます.

example

グローバル構成部品ex

<!-- 210823 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <app-header></app-header>
        <app-content></app-content>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 컴포넌트를 등록하는 가장 간단한 방법 -> Vue.component(전역 컴포넌트)로 등록
        //Vue.component('컴포넌트 이름', 컴포넌트 내용);
        Vue.component('app-header', {//객체를 열어서 작성
            template: '<h1>Header</h1>' //컴포넌트가 표현되는 마크업, 코드 
        });
        Vue.component('app-content', {
            template: '<div>content</div>'  
        });

        new Vue({
            el: '#app'
        });
    </script>
</body>
</html>

領域素子ex

<!-- 210823 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <app-header></app-header>
        <app-content></app-content>
        <app-footer></app-footer>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 컴포넌트를 등록하는 가장 간단한 방법 -> Vue.component(전역 컴포넌트)로 등록
        //Vue.component('컴포넌트 이름', 컴포넌트 내용);
        Vue.component('app-header', {//객체를 열어서 작성
            template: '<h1>Header</h1>' //컴포넌트가 표현되는 마크업, 코드 
        });
        Vue.component('app-content', {
            template: '<div>content</div>'  
        });

        //전역 컴포넌트 등록
        //new Vue({
        //    el: '#app'
        //});
        
        new Vue({
            el: '#app',
            //지역 컴포넌트 등록 방식
            components: {
               // '키' : '값'
               //=> '컴포넌트 이름' : '컴포넌트 내용',
                'app-footer' : {
                    template: '<footer>footer</footer>' 
                }
            }
        });
    </script>
</body>
</html>

構成部品とインスタンスの関係:

グローバル構成部品は、インスタンスを作成するたびに個別に登録する必要がなく、基本的にすべてのインスタンスに登録されます.
ゾーン構成部品は、インスタンスを登録するたびに新しい構成部品を登録する必要があります.

4.素子通信方式

ソースCratching Vue.js
各構成部品には独自のデータ有効範囲があります
親->子コンポーネント:propsプロパティ、
子->親コンポーネント:イベントのアップグレード、イベントの特定の値の転送
コンポーネント通信ルールが必要な理由:データストリームを追跡できます.

props

propsプロパティ->

<!-- 210824 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header> --> 
        <app-header v-bind:propsdata="message"></app-header>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var appHeader = {
            template: '<h1>header</h1>',
            props: ['propsdata'] 
        }

        new Vue({
            el: '#app', 
            components: {
                'app-header' : appHeader
            }, 
            data: {
                message: 'hi'
            }
        });
    </script>
</body>
</html>

propsプロパティの特徴

<!-- 210824 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header> --> 
        <app-header v-bind:propsdata="message"></app-header>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var appHeader = {
            template: '<h1>{{ propsdata }}</h1>',
            props: ['propsdata'] 
        }

        new Vue({
            el: '#app', 
            components: {
                'app-header' : appHeader
            }, 
            data: {
                message: 'hi'
            }
        });
    </script>
</body>
</html>

props属性実習

<!-- 210824 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header> --> 
        <app-header v-bind:propsdata="message"></app-header>
        <app-content v-bind:propsdata="num"></app-content>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var appHeader = {
            template: '<h1>{{ propsdata }}</h1>',
            props: ['propsdata'] 
        }
        var appContent = {
            template: '<div>{{ propsdata }}</div>',
            props: ['propsdata'] 
        }

        new Vue({
            el: '#app', 
            components: {
                'app-header' : appHeader,
                'app-content' : appContent
            }, 
            data: {
                message: 'hi',
                num: 10
            }
        });
    </script>
</body>
</html>

event

event emit

<!-- 210824 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <app-header></app-header>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var appHeader = {
            template: '<button v-on:click="passEvent">click me</button>',
            methods: {
                passEvent: function() {
                    this.$emit('pass');
                }
            }
        }

        new Vue({
            el: '#app',
            components: {
                'app-header' : appHeader
            }
        });
    </script>
</body>
</html>

=>clickmeボタンをクリックするたびにイベントラベルにpass$emit byが追加されます
イベントemit出力コンソールの使用

<!-- 210824 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <app-header v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메소드 이름"></app-header> -->
        <app-header v-on:pass="logText"></app-header>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var appHeader = {
            template: '<button v-on:click="passEvent">click me</button>',
            methods: {
                passEvent: function() {
                    this.$emit('pass');
                }
            }
        }

        new Vue({
            el: '#app',
            components: {
                'app-header' : appHeader
            },
            methods: {
                logText: function() {
                    console.log('hi');
                }
            }
        });
    </script>
</body>
</html>

=>clickmeボタンをクリックするたびにイベントラベルのpass$emit byが増加し続ける+コンソールのhi数も増加する
event emit実習

<!-- 210824 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{ num }}</p>
        <!-- <app-header v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메소드 이름"></app-header> -->
        <app-header v-on:pass="logText"></app-header>
        <app-content v-on:increase="increaseNumber"></app-content>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var appHeader = {
            template: '<button v-on:click="passEvent">click me</button>',
            methods: {
                passEvent: function() {
                    this.$emit('pass');
                }
            }
        }
        var appContent = {
            template: '<button v-on:click="addNumber">add</button>',
            methods: {
                addNumber: function() {
                    this.$emit('increase');
                }
            }
        }

        new Vue({
            el: '#app',
            components: {
                'app-header' : appHeader,
                'app-content' : appContent
            },
            methods: {
                logText: function() {
                    console.log('hi');
                },
                //정의하기, 버튼을 누를때마다 1씩 증가하도록  
                increaseNumber: function() {
                    this.num = this.num + 1;
                }
            },
            data: {
                num: 10
            }
        });
    </script>
</body>
</html>

=>addボタンは、「イベント」タブでincreateを起動します.
「component」タブ-データnum:ボタン数で増加
pラベルを追加して画面に表示し、すぐに表示します.

ビューインスタンスのthis

onsole에 
>> var obj = {
    num:10,
    getNumber: function() {
        console.log(this.num);
    }
}

찍고 

>> obj.getNumber();

=> this.numはデータのnumプロパティを表します.
**詳細については、(この4つを参照)**
https://www.w3schools.com/js/js_this.asp
https://betterprogramming.pub/understanding-the-this-keyword-in-javascript-cb76d4c7c5e8

Reference

この問題について(Vue.js入門:入門、インスタンス、コンポーネント、コンポーネント通信), 我々は、より多くの情報をここで見つけました https://velog.io/@jeong11/Vue.js-studying

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

Collection and Share based on the CC Protocol

【mos記事から翻訳】datafileバックアップの成長情報の入手方法

お笑いギャラリー(オープンギャラリークローンプロジェクト)後期