<> first day

1. sketch MVVM and MVC The difference between
MVC It's the middle frame mode in the background Divide the program into three parts
M(model Model ) V(view view ) C(controller controller )
MVVM Is to achieve MVC In v(view view )
M model( data ) v(html element ) view v m(view-model) It is used to control the change of data and the control attempt is the framework mode of the front end

2, Brief introduction of virtual DOM
For complex documents DOM structure , Provide a convenient tool , Minimize DOM operation

3, How to create vue Examples of

var vm=new Vue({
  el:“ Mount point ”,
   Defining methods

4, List common instructions and functions

* v-for loop
* v-on Binding event ( Grammatical sugar @)
* v-model Bidirectional data binding
* v-text Render string
* v-html Rendering html Nodes and strings ( Resolved into html Recognizable )
* v-if Judgment statement
* v-show display / hide ( Can be used for judgment )
* v-bind Binding properties ( Grammatical sugar :)
5, List common modifiers
@ event .stop Prevent events from bubbling
@ event .prevent Block event default behavior
@ event .capture Trigger event capture
@ event .self When the event is in the element itself Trigger callback
@once Only once

6,v-if and v-show Differences and use scenarios of
v-if: Judge whether there is dom
v-show: Judgment hiding / display dom

<> the second day

1. Briefly vue in method computed watch What is the difference
watch ( Listening properties ) Can also respond to changes in data , Use when you need to perform asynchronous or expensive operations when data changes watch
methods ( Define event methods ) It will be recalled every time it is rendered
computed ( Calculation properties ) It has the characteristics of existing attributes , You can also write complex logic , But it's property-based caching , Called only when the dependency of the cache property changes , Otherwise, it will not be called

2, What is a filter ? How to define global and local filters
The filter is right Further filter the data to be displayed , Then display , The filter does not change the original data , Only new data is generated based on the original data
  overall situation :
Vue.filter(‘ Filter name ’,funciton(val){
  // Logic code
  local :
filter:{ Filter name :funciton( parameter ){
  // Logic code
3, What is the semantics of a custom instruction ? Please give an example of how to define a custom instruction with parameters ?
directives:{   “ Instruction name ”:{  inserted:function( Current node ){   // Operation on nodes   }  } } example :
directives:{  color:{  bind:function(el,binding){   if(binding.arg){
   el.style.color=binding.arg   }else{    el.style.color=”green”   }  } }
4, Understanding of progressive framework
Minimum claims —— It's a lightweight view , Just do what you have to do , Didn't do the wrong thing

5,Vue How to implement bidirectional data binding in
use v-model To achieve
Vue realization Two way data binding Mainly used : Data hijacking combination “ release - subscribe ” Mode mode , adopt Object.defineProperty() In set and
get, Publish message to subscriber to trigger listening when data changes .

6, Differences, advantages and disadvantages between single page application and multi page application
Single page : only one html page , The jump mode is the switch between components
advantage : Jump smoothly , Component development , Reusable components , Convenient development
shortcoming : Slow loading of the first screen
Multi page : Multiple pages , Jump mode is the jump between pages
advantage : First screen loading block
shortcoming : Slow jump speed

7, What hook functions do custom instructions have , And user defined instruction usage scenarios
(1)bind: Call only once , Called the first time an instruction is bound to an element
(2)inserted: Called when the bound element is inserted into the parent node
(3)update: Called when the virtual node of the component is updated
(4)componentUpdated: The virtual node and sub virtual node of the component are updated after the update.
(5)unbind: Call only once , Called when an instruction is unbound to an element

8,v-clock What's the role
It can solve the glint problem of interpolation expression , Need to be in style Style in [v-clock]{display:none}

9,vue How to bind dynamically in class style
<div :class="{ Class name : variable }"></div>
<> on the third day

1, Briefly describe the features and benefits of components
(1) characteristic : Code reusability in components , Assignability , Interoperability , High cohesion , Low coupling
(2) benefit : Components can be operated dom extend HTML element , Multiple use code can be encapsulated , Easy to develop

2,vue Basic components of components
template structure (html code )
script behavior
style style

3, How a parent passes a child
Bind a property to the child component label in the parent component , Property to be passed
Pass the props:[“ Custom property name ”] To receive data

4, How a child passes a parent
(1) Bind a custom event to the child component label in the parent component , Mount the method to be called for this event
(2) The method in the subcomponent passes this.$emit(‘ Custom event name ’) To call this method

5, How do sibling components communicate

* Create an empty vue example BUS
* adopt BUS.$emit(‘ Event name ’) To empty vue In the instance output data
* adopt BUS.$on(‘ Event name ’,( parameter )=>{ Mount a subordinate 1 Data from }) To receive
6, accept props What are the types of validation

<> the forth day

1,keep-alive What is it? ?
When wrapping dynamic components , Will cache inactive component instances , Instead of destroying them , It doesn't render a DOM element , It will not appear in the parent component

2, Life cycle ? When to use ?
beforeCreate Front < establish > after created
beforeMount Front < mount > after mounted
beforeUpdate Front < to update > after Updated
beforeDestroy Front < Destruction > after Destroyed

3,created and mounted difference
created After instantiation creation , It's done data Initialization of , The mount phase hasn't started yet $el No, we can't get the truth DOM
Mounted Mount complete , $el Property creation In module HTML Render to html Page is only executed once

<> The Fifth Day

1,vue Steps of scaffold installation ?
vue create entry name
cd get into Project name
npm run serve Launch project

2, Why use scaffolding
You can quickly start a vue project , No manual configuration , Direct development , Convenient and fast

3,Vue-cli How to use sass
cnpm i --save-dev sass-loader
cnpm i --save-dev node-sass

4,Vue-cli What is the packaging command ? Packaging can cause path problems , Where to modify
npm run build
open config/index.js notice build attribute , hold assetsPubicPath:”/” Change to assetsPublicPath:”./”

5,Vue-router There are several modes ? The default is ?
stay vue In the routing configuration of mode option , The most intuitive difference is that url in hash With an ugly one # , and history Yes, no # Of .vue Default use hash.
hash( default ),history

6,Params and query The difference between
use params Parameters can only be used name The value passed in after import will disappear after refreshing , and query Biography of ginseng name and path Fine , Values are saved when they are refreshed
usage :
query To use path To introduce ,params To use name To introduce , Receive parameters are similar , namely
this.$route.query.name this.$route.params.name.
url address display :
query More like us ajax in get Biography of ginseng ,params Similar to post, Let's be simple , The former displays parameters in the browser address bar , The latter is not shown

7,Assets and static The difference between
common ground : Both store static resource files
difference :
assets: The static resource file is stored when the project is packaged , The compressed static resource file will eventually be placed in the static Follow in file index.html Upload together
static:static in The static resource file will not go through the process of packing, compression and formatting , Instead, go directly to the packed directory , Upload directly to server

<> Day 6

1. How to configure nested routes
const routes= [    {    path: '/',    name: 'home',    component: Home,
      children:[    {       path:'/one',       name:"one",       component:One,
      children:[    {       path:"/two",       name:"two",       component:Two
   }      ]      }     ]     }    ]
2, The idea of entering the detail page from the list page
(1) Give an element a click event in the list page , And pass a value , stay methods Write jump in the method of
this.$router.push({name:”xiang”,params:{zhi: value }}
(2) stay router.js Medium configuration :path:” route /: parameter ”
(3) Use on details page mounted() Get the passed value (this.$route.params. value )

3, There are several routing hook functions ? What are the differences ? parameter to,from,next What do they mean ?
(1)beforeRouteEnter(to,from,next){}( Call before routing )
(2)beforeRouteUpdate(to,from,next){}( Call on Reuse )
(3)beforeRouteLeave(to,from,next){}( Called when leaving the route )
①to:(route Routing objects ) Target routing object to be entered
②from:(route Routing objects ) Route the current navigation is about to leave
③next:(funciton function ) Be sure to call this method resolve This hook

4, Which property is used for redirection ?
redirect:”/ route ”

5,router and route difference
this.router‘: Is the routing operation object , Write objects only ‘this.router` : Is the routing operation object , Write objects only `this.router‘: Is the routing operation object , Write only
object ‘this.route` : Routing information object , Read only objects

©2019-2020 Toolsou All rights reserved,
It's unexpected Python Cherry tree (turtle The gorgeous style of Library ) Some East 14 Pay change 16 salary , Sincerity or routine ? Browser kernel ( understand )java Four functional interfaces ( a key , simple )HashMap Explain in detail html Writing about cherry trees , Writing about cherry trees os Simple use of module