LoginSignup
0
0

More than 3 years have passed since last update.

@fenruru22(fenruru22)

Day1：3日でVue.jsを用いたアプリケーションを動かす

Last updated at Posted at 2020-05-05

1日目の取り組み記録

【Story】

・3日休みだ。なんか楽しいことがしたい。楽しいことってなんだ？→データ分析とか機械学習とは違う領域の知識に触ってみたい
・早速調べる。SPA(Single Page Application)が流行ってるらしい。画面作るのもなんか楽しそう
・AngularとReactがフレームワークとして有名らしい。使ってみよう。→環境構築で爆死
・友達にきく。→まずはVue.jsが簡単らしい
・本屋いく

.....ということで早速以下の書籍を購入して進めました。

text.jpeg

Amazonのレビューみたら分かりやすいけど、誤植が多いと。確かに心当たりあった。。。

【環境構築】

＊大きく分けてやったことは以下の通り

①node.jsのインストール

以下からインストーラを入手
https://nodejs.org/en/download/

環境PATHが設定されていないので別途設定する
cmdからデスクトップにいてもnpmコマンドが動くことを確認する

②ディベロッパツールのインストール

以下のコマンドでインストール
npm install -g @vue/devtools

Googleのプラグインでもインストールできるがブラウザ依存になるため、スタンドアロン版がオススメ

③cli-service-globalのインストール

以下のコマンドでインストール
npm install -g @vue/cli-service-global
vue-cliを動かすために必要

④VueCLIのインストール

以下のコマンドでインストール
npm install -g @vue/cli

Vue.js開発のためのコマンドツール
アプリケーションのbuildとかプロジェクト作成とかが簡単にできるよ

⑤VueCLIを利用してコマンドラインからプロトタイプを動かす

1.app.vueのファイルを用意する

app.vue
<br>app.vue<br>
<template>
  <div id="app">
    <h1>Hello!</h1>
    <p>This is message...</p>
  </div>
</template>

2.ファイルのある場所へ移動する
3.以下のコマンドを実施
vue serve
4.コマンドラインに表示されたURLに遷移
http://localhost:8080/

あくまでも動作確認

⑥コマンドラインからプロジェクトを作成する

1.プロジェクト作成場所に移動する
2.以下のコマンドを実施する
vue create ロジェクト名
3.プリセットの指定
コマンドラインに色々でてくるけど基本はデフォルトのまんまでOK
4.プロジェクトの実行
npm run serve
5.コマンドラインに表示されたURLに遷移
http://localhost:8080/

成功したらこんな感じ↓↓
picuture1.jpeg

⑦プロジェクトをビルドする

1.以下のコマンドを実施する
npm run build
2.distフォルダ配下に必要なファイルが作成されたことを確認する

サーバに上げるときに必要
dist配下のindex.htmlファイルは絶対パスで記載されているため、直接クリックしてもページは空白表示される。

⑧GUIツールを使ってみる

1.以下のコマンドを実施
vue ui

2.ブラウザでVueプロジェクトマネージャが起動
==Vueプロジェクトマネージャでできること=============================
・プロジェクトの作成
・プロジェクトのインポート
・プロジェクトのビルド
・プリセットの設定

・依存するパッケージリストのインストール

UIが結構きれいだしイケテル
picuture2.jpeg

＊おまけ：勉強になった単語集

SPA(Single Page Application)・・・単一のWebページでコンテンツ切り替えを行うことで、ブラウザの挙動に縛られないWeb表現を可能にする
フルスクラッチ ・・・自前で全部jsのコードを書く方法
DOM操作　　　・・・htmlのタグの操作がjavascriptからできるよ
レンダリング ・・・文字のデータを読み取って、実際の画面に映る画像や映像などに変換すること。なんかjsのコードからHTML用のタグとか生成してくれてた。

＊エディタについて
Visual Studio Codeを利用。Gitにそのままコミット&プッシュできるし便利。

Vue.jsの基本

＊テンプレート

script内はjavascriptだからコメントアウトの仕方が違うのがなんか面白い

 <!DOCTYPE html>
<html>
<head>
    <title>My first Vue app</title>
    <script src="http://localhost:8098"></script>
    <script src="https://unpkg.com/vue"></script>
</head>

<body>
        <style>
        ここでコンテンツのレイアウトとか文字色とか設定
        </style>

        <h1>
        </h1>

        <div id = "">
        id値でjavascriptの処理対象になるタグを引っ張ってくるよ
        </div>

        <script>
        javascriptのコードを記載
        </script>
</body>
</html>

＊HTMLタグとjavascriptを紐づける

<!DOCTYPE html>
<html>
<head>
    <title>My first Vue app</title>
    <script src="http://localhost:8098"></script>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <h1>Vue.js</h1>
    <div id="app">
    {{ message }}
    </div>
    <hr>
    <input type="text" onInput="doAction(event);">


    <script>
    var data = {
        message:"please type"
    }


    var app = new Vue({
        el: '#app',
        data: data
    })

    function doAction(event){
        data.message = event.target.value
    }

    </script>
</body>
</html>

＊ レンダリングしてみる

    <script>
    var data = {
        message:'Hello'
    };

    var app = new Vue({
        el: '#app',
        data: data,
        render: (element) =>{
            return element("p",
                            {'style':'font-size:20pt; color:red'},
                            data.message);
        }
    })

    function doAction(){
        data.message = "Hey";
    }

    </script>

＊配列とか使って複数のタグをレンダリングしてみる

    <script>
    var data = {
        message:'Hello',
        items:['one','two','three','four','five']
    };

    var app = new Vue({
        el: '#app',
        data: data,
        render: (h) =>{
                return h("div",
                    [
                    h("p",{'style':'font-size:20pt; color:red'},data.message),
                    h("ol",data.items.map(i=> h('li',i)))
                    ]
                );
        }
    });

    function doAction(){
        var newdata = ['いち','に','さん','よん','ご']
        data.message = "clicked";
        data.items[0] = '零';
        for (n in data.items){
            data.items[n] = newdata[n];
        }
    }

    </script>

＊ ユーザーの入力によって表示されるデータを変更する★オススメ

 <!DOCTYPE html>
<html>
<head>
 <title>My first Vue app</title>
 <script src="http://localhost:8098"></script>
 <script src="https://unpkg.com/vue"></script>
</head>

<body>
 <h1>Vue.js</h1>
 <div id="app">
 <p v-html="messages"></p>
 </div>
 <hr>
 <input type="text" onInput="doInput(event);"> <!--入力フィールド-->
 <button onclick="doAction();">
 click
 </button>

 <script>
 var data = {
 messages: '<li>Hello</li>'
 };

 var app = new Vue({
 el: '#app',
 data: data
 });

 function doInput(event){
 data.message = event.target.value;
 }

 function doAction(){
 data.messages += '<li>' + data.message + '</li>'
 }

 </script>
</body>
</html>

＊v-bindでstyleの情報をjs側に埋め込む

 <!DOCTYPE html>
<html>
<head>
 <title>My first Vue app</title>
 <script src="http://localhost:8098"></script>
 <script src="https://unpkg.com/vue"></script>
</head>
<body>
 <h1>Vue.js</h1>
 <div id="app">
 <p v-bind:style="style_value">{{message}}</p>
 </div>

 <hr>
 <input type="number" onChange="doChange(event);" value="20">

 <script>
 var data = {
 message:'Hello',
 style_value:'font-size:20pt; color:red'
 };

 var app = new Vue({
 el: '#app',
 data: data
 });

 function doChange(){
 data.style_value = 'font-size:' + event.target.value + 'pt; color:red;';
 }

 </script>
</body>
</html>

＊v-bindでクラスの情報をjs側に埋め込む

 <!DOCTYPE html>
<html>
<head>
 <title>My first Vue app</title>
 <script src="http://localhost:8098"></script>
 <script src="https://unpkg.com/vue"></script>
</head>

<body>
 <style>
 .red {
 font-size:20pt;
 font-weight:bold;
 font-style:normal;
 color:red;
 }
 .blue {
 font-size:24pt;
 font-weight:plain;
 font-style: italic;
 color:blue;
 }
 </style>

 <h1>Vue.js</h1>
 <div id="app">
 <p v-bind:class="classes">
 {{message}}
 </p>
 </div>
 <hr>
 <button onclick="doAction();">
 click
 </button>


 <script>
 var classObj = {
 red: true,
 blue: false
 };


 var data = {
 message: 'Hello Vue!',
 classes: classObj
 };


 var app = new Vue({
 el: '#app',
 data: data
 });


 function doAction() {
 classObj.red = !classObj.red;
 classObj.blue = !classObj.blue;
 }
 </script>
 </body>
</html>

＊v-ifでクリックすると表示レイアウトが切り替わるようにする★オススメ

 <!DOCTYPE html>
<html>
<head>
 <title>My first Vue app</title>
 <script src="http://localhost:8098"></script>
 <script src="https://unpkg.com/vue"></script>
</head>

<body>
 <style>
 .ok {
 font-size:24pt;
 color:blue;
 padding: 5px 10px;
 border: 2px solid red;
 }
 .ng {
 font-size:20pt;
 color:gray;
 }
 </style>

 <h1>Vue.js</h1>
 <div id="app">
 <p v-if="flag" class="ok">
 正常な表示
 </p>
 <p v-else class="ng">
 ※問題発生中
 </p>
 </div>

 <button onclick="doAction()">
 Click
 </button>

 <script>
 var data = {
 flag:true
 }

 var app = new Vue({
 el: '#app',
 data:data
 });

 function doAction(){
 data.flag = !data.flag;
 }

 </script>
</body>
</html>

＊v-ifとtemplateを使って表示画面を切り替える★オススメ

<!DOCTYPE html>
<html>
<head>
 <title>My first Vue app</title>
 <script src="http://localhost:8098"></script>
 <script src="https://unpkg.com/vue"></script>
</head>

<body>
 <style>
 table tr th {
 font-size:16pt;
 color:white;
 background-color:blue;
 padding: 5px 15px;
 }
 table tr td {
 font-size:16pt;
 color:gray;
 border:1px solid gray;
 }
 li {
 font-size:16pt;
 color:gray;
 }
 </style>

 <h1>Vue.js</h1>
 <div id="app">
 <template v-if="flag" class="ok">
 <p>テーブルの表示</p>
 <table>
 <tr><th>Name</th><th>mail</th></tr>
 <tr><td>Taro</td><td>taro@yamada</td></tr>
 <tr><td>Hanako</td><td>hanako@flower</td></tr>
 <tr><td>Sachiko</td><td>sachiko@happy</td></tr>
 </table>
 </template>
 <template v-else class="ng">
 <p>リスト</p>
 <ul>
 <li>Taroのアドレスは、taro@yamadaです。</li>
 <li>hanakoのアドレスは、hanako@flowerです。</li>
 <li>Sachikoのアドレスは、sachiko@happyです。</li>
 </ul>
 </template>
 </div>

 <button onclick="doAction()">
 Click
 </button>

 <script>
 var data = {
 flag:true
 }

 var app = new Vue({
 el: '#app',
 data:data
 });

 function doAction(){
 data.flag = !data.flag;
 }

 </script>
</body>
</html>

＊v-forでリスト処理

 <!DOCTYPE html>
<html>
<head>
 <title>My first Vue app</title>
 <script src="http://localhost:8098"></script>
 <script src="https://unpkg.com/vue"></script>
</head>

<body>
 <style>
 table tr th {
 font-size:16pt;
 color:white;
 background-color:blue;
 padding: 5px 15px;
 }
 table tr td {
 font-size:16pt;
 color:gray;
 border:1px solid gray;
 }
 </style>

 <h1>Vue.js</h1>

 <div id = "app">
 <p>※データをテーブル表示する</p>
 <table>
 <tr>
 <th>ID</th>
 <th>name</th>
 <th>mail</th>
 <th>tel</th>
 </tr>
 <tr v-for="(item, id) in items">
 <td>{{id}}</td>td>
 <td>{{item.name}}</td>
 <td>{{item.mail}}</td>
 <td>{{item.tel}}</td>
 </tr>
 </table>
 </div>

 <script>
 var data = {
 items:[
 {name:'Taro', mail:'taro@yamada', tel:'999-999'},
 {name:'Hanako', mail:'hanako@flower', tel:'888-888'},
 {name:'Sachiko', mail:'sachiko@happy', tel:'777-777'},
 {name:'Jiro', mail:'jiro@change', tel:'666-666'},
 {name:'mami', mail:'mami@mumemo', tel:'555-555'}
 ]
 }

 var app = new Vue({
 el : '#app',
 data : data
 })

 </script>


</body>
</html>

＊配列処理

<!DOCTYPE html>
<html>
<head>
 <title>My first Vue app</title>
 <script src="http://localhost:8098"></script>
 <script src="https://unpkg.com/vue"></script>
</head>

<body>
 <style>
 table tr th {
 font-size:16pt;
 color:white;
 background-color:blue;
 padding: 5px 15px;
 }
 table tr td {
 font-size:16pt;
 color:gray;
 border:1px solid gray;
 }
 </style>

 <h1>Vue.js</h1>

 <div id = "app">
 <table>
 <tr>
 <th>name</th>
 <th>mail</th>
 <th>tel</th>
 </tr>
 <tr v-for="(item, key) in items">
 <td>{{key}}</td>
 <td>{{item.mail}}</td>
 <td>{{item.tel}}</td>
 </tr>
 </table>

 </div>

 <script>
 var data = {
 items:{
 Taro:{mail:'taro@yamada', tel:'999-999'},
 Hanako: {mail:'hanako@flower', tel:'888-888'},
 Sachiko: {mail:'hanako@flower', tel:'888-888'}
 }
 }

 var app = new Vue({
 el: "#app",
 data: data
 });

 </script>

</body>
</html>

＊v-forとv-ifの合わせ技★オススメ

 <!DOCTYPE html>
<html>
<head>
 <title>My first Vue app</title>
 <script src="http://localhost:8098"></script>
 <script src="https://unpkg.com/vue"></script>
</head>

<body>
 <style>
 table tr th {
 font-size:16pt;
 color:white;
 background-color:blue;
 padding: 5px 15px;
 }
 table tr td {
 font-size:16pt;
 color:gray;
 border:1px solid gray;
 }
 </style>

 <h1>Vue.js</h1>

 <div id = "app">
 <p>※データをテーブル表示する</p>
 <table>
 <tr>
 <th>ID</th>
 <th>name</th>
 <th>mail</th>
 <th>tel</th>
 </tr>
 <tr v-for="(item, index) in items" v-if="index % 2 == 0">
 <td>{{index}}</td>td>
 <td>{{item.name}}</td>
 <td>{{item.mail}}</td>
 <td>{{item.tel}}</td>
 </tr>

 <tr v-else>
 <td>***</td>
 <td>*****</td>
 <td>*****</td>
 <td>*****</td>
 </tr>

 </table> 
 </div>

 <script>
 var data = {
 items:[
 {name:'Taro', mail:'taro@yamada', tel:'999-999'},
 {name:'Hanako', mail:'hanako@flower', tel:'888-888'},
 {name:'Sachiko', mail:'sachiko@happy', tel:'777-777'},
 {name:'Jiro', mail:'jiro@change', tel:'666-666'},
 {name:'mami', mail:'mami@mumemo', tel:'555-555'},
 ]
 }

 var app = new Vue({
 el: '#app',
 data: data
 })
 </script>

</body>
</html>
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0