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

6. Filter

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

7. Send ajax request

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

componect :is="" Component, multiple components use the same hanging point, dynamic switching,

keep-alive cache component, avoid re-creation, efficiency comparison High

Usage method

Data transfer: parent-child component, in A component defines another component inside it, which is called a parent-child component.

       子组件只能在付组件中使用，默认情况下，子组件不能访问付组件数据。每个组件的作用域是独立的。

       组件间数据的通信：在调用组件时，绑定想要获取的付组件的数据，在子组件内部，使用props选项来生命获取

的数据，接收来自付组件的数据。例子：props:['msg']   props可以是数组，也可以是对象props:{} 允许配置高级设计比如类型判断

数据的校验，设置默认值 props:{messge:String,age:Number,name:{type:String,rquired:true,default:19,validator:function(){}}},对象做数组的默认值，

对象必须使用函数返回。

组件中的数据有三种形式：data  props computed 

付组件访问子组件数据方式：

a.在子组件中使用vm.$emit（事件名，数据） 出发一个自定义事件，事件名自定义

b.付组件在使用子组件的地方监听子组件出发事件，并在付组件中定义方法，用来获取数据

单项数据流：

props是单项绑定的，当付组件的属性变化时，将传导给子组件，但是不会反过来，而且不允许子组件直接

修改付组件中的数据

解决方案： a.如果子组件享把他作为局部数据来使用，可以将数据存入另一个变量在操作

b.如果子组件想修改数据并同步付组件，使用.sync  2.3开始支持，或者将付组件数据包装成udixiang，

然后在子组件中修改对象的属性。

非父子组件间通信：

可以通过一个空的vue实例来作为中央事件总线，用他来出发事件或监控事件

var Event = new Vue();    空对象

Event.$emit(事件名，数据)；  发送数据

Event.$on(事件名，data=>{})  监听接收数据

slot内容分发：

用来获取组件中的元内容，就是组件标签中的内容；

获得指定标签内容可以给标签定义  slot="s1"   获取  

14.vue-router 路由

使用vue.js 开发spa 单页面应用，根绝不同url地址，显示不同内容，但实现在统一页面红，称单页面应用。

bower info vue-router    cnpm install vue-router -S

<p id="itany">
<p>
<!-- 使用router-link组件来定义导航，to属性指定链接url -->
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</p>
<p>
<!-- router-view用来显示路由内容 -->
<router-view></router-view>
</p>
</p>

<script>
//1.定义组件
var Home={
template:&#39;<h3 id="我是主页">我是主页</h3>&#39;
}
var News={
template:&#39;<h3 id="我是新闻">我是新闻</h3>&#39;
}

//2.配置路由
const routes=[
{path:'/home',component:Home},
{path:'/news/:username/:password'',component:News},
{path:'*',redirect:'/home'} //重定向
]

//3.创建路由实例
const router=new VueRouter({
routes, //简写，相当于routes:routes
// mode:'history', //更改模式
linkActiveClass:'active' //更新活动链接的class类名
});

//4.创建根实例并将路由挂载到Vue实例上
new Vue({
el:'#itany',
router //注入路由
});
</script>

知识点：

路由嵌套和参数传递：

a.查询字符串   login?name=tome&pwd=123     显示  {{$route.query}}

b。rest风格url       regist/alice/324    显示获取 {{$router.params}}

Route instance method:

router.push(); Add route, the function is the same as , both jump pages

router.replace() Replace route, the same function as above, no history records are generated

Single file component:

.vue file name The file component is a custom file format of vue.js. A .vue file is a separate poison arrow, which encapsulates a separate js css html

# in the file. ##.vue file consists of three parts template style script

vue-loader The browser itself does not recognize your .vue file, so it must load and parse the .vue file. In this case, vue-loaderleisi's loaderhaiyou

Many, html-loader css-loader style-loader babel-loader It should be noted that vue-loader is planned for webpack

webpack is a front-end resource modular loader and packaging tool,

Install related templates:

cnpm install vue-template-compiler -D //Precompiled template

Merge: cnpm install -D webpack webpack-dev-server vue-loader vue- html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template-compiler

Run the test: npm run dev

15. Scaffolding vue-cli

vue-cli is a vue scaffolding that can quickly build the project structure,

Commonly used project templates: webpack guarantees EsLint code specification checking and unit unit testing,

webpack-simple has no code checking and unit testing

browserify is also used more often

browserigy-simple

Install vue-cli and configure the vue command environment cnpm install vue-cli -g

vue --version

vue list
Initialize the project and generate the project template
Syntax: vue init template name project name
Enter the generated project directory and install the module package
cd vue -cli-demo
cnpm install
Run
npm run dev //Start the test service
npm run build //Package the project and output the dist directory. If the project is online, copy the dist directory to the server
Using webpack template
vue init webpack vue-cli-demo2
ESLint is a tool used to unify code specifications and styles, such as indentation, spaces, symbols, etc., and has strict requirements

16. Modular development

First create a project in a directory with vue init webpack-simple vue-cli-demo

Enter the directory cd vue-cli-demo cmpn install and then npm run dev Run test

cmpn install vue-router -S -S means production dependency;

Edit main.js import VueRouter form ''vue-router' vue.use(Vue/router ); After use, you can use

to edit app.vue globally and edit router.config,js

cnpm install axios -S

There are two ways to use axios:

a. In components that use axios, axios must be introduced import axios from 'axios' axios.get('url').then(resp ->{resp.data}); .catch(eorr->){}

b. Globally introduce import axios from 'axios' in main.js and add it to the vue prototype vue.prototype.$http=axios; Then other components can

vue.$http.get(); or this.$http.get();

Add events for custom components:

For example, if you customize a button vue registration, @click=send cannot be bound by default. Just write @click.ntaive=send like this.

17ui library element ui

is a ui The component library is a set of component libraries based on vue 2.0 provided by Ele.me. It can quickly develop URLs and improve efficiency

element ui pc terminal mintui mobile terminal official website element.eleme.io

cnpm install element-ui -S

npm run dev

Introduce and use this component in main.js import ElementUI from 'elemtn-ui' import element-ui/lib/eheme=default/ index.css

vue.use(ElementUI); This introduction method is to introduce all component content

Add loader in webpack.confgi.js test:/\.css$/, loader:'style-loader!css-loader'

cnpm instal style-loader -D Font font loader configuration

Restart webpack configuration changes

Dynamic style is to use less

Use less to install loader less less-loader configure test:/\.less$/,loader:less-loader specify style l ang=less must specify style

Customize global components:

Global component: You can use vue.use in main.js to enter the global introduction, and then use

to create it in other components. vue component, create index.js file import Login from './Login.vue'
export default {
install:function(Vue){
Vue .component('Login',Login);
}
}

Ordinary components: must be introduced every time they are used, such as axios

18.vuex state management mode

Uses centralized storage to manage the status of all components of the application. Simply put, centralized management of data is similar to redux in react, based on the flux front-end State management framework.

Basic usage: nmp install vuex -S

Create store.js file, vuex related configuration. Import in main.js, import store fomr './store.js main.js configure store options, subgroup this.$store

import vue fomr vue import vuex from vuex vue.use(vuex);

vuex core store is equivalent to a container. A store instance contains the following properties and methods:

getters Get properties

actions Define methods Actions, such as process judgment Asynchronous requests const action={method name (context){})} context object has comit dispatch state

commit means submission, the only way to modify data, conmit('add) submits a change called add

mutations Definition changes

var state= { count:6} //Create store object const store=new Vuex.Store{{state}}; vargetters ={count)(){return state.count}} export default store;

Edit app. js edit store, as a calculated attribute: computed:(){return this.$store.state.count};

Method 1 this.#store access Method 2 mapGetters mapActios access

mapGetter Get Attribute

mapActions Get method

Import auxiliary function import {mapGetter} from vuex

computed:mapGetters{('count')}

The above is the detailed content of Knowledge points about Vue interviews. For more information, please follow other related articles on the PHP Chinese website!