Vue.js
HTMLファイル内でVue.jsを使用するには、マウントと呼ばれる処理が必要である。 方法は様々あるようだが、まずは教本などでよく出てくるパターンを参考に、何をしているのか書く。 <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js 3</title> </head> <body> <div id="app"> </div> <script src="https://unpkg.com/vue@3.1.5"></script> </body> <…</html>
あｎ# おさらい ディレクティブとは、接頭辞v- がついたVueJsの属性。 これを使うことでデータバインディングなどが可能となる。 v-if 指定された条件式がtrueの場合にだけ、現在の要素を出力する v-show 式の真偽に応じて表示/非表示を切り替える 〜v-show …
アプリケーションのデータをDOMと結びつけること テキストボックスの双方向データバインディング <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js</title> <link href="main.css" rel="stylesheet"> </head> <body> <div id="app"> <form> <label for="name">文字を入力してください:</label> <input type="text" id="name" v-model="inputText" />…</form></div></body></html>
ライフサイクルとは Vueインスタンスの生成から破棄までの流れのこと ライフサイクルの変化に応じて呼び出されるメソッドのことを ライフサイクルフックと呼ぶ 下記の公式が非常に参考になる。 Vue インスタンス — Vue.js ぶっちゃけ初学者にはなんのこっち…
算出プロパティとは 既存データの加工を伴う取得のこと <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js</title> <link href="main.css" rel="stylesheet"> </head> <body> <div id="app"> <p>{{localEmail}}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </body></html>
ディレクティブ {{変数}}のマスタッシュ構文は便利だが、条件分岐や繰返し処理などは ディレクティブ機能を使う。 本機能は重要である。 「v-●●」で始まるのが特徴 例えば、属性値にJavaScript式を埋め込むにはv-bindを使います <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js</title> <link href="main.css" rel="stylesheet"> </head> <body> <div id="app"> <a v-bind:href="url">ぐーぐ…</a></div></body></html>
Vue.Jsとは JavaScriptのフレームワーク。 JQueryを業務で少しでも使用したことがある方ならご理解頂けるかと思うが、 導入しやすくDOM操作を便利にしてくれる反面コードがごちゃごちゃしてくる。 Jqueryでは、入力値をDOMと呼ばれる文書ツリーから取得し、A…
