Knowledge points about Vue interviews

This time I will bring you knowledge points about vue interviews. Friends who need it can pay attention to learn it. Let's follow the editor to take a look.

[Related recommendations: vue interview questions (2020)]

1.vue introduction

vue is a build user The framework of the interface. It is a lightweight mvv framework. Like Angular, it is the so-called two-way data binding, data-driven and component-based front-end development. It implements responsive data binding and combined view components through a simple API, which is easy to use and compact.

2. Install the vue-devtools plug-in to facilitate debugging vue in chrome. Configure whether vue-devtools is allowed to check the code to facilitate debugging. The production environment is set to false, vue.config.devtools = false;

vue.config.productionTip=false;Prevents starting production messages.

3. Commonly used instructions.

#v-model Two-way data binding, generally used for form elements.

v-for To perform loop operations on arrays or objects, use v-for instead of v-repeat

v-on is used to bind Set time, usage: v-on: time = 'function'

v-show/v-if is used to show or hide elements, v-show is implemented through display, v- if is created after each deletion

4. Events and attributes

v-on:click = "Abbreviation@click=""

$event event object, which includes event-related information, such as event source, time type, offset, etc.

Event bubbling, The native js method relies on event objects, while the vue method does not rely on event objects. @click.stop prevents events from bubbling;

Keyboard events: @keydown.13 or keydown. enter

Event modifier .stop Call event.stopPropagation();

##v-bind is used for attribute binding, usage v-bind :Attribute="" Example v-bind:src="" Abbreviation: src=""

5. Template

##vue.js Using HTML-based template syntax, the data template that binds dom to the vue instance is {{}} used to bind data and display it on the page

two-way binding v- model

Single binding {{}} may cause flickering problems, you can also use v-text v-html

Other instructions v -once data is bound once, v-pre does not mutate, and is displayed directly as it is

is used to filter model data. Processing and filtering of data pairs before display

Syntax: {{data | filter (parameter) |filter (parameter)}}

Built-in filters will be deleted after 2.0. If you use them, you can use third-party libraries such as lodash data-fns, date formatting, accounting.js, currency formatting and customization

Vue itself does not support sending ajax requests. You need to use plug-ins such as vue-resource axios to implement it. It is recommended to use axios

axios is a promise-based http request client, used to send requests

Basic usage:

axios.get(url[,options]);  传参方式，url或者params传参
axios.post(url,data,[options]);

Note: When axios sends data by default, the data format is request payload, which is not the form data format used by our bed, so the parameters must be passed as key-value objects

, which cannot be Pass parameters in the form of json

Method of passing parameters: Splice the key-value pairs yourself, use transformrequst to convert the request data before sending the request, or use the qs module to convert

axios does not support cross-domain requests, you can use vue-resource to send cross-domain requests.

Send a request across domains: this.$http.get(url,[options]); this.$http.post(url,[options]);

8.vue life cycle

The process from creation to destruction of a vue instance becomes life cycle

9. Calculated properties

Computed properties are also used to store data. They have these two characteristics: the data can be logically processed and the data in the calculated properties can be monitored.

10.vue instance properties and methods

Properties vm.$el vm.$data vm.$options vm.$refs

Method vm.$mount() vm.$destroy vm.$nextTick(callback) vm.$set(object,key,vlaue) vm.$delete(object,key) vm. $watch(data,callback)

11, custom directive

custom global directive vue.directive (directive id, definition object)

12. Transition (animation)

vue provides a variety of different ways to apply the process when inserting updates or a dom. The essence is still using css animation,

Basic usage: Use the transition component and place the element to be animated in the modified component

Use it together with the third-party animation library animater.css

 <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
        <p v-show="flag">显示内容</p>
    </transition>

13. Component

Components are one of the most powerful functions of vue. Components can wildly interact with html elements, encapsulate and reuse code, and components are custom element objects.

To define the component method, a> first create a component constructor, and then use the component constructor to create the component. b>Create directly

To reference the template, the component content is referenced in the template