vue一覧

目次

vue.jsとは

ざっくりいうと、JavaScript? のデータと HTML の要素を紐付けて、

データが変われば勝手に表示に反映してくれます。

毎回データと表示を同期させる処理を自分で書かなくてもよくなり、

インタラクティブなページや状態管理が活躍するページを作りやすくなります。。。

というが、そうかな?

書き方に、OKパターン、NGパターンがあって、結構書き方が、決まっている印象がある。特に、コンポーネント間の通信が、書き方が、決まっている。

vue-cli のインストール

ちょっと前までは、

npm install -g vue-cli

だったが、

npm install -g @vue/cli

になったっぽい。

windwsで使うには、いろいろ注意点がある。

たぶん、いろいろな不具合(パスの問題とか)から察するに、Macユーザが開発しているのでは?

で、vue コマンドが、not found といわれたら、C:\Users\user\AppData?\Roaming\npm にvue.cmd がインストールされているので、ここに、環境変数のPATHを通してあげよう

あと、たぶん、git for windowsのgit bashだと、インタラクティブな、コマンドがでてくると、対応できない。例えば、メニューがでてきて、選ぶとか、が、cmdで、vueコマンドを実行しないと反応しない。

部品が、作れる程度に、vueを勉強してから、cliを使いましょう。そうしないと、わけわかんなくなっちゃうよ。

nodeのインストールが済んでいることを確認

$ node -v
v10.16.0

windows の場合、アップデートは、公式のインストーラを再度実行すると、安全にやってくれるそうです。

https://nodejs.org/ja/download/

次のコマンドでインストール

npm install -g vue-cli

確認

$ vue --version
2.9.6

プロジェクトの作成

vue init <template> <project-name>

よくサンプルで、出てくるのは、以下の通り、

vue init webpack vue-template

いくつか選択肢がでてくる

VSCodeの設定

vue cliで、ほいほいと、プロジェクトをつくっていくと、コードフォーマッターがはいるので、エディターで、保存時に、自動整形する設定が事実上、必要

http://ry-2718.hatenablog.com/entry/2018/10/17/194909

vi のハイライト設定

https://github.com/posva/vim-vue

git clone https://github.com/posva/vim-vue.git ~/.vim/pack/plugins/start/vim-vue

本家

https://jp.vuejs.org/index.html

日本語の情報が豊富、Vueの日本語サイトでは、

ていねいに、まとめられている感じる。書籍よりも、親切なぐらい、ていねいだ。

スタイルガイド

https://jp.vuejs.org/v2/style-guide/index.html

優先度 A,Bあたりは、必読

簡単なサンプル

index.html

<html>
    <head>
        <link rel="stylesheet" href="css/index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="index01">
            ユーザ名 : {{ name }}
            <p>TODO</p>
            <li 
                v-for="item in items"
                :key="item.id"
            >
                {{ item.id + ":" + item.name }}
            </li>
        </div>
        <script src="index.js"></script>
    </body>
</html>

index.js

var app = new Vue({
    el: '#index01',
    data: {
        name: 'ぷーさん',
        items: [
            { id:1, name: 'はちみつなめる' },
            { id:2, name: 'さんぽする' },
            { id:3, name: 'おひるねする' },
        ]
    }
});

注意点は、{{変数}}は、テキストにしか、使えない代入方法で、ほかに、属性、スタイル属性のやり方が、あるので、注意が必要。自分は、これで、スタイル属性を変更できると思って、2時間ぐらい、格闘してしまっていた。まずは、入門書をみたほうが、ちかみちかもしれない。

Vue オプションのスケルトン

new Vue の内容は、オプションと呼称するそうです。

で、よく見るサンプルには、全部のってないから、メモしてみる

var app = new Vue({

  el: '#app',  // <---- mountする要素

  data: {
     message: 'Vue.js'   // <--- データ
  },

  computed: {             // <--- functionで定義する系のデータ
     hoge_function: function() {
        return xxx;
     }
  },

  methods: { // <--- 自前の何らかの処理
      myMethod: function(){

      }
  },

  // ライフサイクル フック シリーズ
  beforeCreate: function() {  // <---- インスタンス作成 リアクティブ初期化前

  },


  created: function() {  // <---- インスタンス作成 リアクティブ初期化後

  },

  beforeMount: function() {  // <---- インスタンスがマウントされる前

  },


  mounted: function() {  // <---- インスタンスがマウントされた後

  },

  beforeUpdate: function() { // <---- データが変更され、DOMに適用される前

  },

  updated: function() { // <---- データが変更され、DOMに適用された後

  },

  beforeDestoroy: function { // <---- Vueインスタンスが破棄される前

  },

  destroyed: function { // <---- Vueインスタンスが破棄された後

  },

  errorCaptured: function { //任意の子孫のコンポーネントから、エラーが、補足されたとき
  }
 
}

もうちょい頑張って、初歩的サンプルまとめてみた

index.html


<html>
    <head>
        <link rel="stylesheet" href="css/index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>

    <body>
        <H3>01:HelloWorld</H3>
        <div id="div01">
            {{ message }}
        </div>

        <H3> くり返しの例 </H3>    
        <div id="div02">
            ユーザ名 : {{ name }}
            <ol>
                <li 
                    v-for="item in items"
                    :key="item.id"
                >
                    {{ item.id + ":" + item.name }}
                </li>
            </ol>
        </div>

        <H3> ボタンの例 </H3>
        <div id="div03">
            <p>{{ message }}</p>
            <button v-on:click="reverseMessage">Reverse Message</button>
        </div>

        <H3> 入力ボックスを使ったv-model双方向バインディングの例 </H3>
        <div id="div04">
            <p>{{ message }}</p>
            <input v-model="message"/>
        </div>

        <H3> コンポーネントの例01 </H3>
        <div id="div05">
            <ol>
                <component-01
                v-for="item in items"
                v-bind:value01="item"
                v-bind:key="item.id"
                ></component-01>
            </ol>
        </div>
        

        <H3> コンポーネントの例 02 </H3>
        <div id="div06">
                <button-counter></button-counter>
        </div>
 
        <H3> コンポーネント間の通信、親から子へ(props) </H3>
        <div id="div07">
            <a07-component/>
        </div>


        <H3> 子から親へ($emitとカスタムイベント)</H3>
        <div id="div08">
            <a08-component/>
        </div>

        <script src="index.js"></script>


    </body>
</html>

index.js

// -----------------------------------
var mock_list = {
    name: 'ぷーさん',
    items: [
        { id:1, name: 'はちみつなめる' },
        { id:2, name: 'さんぽする' },
        { id:3, name: 'おひるねする' },
    ]
};

// -----------------------------------
var div01_setting = new Vue({
    el: '#div01',
    data: {
      message: 'Hello World! : ' +   new Date().toLocaleString()
    }
  });

// -----------------------------------
var div02_setting = new Vue({
    el: '#div02',
    data: mock_list
  });

// -----------------------------------
var div03_setting = new Vue({
    el: '#div03',
    data: {
      message: 'ABC'
    },
    methods: {
      reverseMessage: function () {
        this.message = this.message.split('').reverse().join('')
      }
    }
  });
  
// -----------------------------------
var div04_setting = new Vue({
    el: '#div04',
    data: {
      message: 'Hello Vue! div04'
    }
  });

// -----------------------------------
Vue.component('component-01', {
    props: ['value01'],
    template: '<li>{{ value01.name }}</li>'
  });
  
var div05_setting = new Vue({
    el: '#div05',
    data: mock_list
});

// -----------------------------------
// button-counter と呼ばれる新しいコンポーネントを定義します
Vue.component('button-counter', {
    data: function () {
      return {
        count: 0
      }
    },
    template: '<button v-on:click="count++">クリック回数 {{ count }} 回目.</button>'
});

new Vue({ el: '#div06' });


// -----------------------------------
// コンポーネント間の通信、親から子へ(props)
//Bコンポーネント
let b07Component = {
    template: '<div>Bコンポーネント{{myMessage}}</div>',
    props: ['myMessage']
};

//Aコンポーネント
let a07Component = {
    template: '<b07-component v-bind:my-message="message"/>',
    components: {
        'b07-component': b07Component
    },
    data: function () {
        return {
            message: 'こんにちわ'
        }
    }
};

var div07_setting = new Vue({
    el: '#div07',
    components: {
        'a07-component': a07Component
    }
});

//子から親へ($emitとカスタムイベント)
  //Bコンポーネント
  let b08Component = {
    //クリックするとbMethodが実行されカスタムイベントb-eventが発火する
    template: `
    <div>
    <input type="text" v-model ="textData"/>
    <button @click="bMethod">親へ送る</button>
    </div>`,
    data: function () {
      return {
          textData: 'こんにちわ'
      }
    },    
    methods: {
        bMethod: function () {
          // this.$emit('b-event');//カスタムイベントの発火
          this.$emit('b-event', { message: this.textData });//カスタムイベントの発火
        }
    }
  }

  //Aコンポーネント
  let a08Component = {
    //カスタムイベントであるb-eventが発火されると、それをキャッチしてaMethodが実行される
    template: '<b08-component @b-event="aMethod"/>',
    components: {
        'b08-component': b08Component
    },
    methods: {
      aMethod: function (payload) {
        alert(payload.message);
      }
    }
  };

/*
スニペット

// ●●用のデータを設定
var divId_setting = new Vue({
  el: '#divId',
  data: {
    key: 'value!'
  }
});

*/


typescriptを使うリンク集

Vue.js+TypeScript?で開発するときの参考記事まとめ

https://qiita.com/kai_kou/items/19b494a41023d84bacc7

デバッグツール

ブラウザ拡張がある

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

テンプレート

https://sounansa.net/archives/2360

template構文

https://jp.vuejs.org/v2/guide/syntax.html

template書き方

https://qiita.com/seya/items/93a0055c8fdab62d584f

Vue.jsでコンポーネント作るときにCSS変数つかったら色々できる

https://qiita.com/shinobu_shiva/items/31aec81a52475483791b

CSSプロパティとinput: rangeを紐付ける知見

https://jsbin.com/navofelesa/edit?html,output

レイアウト

Vueの機能は使わず、基本的にCSSのみで解決することをまずかんがえましょう。 最初からVueのUIライブラリやCSSフレームワークのgridモジュールを探しに行かないほうが良いです。

Vueの機能を使わずに、レイアウト

画面を分割する

CSS grid layoutを使う

https://ics.media/entry/15649

いくつかのDIVを等幅で並べる

flexboxを使う

https://qiita.com/takanorip/items/a51989312160530d89a1

ボタン等をボックスの右端とかに固定する

閉じるボタンとか

position: absoluteを使う

https://saruwakakun.com/html-css/basic/relative-absolute-fixed

中央寄せする

https://yoshiko-pg.github.io/slides/20151215-scripty/

Vueの機能をつかってレイアウト

nuxt.jsのlayoutsを使うのが、効率がよいらしい。

https://ja.nuxtjs.org/api/pages-layout/

vueで、ページを追加するサンプル

https://qiita.com/567000/items/d6a7c694a370dc92e774

Vue CLIで作成したプロジェクトのレイアウトを変更

https://qiita.com/whoshino/items/22426bd18b5ac7e192b0

UI

UIの実装例をたくさん載せてるサイト

onsen

https://ja.onsen.io/v2/api/vue/v-ons-splitter.html

vueitfy

https://vuetifyjs.com/ja/components/expansion-panels

vue ベースのフレームワーク

https://superdevresources.com/vuejs-mobile-frameworks/

Vueでもっと幸せになりたいあなたへ。VueのUIコンポーネントライブラリVuetifyのススメ

https://techblog.kayac.com/2018/12/12/080000

vue material

https://vuematerial.io/components/menu/

vue toolbox

見やすく分類されてる

https://www.vuetoolbox.com/

awesome

https://github.com/vuejs/awesome-vue

Vue Curated

https://curated.vuejs.org/

vue.jsのサンプル

https://vuejsexamples.com/

CMSの例

https://vuejsexamples.com/a-vue-js-2-0-content-management-system/

ダイアグラムコンポーネント

https://vuejsexamples.com/diagram-component-for-vue-js/

D&Dコンポーネント

Vue.Draggable

https://github.com/SortableJS/Vue.Draggable

モーダル

https://helloworld-blog.tech/javascript/vue-js%e3%81%a7%e3%83%89%e3%83%a9%e3%83%83%e3%82%b0%e3%82%a2%e3%83%b3%e3%83%89%e3%83%89%e3%83%ad%e3%83%83%e3%83%97%e3%81%a7%e7%a7%bb%e5%8b%95%e5%8f%af%e8%83%bd%e3%81%aa%e3%83%a2%e3%83%bc%e3%83%80

vue-cli (vuex) で PlantUML エディターを作ってみた

https://qiita.com/kkeisuke/items/45f4725d41dd789061a2

vue で CMS

https://jp.vuejs.org/v2/cookbook/serverless-blog.html

使ってみた感想が書いてあるサイト

https://qiita.com/tiwu_official/items/8ab7bb47eba265db198d

個別にコンポーネントを調べるには

google とかで、vue splitterとかで、検索すると、まとまってるサイトを

いくつか見つけることができる

vue-splitter

https://github.com/rmp135/vue-splitter

UI部品化には、Elementをつかうのでインストール

npm install element-ui -S

Element公式サイト

http://element.eleme.io/

アプリケーションでの利用

import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/ja'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Element, { locale })

データドリブンについての考察

https://rangle.io/blog/how-to-create-data-driven-user-interfaces-in-vue/

使用するvueの機能

https://vuejs.org/v2/guide/components.html#Dynamic-Components

A Standard Library for APIs

https://docs.stdlib.com/#/introduction

vueのクックブック

https://jp.vuejs.org/v2/cookbook/index.html

vue で SVG

グリグリ動くUIをVueとSVGでサクッと書く

http://hashrock.hatenablog.com/entry/2017/12/04/215559

hashrock/svg-sandbox.html

https://gist.github.com/hashrock/6f082d09f8a9073dae1caa07dbd26b6f

Meteor

MeteorはTwitter連携ログインを作るのがめちゃ楽

https://qiita.com/hashrock/items/575e0be0a362e6c78dd1

VIU

VIU = Meteor + vue マテリアルデザイン

https://github.com/DevsignStudio/viu

jhipsterで、scaffold

https://blog.ippon.tech/creating-a-modern-web-app-using-vuejs-and-spring-boot-with-jhipster/

https://www.npmjs.com/package/generator-jhipster-vuejs

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2019-07-09 (火) 17:12:05 (70d)