3日目のVue学習

モバイル 2023-08-02 19:43:08 訪問数: null

Vue ディレクティブ v-for

1.機能:

データループ→配列、オブジェクト、数値などに基づいて要素全体を複数回レンダリングします。

2. 配列構文を調べます。

v-for = "( 項目, インデックス ) 配列内 "
Ø item の各項目、 インデックス 添字
Ø インデックスを省略: v-for = " 配列内の項目 "

v-for を入力します

構文: key 属性 = "一意の識別子"、キー機能: 要素に追加される 一意の識別子。
機能: リスト項目に追加される 一意の識別子 。 Vue では、リスト項目を正しく並べ替えて再利用できる と便利です 。
注意点：
1. キーの値は 文字列 または 数値のみです
2. キーの値は 一意である必要があります
3. id をキー (一意) として 使用することをお勧めします。indexをキーとして 使用することはお勧めしません (変化するため対応しません)。 
<li v-for="(item, index) in xxx" :key="唯一值">

Vue ディレクティブ v-model

1. 機能: フォーム要素 の場合 、双方向データバインディング→フォーム要素のコンテンツを迅速に取得または設定できます
① データ変更 → ビューが自動更新される
②変更内容 を表示 → データ は自動更新されます
2. 構文: v-model = '変数'

包括的なケース:リトル ブラック メモ帳

機能要件:
①リストレンダリング
②削除機能
③機能追加
④底部統計と清算 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/index.css" />
<title>记事本</title>
</head>
<body>

<!-- 主体区域 -->
<section id="app">
  <!-- 输入框 -->
  <header class="header">
    <h1>小黑记事本</h1>
    <input v-model="todoName"  placeholder="请输入任务" class="new-todo" />
    <button @click="add" class="add">添加任务</button>
  </header>
  <!-- 列表区域 -->
  <section class="main">
    <ul class="todo-list">
      <li class="todo" v-for="(item, index) in list" :key="item.id">
        <div class="view">
          <span class="index">{
       
       { index + 1 }}.</span> <label>{
       
       { item.name }}</label>
          <button @click="del(item.id)" class="destroy"></button>
        </div>
      </li>
    </ul>
  </section>
  <!-- 统计和清空 -->
  <footer class="footer" v-show="list.length > 0">
    <!-- 统计 -->
    <span class="todo-count">合 计:<strong> {
       
       { list.length }} </strong></span>
    <!-- 清空 -->
    <button @click="clear" class="clear-completed">
      清空任务
    </button>
  </footer>
</section>

<!-- 底部 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  // 添加功能
  // 1. 通过 v-model 绑定 输入框 → 实时获取表单元素的内容
  // 2. 点击按钮，进行新增，往数组最前面加 unshift
  const app = new Vue({
    el: '#app',
    data: {
      todoName: '',
      list: [
        { id: 1, name: '跑步一公里' },
        { id: 3, name: '游泳100米' },
      ]
    },
    methods: {
      del (id) {
        // console.log(id) => filter 保留所有不等于该 id 的项
        this.list = this.list.filter(item => item.id !== id)
      },
      add () {
        if (this.todoName.trim() === '') {
          alert('请输入任务名称')
          return
        }
        this.list.unshift({
          id: +new Date(),
          name: this.todoName
        })
        this.todoName = ''
      },
      clear () {
        this.list = []
      }
    }
  })

</script>
</body>
</html>
機能の概要:
①リストレンダリング：
v-for キー 設定 { { }} 補間式
②削除機能
v-on は 、パス パラメーター フィルターを呼び出して 、元の配列をフィルター、上書き、および変更します。
③機能追加
v-model バインディングを シフト解除し て元の配列を変更し、追加します
④底部統計と清算
Array.length の累積長さ
配列の空のリストを上書きする
v-show コントロールを非表示にする

命令修飾子 

いくつかの命令サフィックスを指定するには 「.」 を使用します。異なるサフィックスは異なる処理操作をカプセル化します。 →コードを簡素化します。
①ボタンモディファイア
@keyup.enter
→ キーボードのキャリッジリターン監視
② v-model モディファイア
v-model.trim → 先頭と末尾のスペースを削除
v-model.番号 → ターン番号
③ イベント修飾子
@イベント 名.stop → 泡立ちを防ぐ
@ eventname.prevent → デフォルトの動作を防止します

スタイル制御のための v-bind の機能強化

開発者がスタイル を制御しやすくするために 、Vue は v-bindの構文を拡張し 、 クラス名 と スタイル インライン スタイル を制御できます。

スタイル コントロールの v-bind の機能強化 - 操作クラス

構文 : class = "オブジェクト/配列"
①オブジェクト→ キーはクラス名 、 値はブール値です。値が trueの場合 、このクラスが存在します。それ以外の場合、そのようなクラスは存在しません。 
<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>
該当するシナリオ: クラス名、前後の切り替え

②配列 → 配列内のすべてのクラスがボックスに追加されます。これは実質的に クラスの リストです。 
<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>
該当するシナリオ: クラスをバッチで追加または削除する 
:class="['pink', 'big']"

スタイル制御のための v-bind の強化 - スタイルの操作

構文 : style = "スタイルオブジェクト" 
<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>
適用可能なシナリオ: 特定の属性の動的設定

 他のフォーム要素に適用される v-model

共通のフォーム要素を v-model バインディングに関連付けることができます → フォーム要素の値を迅速に 取得 または 設定できます
v-model を他のフォーム要素に適用すると、 コントロール タイプに基づいて要素を更新する正しいメソッドが自動的に選択されます 。
入力ボックスの入力: テキスト
テキストエリア
チェックボックス入力: チェックボックス
シングルボタン入力:無線
ドロップダウンメニューの選択
...
→ 値
→チェック済み
→ 値
→ 値
→チェック済み

 

計算されたプロパティ

概念: 既存のデータ に基づいて、 新しい属性が計算されます。依存データは変更され、自動的に再計算されます。
文法：
① 計算設定項目内で宣言され 、関数に相当する計算プロパティ
② { { 計算された属性名 }}を使用して通常の属性と同様に使用されます

 計算されたプロパティ →評価コードの一部をカプセル化できる

 計算された計算されたプロパティとメソッドメソッド

計算された計算されたプロパティ:
機能: データ処理 のセクションをカプセル化し、 結果を取得します。
文法：
①算出した 設定項目を書き込む
② 属性として、→ this.Computed property { { 計算されたプロパティ }}を直接使用します。
メソッドメソッド:
役割: ビジネス ロジックを処理するためにインスタンスが呼び出すメソッド を提供します 。
文法：
①メソッド 設定項目を記述する
②メソッドとしては → this を呼び出す必要があります メソッド名 ( ) { { メソッド名 () }} @イベント 名 =" メソッド名 "
キャッシュ機能 (パフォーマンスの向上) :
計算されたプロパティは 、やはり直接読み取りキャッシュを使用して 計算結果 をキャッシュします。
依存関係が変更され、 自動的に 再計算され、→ 再度キャッシュされます

計算されたプロパティの完全な書き込み

  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles/index.css" />
    <title>Document</title>
  </head>
  <body>
    <div id="app" class="score-case">
      <div class="table">
        <table>
          <thead>
            <tr>
              <th>编号</th>
              <th>科目</th>
              <th>成绩</th>
              <th>操作</th>
            </tr>
          </thead>

          <tbody v-if="list.length > 0">
            <tr v-for="(item, index) in list" :key="item.id">
              <td>{
        
        { index + 1 }}</td>
              <td>{
        
        { item.subject }}</td>
              <!-- 需求：不及格的标红, < 60 分, 加上 red 类 -->
              <td :class="{ red: item.score < 60 }">{
        
        { item.score }}</td>
              <td><a @click.prevent="del(item.id)" href="http://www.baidu.com">删除</a></td>
            </tr>
          </tbody>

          <tbody v-else>
            <tr>
              <td colspan="5">
                <span class="none">暂无数据</span>
              </td>
            </tr>
          </tbody>

          <tfoot>
            <tr>
              <td colspan="5">
                <span>总分：{
        
        { totalScore }}</span>
                <span style="margin-left: 50px">平均分：{
        
        { averageScore }}</span>
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
      <div class="form">
        <div class="form-item">
          <div class="label">科目：</div>
          <div class="input">
            <input
              type="text"
              placeholder="请输入科目"
              v-model.trim="subject"
            />
          </div>
        </div>
        <div class="form-item">
          <div class="label">分数：</div>
          <div class="input">
            <input
              type="text"
              placeholder="请输入分数"
              v-model.number="score"
            />
          </div>
        </div>
        <div class="form-item">
          <div class="label"></div>
          <div class="input">
            <button @click="add" class="submit" >添加</button>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
      const app = new Vue({
        el: '#app',
        data: {
          list: [
            { id: 1, subject: '语文', score: 62 },
            { id: 7, subject: '数学', score: 89 },
            { id: 12, subject: '英语', score: 70 },
          ],
          subject: '',
          score: ''
        },
        computed: {
          totalScore() {
            return this.list.reduce((sum, item) => sum + item.score, 0)
          },
          averageScore () {
            if (this.list.length === 0) {
              return 0
            }
            return (this.totalScore / this.list.length).toFixed(2)
          }
        },
        methods: {
          del (id) {
            // console.log(id)
            this.list = this.list.filter(item => item.id !== id)
          },
          add () {
            if (!this.subject) {
              alert('请输入科目')
              return
            }
            if (typeof this.score !== 'number') {
              alert('请输入正确的成绩')
              return
            }
            this.list.unshift({
              id: +new Date(),
              subject: this.subject,
              score: this.score
            })

            this.subject = ''
            this.score = ''
          }
        }
      })
    </script>
  </body>
</html>

ビジネス技術的なポイントの要約:

1. レンダリング機能（ハイライト失敗）
v-if v-else v-for v-bind:class
2.削除機能
パラメータパスフィルタをクリックしてフィルタリングし、元の配列を上書きします
.prevent は デフォルトの動作を防止します
3. 機能の追加
v-model v-model 修飾子 (.trim .number)
シフトを解除し て配列を変更し、ビューを更新します
4. 合計スコアの計算と平均スコアの計算
属性 削減の合計を計算する

 

 

おすすめ

転載: blog.csdn.net/cxxc980322/article/details/132009511
おすすめ
ランキング
Oracleのクエリ重複フィールド
An error occurred when ssm used count to query data
【Leyes de la Naturaleza】La sabiduría de las multitudes
JavaWebの研究では、（13）を締結 - セッションの使用は、重複送信フォームを防ぎます
Firebase増加サインアップクォータ
[MyBatisフレームワーク]mybatis入門
ハートレスの世界
Djangoのインストールと使用について
[转] UiPath展開アーキテクチャ
mybatis-plusは楽観的なロック変更を使用します
アーカイブ
もっと
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)

コードワールド

© 2018 codetd.com