Help us understand the problem. What is going on with this article?

vue.js入門

vue.jsとは?なぜこれを勉強しようと思ったか?

vue.jsはMVCのVの部分のフレームワークでがっつり全体を作ることもできるし、jqueryのように部分的にも使うことができる。SPA、ないしPWAが今後増えることを考え、勉強しようと思った。特徴は下記

  • 双方向バインディング

勉強方法

公式のドキュメントから勉強するのを今回は挑戦してみる。

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

vueの読み込む順番

Vueインスタンスを定義するファイルより先に読み込まないとエラーをはくのでrailsの場合、applicstion.jsに追記

application.js
//= require rails-ujs
//= require turbolinks
//= require vue
//= require_tree .

まずは事例で

変数を表示させたい時

なにか変数を定義してそれを表示させるという基本的な所から。

index.html
<div id="app">
  {{ message }}
</div>
vue.js
const app = new Vue({
  el: '#app',
  data: {
    message: 'hello'
  }
})

結果 hello

  • vueは最初にvueオブジェクトを定義する
  • vueオブジェクトは下記2つを設定
    • el:VueインスタンスがバインドするDOM要素の指定
    • data : Vueインスタンスが持つプロパティオブジェクト

イベントで発火させて何かしたい時

index.html
<div id="app">
  <button v-on:click="changeMsg">change message</button>
  <p>{{ message }}</p>
</div>
const app = new Vue({
  el: '#app',
  data: {
    message: 'あばば'
  },
  methods: {
    changeMsg: function () {
      this.message = 'えばば'
    }
  }
})

vueではタグに

v-on:DOMイベント

とつけるとそのイベントのときに発火させられる。DOMイベントは下記のページに表が。

https://developer.mozilla.org/ja/docs/Web2/Reference/Events

またmethodsで関数をvueインスタンスに渡すことができます。上記でやっていることは

  • elでappというVueインスタンスを指定
  • 基本はdata内の処理を行う
  • ただし、methodsでchangeMsgを定義
  • htmlにv-on:clickでクリックした際にmethodsが発火するようにした

展開

変数を展開したいときは{{}}二重中括弧で囲む。vueで展開されたものはHTMLではなくプレーンなテキストとして扱われる。

<span>Message: {{msg}}</span>

htmlとして展開したい場合

rwHtml == <span style="color:red">this should be red.</span>
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

結果

Using mustaches:this should be red.
Using mustaches:this should be red.

v-htmlプロパティでhtmlで出力できる。

vueの記述方法

vueは大きく分けて下記二種類記述方法があり、基本的には下記の使い分けを個人的にはしている。

render関数で記述

プログラミングぽいというか<h2>を何個生成してなどループ処理などプログラミングっぽい記述をしたいときに使う。可読性は低い。

単一ファイルコンポーネント

htmlをパーツで記述する。vueは基本この書き方のほうが可読性が高くていい感じ。

コンポーネント

vue.jsではhtmlごとまとめることができてそれをコンポーネントと呼んでいる。

javascript
var MyComponent = Vue.extend({
  // オプション...
})
// グローバルに my-component タグでコンポーネントを登録する
Vue.component('my-component', MyComponent)
new Vue({
el:'#example'
})
html
<div id="example">
  <my-component></my-component>
</div>

気をつけたい細かいところ

@click=v-on

v-onは@clickと書くことができる

用語集

  • ディレクティブ・・・vから始まるvue.js特有の属性
you8
普段はSNSのプロダクトマネージャーをしています。広告とかチーム運営とかについてはここ( http://you88.space/ )。日曜大工的に個人開発しています。( https://twitter.com/you8802 )作ったランチ募集サービス https://www.tea-pot.net/
https://you88.space/
nana-music
音楽SNSサービス「nana」の開発・運営を行っているスタートアップ
https://nana-music.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした