What should you pay attention to when using vue.js

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.

(Learning video sharing: javascript video tutorial)

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 keys

When 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">

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

,

, are restricted by HTML, and only restricted tags are allowed. Custom component tags are invalid. At this time, you can use the is attribute to mount the component

<table>    
    <tbody is="my-component"></tbody>
</table>

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!