JSを知らずにVue.jsから入った人向けJS最小知識

投稿者: Auther | 3 年, 6 ヶ月前 | 0 のコメント

関数は値

function a(){
    return "hello";
}

let b = a;
let c = a();

ｂには関数が入る

ｃにはhelloが入る

（）をつければその関数が実行されるが、つけないと「関数そのものの値」として扱われる

アロー関数

function hello(getname){
    alert('こんにちは、' + getname() + 'さん！');
}

hello(()=>{ return "太郎"; });
hello(()=> "花子" );　//単純な書き方

因数にgetnameを使用している

処理の中ではgetname()のように、getname()をgetnameを関数として実行している

つまり、関数を引数にしているということ

オブジェクト

<html><body>
<script>
let ob = {red:255, green:125, blue:0};
document.write(ob.red + ob.green + ob.blue);　//documentに値を書き出す
</script>
</body></html>

メソッド関数を値として代入したプロパティのこと

let ob = {
    red:255, green:125, blue:0,
    total: function(){　　//メソッド
        return this.red + this.green + this.blue;
    }
};
document.write(ob.total());　//処理実行のためには()を忘れない

thisは、そのオブジェクト自身を示す値。メソッドの中で、オブジェクト内にあるプロパティや他のメソッド呼び出すときは、this.○○という形で記述

メソッドのfunctionは省略可能

let ob = {
    red:255, green:125, blue:0,
    total(){
        return this.red + this.green + this.blue;
    }
};
document.write(ob.total());

コンストラクタ　オブジェクトを生成

function MyObj(r, g, b) {　//コンストラクタ関数
    this.red = r;
    this.green = g;
    this.blue = b;

    this.total = function(){
        return this.red + this.green + this.blue;
    }

　　//メソッドを追加できる
    this.○○ = function(){
        return ×××××××××××××;
    }

}

let ob = new MyObj(255,200,200);
document.write(ob.total());

用意する値はすべてthisを適用する

クラス

class MyObj {
    constructor(r, g, b){
        this.red = r;
        this.green = g;
        this.blue = b;
    }


    get total(){
        return this.red + this.green + this.blue;
    }


    get hex(){
        return '#' + ('00' + this.red.toString(16)).substr(-2)
            + ('00' + this.blue.toString(16)).substr(-2)
            + ('00' + this.green.toString(16)).substr(-2);
    }


    get startP(){
        return '<p style="background-color:' 
            + this.hex + '">';
    }


    get endP(){
        return '</p>';
    }


    writeP(){
        document.write(this.startP);
        document.write(this.total);　//()はつけない
        document.write(this.endP);
    }
};


let ob = new MyObj(255,200,200);
ob.writeP();


let ob2 = new MyObj(0, 100, 170);
ob2.writeP();

コンストラクタを明示

メソッドを追加していく

get ○○　メソッドを追加するときはgetを使う

set ○○　プロパティに値を代入するようにしてメソッドを呼び出す

getとsetを利用することで、値を取り出したり変更したりする処理をプロパティを操作するように使うことができる

export default

単一ファイルコンポーネントとは、コンポーネントを構成するtemplate、style、scriptを1つのVueファイルでまとめて管理すること

単一ファイルコンポーネントの思想で、他のコンポーネントでも利用できるようにする

//　export default でメンバーを囲むことで、外部からも参照可能に
<script>
export default {
    name: "Header",
    data() {
        return{
            msg2: "はじめまして"
        }
    } 
}
</script>

使う側（親となる）コンポーネントでは、インポートした上で、使うコンポーネントをまた export default で囲んで templateの中で使えるモジュールに

<script>
import Header from '@/components/Header.vue'

export default {
  name: 'home',
  components: {
    Header
  }
}

</script>

scriptで export default で囲んでいるので、テンプレートでは Header を使うことが可能

<template>
  <div class="home">
    <Header/>
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="こんにちは"/>
    <h1>This is an about page <fa icon="user" /></h1>
  </div>
</template>

現在コメントはありません