yuyuyuriko78 commented 4 years ago

書き方概要

HTMLファイル

head部に、script要素を記述。
```
<script src="https://unpkg.com/vue"></script>
```
- unpkg.comというサイトで公開されている、最新版のVue.jsを取得する
body部に、id名を「app」としたdiv要素を追加する
- p要素に、Mustache記法でインスタンスのデータを参照させる
```
<div id="app">
<p>{{ message }}</p>
</div>
```
- Mustache記法：
- インスタンスが持つプロパティを使用できる
- 例：インスタンスがmessageというプロパティを持つとき、HTML内に{{ message }}と書くと、messageの内容がHTMLに表示される。

JSファイル

vueインスタンスを生成する
- インスタンス生成時に、引数にオブションを渡すことでデータ定義を行う。
- dataオプションを使い、「Hello World!」という文字列を持ったmessageというデータを定義
```
var vm = new Vue({
data: {
message: 'Hello World!'
}
});
```

yuyuyuriko78 commented 4 years ago

そもそもVue.jsとは

UI構築のためのフレームワーク
- JS内のデータとHTMLを自動的に結びつけ、UI実装をかんたんにする（「DOM」というしくみ）
- DOM (Document Object Model)　…ドキュメントを物として扱うモデル
- JavaScriptから、HTMLやCSSのデータを取得し、操作するためのしくみ
- htmlドキュメントをツリー構造で表現したもの
プログレッシブフレームワーク (Progressive Framework) である。
- アプリ開発を進める中で出てくる要求に、柔軟に対応することができる
- どのような規模・段階のアプリケーションにも対応することができる

yuyuyuriko78 commented 4 years ago

DOMについて　Document Object Model

DOMとはなにか？
「ドキュメントを物として扱うモデル」
- どのドキュメントを？：HTMLファイルを
- これの主語は？：プログラム
- まとめると…
- 「JavaScriptで書いたプログラムが、特別な処理を施したHTMLファイルを、物として自由に扱えるようにする」のがVueである、ということ！

DOMの特徴

1. 階層構造（ツリー構造）をとる

2. 各要素は「ノード」という単語を使って表現される

ノード：各要素自体（HTMLでいうエレメント、タグ）
例「そのタグの子ノード全体を取得して、その親ノードから削除する」

3. Webページとプログラミング言語（JavaScript）をつなぐ

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta chraset="UTF-8">
        <link rel="shortcut icon" type="image/x-icon" href="favicon.icon">
        <title>DOMとは「WEBページとプログラミング言語をつなぐ役割を持つ」</title>
        <style>
            #selection-1 {
                background-color: "C8E6C9";
            }
            #selection-2 {
                background-color: #FFF9C4;
            }
        </style>
    </head>
    <body>
        <section id="section1">
            <h2>セクション1</h2>
            <p>子ノード1</p>
            <p>子ノード2</p>
            <p>子ノード3</p>
        </section>
        <section id="section2">
            <h2>セクション2</h2>
            <p>子ノード1</p>
            <p>子ノード2</p>
            <p>子ノード3</p>
        </section>
    </body>
    <script>
        //ここにJavaScriptコードを書く
    </script>
</html>

ID名からノードを取得して操作する

ID名：タグにつける名前
- ここでは
  タグに、「section1」、「section2」というIDがついている
JavaScriptファイルで、ID名を指定してノードを取得し操作を加える。
- ID名指定メソッド
```
document.getElementById(id);
```
- 「section2」を取得して、その文字色を赤に変更する
```
document.getElementById('section-2').style.color = 'red';
```

子ノードを取得して操作する

子ノード指定メソッド
```
var nodeList = elementNodeReference.childNodes;
```
- 「elementNodeReference」は基準ノードを指す
- 上のnodeListは、「基準ノードにぶらさがる子ノードすべて」を指す

section2の2番目の子ノードの文字列を変更する

// 「section2」というID名のノードを取得
var baseElement = document.getElementById('section2');
// 上で取得したノードの2番目の子ノードを選択
var section2node2 = baseElement.childNodes[2];
// 上で取得した2番目の子ノードの文字列を変更
section2node2.innerHTML = '子ノード2は変更されました';

yuyuyuriko78 commented 4 years ago

2020-04-10

Vueのはじめかた、環境構築 https://blog.brainpad.co.jp/entry/2018/04/13/160000
Vue cli をインストールして実行
- CLI: Command Line Interface 黒い画面で操作する　　https://www.wakuwakubank.com/posts/496-vuejs-cli-basic/

yuyuyuriko78 commented 4 years ago

2020-04-11 https://mseeeen.msen.jp/organize-vue-js-dev-env-by-cli/

Users\yuyuy>npm i -g vue-cli cd vue vue init webpack app cd app npm i npm run dev http://localhost:8080 にアクセス

yuyuyuriko78 commented 4 years ago

2020-04-11mtg

vue.jsは、ちいさなフレームワークである
- 「vue.js」というファイルから、ほしい機能をほしいときだけ持ってくる
htmlファイルは、大きく３つのパートに分けられる
1. headで、Vueを読み込む
2. bodyが、一番メインになってくる部分。{{message}}のように、中括弧２個で囲む書き方をする。
3. scriptで、JavaScriptを記述する。ここで、の中括弧の部分の内容を指定する。

yuyuyuriko78 commented 4 years ago

VueのUdemy

セールになったら購入する https://www.udemy.com/course/vue-js-complete-guide/?fbclid=IwAR2PLugBjrVy6ZUgnwBljuTXvqzPXzF16AwZQf8VDD5jY4Qb-XKBYYZX7M0

Atsuhiko / Web-App

Vue.js入門 #1

書き方概要

HTMLファイル

JSファイル

そもそもVue.jsとは

DOMについて　Document Object Model

DOMの特徴

1. 階層構造（ツリー構造）をとる

2. 各要素は「ノード」という単語を使って表現される

3. Webページとプログラミング言語（JavaScript）をつなぐ

ID名からノードを取得して操作する

子ノードを取得して操作する

2020-04-11mtg

VueのUdemy

Atsuhiko / Web-App

Vue.js入門 #1

書き方概要

HTMLファイル

JSファイル

そもそもVue.jsとは

DOMについて Document Object Model

DOMの特徴

1. 階層構造（ツリー構造）をとる

2. 各要素は「ノード」という単語を使って表現される

3. Webページとプログラミング言語（JavaScript）をつなぐ

ID名からノードを取得して操作する

子ノードを取得して操作する

2020-04-11mtg

VueのUdemy

DOMについて　Document Object Model