Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what are the Vue interview questions for web front-end technology". In daily operation, I believe many people have doubts about what web front-end technology has on Vue interview questions. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the questions of "what Vue interview questions web front-end technology has". Next, please follow the editor to study!

1. What is MVVM?

MVVM is the abbreviation of Model-View-ViewModel and MVVM is a kind of design idea. The Model layer represents the data schema, and you can also define the business logic for data modification and operation in Model; View represents the UI component, which is responsible for transforming the data model into UI presentation, and ViewModel is an object that synchronizes View and Model.

two。 How does the parent component pass values to the child component?

The data passed by the parent component is received by the props method.

Subcomponents receive in two ways: they can pass any type (arrays, objects, various data types, etc.)

Props: ['title','likes','isPublished','author']

Props: {title:String,likes:Number}

3. How does the child component pass the value to the parent component?

The child component passes the value to the parent component with this.$emit (key,value). When the parent component receives it, it needs to bind Key in the tag of the child component created in the parent component, in the format: @ Key= "method name". The parent component declares this method, and the method takes a parameter, which is the Value passed by the child component.

4. What is Vuex? Which functional scenario uses it?

Vuex is a state management mode specially designed for Vue.js. It uses centralized storage to manage the state of all components in Vue applications, and uses corresponding rules to ensure that the state changes in a predictable way.

Use it when the project is large:

Dynamic registration responsive data is required

Need the namespace namespace to manage and organize our data

Hope to change the record through plug-ins; facilitate testing; all these needs and hopes are some of the things we vuex need to do.

5. What are the attributes of Vuex?

State: basic data

Getters: data derived from basic data

Mutations: a way to submit changed data, synchronize!

Actions: like a decorator, wrap mutations so that it can be asynchronous.

Modules: modular Vuex.

6. How do I make CSS work in the current component?

Of the current component

< style>

The label is changed to

< style scoped>

7. List three lifecycle hook functions that are common in Vue.

The mount element $el and the data object data of the beforeCreate:Vue instance are both undefined and not initialized.

The data object data of the created:vue instance has a value, but $el does not.

The $el and data of the beforeMount:vue instance are initialized, but they are still virtual dom nodes, and the specific data.filter has not been replaced.

Mounted:vue instance is mounted, and data.filter is rendered successfully

Triggered when beforeUpdate:data is updated.

Triggered when updated:data is updated.

BeforeDestroy: triggered when a component is destroyed.

Destroyed: triggered when the component is destroyed, the vue instance unlistens the event and binds the dom (no response), but the DOM node still exists.

8. How many phases are there in the Vue life cycle?

Before the creation of beforeCreate

After created is created

Before beforeMount is loaded

After mounted is loaded

Before beforeUpdate update

After updated update

Before beforeDestroy is destroyed

After destroyed is destroyed

9. Name at least 4 Vue instructions and how to use them?

V-html: rendered text (able to parse HTML tags)

V-text: rendered text (all parsed to text)

V-bing: binding data

V-once: bind only once

V-model: binding model

V-on: bind event

V-if v-shou: conditional rendering

10. What are the commonly used npm commands in vue-cli projects?

Npm install: command to download the node_modules resource pack

Npm run dev: start the npm command of the vue-cli development environment

Npm run build:vue-cli generates npm commands for deploying resources in a production environment

11. Please state the use of each folder and file in the vue-cli project.

Build folder: stores the relevant configuration and script files of webpack. In the actual development process, you will only use webpack.base.conf.js occasionally, configure less, babel and so on.

Config folder: the port number of the config.js (index.js) commonly used in this folder to configure the development environment, whether to enable hot loading or set the static resource relative path of the production environment, whether to enable gzip compression, npm run build command package to generate the name and path of static resources, etc.

Node_modules: various dependencies on the development and production environments where npm install commands are downloaded.

Src folder: the source code and resources of the project, including page pictures, routing components, routing configuration, vuex, entry files, etc.

Other files: some project information defined, descriptions, and so on.

12. Two modes of vue-router routing.

Hash mode:

The change in the hash value after # will not cause the browser to issue a request to the server, and the browser will not refresh the browser if the browser does not make the request. Each change in the hash value will trigger the hashchange event.

History mode:

Take advantage of the new pushState () and replaceState () methods in HTML5. These two methods are applied to the history stack of the browser. On the basis of the existing back, forward and go, they provide the function to modify the history record. It's just that when they make changes, although the current URL is changed, the browser does not immediately send a request to the back end.

13. How to solve the cross-domain problem of ajax in Vue?

Locate the index.js file in the config folder:

Modify proxyTable: {

/ api': {/ / use / api instead of "http://localhost:8082""

Target:' http://localhost:8082', / / Source address

ChangeOrigin:true, / / change the source

PathRewrite: {

'^ / api':' http://localhost:8082' / / path rewriting

}

}

}

After the modification, the cross-over request can be written directly as / api/login and so on.

14. What is the Vue packing command? What files will be generated after Vue is packaged?

Npm run build: Vue packing command

After Vue is packaged, a dist folder is generated under the current working directory, with static static files and index.html initial pages in the folder.

15. How does Vue optimize the loading speed of the first screen?

Asynchronous route loading

Do not pack library files

Close sourcemap

Turn on gzip compression

16. What is scss?

SCSS is a new syntax introduced by Sass 3. Its syntax is fully compatible with CSS3 and inherits the powerful features of Sass. The only difference is that SCSS requires semicolons and curly braces instead of line breaks and indents, and SCSS is insensitive to white space symbols.

17. What is axios? How do I use it?

Axios is a promise-based HTTP library, which can send get,post requests. It is the emergence of Vue and React that promotes the emergence of axios lightweight libraries.

Specific:

You can send a XMLHttpRequest request in a browser

You can send a http request at node.js

Support for Promise API

Intercept requests and responses

Conversion request and response

Convert request data and response data

Can cancel the request

Automatic conversion of JSON format

Client supports protection of security from XSRF attacks

How to use:

Npm install-- save axios installs axios

Import axios in the portal main.js

Import Axios from 'axios'

Vue.propertype.$axios = Axios

Send a get request using axios

This.$axios.get ('/ user?stu_id=1002'). Then (function (resp) {

Console.log (resp)

}) .catch (function (err) {

Console.log (err)

});

Use axios to send post requests post native requests do not receive parameters at the back end, there are two solutions, only one is written here! The second solution is to use QS.

Var params = new URLSearchParams ()

Params.append ('name',' Sun WuKong')

Params.append ('age',22)

Let that = this

This.$axios.post ('http://localhost:8082/user',params).then(function(resp) {

Console.log (resp.data.users)

That.ausers = data.data.users

}) .catch (function (err) {

Console.log (err)

});

18. What is vue-router? What components does it have?

Vue-router is Vue.js 's official route manager, and it integrates deeply with the core of Vue.js, making it easy to build single-page applications. The features included are:

Nested routes, yes icon

Modular, component-based routing configuration

Routing parameters, queries, wildcards

View transition effect based on Vue.js transition system

Fine-grained navigation control

Connection with automatically activated CSS class

HTML 5 Historical mode or hash mode, automatically degraded in IE9

Custom scroll bar behavior

Vue-router components:

< router-link to="">

The path of the route

< router-link :to="{name:''l路由名'}">

Named route

< router-view>

Display of rout

19. How to define dynamic routing for vue-router? How to get the passed dynamic parameters?

In the index.js file in the router directory, add /: id to the path attribute. Use the params.id of the router object, for example: this.$route.params.id.

20. What is the difference between MVVM and other jQuery? Which scenarios are suitable?

Vue is data-driven, displaying view layers through data rather than node operations.

It is suitable for MVVM design pattern when dealing with data interaction.

At this point, the study of "what are the Vue interview questions for web front-end technology" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.