I. Use VUE-CLI to build a project

1. Install vue-CLI: After installing Node, install vue-CLI globally:

npm install -g vue-cli
Copy the code

After the installation is complete, run vue -v to check whether the installation is successful

Vue init webpack vue-project // where webpack is the template name and vue-project is the custom Project nameCopy the code

After executing this command, a folder named with this name will be generated in the current directory:

cd Vue-Project 

npm install
Copy the code

Launch project:

npm run dev
Copy the code

If the browser does not load the page, the local port 8080 May be occupied, and you need to modify the config>index.js configuration file

Unexpected TAB character problem occurs when vue.js program starts running

When the Vuejs program starts, you encounter a common problem that causes an error at the terminal: Unexpected TAB Character. The diagram below:

Iii. How to re-render v-for list data after rendering

<select class="dept_select select-change" data-placeholder="Please select" style="width: 180px;" name="academys" id="academys" data-rule-required="true" v-model="Academyselect">
        <option v-for="item in academyList" v-bind:value="item.id">
            {{ item.academyName }}
        </option>
 </select>
Copy the code

After rendering the Option list, if the data changes and the list needs to be re-rendered, the solution is as follows:

Replace academyList with a new array. Vue cannot detect the following two data changes in official website documents :1. 2. Change the array length. AcademyList = this.academyList = this.academyList = this.academyList = this.academyList = this.academyList = this.academyList = this.academyList = this.academyList = this.academyList

4. Problems encountered in SRC data binding in VUE

In VUe2, SRC’s implementation of data binding fails if you are not careful. Assume value.src is bound data. Common mistakes 1:

<img src="value.src">
Copy the code

Attribute value data binding should be v-bind, v-bind: SRC =”” 2 Using the quote “value.src” will result in an error. Common mistakes 2:

<img src="{{value.src}}">
Copy the code

Common error # 3:

<img src="{value.src}">
Copy the code

All of the above errors will be reported. Correct way to write:

<img :src="value.src">
Copy the code

5. Timer or rolling event error in vUE page

When a component in a VUE project is removed, timers and page scrolling events in the component are not removed with the component, which can cause errors or affect the normal operation of other components. Therefore, leaving the page requires removing the monitored event and the destroyed will be executed after the component is removed.

destroyed () {
  window.removeEventListener('scroll', this.handleScroll)
}
Copy the code

This is a problem when using timer in VUE

The this pointer in the arrow function is fixed (the pointer when the function is defined) and refers to vue in vue; The this pointer in normal functions is variable (the pointer when using the function), and who calls refers to whom.

created () {
    setInterval(() => {console.log(this)}, 1000) // Arrow function this points to vuesetInteval(function() {console.log(this)}, 1000) // In normal functions this points to window, becausesetThe Interval() function is a function of the window object}Copy the code

Vue timer function to use a normal function, use a variable as the intermediate value:

ready: function() {let self = this;
    setInvertal(function() {for(let k inself.goods_list){ ....... }}}, 1000)Copy the code

7, Vue-router page switch to keep at the top of the page instead of keeping the original scrolling position

The VUE – Router provides a method, scrollBehavior, which allows you to switch to a new route if you want the page to roll to the top, or to keep the original scroll position, as if the page had been reloaded. This feature is only available in HTML5 History mode.

const router = new VueRouter({ routes: [...] , scrollBehavior (to, from, savedPosition) { //returnWhich position is expected to scroll toif (savedPosition) {
        return savedPosition
    } else {
        return { x: 0, y: 0 }
    }
  }
})
Copy the code

Vue’s method about the parent component calling the child component

Parent component: Call this.$refs.ref.method by adding ref to the child component

<template>
  <div @click="parentMethod">
    <children ref="c1"></children>
  </div>
</template>

<script>
  import children from 'components/children/children.vue'
  export default {
    data() {return {
      }
    },
    computed: {
    },
    components: {      
      'children': children
    },
    methods:{
      parentMethod() {
        console.log(this.$refsC1) // returns a vue object, so you can call its method this directly.$refs.c1.childMethod(); }},created(){
    }
  }
</script>
Copy the code

Ix. The problem of incorrect access path after Vue background image packaging

/static/img/’ image name ‘is used to access the image./static/img/’ image name’ is used to access the image. /static/img/’ image name ‘is an access error because there is no static directory in the CSS directory. This causes a path access failure. Solutions:

1. Check whether the assetsPublicPath in config is set to ‘/’ instead of ‘./ ‘, and make sure that ‘/’ is the absolute path. 2. Vue – CLI creates a static directory for a vue project. Copy the static directory to dist by looking at the webpack configuration file for vue-CLI create project. According to resource planning, you can store the resources that need to be packaged in the SRC/Assets directory and the resources that do not need to be packaged in the static directory.

10. Some pits in vue2 bound to inline background

One requirement is to add a background image to a box. The background image is dynamically requested. What should I do? The normal vUE inline style is written as follows:

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}
Copy the code

The style is bound to a JavaScript object. JavaScript does not allow “-“, so the background image should look like this:

<div :style="{background: 'url('+ img +')'，backgroundSize:cover }"></div>
data:{
  img:'xxx.png'
}
Copy the code

Change the image to dynamically requested back:

<div :style="{background: 'url('+ img +')'，backgroundSize:cover }"></div>
data:{
    img:'xxx.png'}, methods:{// pseudo-code requests datagetImg(){
        this.$http.get().then(function(e) {this.img = e.data.img}.bind(this))}},created(){// call this.getimg ()}Copy the code

Since the life cycle of the VIRTUAL DOM is always mounted, that is, when the page has been rendered, but the VUE has not yet been executed, all data is lost

<div v-if='img ' :style="{background: 'url('+ img +')'，backgroundSize:cover }"></div>
Copy the code

We select this element when we have the IMG attribute, and we have successfully bound the background image.