VUE3 + ElementPlus フロントエンド開発のナレッジポイントまとめ (2)

ElementPlus コンポーネント

el-card:カードコンテナコンポーネント。情報やデータ表示を保持するためによく使用されます。主なパラメータ:

body-style: カード本体にスタイルを追加し、スタイルパラメータをオブジェクトの形式で渡すことができます。

el-form:フォームを素早く作成するためのフォームコンポーネント。主なパラメータ:

model: フォームにバインドされたデータオブジェクトは、Vue インスタンス内のデータオブジェクトである必要があります。
rules: フォーム項目の検証に使用されるフォーム検証ルールオブジェクトは、オブジェクトである必要があります。
ref: フォームの参照、フォームコンポーネントオブジェクトには、$refs を通じてアクセスできます。
label-position: フォームアイテムのラベルの位置。オプションの値は「right」、「left」、「top」です。
label-width: フォーム項目ラベルの幅。特定の値またはパーセンテージを設定できます。

el-input:ユーザーが入力した情報を取得するために使用される入力ボックスコンポーネント。主なパラメータ:

v-model: 入力ボックスの値をバインドします。
type: 入力ボックスのタイプ。一般的に使用される値は「テキスト」、「パスワード」、「数値」などです。
placeholder: 入力ボックスのプロンプトテキスト。

el-button:イベントをトリガーするために使用されるボタンコンポーネント。主なパラメータ:

type: ボタンの種類、オプションの値は「primary」、「success」、「warning」、「danger」、「info」です。
disabled: ボタンを無効にするかどうかは、データ内の属性によって制御できます。
@click: ボタンがクリックされたときにトリガーされるイベント。

el-link:ページにジャンプするために使用されるリンクコンポーネント。主なパラメータ:

href: リンクのジャンプアドレス。

コンポーネントのプロパティ

computed: computed は Vue.js の computed 属性で、既存のデータに基づいて新しい値を計算します。コンポーネントで計算属性を使用すると、テンプレートから計算ロジックを簡単に削除でき、計算結果をキャッシュしてパフォーマンスを向上させることができます。計算された属性は次のように記述されます。

computed: {
  计算属性名称 () {
    // 计算逻辑
    return 计算结果
  }
}

data: data は、コンポーネント内のデータを宣言するために Vue.js で使用される関数です。コンポーネント内で data 属性を使用すると、コンポーネントの内部状態を簡単に管理できます。データ属性は次のように記述されます。

data () {
  return {
    数据名称: 初始值
  }
}

//下面是登录注册表单的一个例子

data () {
  return {
    registerForm: {
      username: '',
      password: ''
    },
    registerFormRules: {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
      ]
    },
    verifyCodeBtnText: '获取验证码',
    isDisabled: true
  }
}

メソッド:メソッドは、コンポーネントでメソッドを宣言するために使用される Vue.js のオブジェクトです。コンポーネントのメソッド属性を使用すると、コンポーネント内のメソッドを簡単に管理できます。Methods 属性は次のように記述されます。

methods: {
  方法名称 () {
    // 方法逻辑
  }
}

//例子

methods: {
  register () {
    this.$refs.registerForm.validate(valid => {
      if (valid) {
        // 注册逻辑
      } else {
        return false
      }
    })
  },
  getVerifyCode () {
    // 获取验证码逻辑
  }
}

ref: ref は、コンポーネント参照を取得するために Vue.js で使用される属性です。コンポーネントの ref 属性を使用すると、コンポーネントインスタンスの取得、コンポーネント内のメソッドの呼び出し、またはコンポーネント内のデータへのアクセスが簡単に行えます。ref 属性は次のように記述されます。

<组件 ref="引用名称"></组件>

//例子

<el-form ref="registerForm" :model="registerForm" :rules="registerFormRules">

v-model: v-model は、Vue.js の双方向データバインディング用のディレクティブです。コンポーネント内で v-model ディレクティブを使用すると、フォームコントロールをコンポーネント内のデータに簡単にバインドできます。v-model ディレクティブは次のように記述されます。

<表单控件 v-model="数据名称"></表单

prop: prop は、Vue.js で親コンポーネントから子コンポーネントにデータを渡す方法です。親コンポーネントは、prop 属性を通じて子コンポーネントにデータを渡し、そのデータを子コンポーネントで使用できます。このコンポーネントでは、 prop を使用して、el-form-item 内の対応するフォーム項目の検証ルールを宣言します。次に例を示します。

<el-form-item label="密码" prop="password">
  <el-input v-model="registerForm.password" type="password"></el-input>
</el-form-item>

//在父组件中定义了如下验证规则，在子组件中使用prop属性，可以将该规则应用到el-form-item中，从而对密码进行验证。

registerFormRules: {
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度应为6-20位', trigger: 'blur' }
  ]
}

スコープ付き:スコープ付きは、Vue.js のスタイルの範囲を制限する方法です。コンポーネントでスコープ付き属性を使用すると、他のコンポーネントやグローバルスタイルに影響を与えることなく、スタイルが現在のコンポーネントにのみ適用されます。例えば：

<style scoped>
.register-form {
  margin: 20px;
}
</style>

//scoped属性也可以带有参数，参数值可以是任何字符串，用于区分不同的样式作用域。例如：

<style scoped="login">
.login-form {
  margin: 20px;
}
</style>

CSSスタイル

ボックスモデル

ボックスモデルとは、Web ページの各要素を、コンテンツ領域、内側のマージン、境界線、および外側のマージンで構成されるボックスと見なすことを意味します。CSS の幅、高さ、パディング、マージン、その他のプロパティを使用して、ボックスモデルのサイズと間隔を制御できます。

共通のプロパティ:

幅: ボックスの幅。
高さ: ボックスの高さ。
パディング: ボックスの内側の余白。
margin: ボックスの外側のマージン。

フレックスボックス

Flexbox は、display: flex と一連のプロパティを使用して要素の配置方法を制御する CSS レイアウトパターンです。フレックスボックスを使用すると、水平方向と垂直方向のセンタリング、同じ高さのレイアウト、その他の効果を簡単に実現できます。

共通のプロパティ:

display: flex: コンテナ要素をフレックスレイアウトに設定します。
justify-content: フレックスコンテナ内の子要素の水平方向の配置を定義します。
align-items: フレックスコンテナ内の子要素の垂直方向の配置を定義します。
flex-direction: フレックスコンテナ内の子要素の配置方向を定義します。

背景画像

背景と背景サイズのプロパティを使用して、要素の背景画像とそのサイズを設定できます。

共通のプロパティ:

背景: 要素の背景色または背景画像を設定します。
背景サイズ: 背景画像のサイズを設定します。

不透明度

要素の不透明度プロパティを設定することで、要素の不透明度を制御できます。このプロパティの値は 0 から 1 の間で、0 は完全に透明、1 は完全に不透明です。

共通のプロパティ:

opacity: 要素の不透明度を設定します。

テキストスタイル

text-align 属性を使用して、left (デフォルト、左揃え)、center (中央揃え)、right (右揃え) などのテキストの配置を設定できます。

共通のプロパティ:

text-align: テキストの配置を設定します。

ボックスシャドウ

box-shadow プロパティを使用してボックスに影効果を追加し、ボックスをより立体的にします。

共通のプロパティ:

box-shadow: 影のサイズ、色、位置など、ボックスの影効果を設定します。

（つづく）