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

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

関数は値

function a(){
    return "hello";
}

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

bには関数が入る

cには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>

現在未評価

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

新しいコメント

必須

記入が必要です(公開はされません)

オプション

最近の投稿

アーカイブ

2024
2023
2021
2020

タグ

多義語(1) 英語原論(15) 単語 上級(12) コラム(7) mezzanine(1) サブスリー(4) music(11) 海外移住(2) 文化(2) 政治(2) nujabes(3) ランニング(5) 発音(14) django(4) 文法(15) 文法問題(1) 教育論(3) 転職(2) 仕事(1) アニメ(1) cowboy bebap(26) TOEIC(1) 歴史(2) vuejs(7) 経済(1) lesencrypt(1) データサイエンス(1)

著者

Auther (120) admin (2)

フィード

RSS / Atom

Social Links

運営より

当ウェブサイト内のコンテンツ(文章、写真、イラスト、サイト構造など)に関する著作権等は 弊社、または制作者などに帰属しております。営利、非営利を問わず、当ウェブサイトのコンテンツの全て 、または一部を許可なく複製、転用、販売など二次利用することはご遠慮ください。

目覚めよ!英語力