2020-01-01から1年間の記事一覧

node.jsでvue.jsをインストール

node.jsとは javascriptの実行環境を一つ javasctiptをサーバーサイドで使用することができる インストールの手順 npmのバージョン確認 npmはnode.jsのバージョン管理ツール npm -v node.jsのバージョン確認 node -v vue-cliをインストール vue-cliとは vue.…

Javascript prototype

prototypeとは? クラスの概念なかったバージョンでその代わりとして使われたもの prototypeプロパティと言われる コンストラクタ関数につけることで、インスタンスした際に自動的に関数が入る // コンストラクタ関数 const Fruit = function(name,price){ t…

Javascript オブジェクトについて

Javascriptで扱うものは全てオブジェクトかオブジェクトのように使えもの オブジェクトはメソッドとメソッドがある var human = {}; human.name = "momonomono"; // プロパティ human.age = 28; // プロパティ human.sex = '男'; // プロパティ human.sayInf…

autocomplete

autocompleteとは テキストまたは数値が入るタグ<input><textarea>などに使われる 同じnameタグをつけると、以前使用した履歴などが候補として 出力されるのを回避することができる <input type="text" name="title"> <input type="text" name="title" autocomplete="off"></textarea>

wordpress テンプレートタグ

分割したパーツの呼び出し wordpressはwebページを分割して使いまわすことで簡単に多くのページを作ることができる header , footer ,sidebarの三つが分割できるテンプレとして用意されている header : htmlのheadで囲まれているところらへん footer : 最下…

オブジェクト指向 アクセス権

アクセス権 プロパティ、メソッドの前につけることによって 外からアクセスできる範囲をしてすることができる アクセス権を指定する理由 プロパティへの値を渡す方法は参照渡し 参照渡しとは関数に実際の変数を代入して値を変える方法 オブジェクト指向のイ…

オブジェクト指向

オブジェクト指向 それぞれ共通の要素や動きを一つにまとめて それを基準として物を作っていくこと メリット 同じようなデータを簡単に大量に作ることができる 新たに増やしたい機能を簡単に増やすことができる 他の人にコードの内容を簡単に使えることがで…

LocalStorage

LocalStorageとは javascriptを利用することでWebブラウザに保存できる仕組み メリット データベースに接続しなくても、データを保存することができる 閲覧履歴などに使われる デメリット ブラウザに保存するため、セキュリティ面に問題がある データ保存 lo…

Vue ライフサイクルフック created&mounted

ライフサイクルフック 任意のタイミングでイベント起こすことができる created DOMが読み込まれる前に実行される beforeCreate : Vueインスタンスが読み込まれる前にイベントを実行 create : Vueインスタンスが読み込まれた後にイベントを実行 mounted DOMが…

SQL 書く順番

SQL 順番 テーブルの指定 FROM 結合 ON 結合 JOIN 取得条件 WHERE グループ化 GROUP BY 関数 COUNT.SUM.AVG.MINなど HAVING HAVING 検索 SELECT 検索 DISTINCT 順序 ORDER BY TOP (LIMIT)

Vue  computed

computed 算出プロパティはデータに指定した加工をして返すプロパティ 直接データを加工するようにもかけるが ごちゃごちゃしてわからなくなるの算出プロパティを使う computed:{ プロパティ名: 関数オブジェクト } 記入例 <div id="app" v-bind:style="errMessage"> <input type="number" v-model="price"> <p>{{ price | comma}}円</p> <p>合計:{{ p</p></div>…

Vue filters

filters 出力されるデータにfiltersで設定した要素を付けることで データを加工することができる {{ データ名 | 関数オブジェクト }} 関数オブジェクトを同じように付けることによって 複数のフィルターを付けることができる v-bindにも付けることが可能 < …

Vue.js  データバインド

v-bind 属性に出力 属性にデータを入れるためには、追加したいデータを属性の値に記入してその属性名の前にv-bindをつける < 要素名 v-bind: 属性名 = " データ名 "> 要素名は value , style , class などに使用できる 入力例 <body> <div id="app"> <input type="text" v-bind:value="message"> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> <script> var app = ne…

Vue 導入方法

Vue導入方法 ダウンロードして直接書き込む Vue公式 CDNで導入 最新版で導入 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 最新版で導入する場合、バージョンの変更で動かない場合がある 特定バージョン番号、ビルド番号にリストする <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

Vueとは

Vue.jsとは ウェブアプリケーションのUIを構築するためのJavascriptフレームワーク Vue.jsの特徴 複雑なDOMを操作する必要がなくなる HTML形式でテンプレートを設定して データをjavascritptで定義することで Vueが自動的にデータを更新する 簡単に言うと「V…