Content continues to be updated…
1. The advantages of vue
1. The lightweight
One significant advantage of using vue.js to develop production applications or personal projects is that it is a relatively lightweight framework/library. Let’s look at the download space for different front-end frameworks/libraries
2. Low complexity
After building many applications with React, once you add state management to the hybrid code base, the code base often gets very complex as the application gets bigger. I’ve noticed that one of the reasons React applications get complicated is that JSX templates, lifecycle methods, and other methods all exist in the same object. This often makes it very difficult to understand the logical flow, and Vue:
3. Virtual DOM
Just like React, vue.js implements the use of the virtual DOM to manipulate/render views. By using the virtual DOM, the user interface gets better performance by not rendering the real DOM every time it needs to change, but only showing some of the differences between the virtual DOM and the real DOM.
4. Low learning curve (beginner friendly)
Anyone working in Web development learns three basic technologies: HTML, CSS, and JavaScript. Imagine a beginner having to learn something new called JSX instead of HTML. While JSX looks similar to HTML, there are a number of differences that distinguish JSX from HTML, and this learning is not required for vue.js.
As shown above, vue.js uses the same tag name as HTML, which makes it easier to transfer knowledge from HTML to vue.js. In addition, the modular structure of the code helps to understand the different action parts of vue.js components.
For those familiar with React, learning vue.js is a piece of cake, as there are many similarities between the two.
2. Vue parent component passing data to child component?
Methods a
The parent transmits data by binding data in the parent component v-model and receiving data in the child component using props
Way 2
Method of parent component to trigger child component, mainly via $refs, and pass parameter
$refs.myChild.init (” CHRCHR “,”120″); $refs.myChild.init (” CHRCHR “,”120”);
3. Child components pass events like parent components
Emit events via $emit
Firing events in child components:
'< button@click ="toSearchProduct()"> </button> export default {'' methods: {' 'show: function () {` `console.log(this.name)` `},` `toSearchProduct: The function () {` ` enclosing $emit (' parentEvent ', 'ha ha mew: ahaha) ` `} ` `} ` ` `}Copy the code
The parent component:
`<x-test :name="username" @parentEvent="toClick"></x-test>` `export default {` `components: {` `XTest` `},` `methods: {' 'toClick: function (MSG){'' console.log(MSG) // when the child component fires the button, MSG gets the value ha-ha-ha ' '} ' '} ' '} ' ' '</script>'Copy the code
4. Similarities and differences between V-show and V-IF commands
1. Common ground: Both have control over how elements are shown and hidden.
2. Differences: The implementation of the essence of the method is different, the essence of v-show is to control the CSS display set to None, control hidden, will only compile once; V-if dynamically adds or removes DOM elements from the DOM tree. If the initial value is false, it will not compile. And v-if’s constant destruction and creation costs performance.
3. Conclusion: To frequently switch over a node, run v-show(the switching cost is low and the initial cost is high). Use V-if if a node does not need to be switched frequently (the initial rendering cost is low, the switching cost is high).
5. How do I make CSS work only in the current component
Write the current component as
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
- Matters needing attention
Due to theJavascript
The limit,Vue
The 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.