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

vue勉強

  • const vm = new Vue ({Vは大文字じゃなきゃ動かない

  • <input type="text" v-model="message">v-modelみたいなv-〇〇はディレクティブ(属性ディレクティブ)といって、「ここを動かしまっせ」みたいな印の役割をしている
    直訳で 指示 という意味
    ディレクター(監督)から出る指示のニュアンス

  • バインディング
    相互に関連付けること。
    双方向データバインディングとかいう

  • v-model
    フォーム入力バインディング。
    input要素とかtextarea要素とかのフォームの状態を、p要素などにリアルタイムで関連付けることができる。
    textareaに入力した文言をp要素内に出力するなど。
    公式

  • idとエレメント名(elの値)が一致していることを確認する

  • v-forのときにリストの配列名を複数形にしたときにsの付け忘れに注意

  • ES6
    スプレッド構文
    アロー関数

  • マウント:mounted は Vue.js におけるライフサイクル(参考)において、仮想 DOM が DOM に置き換わるタイミングを指します

  • const
    定数。多分、「以下を定義します」みたいな意味

  • vm
    view model の略

  • v-bind:class
    状況によってクラスを可変にする
    チェックボックスにチェックが入っていたらクラス(スタイル)を変えるみたいなことができる
    公式

  • filter()メソッド
    例えば、「todoリスト内のアイテムをふるいに掛けてチェックが入っていないアイテムだけを並べる」みたいなことができる。
    配列にフィルターを掛けてあたらしい配列を生成する。
    カッコ内の引数には関数を渡す。その関数に従ってフィルターをかける

  • v-for
    :key(v-bind:keyの略)を必ず付ける。
    固有(ユニーク)なidなどをリストアイテムに付す役割。
    理由は固有のidを振らないとスタイルやチェックの有無などの状態を紐付けられないから。
    keyを持ったアイテムは、状態を維持したまま並べ替えることができるが、keyを持たせないと並べ替えや削除などを行ったときにインデックス番号が状態を持ってしまい、状態を紐付けられない
    わかりやすい説明
    公式

  • el,props,data,methodsなどの名前
    コンポーネントオプション
    推奨される順序

  • 簡単なhello world

script src="https://cdn.jsdelivr.net/npm/vue"
#app
  | {{testVal}}
javascript:
  const app = new Vue({
    el: '#app',

    data: {
        testVal: 'Hello World!' //testValを定義
    }
  });
uchiuchi
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
ユーザーは見つかりませんでした