Vue.jsに触れてみる②

v-onディレクティブでイベントを発生させる

See the Pen eYYzzzd by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

ボタンをクリックすることで文字を反転させることができます。

ちなみにここで、Javascriptのアロー関数を使えるか試したのですが

以下では動きませんでした。

var app = new Vue({
  el:'#app',
  data:{
  message:'Hello Vue.js!'
},
  methods:{
    reverseMessage:()=>{
      this.message = this.message.split('').reverse().join('')
    }
  }
})

See the Pen GRRqqLV by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

上記はボタンを押すことでカウントアップされていきます。

counterの初期値は0ですが、Clickボタンを押すことによりcounter+=1の記述により値が１ずつ増えていきます。

また、Clearボタンを押すことによりcounterの値が0にリセットされるようにしています。

v-modelで双方向バインディング

See the Pen JjjKKZv by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

テキストボックスの中に文字を入力すると、リアルタイムでその文字が反映されます。

See the Pen zYYBozx by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

v-modelに「.lazy」修飾子を指定することで、フォーカスが外れたタイミングで文字の変更が反映されるようになります。

これは、内部ではinputイベントの代わりにchangeイベントが使用されるため、変更がコミットされたタイミングでプロパティが反映されるようになっています。

コンポーネントの使用

See the Pen XWWKKoz by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

中に<li>要素の入った”todo-item”というコンポーネントを独立させています。

しかし、このままでは同じ内容が並んでしまうので、あまり意味がありません。

ですので、配列を用意してその内容がリストに並ぶようにしてみます。

See the Pen LYYZRYM by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

このあたりからもう難しくてよくわからなくなってきました。

まず、propsとは何ぞや？

コンポーネントに値を渡してそれを処理したい場合に、

コンポーネント内部でpropsオプションを使用して属性値をプロパティとして取り出します。

その時、コンポートネント側でpropsオプションを使用してプロパティを文字列配列として定義する。

ということみたいです。

propertysの略ということですね。

また、JavaScriptでは名前にハイフンは使えないので、同様にプロパティ名にハイフンを使用することができないようですので注意が必要です。

template内部で名前と表示させようとしたときに、最初

{{animal.name + '(id:'+ animal.id + ')'}}

と書いたのですがこれは不正解のようです。

文字を連結する際も特に連結文字はいらないようですね。

とりあえず。Vueチュートリアルの「はじめに」の部分はここまでのようです。

まずは基礎をしっかり固めていきたいと思います。

ボタンクリックでアニメーション

See the Pen xxxORKK by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

とりあえず真似してみたけどこの辺りはもう少し後に深く掘り下げたいと思います。

SuzuBlog

webのお勉強はじめたばかりの初心者。備忘録

Vue.jsに触れてみる②