Table of contents
Note: The pages of knowledge points in the book are in brackets.
1. Multiple choice questions
1. What do you think about the pattern design of mvvm in vue? (9)
The two-way binding used in the mvvm design pattern, when the view changes, the model will change accordingly, and the model will change, and the view will also be synchronized. In this way, we can pay more attention to the logic, thereby reducing the operation of dom and the coupling of code Also better.
2. Vue features and advantages (13)
The core idea of Vue: The two core ideas of Vue are data-driven and componentized.
Two major features of vue: responsive programming and componentization
Advantages of Vue:
- Two-way data binding, componentization, separation of data and structure, virtual DOM, fast running speed
- Vue is a single-page application, the page is partially refreshed, and there is no need to request all the data and dom every time the page jumps
3. Development tools: vscode, hbuider, subline, webstorm
4. At present , the three mainstream frameworks all have their own routing implementations :
Angular-ngRouter
React的ReactRouter
Vue vue-router
5. Effect of modifiers (27, 45, 64-66)
Event binding modifier: .prevent prevents the default event (27)
.lazy,.number,.trim (45)
.stop prevents bubbling, .capture event capture, .self event trigger, .once one-time binding (64-66)
6.form form
7.vue-router dynamic routing
The core of front-end routing : change the URL, but the page does not refresh as a whole.
Example: Among the following options, routing jump is not allowed: D
A. push()
B.replace()
C. route-link
D.jump()
Example: The correct value of id in the dynamic routing { path: '/user/:id' } obtained below is: A
A.this.$route.params.id
B.this.route.params.id
C.this.$router.params.id
D.this.router.params.id
8. Cross domain (181, 329)
1. Front-end proxy (181) Same-origin policy: Refers to the same protocol, domain name, and port. If one of them is different, it will cause cross-domain.
2. Backend Cors cross-domain configuration (329)
9. Computed Properties (95-99)
The focus of calculated attributes is on the word attribute. First, it is an attribute, and second, this attribute has the ability to calculate. The calculation here is a function. To put it simply, it is an attribute that can cache the calculation results (transform behavior into a static attribute), which can be imagined as a cache.
illustrate:
methods: Define the method, and call the method with parentheses
computed: Define the computed property, because it is a property, so the call does not need parentheses
Conclusion: When calling a method, calculations need to be performed every time. Since there is a calculation process, system overhead must be incurred. What if the result does not change frequently? At this time, you can consider caching the result. Using the calculation attribute can be very fast. To do this conveniently, the main feature of computed attributes is to cache infrequently changed calculation results to save our system overhead.
10. The difference between computed and watch
computed calculates the result and returns it, only triggers when the calculated value changes
Watch monitors a certain value, and when the monitored value changes, perform the corresponding operation
The difference from computed is that watch is more suitable for monitoring the change of a certain value and performing corresponding operations, such as requesting background interfaces, etc., while computed is suitable for computing existing values and returning results
11. The life cycle of vue, the order of execution is: D
A. beforeCreate -> init->create->mount->destory
B. mount-> init->beforeCreate->create->destory
C.beforeCreate->create->init->mount->destory
D.init->beforeCreate->create->init->destory
12. The command for listening to DOM events is: A
A.v-on B.v-model C.v-bind D.v-html
13.css and js understanding
14. Vue component understanding (82)
Benefits of using components:
Improve development efficiency, facilitate reuse, simplify debugging steps, improve maintainability of the entire project, and facilitate collaborative development.
Global registration (83) and local registration (86)
The data value in the Vue component cannot be an object, the reason (84), data must be a function, and then return the data using return
1. Component props (89)
To let the child component use the data of the parent component, it needs to be realized through the props option of the child component, and use v-bind to pass an actual value.
2.$emit（100）
Parent-to-child: The parent component binds a property through v-bind, and the child component accepts the bound property in the parent component through props
Passing from child to parent: the child component passes the value to the parent component through broadcast $emit, and the parent component uses a function to accept the value passed from the child component
3.$ children/$ parent
Specify the parent instance of the created instance, and establish a parent-child relationship between the two. The child instance can use this.$parent to access the parent instance, and the child instance is pushed into the $children array of the parent instance
The value of $children is an array, while $parent is an object
Advantages of vue component encapsulation:
Components are one of the strongest functions of vue.js. Components can extend HTML elements to encapsulate reusable code. Components are reusable vue instance components that can improve the development efficiency of the entire project.
It can abstract the page into multiple relatively independent modules, which solves the problems of our traditional project development: low efficiency, difficult maintenance, and low reusability.
15. Five core concepts of vuex
state: store data
mutations: update data method
Actions: Call the mutations method to update the state data
getters: preprocess the data in the state
modules: modular vuex
Example. The following options are not attributes in vuex? D.
A. state
B.getters
C.actions
D.init
16. Vue life cycle stage
beforeCreate was created before the creation was completed
beforeMount rendering completed before mounted rendering
beforeUpdate data update before the update update is completed
beforeDestory instance is destroyed before the Destory instance is destroyed
17. The difference between calculated properties and watches
Computed properties are used to declaratively describe that a value depends on other values. When you bind data to a computed property in your template, Vue will update the DOM when any value it depends on causes the computed property to change. This feature is very powerful, it can make your code more declarative, data-driven and easy to maintain.
The watch listens to the variables you define, and when the value of the variable you define changes, the corresponding method is called.
Just write an expression name in div, write num and lastname, firstname in data, when the value of num changes in watch, the method of num will be called, and the formal parameters in the method correspond to the new value of num and the old value,
The calculated attribute computed calculates the value that Name depends on, and it cannot calculate the variables that have been defined in data.
Two, fill in the blank
1. Scaffolding understanding function installation (141)
Scaffolding and SPA: vue scaffolding is written as vue-cli, and the template used in engineering projects is webpack.
2. Lazy loading of routes (158)
Lazy loading is also called lazy loading, that is, it loads when needed, and loads as needed. In a single-page application, if there is no lazy loading, the files packaged with webpack will be abnormally large, resulting in the need to load when entering the home page Too much content and too long delay are not conducive to user experience.
The use of lazy loading can divide the page and load the page on demand, which can share the loading pressure of the home page and reduce the loading time.
Lazy loading method:
(1) Combining Vue's asynchronous components and Webpack's code analysis.
(2) AMD wording
(3) In ES6, there is a simpler way to organize the code splitting of Vue asynchronous components and Webpack.
3. springboot configuration file yml file and properties function (235)
In the springboot project, we often see the application.properties file generated by default. In fact, the yml file has the same function as it. They are all used to modify some default configuration values. Such as Mysql user name, password, etc.
yml writing method:
1) Each level is separated by a colon, followed by a blank line, and the indentation of the space is used to control the hierarchical relationship. The number of spaces is not important. Note that the Tab symbol cannot be used. Each point in the properties file is a level.
2) When there are values after the colon, they need to be separated by a space.
1. yml controls the parent-child relationship through indentation
2. Attributes and values are separated by half-width colons + spaces (a space must be added after the colon of each k;)
3. In the properties file, it is divided by ".", and in yml, it is divided by ":";
example:
application.properties
eureka.instance.hostname=localhost
eureka.client.registerWithEureka=false
eureka.client.fetchRegistry=false
application.yml
eureka:
client:
fetchRegistry: false
registerWithEureka: false
instance:
hostname: localhost
Reading order: When both properites and yml exist in the Springboot project, the properties file is read first.
The normal situation is to load yml first, and then load the properties file. If the same configuration exists in both files. Finally, the configuration in properties will be used. The priority set that was read last is highest.
If the port numbers in the two configuration files are different, the port number in properties will be read.
Loading order yml>yaml>properties, priority properties>yaml>yml, that is, properties will cover the other two
The loading order and priority are opposite. The normal loading order is yml>properties, but because the later loading will overwrite the first loading, so when both files are available, we see the execution of properties and the execution of yml. It is overridden, so the priority is properties>yml
4. Springboot exception handling (250-255)
Use the @ExceptionHandler annotation to handle local exceptions
Use the @ControllerAdvice annotation to handle global exceptions
Configure the SimpleMappingExceptionResolver class to handle exceptions
5. Spring boot security framework (333-350)
The default user name of Spring Security is user, and a default password will be generated when Spring Security starts, which can be seen in the startup log
6. Springboot integrated database (288)
Redis can modify the default number of databases through databases in the configuration file. Redis does not support custom database names. Multiple databases in Redis are not completely isolated. The flushall command will clear the data of all databases.
7. Interface testing tool postman (285)
8. Timer (266)
Simple timing tasks can be implemented directly through the tasks that come with Spring, and complex timing tasks can be implemented through the integrated Quartz .
9. Springboot integrates mysql (310)
JdbcTemplate: JDBC tool class for connecting to databases.
10springboot packaging: project deployment, packaged into jar, war (351)
The Spring Boot project can be embedded with a Servlet container, so it is extremely convenient to deploy. It can be directly packaged into an executable Jar package and deployed on a server with a Java operating environment, or packaged into a War package and deployed to an external Tomcat server , etc.
11. Separation of front and rear ends
The core idea is that the front-end HTML page calls the back-end RESTful API through Ajax and interacts with JSON data. (354)
Hot deployment is to modify the code while the project is running without restarting the project. (282) 4
For the backend, the backend does not need to consider the layout of the frontend, but only needs to consider the correctness of the backend data, so the correctness of the JSON data returned in the backend test is inseparable from the Postman tool. (282)
Separation of front and rear ends:
Write the front-end code and back-end code of an application separately;
The front end only needs to write the client code independently, and the back end only needs to write the server code independently to provide the data interface;
The front-end accesses the data interface of the back-end through Ajax requests, and displays the Model in the View;
Front-end and front-end developers only need to agree on the interface documents (URL, parameters, data types...) in advance, and then develop independently. The front-end can fake data for testing without relying on the back-end at all, and finally complete the front-end and back-end integration That's it; the decoupling of the front-end and back-end applications is realized, which greatly improves the development efficiency;
Monomer: front-end application + back-end application, front-end writes HTML, requests back-end RESTful data interface through Ajax;
Front-end application: responsible for data display and user interaction;
Back-end application: responsible for providing data processing interface;
What are the problems if you don't use the method of separating the front and back ends?
In traditional Java Web development, the front-end is developed using JSP, and JSP is not independently completed by back-end developers;
Front-end development writes HTML static pages, and back-end development writes JSP. This development method is extremely inefficient;
Implementation technology: Spring Boot + Vue, use Spring Boot for back-end application development, use Vue for front-end application development
3. Short answer
1. The principle of hot deployment (283)
The deep principle is to use two ClassLoaders, one Classloader loads classes that will not change (third-party Jar packages), and the other ClassLoader loads classes that will change, called restart ClassLoader, so that when there is a code change, the original restart ClassLoader is discarded, and a restart ClassLoader is recreated. Since there are fewer classes to be loaded, a faster restart time is achieved.
2. vue routing (158)
SPA (single page application): A single page application with only one complete page; when it loads a page, it does not load the entire page, but only updates the content in a specified container. One of the cores of single-page application (SPA) is: update the view without re-requesting the page; vue-router provides two modes when implementing single-page front-end routing, and decides which way to use according to the mode parameter
3. What are the conditional rendering instructions, and what is the difference between them? ( 56)
v-if v-show
The difference between the essential methods: vue-show essentially sets the label display to none to control hiding; vue-if dynamically adds or deletes DOM elements to the DOM tree
Compilation difference: v-show is controlling css; v-if switching has a process of partial compilation/unloading, and the internal event listeners and sub-components are properly destroyed and rebuilt during the switching process.
Compilation conditions: v-show will be compiled, the initial value is false, but the display is set to none, but it is also compiled. If the initial value of v-if is set to false, it will not compile.
Performance: v-show can only be compiled once, and the latter is actually to control css, and v-if is constantly destroyed and created. If it needs to be used frequently, it is better to use v-show. If it is running, the conditions rarely change , it is better to use v-if.
4. Vue single item data flow (95-99)
One-way data flow: The update of the parent prop will flow down to the child component. Every time the parent component is updated, all the props in the child component will be refreshed to the latest value. The data is one-way, and the parent The data of the component is passed to the sub-component, which can only be bound in a single item, and the data of the parent component cannot be modified in the sub-component; Two-way data binding: data and pages are bound in two directions to affect each other.
5. Why do we need to add the key attribute when using v-for?
Because vue compares the old and new dom numbers when updating and rendering dom, use key to make a unique identification for each node,
6. The difference between vue's router-link and a
a tag: click the a tag to jump from the current page to another page, and the page will be reloaded, which is equivalent to opening a web page
router-link: will not jump to a new page, will not re-render, unlike the a tag that needs to be re-rendered, reducing the loss of DOM performance
7. How to pass parameters between Vue parent and child components?
Passing values from parent component to child component:
1) The child component creates a property in props to receive the value passed from the parent component;
2) Register the child component in the parent component;
3) Add the properties created in the subcomponent props to the subcomponent tag;
4) Assign the value that needs to be passed to the child component to the property
Child components pass values to parent components:
1) A custom event needs to be triggered in a certain way (such as a click event) in the subcomponent;
2) Use the value to be passed as the second parameter of $emit, and this value will be passed as an actual parameter to the method of responding to the event;
3) Register the child component in the parent component and bind the custom event listener on the child component label.
Four, vue classic case
1. Horse lantern
<body>
<div id='app'>
<button @click="start">浪起来</button>
<button @click="stop">低调</button>
<h3>{
{title}}</h3>
</div>
</body>
<script>
const vm = new Vue({
el:"#app",
data:{
title:"不要浪，别团",
Interva: null
},
methods: {
start(){
clearInterval(this.Interva)
console.log(this.title.substr(0,1));
console.log(this.title.substring(0, 1));
this.Interva = setInterval(()=>{
this.title = this.title.substr(1) + this.title.substring(0,1);
},300)
},
stop(){
clearInterval(this.Interva);
}
}
})
</script>2. Simple calculator
<body>
<div id="app">
<input type="text" v-model='num1'>
<select v-model='opration'>
<option value="+">+</option>
<option value="-" selected>-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="num2">
<button @click="calc">=</button>
<span style="background-color: aqua;">{
{sum}}</span>
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
num1: 0,
opration: "-",
num2: 0,
sum: 0
},
methods: {
calc() {
this.num1 = Number(this.num1);
switch (this.opration) {
case "+":
this.sum = this.num1 + this.num2;
break;
case "-":
this.sum = this.num1 - this.num2;
break;
case "*":
this.sum = this.num1 * this.num2;
break;
case "/":
this.sum = this.num1 / this.num2;
break; }
} }
})
</script>3. Render the following data in a loop and display the name of the data. Click this -- line to alert the name of the data. There is a search box at the top, and a search button at the back. Click the search button to retrieve the list according to the input content.
<div id="app">
{
{title}}
<ul>
<!-- i为索引 item为内容 -->
<input type="text" v-model="item1">
<button @click="search">检索</button>
<li v-for="(item,i) in list" @click="show(item.name)" v-show="flag">id：{
{item.id}} ----值：{
{item.name}}</li>
</ul>
<ul>
<li v-for="(item,i) in list1">id：{
{item.id}} ----值：{
{item.name}} </li>
</ul>
</div>
</body>
<script>
const vm = new Vue({
el: "#app",
data: {
list: [{ id: 3, name: "张三丰" },
{ id: 5, name: "张⽆忌" },
{ id: 13, name: "杨逍" },
{ id: 33, name: "殷天正" },
{ id: 12, name: "赵敏" },
{ id: 97, name: "周芷若" }],
list1: [],
item1: null,
flag:true
},
methods: {
show(name) {
alert(name);
},
search() {
this.list1 = this.list.filter(item => {
return item.name == this.item1;
})
if(this.list1.length==0){
this.flag = true;
}else{
this.flag = false; }
} }
})
</script>Open book, radio 20 (30 points), fill in the blank 26 (26 points), question and answer 3 (18 points), programming 1 (26 points)
Record the knowledge points in the summary after the open-book exam, which is not comprehensive.