[Front-end dictionary] 5 common problems when using Vue

Preface

Today I will share 5 problems that you may also encounter in the development process with Vue.

5 common problems when using Vue

Custom path alias

Some people may have noticed that this syntax is used when importing components in the template generated by vue-cli:

import Index from '@/components/Index'

What is this? Later, when I changed the configuration file, I found that this was one of the configuration options of webpack: path alias.

We can also add our own path aliases in the basic configuration file. For example, set ~ as an alias for the path src/components:

// build/webpack.base.js

{

  resolve: {

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

    alias: {

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

      '@': resolve('src'),

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

    }

  }

}

Then we can write like this when importing components:

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

import YourComponent from '~/YourComponent'

It not only solves the trouble of too long path, but also solves the trouble of relative path, which is much more convenient!

CSS scope and modules

In-component style

Generally, the style in the <style></style> tag in the component is global. When using a third-party UI library (such as Element), the global style is likely to affect the style of the UI library.

We can make the style in style only apply to the current component by adding scoped attribute:

<style lang="less" scoped>

  @import 'other.less';

  .title {

    font-size: 1.2rem;

  }

</style>

Importing other styles in the style tag with scoped attribute will also be limited to the scope and become the style in the component. It is not recommended to use styles with a high degree of reuse.

Import style

　Compared with the style within the component when the scoped attribute is used in style, sometimes we also need to add some global styles. Of course, we can use style without scoped attribute to write global style.

But in comparison, the following is more recommended:

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

/* style-global.less */

body {

  font-size: 10px;

}

.title {

  font-size: 1.4rem;

  font-weight: bolder;

}

Then import the global style in the entry file:

// src/main.js

import 'style-global.less'

Tips for using v-for

The v-for instruction is very powerful, it can be used not only to traverse arrays, objects, but even a number or string.

The basic grammar is not explained, here is a small tip:

Index value

When using v-for to generate DOM based on objects or arrays, sometimes you need to know the current index. We can do this:

<ul>

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

</ul>

However, you need to pay attention when traversing numbers. The value of the number starts from 1, and the key starts from 0:

<ul>

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

</ul>

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

This points to the problem in vue

method cannot use arrow functions

Because the arrow function is bound to the context of the parent scope, this will not point to the Vue instance as expected.

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

        }

    }

})

The method in the method uses the timer to use the arrow function

The this direction in the arrow function is fixed, that is, the direction when the function is defined
and the this direction in the ordinary function changes, that is, the direction when the function is used

Arrow function code:

methods: {

  goPage: function (index) {

    this.newPage = index

  },

  inv: function () {

    this.invt = setInterval(() => {

      this.goPage(this.nextPage)

      console.log(this)

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

    }, 1000)

  }

}

The code of the ordinary function:

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() and setTimeout() are functions of the window object, so this will point to the window

A template template can only have one renderable child element

There can only be one renderable child element under a <template>, otherwise an error will be
reported as follows:

which is:

    <template>

      <h1>Title</h1>

      <p>Balabala...</p>

      <p>Balabala...</p>

    </template>

    // 应该为

    <template>

      <div>

        <h1>Title</h1>

        <p>Balabala...</p>

        <p>Balabala...</p>

      </div>

    </template>

At last

This article is taken out of my notes, some of the content has forgotten the source.

If you want to join the [big front-end exchange group], follow the official account and click "Communication and Add Group" to add a robot to automatically pull you into the group. Pay attention to me to receive the latest dry goods as soon as possible.