[Vue.js]5/10日-1日

38537 ワード
テキストリンク

1. VSCode


1)html基本フレームワーク(emmet)を! + tabで表示する
<!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>

</body>
</html>
2)tr * 3 3個のtrを生成
<tr></tr>
<tr></tr>
<tr></tr>
3)td.cn*3 cnの3段階のtdを生成する
<td class="cn"></td>
<td class="cn"></td>
<td class="cn"></td>

2. ES6


1) let , const


変数をES 5に宣言する方法は、varキーワードを使用することである.varキーワードにはいくつかの特徴があります.

  • かんすうレベルそうさ
  • 関数で宣言された変数は、関数内でのみ有効であり、関数外で参照できません.(関数の外部で宣言された変数は、自然にグローバル変数になります.)

  • varキーワードの省略を許可
  • で予想外のグローバル変数が生成される可能性が高い.

  • 変数の繰り返し宣言を許可
  • で予期せぬ変数値の変更が発生する可能性があります.

  • がんばって
  • 変数を宣言する前に参照できます.
    • varの特徴はグローバル変数と多くの関連があり、グローバル変数はコードの複雑さを増加させる原因である.
    これらのvarキーワードの欠点を補うために、ES 6はletおよびconstキーワードを導入した.

    letとconstがどのような特徴を持っているかを大まかに理解しましょう。

    1. let과 const 예약어는 한번 선언한 똑같은 변수를 재선언할 수 없다.
    let a = 10;
let a = 20; //Identifier 'a' has already been declared
    2. const 예약어는 한번 할당한 값을 변경할 수 없다. 
           const b = 20;
       b = 30; // Uncaught TypeError: Assignment to constant variable.

       // 하지만 객체의 속성이나 배열의 요소는 변경이 가능하다. (주소값을 복사했기 때문)
       const user = {
              name: '최동욱',
              age: 25,
            };
            console.log(user.name); // 최동욱
            user.name = '홍길동';
            console.log(user.name); // 홍길동
    3. 수업에서는 let 과 const가 호이스팅되지 않는다고 하였지만 이는 엄밀히 말하면 맞지 않다.
    var v = 10;
{
  console.log(v);
  let v = 20;
}
    letが起動されない場合、コンソールは10を出力しますが、直接実行すると、Cannot access"v"beforeが初期化されます.
    このような情報が出力されます.変数を作成すると、宣言、初期化、割り当ての3つのフェーズが経験され、letとconstは宣言フェーズの後にのみエスケープされるため、参照エラーが発生します.

    2) PropertyShorthand


    property shorthとは、オブジェクトを定義する際に、オブジェクトのキー値とvalueの値が同じ場合、キー値とvalue値を別々にマークするのではなく、一度だけマークすることを意味します.
    const id = ‘ssafy',
name = ＇싸피＇,
age = 3;
const member = {
	id 	// id: id,
	name	// name: name,
	age 	// age: age
};

    3) Concise Method


    ES 5構文では、funcはinfo関数をメソッドとしてpropertyに割り当て、ES 6はこれらの割り当て自体をコロンと関数キーワードを省略し、簡潔な構文を提供する.このような方法で略すことで,方法自体の役割を制限することができる.詳細 
    const id = 'ssafy',
      name = '싸피',
      age = 30;
      const user = {
        id,
        name,
        age,
        // func : info(){   // ES5
        info() {   // ES6
          console.log('user info : ' + this.id + ' ' + this.name + ' ' + this.age);
        },
      };
      user.info();

    4) DestructuringAssignment


    非構造化割り当ては、配列またはオブジェクトに入力された値を個別変数に割り当てるJavaScript式です.
    const user = {
  id: 'ssafy',
  name: '김싸피',
  age: 25,
};

// 기존 Object
{
  let id = user.id;
  let name = user.name;
  let age = user.age;
  console.log(id, name, age);
}

//비구조화 할당 (변수 이름을 다르게 할당할 수도 있다.)
{
  let { id, name,  age: ssafyage } = user;
  console.log(id, name, ssafyage);
}

    5) SpreadSyntax


    簡単に展開できる
     // Spread Syntax (전개 구문)
const user1 = { id: 'ssafy1' };
const user2 = { id: 'ssafy2' };

const array = [user1, user2];

// array copy
const arrayCopy = [...array];
console.log(array, arrayCopy);

// 주의 : spread operator의 경우 값 복사가 아닌 주소를 가지고 오기때문에 값을 바꿀경우 모두 변경된다.
user1.id = 'ssafy5';

// add
const arrayAdd = [...array, { id: 'ssafy3' }];
console.log(arrayAdd);

// object copy
const user3 = { ...user1 };
console.log(user3);

// array concat
const team1 = ['대전', '광주'];
const team2 = ['구미', '서울'];
const team = [...team1, ...team2];
console.log(team);

// obejct merge(병합)
const u1 = { id1: 'ssafy1' };
const u2 = { id2: 'ssafy2' };
const u = { ...u1, ...u2 };
console.log(u);

// 주의점 : key가 같은 obejct를 병합 하게 되면 마지막 obj가 기존 값을 덮어쓴다.
const user = { ...user1, ...user2 };
console.log(user);

    6) DefaultParameter


    default parameterは、関数に渡されるパラメータ値が定義されていない場合や、値が渡されていない場合に初期値を設定します.
    function print1(msg) {
  console.log(msg);
}
print1('hello ssafy');
print1();

function print2(msg2 = 'inital msg') {
  console.log(msg2);
}
print2('hello ssafy');
print2();

    7) TemplateString


    テンプレート文字は、式を埋め込む文字列文字です.二重引用符(")の代わりにbacktic(`)を使用し、${}キーを使用して変数を挿入する部分に直接挿入できます.テンプレートは、実行時に通常のJavaScript文字列に処理/変換されます.
    console.log(name + '(' + id + ')님 \n나이는 ' + age + '입니다.');
console.log(`${name}(${id})님 나이는 ${age}입니다.`); //템플릿 문자열

    8) ArrowFunction


    functionキーワードの代わりに矢印(=>)を使用して、関数をより簡単に宣言できます.
     // arrow function (화살표 함수)
// function(param) {code} 형태를 축약
// (param) => {code}
// 함수 이름이 없는 익명 함수 이므로 사용시 변수에 담아서 사용.
// (param) => {code};
// param => {code};
// () => {code};
// () => code;
// () => ({key: value});

//기존 방식
const func1 = function () {
  console.log('익명 함수');
};
func1();

//화살표 함수
const func2 = () => {
  console.log('화살표 함수');
};
func2();

//기존 방식
const func3 = function (num) {
  console.log('익명 함수', num);
};
func3(3);

//화살표 함수
const func4 = (num) => {
  console.log('화살표 함수', num);
};
func4(4);

const func7 = (num1, num2) => {
  console.log('화살표 함수', num1, num2);
};
func7(6, 7);

// 매개변수가 2개 이상일 때 소괄호 없이 사용 x
// const func8 = num1, num2 => {
//   console.log('화살표 함수', num1, num2);
// };
// func8(6, 7);

// 추가적으로 parameter와 화살표 사이에 개행이 불가능.

    3. Vue.js


    vue公式サイト

    3-1)MVVMモード（モデル+ビュー+ビューモデル）


    MVVMモードとは、ビューモデルがモデルとビューの間にある構造を指す.DOMが変更されると、ビューモデルのDOM Listenersを介してモデルに信号が送信される.
    モデルで変更したデータをビューモデルを介してビューに送信すると、画面が反応します.
    モデルもでる:純JavaScriptオブジェクトじゅんJavaScriptおぶじぇくと
    ビュー:WebページのDOM
    ViewModel:Vueの役割

    vueは、ビューとモデルを接続し、自動的にバインドし、双方向通信を実現します.양방향 통신:DOM変更時スクリプトセグメント変更、スクリプトセグメント変更時DOM変更

    MVCモードでは、コントローラがユーザの要求を受信し、モデルにデータの更新を要求し、画面側にデータを持ち込んで要求する.
    MVVMモードでは、ビューモデル間でViewModelがデータをバインドします.

    3-2）開始

    <!--html-->
<div id="app">
  {{ message }}
</div>
    //js
var app = new Vue({
  el: '#app',
  data: {
    message: '안녕하세요 Vue!'
  }
})
    elで誰と接続するかを設定します.
    データはオブジェクトのようにも関数のようにも使用できますが、通常は関数のように使用されます.
    <div id="app">
      <h1>{{ msg }}</h1>
      <script>
        new Vue({
          el: "#app", //id가 app인 애랑 연결하겠다
          data() {
            // 이 데이터를 div 안에 출력하겠다.
            return {
              msg: "안녕 Vuejs !!!",
            };
          },
        });
    </script>
 </div>

    ルートインスタンス(ビューインスタンス)

    双方向なのでテキストが変わると画面が変わります.
    
 <div id="app">
      <!-- html로 인식해라-->
      <p v-html="msg"></p> 
      <script>
        //뷰 객체 (어떤 엘리먼트랑 연결할지 어떤 데이터를 사용할지 어떤 메서드를 사용할지)
        new Vue({
          el: "#app", //id가 app인 애랑 연결하겠다
          data() {
            // 이 데이터를 div 안에 출력하겠다.
            return {
              msg: "<big>안녕</big> Vuejs !!!",
            };
          },
        });
      </script>
    </div>
    ビューのレンダリング速度がやや速い
    レスにはいろいろな方法がありますが、基準がありません.表示
    redux vs vuex
    centos 7でkubectlをインストール
    Spring BootとCortlinを使用したブログWebの作成(4)