目次
一、VUE
1. 基本紹介
▶概要
Vue は、ネイティブ JavaScript での DOM 操作を免除し、記述を簡素化する一連のフロントエンド フレームワークです。
前に、バックエンド フレームワーク「Mybatis」も学習しましたが、「Mybatis」は「jdbc」コードの記述を簡素化するために使用され、「VUE」は「JavaScript」コードの記述を簡素化するために使用されるフロントエンド フレームワークです。前の包括的なケースでは、次のように多数の DOM 操作が実行されました。
VUE を使用した後は、この部分のコードを記述する必要はありません。では、`VUE` はどのように DOM の記述を簡素化するのでしょうか? MVVM (Model-View-ViewModel) の考え方に基づいて、データの双方向バインディングを実現し、プログラミングの焦点をデータに置きます。先ほど、DOM の操作に注目しましたが、 `MVVM` の考え方を理解するには、まず `MVC` の考え方を理解する必要があります。 MVC`
以下に示すように、C は私たちの js コード、M はデータ、V はページに表示されるコンテンツです。
MVC の考え方は双方向に縛られることはありません。双方向バインディングとは、データ モデルのデータが変更されると、それに応じてページの表示が変更され、フォームのデータが変更されると、バインドされたモデルのデータもそれに応じて変更されることを意味します。次に `MVVM` の考え方を理解する. 次の図は 3 つのコンポーネントの図です。
図の「Model」はデータ、「View」はビュー、つまりページ ラベル、ユーザーがブラウザを通じて見ることができるコンテンツ、「Model」と「View」は「ViewModel」によって双方向にバインドされます`object 、`ViewModel` オブジェクトは `Vue` によって提供されます。 双方向バインディングの効果: 事前に用意したコードに次の図を記述し、入力ボックスを `username` モデル データにバインドし、 ` { {}}` も `username` のバインドに使用します。ページ上の モデル データ
このページをブラウザで開くと、次のページが表示されます
入力ボックスにコンテンツを入力すると、入力したコンテンツが入力ボックスの背後にリアルタイムで表示されますが、これは双方向バインディングの効果です。
▶ クイックスタート
Vue の使い方は比較的簡単で、次の 3 つのステップに分かれています。
1. 新しい HTML ページを作成し、Vue.js ファイルをインポートする
<script src="js/vue.js"></scrip>2. JS コード領域で、データ バインディング用の Vue コア オブジェクトを作成します。
new Vue({ el: "#app", data() { return { username: "" } } });Vue オブジェクトを作成するときは、js オブジェクトを渡す必要があり、オブジェクトには次の属性が必要です。
● `el`: Vue が管理するタグを指定するために使用されます。`#app` の属性値 `app` は、マネージド タグの id 属性値である必要があります
● `data`: データ モデルの定義に使用されます
● `methods`: 関数の定義に使用されます。これは後で使用します3. ビューを書く
<div id="app"> <input name="username" v-model="username" > { {username}} </div>`{ {}}` は Vue で定義されている `補間式` で、ここにデータ モデルが記述されており、この位置にモデルのデータ値が表示されます。
▷全体のコードは次のとおりです。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input v-model="username"> <!--插值表达式--> { {username}} </div> <script src="js/vue.js"></script> <script> //1. 创建Vue核心对象 new Vue({ el:"#app", data(){ // data() 是 ECMAScript 6 版本的新的写法 return { username:"" } } /*data: function () { return { username:"" } }*/ }); </script> </body> </html>2.ビューコマンド
ディレクティブ: HTML タグの v- で始まる特別な属性。異なるディレクティブは異なる意味を持ちます。例: v-if、v-for...
▷ v-bind & v-model ディレクティブ
▷ v-バインド
このディレクティブは、モデル データをタグの元の属性にバインドできます。このように、モデル データが変更されると、それに応じてタグ属性値も変更されます。次に例を示します。
<a v-bind:href="url">百度一下</a>上記の `v-bind:"` は、次のように `:` として簡略化できます。
<!-- v-bind 可以省略 --> <a :href="url">百度一下</a>▷ v-モデル
このディレクティブは、モデル データをフォーム アイテム タグにバインドできます。このようにして、双方向の結合効果を達成することができる。例えば：
<input name="username" v-model="username">▷ コードデモ:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <a v-bind:href="url">点击一下</a> <a :href="url">点击一下</a> <input v-model="url"> </div> <script src="js/vue.js"></script> <script> //1. 创建Vue核心对象 new Vue({ el:"#app", data(){ return { username:"", url:"https://www.baidu.com" } } }); </script> </body> </html>上記のページをブラウザで開き、チェックを入れるとハイパーリンクのパスが表示されます。ハイパーリンクと入力ボックスは同じモデルデータにバインドされているため、入力ボックスに入力されたパスに応じて変化します。
▶ v-on 指令
ページにボタンを定義し、「v-on」命令を使用してクリック イベントをボタンにバインドします。html コードは次のとおりです。
<input type="button" value="一个按钮" v-on:click="show()">「v-on」を使用する場合は、「v-on:」を「@」に置き換えて単純化した書き方を使用することもできます。html コードは次のようになります。
<input type="button" value="一个按钮" @click="show()">上記のコードでバインドされた `show()` は、Vue オブジェクトの `methods` プロパティで定義する必要があります。
new Vue({ el: "#app", methods: { show(){ alert("我被点了"); } } });注: `v-on:` の後のイベント名は、on を削除する前の元のイベント属性名です。
例:
● クリック イベント: イベント属性名は onclick ですが、vue では `v-on:click` です
● ロスト フォーカス イベント: イベント属性名は onblur で、vue では `v-on:blur` が使用されます。▷全体のページコードは次のとおりです。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input type="button" value="一个按钮" v-on:click="show()"><br> <input type="button" value="一个按钮" @click="show()"> </div> <script src="js/vue.js"></script> <script> //1. 创建Vue核心对象 new Vue({ el:"#app", data(){ return { username:"", } }, methods:{ show(){ alert("我被点了..."); } } }); </script> </body> </html>▶ 条件判定命令
次に、コードを通してそれを示しましょう。次のように、Vue で「count」データ モデルを定義します。
//1. 创建Vue核心对象 new Vue({ el:"#app", data(){ return { count:3 } } });ここで実装するには、「count」モデルのデータが 3 の場合は「div1」のコンテンツをページに表示し、「count」モデルのデータが 4 の場合は「div2」のコンテンツをページに表示します。 「count」モデルのデータは、それ以外の値については、ページに「div3」を表示します。ここで、モデルデータ「count」の値を動的に変更するために、「count」モデルデータをバインドする別の入力ボックスを定義します。html コードは次のとおりです。
<div id="app"> <div v-if="count == 3">div1</div> <div v-else-if="count == 4">div2</div> <div v-else>div3</div> <hr> <input v-model="count"> </div>▷全体のページコードは次のとおりです。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div v-if="count == 3">div1</div> <div v-else-if="count == 4">div2</div> <div v-else>div3</div> <hr> <input v-model="count"> </div> <script src="js/vue.js"></script> <script> //1. 创建Vue核心对象 new Vue({ el:"#app", data(){ return { count:3 } } }); </script> </body> </html>ブラウザでページを開き、入力ボックスに異なる値を入力すると、次のようになります。
次に v-show コマンドの効果を見ている. モデルデータの count の値が 3 なら div v-show の内容を表示し、そうでなければ表示しない htmlページコードは以下の通り
<div v-show="count == 3">div v-show</div> <br> <input v-model="count">ブラウザを開くと、次のような効果があります。
上記のデモを通して、 v-show と v-if は同じ効果があることがわかりましたが、それらの違いは何ですか? ブラウザの検査機能に従ってソースコードを表示します。
上記の図からわかるように、「v-show」が表示されない原則は、対応するラベルに「display」css 属性を追加し、属性値を「none」に設定して、隠し効果を実現することです。また、条件が満たされない場合、「v-if」ディレクティブはまったくレンダリングされません。
▶ v-for ディレクティブ
この命令は、その名前を見ると、トラバーサルに使用されていることがわかります。この命令で使用される形式は次のとおりです。
<标签 v-for="变量名 in 集合模型数据"> { {变量名}} </标签>注:そのラベルをループする必要があり、`v-for` ディレクティブはそのラベルに書かれています。
ページでコレクション モデル データのインデックスを使用する必要がある場合は、次の形式を使用する必要があります。
<标签 v-for="(变量名,索引变量) in 集合模型数据"> <!--索引变量是从0开始，所以要表示序号的话，需要手动的加1--> { {索引变量 + 1}} { {变量名}} </标签>▷ コードデモ:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div v-for="addr in addrs"> { {addr}} <br> </div> <hr> <div v-for="(addr,i) in addrs"> { {i+1}}--{ {addr}} <br> </div> </div> <script src="js/vue.js"></script> <script> //1. 创建Vue核心对象 new Vue({ el:"#app", data(){ return { addrs:["北京","上海","西安"] } } }); </script> </body> </html>ブラウザで開いた場合の効果は以下の通り
3.ライフサイクル
ライフ サイクルの 8 つのフェーズ: ライフ サイクル イベントがトリガーされるたびに、ライフ サイクル メソッドが自動的に実行されます。これらのライフ サイクル メソッドはフック メソッドとも呼ばれます。
以下の図は、Vue の作成から Vue オブジェクトの有効化までの全体プロセスと、Vue 公式 Web サイトで提供されている各段階に対応するフック関数を示しています。
上の写真を見ると、この写真にあまり注意を払う必要はありません。これらのフック メソッドについては、「mounted」のみに注目します。
`mounted`: マウントが完了し、Vue が正常に初期化され、HTML ページが正常にレンダリングされました。将来的には、このメソッドでデータをロードする非同期リクエストを送信します。
2.エレメント
1. 基本紹介
▶概要
Element: Ele.me のフロントエンド開発チームが提供する Vue ベースの Web サイト コンポーネント ライブラリのセットで、Web ページをすばやく構築するために使用されます。
Element は、使用するための多くのコンポーネント (Web ページを構成するパーツ) を提供します。ハイパーリンク、ボタン、写真、表など〜
下の写真の左側はページを書くときに表示されるボタンで、上の写真の右側は Element によって提供されるページ効果で、効果は一目瞭然です。
Element を学ぶと、公式 Web サイトからコンポーネントを自分のページにコピーして変更する方法を学びます. 公式 Web サイトの URL は: Element - 世界で最も人気のある Vue UI フレームワーク (eleme.cn)
公式サイトに入ると次のページが表示されます
次に「components」を直接クリックすると、ページは以下のようになります
2. 要素のレイアウト
Element には、次の 2 つのレイアウト方法があります。
● レイアウト レイアウト
● コンテナ レイアウト コンテナ▷レイアウト部分
基本的な 24 列でレイアウトをすばやく簡単に作成します。つまり、行はデフォルトで 24 列に分割され、各列が占める列数はページ要件に従って設定されます。
左側のメニュー バーで [レイアウト] を探し、好みのボタン スタイルを見つけて [コードを表示] をクリックすると、対応するコードが下に表示されます. 表示されたコードにはスタイルと html タグが含まれています. スタイルを自分のページの `head` タグにコピーし、html タグを `<div id="app"></div>` タグにコピーします。
▷全体のページコードは次のとおりです。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .el-row { margin-bottom: 20px; } .el-col { border-radius: 4px; } .bg-purple-dark { background: #99a9bf; } .bg-purple { background: #d3dce6; } .bg-purple-light { background: #e5e9f2; } .grid-content { border-radius: 4px; min-height: 36px; } .row-bg { padding: 10px 0; background-color: #f9fafc; } </style> </head> <body> <div id="app"> <el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> </el-row> <el-row> <el-col :span="12"><div class="grid-content bg-purple"></div></el-col> <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col> </el-row> <el-row> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> </el-row> <el-row> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col> </el-row> <el-row> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col> </el-row> </div> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script> new Vue({ el:"#app" }) </script> </body> </html>ここで、8 つのグリッドを表示する行を追加する必要があります. 計算すると、各グリッドは 3 列を占有します. 具体的な html コードは次のとおりです.
<!-- 添加一行，8个格子 24/8 = 3 --> <el-row> <el-col :span="3"><div class="grid-content bg-purple"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col> </el-row>▶コンテナレイアウトコンテナ
レイアウトに使用されるコンテナ コンポーネントは、ページの基本構造をすばやく構築するのに便利です。次の図は、レイアウト コンテナーの効果です。
次の図は、公式 Web サイトで提供されているコンテナー レイアウト コンテナーの例です。
エフェクト コードには、スタイル、ページ タグ、およびモデル データが含まれます。スタイル `<style>` を自分のページの `head` タグにコピーし、html タグを `<div id="app"></div>` タグにコピーしてから、データ モデルを ` にコピーします。 vue オブジェクトの data() で。
▷全体のページコードは次のとおりです。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .el-header { background-color: #B3C0D1; color: #333; line-height: 60px; } .el-aside { color: #333; } </style> </head> <body> <div id="app"> <el-container style="height: 500px; border: 1px solid #eee"> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu :default-openeds="['1', '3']"> <el-submenu index="1"> <template slot="title"><i class="el-icon-message"></i>导航一</template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">选项4</template> <el-menu-item index="1-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="2"> <template slot="title"><i class="el-icon-menu"></i>导航二</template> <el-submenu index="2-1"> <template slot="title">选项1</template> <el-menu-item index="2-1-1">选项1-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="3"> <template slot="title"><i class="el-icon-setting"></i>导航三</template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="3-1">选项1</el-menu-item> <el-menu-item index="3-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="3-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="3-4"> <template slot="title">选项4</template> <el-menu-item index="3-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> </el-menu> </el-aside> <el-container> <el-header style="text-align: right; font-size: 12px"> <el-dropdown> <i class="el-icon-setting" style="margin-right: 15px"></i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>查看</el-dropdown-item> <el-dropdown-item>新增</el-dropdown-item> <el-dropdown-item>删除</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <span>王小虎</span> </el-header> <el-main> <el-table :data="tableData"> <el-table-column prop="date" label="日期" width="140"> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </el-main> </el-container> </el-container> </div> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script> new Vue({ el:"#app", data() { const item = { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }; return { tableData: Array(20).fill(item) } } }) </script> </body> </html>▶ ページネーションバーの表示を完成させる
Element 公式 Web サイトで `Pagination` を検索し、次のように、ページの主要部分で必要な効果を見つけます。
[コードを表示] をクリックして、[フル機能] に対応するコードを見つけ、コードを分析します。
▷ 上記コードの属性説明:
● `page-size` : 1 ページに表示するアイテム数
● `page-sizes`: ページごとのセレクターの数を表示するためのオプション設定。
`:page-sizes="[100,200,300,400]"` は次のページ効果に対応します:
● `currentPage` : 現在のページ番号。そのページ番号をクリックすると、この属性の値は少数です。
● `total`: レコードの総数。これは、データ エントリの総数を設定するために使用されます。このプロパティを設定すると、Element は、分割する必要があるページ数を自動的に計算し、対応するページ番号を表示します。▷ イベントの説明:
● `size-change`: pageSize が変更されたときにトリガーされます。つまり、各ページに表示されるアイテムの数を変更すると、このイベントがトリガーされます。
● `current-change`: currentPage が変更されたときにトリガーされます。つまり、他のページ番号をクリックすると、イベントがトリガーされます。
