What should you pay attention to when using vue.js
王林
Release： 2021-01-07 17:31:59
Original
9696 people have browsed it
Things to note when using vue.js: 1. Filters are mainly used for simple text conversion; 2. The difference between computed and methods; 3. The use of keys; 4. The use of arrays; 5. The use of components ; 6. Component communication.
The environment of this article: windows10, vue2.9, Dell G3 computer.
You need to pay attention to the following issues when using vue.js:
1. Filters are mainly used for simple For text conversion, if you want to implement complex data transformation, you should use calculated attributes
2, use of instructions
v-bind is basically used for attributes on HTML elements , such as id, class, href, src, etc.
v-on is used to bind event listeners, such as click, dblclick, keyup, mousemove, etc. This in the method points to The current Vue instance
v-show cannot be used on template
##- v-if and v-show usage scenarios
v-if If the condition is false, the rendering element will not be compiled. v-show is just a simple CSS property switch, it will compile regardless of true/false. v-if is suitable for scenarios where conditions do not change frequently v-show is suitable for frequent switching conditions
3. The difference between computed and methods
methods are Parentheses (), computed without parentheses.
computed is based on its dependency cache, and will only be re-validated when the relevant dependencies change.
methods When re-rendering, the function will always be re-called and executed.
4. Use of keysWhen Vue renders elements, considering efficiency, existing elements will be reused as much as possible. At this time, you need to add the key attribute to the reused element
<input key="go">
Copy after login
5. The use of array
##filter(), concat(), slice() will not change The original array will return a new array
Replace the original array with the new array, without any performance impact. When Vue renders, it will try to reuse DOM elements
Some array changes cannot be detected by Vue, and the view will be updated
app.books[3]={}app .books.length=1 The above situations can be handled using Vue.set and app.books.splice(1) respectively
6. Use of components
, ,
At this time, you can use the is attribute to mount the component
When rendering, it will be replaced by the content of the component my-component
Note: However, when using a string template, it does not Restricted. Such as .vue file
7, component communication
parent->child prop
child->parent$ emit v-model
Related recommendations:
js tutorial
The above is the detailed content of What should you pay attention to when using vue.js. For more information, please follow other related articles on the PHP Chinese website!
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
