Vue2 often meet test questions

6…

7. How do I get dom

Method one:

Document.getelementbyid (“id”); Gets, and then sets the appropriate property or style

Method 2:

Ref = “name” and this.$refs.name to retrieve the element

Name how many commands in VUE and how they are used.

V-bind: binds data

V-model: Enables bidirectional binding of form element values

V-on: used for event binding

V-if, V-else -if, V-else: Conditionally render something

V-for instruction: Rendering queue table data is common

V-show command: show and hide row label

9. What is vue-loader? What are the uses for it?

10. Why use key

When using V-for to update a rendered element list, the default is in-place reuse. When the list data is modified, vue determines whether a value has changed based on the key — if it has, it rerenders the item, otherwise it reuses the previous element. Using keys in V-For is a best practice, but we need to be careful what keys are used.

If index is used as key:

Inserting F at the end is fine, because it does not affect the index of the preceding element. The index of each element remains the same, and vue can reuse elements based on these indexes. Once the insertion is successful, the index of the CDE will change and the CDE will need to be re-rendered. The index of AB is constant, so AB can be reused.

If id is used as key:

Note that this ID is unique and immutable (you can also use the element’s own value as the unique ID), and that the element should be the same ID as it is inserted or deleted, which means that any old elements can be reused with such an ID as the key. So in this case, we just need to render the newly inserted F element.

Conclusion: The list loop in VUE needs to add :key=” unique identifier “. The unique identifier can be the ID index in item, etc., because vUE components are highly reusable, adding keys can identify the uniqueness of components. In order to better distinguish each component key, the main function is to update the virtual DOM efficiently

11. Axios and installation

Axios basic concepts and installation and configuration methods

Ajax: Asynchronous requests are a technique for updating parts of a web page without having to reload the entire page

Axios: Promise based HTTP client for browsers and Node.js

1. Create XMLHttpRequests from the browser

2. Get HTTP requests from Node.js

3. Support the Promise API

4. Intercept requests and responses

5. Transform request and response data

6. Cancel the request

7. Automatically convert to JSON data

8. The client supports XSRF prevention

Axios installation:

CMD command line to enter the vue project, run NPM install axios and then run the prompt NPM install –save axios vue-axios

Configuration method:

Open the vue editor, find the main.js file for the current project, and type:

import axios from ‘axios’

Vue.prototype.axios = axios

12. Axios solves cross-domain

'proxyTable: {' '/ API ': {// use '/ API' instead of 'http://f.apiplus.c' 'target: 'http://127.0.0.1:5000/', / / the source address ` ` changeOrigin: true, / / change the source, allowing cross-domain ` ` pathRewrite: {` ` '^ / API' : '/ path/rewrite ` `} ` ` `}Copy the code

13. The use of v – modal

V-models are primarily used for two-way binding of data on forms

1: used for input, select, textarea, component

2: modifiers:

.lazy- replaces input to listen for the change event

.number- The input string is converted to a number

. Trim – Enter the first and last Spaces for filtering

14. Installation and use of SCSS

To install the sASS dependency package, enter:

npm install sass-loader –save-dev

npm install node-sass –sava-dev

Add the configuration to the rules of webpack.base.conf.js in the build folder

{

test: /\.scss$/,

loaders: [‘style’, ‘css’, ‘sass’]}

When using SCSS, add lang= “SCSS” to the style tag to apply the corresponding syntax, otherwise an error is reported

15. Name the use of each folder and file in the SRC directory in vue.cli project.

Vue-cli project uses the SRC directory for each folder and file

The assets folder contains static resources

“Components” means put components

Router defines the configuration of the route

view

App. vue is an application main component

Main.js is the entry file

Webpack directory:

├─ Build // Save some initial configuration of webpack, project build │ ├─build.js // Production environment build │ ├─check-version. Js // Check NPM, Node version │ ├─ Vue-loader.conf.js // │ ├─ ├─ WebPack.dev.conf.js // WebPack Setup │ ├─ WebPack.dev.conf.js // WebPack Setup │ ├─ ├─dev.env.js │ ├─index.js │ ├─dev.env.js │ ├─index.js // │ ├─ Guitar School – SRC // source directory │ ├─assets // static file directory │ ├─ SRC // Source directory │ ├─assets // static file directory │ ├─node_modules // │ ├─ Heavy Metals │ ├─ Heavy Metals │ ├─ Heavy metals │ ├─ heavy metals │ ├─ heavy metals │ ├─ heavy metals │ ├─ heavy metals Import ├─static // Static Resources Directory ├─.babelrc // Config file ├─.editorConfig // code specification Config file ├─.gitignore // git Ignore config file ├─.postcsrc.js // Postcss plug-in configuration file ├ ─ index. The HTML / / page entry documents ├ ─ package – lock. Json / / project package control file ├ ─ package. The json / / project configuration └ ─ README. Md / / project specifications

16. Describe the usage scenarios of computed and Watch respectively

Features and differences:

Vue’s computed option is mainly used for synchronous data processing, while the Watch option is mainly used for event distribution, which can be asynchronous.

Both can achieve the same effect, but there are some differences in usage scenarios based on their respective characteristics.

Computed has a cache property that changes associated data only when the dependent data changes, and is suitable for computing or formatting data scenarios.

Watch monitors data, which is associated but not dependent. As long as certain data changes, it can process some data or send events and execute them synchronously or asynchronously.

Calculate attribute

Abstract concepts are not easy to understand and become familiar with more high-frequency scenarios. Computational properties are represented by synchronous processing of data.

In the financial sector, installment payments,P2P annualized returns, and computations can take precedence over computations.

There is no need to pay attention to click events or other data, as long as the calculation rules are written in the property, you can get the corresponding data in real time.

In e-commerce shopping cart statistics, one data depends on one or more data.

Automatically calculates the sum of price * quantity as shopping cart quantity and product changes.

If there is a coupon or discount, automatically subtract the discount and calculate the discount amount, as above real-time calculation.

As long as the purchase quantity, purchase price, coupon, discount coupon and any change, the total price will automatically track the change.

The listener

What the Watch listener can do with computed, when is a listener good?

It is mainly applicable to scenarios related to events and interactions. Data changes are conditional, and it is suitable for a single data to trigger multiple things at the same time.

For example, when the borrowing amount is greater than the borrowing amount, toast prompt will pop up and the current borrowing amount will be adjusted to the maximum.

It can be seen that the change of data is triggered by the pop-up prompt, which is triggered only under the condition of a certain amount, rather than in real time.

Summary: Interactive events such as pop-up prompts apply to Watch, data computation and character processing apply to computed

17. Can V-ON listen for multiple methods

The use of 18 $nextTick

This.$nextTick() delays the callback until after the next DOM update cycle. Use the data immediately after you modify it, and then wait for DOM updates. It is the same as the global method vue.nexttick, except that the this callback is automatically bound to the instance calling it.

We have changed the text inside a DOM element, and we want to print the changed text directly after the DOM update, just as we put the printed code in setTimeout(fn, 0);

19. Why must data be a function in a Vue component

Data in a VUE component must be a function

Reference data type

Object is a reference data type. If function is not used, each component’s data is the same address in memory.

When data is a function, each component instance has its own scope. Each instance is independent of each other and does not affect each other

20. Use of vUE event objects

Listen for DOM events with v-ON directives and run some JavaScript code when triggered.

1. Common events:

` <! - HTML code - > ` ` < div id = "app" > ` ` < button @ click = "A" > 1 < / button > ` ` < p > {{MSG}} < / p > ` ` < / div > ` ` / / every click button, the number in the p tag will be + 1 ` ` new Vue({` `el: "#app",` `data:{` `msg:0` `}` `methods: {` `A() {` `this.msg++` `}` `},` `})`Copy the code

2. Event parameter transfer

` <! - HTML code If you need access to the raw DOM object, can the $event into the method - > ` ` < div id = "app" > ` ` < button @ click = "event (a, b)" > 1 < / button > ` ` < / div > ` ` new Vue ({`  `el: "#app",` `data: {` `a: 20,` `b: 20` `},` `methods: {` ` event (a, b) {` ` console, log (a + b) ` `} ` `}, ` `}) ` ` / / 40 ` will click on the button the console outputCopy the code

3. Event modifiers

Name it: Communication between VUE components (7 types)

22. An understanding of progressive frameworks

Wen Dao Liu: How is two-way data binding implemented in Vue

24. Differences, advantages and disadvantages between single-page apps and multi-page apps

A single page application has only one complete HTML page in a project, and the rest are made up of partial HTML fragments. Page jumps are only partial refreshes and do not reload all resources. The switch between segments is fast, and it is easier to realize the transition animation.

Disadvantages:

1, not conducive to SEO, 2, navigation is not available, if you must navigate to achieve their own forward and backward. (because it is a single page can not use the browser’s forward backward function, so you need to build the stack management) 3, load for the first time took more than 4, page complexity increase many multi-page application of a project is composed of multiple complete HTML page, jump all resources to reload the page, the page will switch between caton blank problems, Not easy to implement switch animation etc

Lesson learned: Front end: You need to understand single-page applications and multi-page applications – nuggets

25. What are the functions and details of filters in VUE

Place of application

` <! - in a pair of curly braces - > ` ` {{date | formatDate}} ` ` ` <! -- -- -- > in ` v - bind ` ` ` ` < div v - bind: id = "data | formatDate" > < / div > `Copy the code

Scenario: Time format conversion

Register filter function

The first is the global filter, which can be registered directly on a VUE object using the Filter method. This globally registered filter can be used within any component.

'// Global function vue. filter('formatTime', function (value) {'' const date = new date (val); ` `const hour = date.getHours(); ` ``const minutes = date.getMinutes(); const seconds = date.getSeconds(); return `${hour} : ${minutes} : ${seconds}`; ` ` ` `})Copy the code

The second type is a component internal filter, which can only be used within the current component. We will use these two methods to register filter functions.

Features: Filters can be connected in series

{{ message | filterA | filterB }}

Receive parameters

{{ message | filterA(‘arg1’, arg2) }}

FilterA is defined as a filter function that takes three arguments. The value of message is the first argument, the plain string ‘arg1’ is the second argument, and the value of the expression arg2 is the third argument.

Note use:

1, when there are two local and global filters with the same name, the nearest principle will be called, that is: local filters are called before global filters!

An expression can use multiple filters. The need for pipe between filter operator “|”. They are executed from left to right

26. V-if and V-for priorities

When Vue processes instructions, V-for has a higher priority than V-if

Then we from the Angle of the source code to see his source location compiler/codegen/index. Js

In the genElement method, we can see some if else judgments

`if (el.staticRoot && ! el.staticProcessed) {` `return genStatic(el, state)` `} else if (el.once && ! el.onceProcessed) {` `return genOnce(el, state)` `} else if (el.for && ! el.forProcessed) {` `return genFor(el, state)` `} else if (el.if && ! el.ifProcessed) {` `return genIf(el, state)` `} else if (el.tag === 'template' && ! el.slotTarget && ! state.pre) {` `return genChildren(el, state) || 'void 0'` `} else if (el.tag === 'slot') {` `return genSlot(el, state)` `} else {` `// component or element` `let code` `if (el.component) {` `code = genComponent(el.component, el, state)` `} else {` `let data` `if (! el.plain || (el.pre && state.maybeComponent(el))) {` `data = genData(el, state)` `}` `const children = el.inlineTemplate ? null : genChildren(el, state, true)` ``code = `_c('${el.tag}'${`` ``data ? `,${data}` : '' // data`` `}${` ``children ? `,${children}` : '' // children`` ``})` `` `}` `// module transforms` `for (let i = 0; i < state.transforms.length; i++) {` `code = state.transforms[i](el, code)` `}` `return code` `}`Copy the code

V-for has a higher priority than v-if. If both of them occur at the same time, v-if will be executed every time, which will waste performance. The correct way to do this is to add a template tag outside of v-for, and use v-if on template

Similar to:

`<template v-if="isTrue">`
 `<p v-for="item in arr" >{{item}}</p>`
`</template>`
Copy the code

27. The difference between assets and static

Similarities:

Assets and static are static resource files. Resource files, images, font ICONS, style files, etc. needed in the project can be placed under these two files, which are the same

Similarities:

The static resource files stored in assets are packaged and uploaded when the project is packaged, that is, when the NPM run build is run. The so-called simple packaging point can be understood as compression volume and code formatting. The compressed static resource file is eventually placed in a static file and uploaded to the server along with index.html

Static resource files do not need to go through the packaging, compression and formatting process, but directly into the packaged directory, directly uploaded to the server. However, static resource files are not compressed, so the volume of the file is larger than that of the packaged assets file. It takes up more space on the server. So the simple use of the following suggestions:

All the style files, JS files required by the template in the project can be placed in assets to go through the process of packaging. Reduce volume. The third-party resource files introduced in the project, such as iconfoont. CSS, can be placed in static, because these imported third-party files have been processed, we no longer need to process, directly upload.

Of course, the specific situation, specific analysis, in different development environment, different needs, different specific circumstances to adopt the appropriate way

28. List common commands

1. Text interpolation: {{}} Mustache

2. DOM attribute binding: V-bind

3. The directive binds an event listener: V-on

4. Implement bidirectional binding between form input and application state: V-Model

5. Control switching the display of one element: V-if and V-else

6. List rendering: V-for

7. Show elements based on conditions: V-show

8. Update the DOM object’s textContent: V-text

9. Update innerHTML: V-HTML of the DOM object

29. Common modifiers of vue

.lazy

By default, v-Model synchronizes the value of the input box with the data after each input event is triggered. You can change to synchronization using the change event by adding the lazy modifier:

.number

If you want to automatically convert user input values to numeric types, you can add the number modifier to the V-Model

.trim

If you want to automatically filter whitespace entered by the user, you can add the trim modifier to the V-model:

Event modifiers:

` <! Continue to spread, stop the click event - - > ` ` < a v - on: click the stop = "doThis" > < / a > ` ` <! - submit event no longer reloading the page - > ` ` < form v - on: submit. Prevent = "onSubmit" > < / form > ` ` <! - the modifier can series - > ` ` < a v - on: click. Stop. Prevent = "doThat" > < / a > ` ` <! - only the modifier - > ` ` < form v - on: submit. Prevent > < / form > ` ` <! Use event capture mode when adding event listeners --> ' '<! <div V-on :click.capture="doThis"> <div V-on :click.capture="doThis"> </div>` `<! Trigger handler only if event.target is the current element itself --> '<! That event is not triggered from internal elements - > ` ` < div v - on: click the self = "doThat" >... </div> note that the order is important when using modifiers; The corresponding code is generated in the same order. Therefore, v-on:click.self blocks all clicks, whereas V-on :click.self. Prevent blocks only clicks on the element itself. ` ` <! - click event will only trigger a - > ` ` < a v - on: click once = "doThis" > < / a > `Copy the code

Key modifier

When listening for keyboard events, we often need to check for common key values. Vue allows v-ONS to add key modifiers when listening for keyboard events:

` ` <! Call 'vm.submit()' only if 'keyCode' is 13 --> '<input V-on :keyup.13="submit">' It is difficult to remember all the keycodes, so Vue provides aliases for the most commonly used keys: ` ` <! -- -- ditto -- -- > ` ` < input v - on: keyup. Enter = "submit" > ` ` <! <input @keyup. Enter ="submit"> ` `. Enter ` `. TAB ` `. Delete (capture "delete" and "backspace" key) ` `. Esc ` `. Space ` `. Up ` `. Down ` `. Left ` `. Right `Copy the code

30. Array update detection

Vue contains a set of mutating methods that observe arrays, so they will also trigger view updates. These methods are as follows:

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reserve()

The substitution array variation methods change the original array called by these methods. In contrast, there are non-mutating methods, such as filter(), concat(), and slice(). These methods do not alter the original array, but always return a new one. When using non-mutating methods, old arrays can be replaced with new arrays: ' 'example.items = example.items. Filter (function (item) {'' return item.message.match(/Foo/) ' '}) 'Copy the code

1. Matters needing attention
   
   Due to theJavascriptThe limit,VueThe following array changes cannot be detected:
   
   1. Set an item directly using the index, for example:vm.items[index] = newVal
   
   2. Modify the array length, for example:vm.items.length = newLength

`var vm = new Vue({` `data: {` `items: [' a ', 'b', 'c'] ` `} ` `}) ` ` vm. The items [1] = 'x' / / not responsive ` ` vm. The items. The length = 2 / / not responsive `Copy the code

To solve the first type of problem, either of the following methods can achieve the same effect as vm.items[index] = newVal, and also trigger a status update:

31.Vue.set View update

`// Vue.set`
`Vue.set(vm.items, index, newVal)`
`vm.$set(vm.items, index, newVal)`
`// Array.prototype.splice`
`vm.items.splice(index, 1, newVal)`
`vm.items.splice(newLength)`
Copy the code

32. Custom instruction explanation

Vue custom directive –directive

Official explanation:

` / * custom * / ` ` import Vue from 'Vue ` ` / * * ` ` * template ` ` * v - lang ` ` * 5 hooks registration instructions ` ` * / ` ` Vue. Directive (' mydirective', / * * {` ` ` ` * 1. Bind: function(el, binding, vnode) {' console.log(' 1-bind '); bind: function(el, binding, vnode) {' console.log(' 1-bind '); Inserted: function(el, binding, vnode) {' console.log(' 2-inserted '); ` `}, ` ` / * * ` ` * 3. The component update ` ` * according to the new value to perform the corresponding update ` ` * for the initial value will call a ` ` * / ` ` update: function(el, binding, vnode, oldVnode) {` `console.log('3 - update'); Function (EL, binding, vNode, oldVnode) {' console.log('4 - componentUpdated'); ` ` `}, ` ` / * * * 5. ` unbundling ` ` * do cleaning operation ` ` * such as remove when binding to bind event listeners ` ` * / ` ` unbind: function(el, binding, vnode) {` `console.log('5 - bind'); Bind: call once, when the instruction is first bound to an element. You can define an initialization action that will be performed once on the binding. Inserted: Called when the bound element is inserted into a parent. Update: called when the template to which the element is bound is updated, regardless of whether the binding value changes. Unnecessary template updates can be ignored by comparing the binding values before and after the update. 4, componentUpdated: Called when the template to which the element is bound completes an update cycle. 5. Unbind: called only once, when an instruction is unbound from an element. ` ` * / `Copy the code

33. The two core points of VUE

Data driven, component systems

** Data-driven: **ViewModel ensures consistency between data and view.

Component systems: The application class UI can be thought of as being entirely composed of component trees.

34. Differences between vue and jQuery

35 Procedure for importing components

36. What is vue-CLI package command? Package regret causes path problems, where should it be modified

37. Comparison of the three frameworks

38. Bidirectional data binding across components

39. Delete and vue. delete delete the difference between arrays

40. How to solve the slow loading of SPA first screen

What is the difference between vue-router jump and location.href

42.vue slot

43. Does your VUE project pack one JS file, one CSS file, or multiple files?

44. How to solve the pit encountered by VUE?

45. Router-link in Vue works on PC, but does not work on Android.

Invalid resolution for events registered on router-link in Vue2

47.RouterLink does not work in Internet Explorer and Firefox

48. What are the characteristics of AXIos

49. What is the process of packaging VUE components?

50. Vue various component communication methods (father-son, father-son, father-brother, father-grandson unrelated components)

51. Difference between Params and Query

52. The vue mock data

53 VUE encapsulates common components

54. Vue initialization page flash problem

55. Vue disables screen scrolling after pop-ups

56. Method to trigger view update when vue updates an array

57. UI component library commonly used by VUE

58. How does VUE introduce local background images

59. How does VUE introduce SASS

60. Vue Modifies static resource paths after packaging