[フロントエンド辞書] Vueを使用する際の5つの一般的な問題

序文

今日は、Vueの開発プロセスで発生する可能性のある5つの問題を共有します。

Vueを使用する際の5つの一般的な問題

カスタムパスエイリアス

vue-cliによって生成されたテンプレートにコンポーネントをインポートするときにこの構文が使用されていることに気付いた人もいるかもしれません。

import Index from '@/components/Index'

これは何ですか？後で構成ファイルを変更したときに、これがwebpackの構成オプションの1つであることがわかりました：パスエイリアス。

基本構成ファイルに独自のパスエイリアスを追加することもできます。たとえば、パスsrc / componentsのエイリアスとして〜を設定します。

// build/webpack.base.js

{

  resolve: {

    extensions: ['.js', '.vue', '.json'],

    alias: {

      'vue$': 'vue/dist/vue.esm.js',

      '@': resolve('src'),

      '~': resolve('src/components')

    }

  }

}

次に、コンポーネントをインポートするときに次のように記述できます。

// import YourComponent from '/src/components/YourComponent'

import YourComponent from '~/YourComponent'

長すぎるパスの問題を解決するだけでなく、相対パスの問題も解決するので、はるかに便利です！

CSSスコープとモジュール

コンポーネント内スタイル

通常、コンポーネントの<style> </ style>タグのスタイルはグローバルです。サードパーティのUIライブラリ（Elementなど）を使用する場合、グローバルスタイルがUIライブラリのスタイルに影響を与える可能性があります。

スコープ属性を追加することにより、スタイルのスタイルを現在のコンポーネントにのみ適用することができます。

<style lang="less" scoped>

  @import 'other.less';

  .title {

    font-size: 1.2rem;

  }

</style>

scoped属性を持つstyleタグに他のスタイルをインポートすることもスコープに制限され、コンポーネントのスタイルになります。再利用度の高いスタイルの使用はお勧めしません。

インポートスタイル

　スコープ属性がスタイルで使用されている場合のコンポーネント内のスタイルと比較して、グローバルスタイルを追加する必要がある場合もあります。もちろん、スコープ属性のないスタイルを使用してグローバルスタイルを作成することもできます。

ただし、比較すると、次の方が推奨されます。

/* 单独的全局样式文件 */

/* style-global.less */

body {

  font-size: 10px;

}

.title {

  font-size: 1.4rem;

  font-weight: bolder;

}

次に、グローバルスタイルをエントリファイルにインポートします。

// src/main.js

import 'style-global.less'

v-forを使用するためのヒント

v-for命令は非常に強力であり、配列、オブジェクトだけでなく、数値や文字列をトラバースするためにも使用できます。

基本的な文法は説明されていません、ここに小さなヒントがあります：

インデックス値

v-forを使用してオブジェクトまたは配列に基づいてDOMを生成する場合、現在のインデックスを知る必要がある場合があります。できるよ：

<ul>

  <li v-for='(item, key) in items' :key='key'> {{ key }} - {{ item }}

</ul>

ただし、数字をトラバースするときは注意が必要です。数字の値は1から始まり、キーは0から始まります。

<ul>

  <li v-for='(v, k) in 3' :key='k'> {{ k }}-{{ v }}

</ul>

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

これはvueの問題を示しています

メソッドは矢印関数を使用できません

矢印関数は親スコープのコンテキストにバインドされているため、これは期待どおりにVueインスタンスを指していません。

const App = new Vue({

    el: 'body',

    methods: {

        foo: () => {

            console.log(this) // undefined

        }

    }

})

const App = new Vue({

    el: 'body',

    methods: {

        foo () {

            console.log(this) // Vue instance

        }

    }

})

メソッド内のメソッドは、タイマーを使用して矢印機能を使用します

矢印関数のこの方向は固定されています。つまり、関数が定義されているときの
方向であり、通常の関数のこの方向は、関数が使用されているときの方向です。

矢印機能コード：

methods: {

  goPage: function (index) {

    this.newPage = index

  },

  inv: function () {

    this.invt = setInterval(() => {

      this.goPage(this.nextPage)

      console.log(this)

      //此时的this指向是该vue组件，不管在哪使用，指向都是该vue组件

    }, 1000)

  }

}

通常の関数のコード：

methods: {

  goPage: function (index) {

    this.newPage = index

  },

  inv: function () {

    this.invt = setInterval(function () {

      this.goPage(this.nextPage)

      console.log(this)

      //此时的this并不是该vue组件，而是指向window。

    }, 1000)

  }

}

setInterval（）とsetTimeout（）はウィンドウオブジェクトの関数であるため、これはウィンドウを指します

テンプレートテンプレートには、レンダリング可能な子要素を1つだけ含めることができます

<template>の下に存在できるレンダリング可能な子要素は1つだけです。そうでない場合、エラーは
次のように報告されます。

これは：

    <template>

      <h1>Title</h1>

      <p>Balabala...</p>

      <p>Balabala...</p>

    </template>

    // 应该为

    <template>

      <div>

        <h1>Title</h1>

        <p>Balabala...</p>

        <p>Balabala...</p>

      </div>

    </template>

やっと

この記事は私のメモから抜粋したもので、一部のコンテンツはソースを忘れています。

[大きなフロントエンド交換グループ]に参加したい場合は、公式アカウントをフォローし、[通信とグループの追加]をクリックしてロボットを追加し、自動的にグループに参加させます。できるだけ早く最新の乾物を受け取るように注意してください。