Vue に関する 5 つの小さな知識を共有します。お役に立てば幸いです。

みなさん、こんにちは。今日は Vue に関連するちょっとした知識を共有します。お役に立てば幸いです。

1. Vue.js のドロップダウン ボックスで選択された値を取得します

Vue.js でオプションが変更されたときに、選択されたオプションを取得したい場合があります。この投稿では、Vue.js で選択されたオプションを取得する方法を学びます。

Vue.js で選択されたオプションを取得 @change をメソッドとして設定することで、Vue.js で選択されたオプションを取得できます。たとえば、次のように書くことができます。

<template>
  <div id="app">
    <select name="fruit" @change="onChange($event)" v-model="key">
      <option value="1">apple</option>
      <option value="2">orange</option>
    </select>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return { key: "" };
  },
  methods: {
    onChange(event) {
      console.log(event.target.value, this.key);
    },
  },
};
</script>

v-model をキー応答プロパティとして設定し、選択した値のプロパティ値をそのキー プロパティにバインドします。

次に @change を onChange($event) に設定して、change イベント オブジェクトを使用して onChange 関数を呼び出します。

onChange 関数では、イベント オブジェクトを取得し、event.target.value を使用して選択した値のプロパティ値を取得します。

v-model を使用して選択した値のプロパティ値にバインドしているため、this.key を介して同じ値を取得できます。

代わりに、($event) を削除して書き込むと、同じ結果が得られます。

<template>
  <div id="app">
    <select name="fruit" @change="onChange" v-model="key">
      <option value="1">apple</option>
      <option value="2">orange</option>
    </select>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return { key: "" };
  },
  methods: {
    onChange(event) {
      console.log(event.target.value, this.key);
    },
  },
};
</script>

2. Vue.js を使用して、要素の上にマウスを置いたときに特定のアクションを実行します

要素の上にマウスを置いたときに何らかのアクションを実行するには、mouseover (マウスオーバー) および Mouseleave (マウスから離れる) イベントをリッスンします。

たとえば、次のコードを書くことができます。

<template>
  <div id="app">
    <div @mouseover="hovered = true" @mouseleave="hovered = false">
      <p>hello world</p>
      <p v-show="hovered">hovered</p>
    </div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return { hovered: false };
  },
};
</script>

初期値 false でホバーされた reactive プロパティがあります。

次に、@mouseover ディレクティブを追加し、その値を hovered=true に設定します。マウスを div 内に移動するときに、@mouseover ディレクティブを hovered=false に設定して、マウスを div の内外に移動します。ホバー状態を切り替えます。

v-show ディレクティブを使用して、hovered が true のときに 2 番目の p 要素を表示します。

これで、マウスが div 内にあると、「ホバー」が表示されることがわかります。

マウスを div の外に移動すると、「ホバー」が消えます。

3. Vue.js でコンポーネントの要素を取得する

Vue.js のコンポーネント内の要素を取得したい場合があります。この記事では、Vue.js でコンポーネント内の要素を取得する方法について説明します。

Vue.js でコンポーネント内の要素を取得するには、取得したい要素に参照 (ref) を割り当てることができます。その後、任意のライフサイクルまたは通常のメソッドで this.$refs プロパティを使用して、その要素を取得できます。

たとえば、次のコードを書くことができます。

<template>
  <div id="app">
    <span ref="someName" class="foo bar">Child Span</span>
  </div>
</template>
<script>
export default {
  name: "App",
  mounted() {
    const childSpanClassAttr = this.$refs.someName.getAttribute("class");
    console.log(childSpanClassAttr);
  },
};
</script>

<span> の ref 属性を「someName」に設定します。

その後、ライフサイクルまたは通常のメソッドで this.$refs.someName を介して <span> 要素にアクセスできます。

getAttribute などの任意の DOM 要素メソッドを呼び出して操作できます。

getAttribute のパラメータとして「class」を渡すことで、「class」属性の値を取得します。

したがって、コンソール ログには「foo bar」が出力されます。

4. Vue.js を使用して要素の外側のクリックを検出する

Vue.js の要素の外側のクリックを検出したい場合があります。この記事では、Vue.js を使用して要素の外側のクリックを検出する方法を説明します。

カスタム ディレクティブを作成することで、Vue.js の要素の外側のクリックを検出できます。たとえば、次のように書くことができます。

<template>
  <!-- 创建一个宽度和高度为 500px 的 DIV，ID 为 "app" -->
  <div id="app" style="width: 500px; height: 500px">
    <!-- 该 DIV 使用了自定义指令 v-click-outside，用来监听点击元素外部的事件 -->
    <div v-click-outside="onClickOutside">hello world</div>
  </div>
</template>

<script>
  // 导入 Vue 库
  import Vue from "vue";

  // 创建一个自定义指令 "click-outside"
  Vue.directive("click-outside", {
    // 当指令绑定到元素时，会立即调用 bind 函数
    bind(el, binding, vnode) {
      // 创建一个函数来处理点击事件
      el.clickOutsideEvent = (event) => {
        // 如果点击的不是元素本身，也不是其内部的任何元素，那么就触发绑定的函数
        if (!(el === event.target || el.contains(event.target))) {
          // 在 Vue 实例上执行绑定的函数
          vnode.context[binding.expression](event);
        }
      };
      // 在 body 元素上添加 click 事件监听器
      document.body.addEventListener("click", el.clickOutsideEvent);
    },

    // 当指令与元素解除绑定时，会立即调用 unbind 函数
    unbind(el) {
      // 移除在 body 元素上的 click 事件监听器
      document.body.removeEventListener("click", el.clickOutsideEvent);
    },
  });

  // 导出 Vue 实例
  export default {
    name: "App", // 组件名
    methods: {
      // 自定义一个方法来处理点击元素外部的事件
      onClickOutside() {
        console.log("clicked outside"); // 控制台输出信息 "clicked outside"
      },
    },
  };
</script>

Vue.directive メソッドを使用してカスタム ディレクティブを追加します。これは、ディレクティブ名とオブジェクトをパラメーターとして受け取り、バインド メソッド内に el メソッドを追加するバインド メソッドとアンバインド メソッドを持ちます。

clickOutsideEvent メソッドでは、el がevent.targetではないか、またevent.targetが含まれていないかをチェックします。

両方が true の場合、 vnode.context[binding.expression](event); を追加して、v-click-outside ディレクティブの値として設定したメソッドを実行します。

次に、 document.body.addEventListener を呼び出して
、clickOutsideEvent を実行するクリック イベント リスナーを追加します。

unbind メソッドでは、removeEventListener を使用してイベント リスナーを削除します。

次に、テンプレートに v-click-outside を追加し、その値を onClickOutside に設定して、外側がクリックされたときにメソッドを実行します。

外側をクリックすると、「外側をクリック」が記録されるはずです。

カスタム ディレクティブを作成することで、Vue.js の要素の外側のクリックを検出できます。この Vue.js コードのカスタム ディレクティブ「v-click-outside」は、主に要素の外側のクリック イベントを処理するために使用されます。この機能は多くのアプリケーション シナリオで非常に役立ちます。具体的な例をいくつか次に示します。

• ドロップダウン メニュー (Dropdown) またはモーダル ウィンドウ (モーダル): ユーザーがドロップダウン メニューまたはモーダル ウィンドウの外側の領域をクリックすると、通常、ドロップダウン メニューまたはモーダル ウィンドウが閉じることが期待されます。これには、ユーザーが要素の外側をクリックしたかどうかを検出し、クリックした場合はドロップダウンまたはモーダル ウィンドウを閉じる関数をトリガーする必要があります。

• コンテキスト メニュー (Context Menu): 右ボタンで開いたコンテキスト メニューで、ユーザーがメニューの外側の他の場所をクリックした場合、通常はメニューを閉じる必要があります。このカスタム ディレクティブを使用して、クリック イベントをリッスンし、クリック イベントがメニューの外で発生したときにコンテキスト メニューを閉じることもできます。

• ツールチップ: ツールチップにも同様の要件があります。ツールチップが表示されている場合、通常は、ユーザーがツールチップ以外の場所をクリックした場合にツールチップが消えるようにします。

• フォーム検証: シナリオによっては、ユーザーが入力を完了して入力ボックスの外側をクリックしたときにフォーム検証を実行することが必要な場合があります。このコマンドを使用すると、この効果を実現できます。

• 検索オートコンプリート: 検索ボックスに入力すると、オートコンプリート ドロップダウン メニューが表示されます。ユーザーが検索候補を選択するか、検索ボックスの外側をクリックする場合、通常はオートコンプリート メニューを閉じる必要があります。

上記のすべてのシナリオでは、「v-click-outside」カスタム ディレクティブを通じて、要素の外側のクリック イベントを簡単に処理し、インタラクション要件を実現できます。

5. Vue コンポーネント インスタンス内のメソッドでフィルターを呼び出すにはどうすればよいですか?

this.options.$filters プロパティからフィルター関数を取得して、Vue コンポーネント インスタンスでフィルターを呼び出すことができます。

たとえば、次のように書くことができます。

<template>
  <div id="app">
    {
    
    { truncatedText }} <!-- 在页面上显示计算属性 truncatedText 的结果 -->
  </div>
</template>

<script>
import Vue from "vue"; // 导入 Vue 框架

// 在 Vue 框架中定义一个名为 "truncate" 的过滤器，该过滤器接收三个参数：text, stop, clamp
// text 为需要截断的文本
// stop 为截断的字符位置
// clamp 为当文本被截断时添加的字符，默认为 "..."
Vue.filter("truncate", (text, stop, clamp) => {
  return text.slice(0, stop) + (stop < text.length ? clamp || "..." : ""); // 如果 stop 小于文本长度，就在截断的地方添加 clamp 参数指定的内容，如果没有指定 clamp，就添加 "..."
});

export default {
  name: "App", // 组件的名称
  computed: {
    // 定义一个计算属性，使用上面定义的 "truncate" 过滤器，传入的文本为 "Lorem ipsum dolor sit amet, consectetur adipiscing elit"，截断位置为 10，截断后添加的字符为 "..."
    truncatedText() {
      return this.$options.filters.truncate(
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        10,
        "..."
      );
    },
  },
};
</script>

切り詰められたテキストを返す truncatedText というプロパティがあります。

フィルターは、名前を最初の引数として使用して Vue.filter メソッドを介して定義されます。

2 番目のパラメーターはフィルター関数です。

truncate フィルター メソッドを呼び出すには、this.$options.filters.truncate を使用し、切り詰めるテキスト、テキストを切り詰める文字数、切り詰めるテキストの後の省略形を渡します。

次に、このテキストをテンプレートに表示します。

結論は

記事のスペースが限られているため、今日の内容はここで共有します。記事の最後に、記事の作成は簡単ではないことを思い出していただきたいと思います。私の共有を気に入っていただけましたら、忘れないでください。より多くの人が困っているように、「いいね」を押して転送してください。同時に、フロントエンドテクノロジーについてもっと知識を得たい場合は、私をフォローすることを歓迎します。あなたのサポートが私にとって共有する最大の動機になります。今後もより多くのコンテンツを出力していきますので、ご期待ください。