Shulou(Shulou.com)06/01 Report--

What are the knowledge points of this article "what are the methods of Vue monitoring?" most people do not understand, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "what are the methods of Vue monitoring?"

Vue is a progressive framework, bottom-up incremental development, is to build a data-driven web interface, it uses as simple as possible API to achieve response data binding and composite view components, compared with angularjs, it is compact, running fast data binding uses {{}}, compared with react provides component-based attempt components, all concentrated in the core library, there are rich plug-in libraries.

1. Commonly used label

V-model bidirectional association

V-else and v-else are used in tags similar to each other, and separation will affect the judgment of conditions.

V-for (a, b) in c traverses c, with parameter a for each object and b for index

V-text wants to inject text inside, and no more content is written inside the tag.

Tags can be injected inside V-html, but it is also a window for hackers to break through the network.

V-bind can dynamically bind the content, such as vripbindVRC = url, and write the path in the data part of the module below.

If you write the path directly, you will get an error.

Dynamic binding component: is= "name"

2. Monitoring

The first way of writing

Vm.$watch ('', function (newvalue, oldvalue) {})

The $watch written outside the vm=new vue is because it is called externally and becomes the global equivalent of $el.

The second way of writing

Directly in vue initialization through the

Written inside vue.

Watch {msg:function (newvalue,oldvalue) {}

3. Filter

(vue 1.0 has a built-in filter vue2.0 custom filter)

Filter is the filter syntax, written before vue

Vue.filter ('filter name', function (value) {

If (value) {

Return / / specific operation

}

If (value) {

Return / / specific operation

}

})

Call

{{value | filter name}}

4. Events prevent bubbling

1) inside the function, prevent the event from bubbling e.cancelBubbleBubble truth; / / declare that the event is to add the original words in the methods of vue

2) prevent events from bubbling in the tag @ click.stop= "show1 ()" / / add a stop, other normal write

3) get the keyboard coding keyCode in the keyboard event keydown function

4) bind the keystroke event directly within the tag (English name or keyboard code)

@ keyup.13= "functionname ()" @ keyup.enter= "functionname ()"

5. There are 11 life cycles.

Popular understanding is a process of loading failure such as a component. Compared to the beginning and end of life, these special time nodes are used as triggers of events, saving the amount of code that binds events.

The arrow function this indicates that the parent is not an instance, so the lifecycle cannot be bound.

Several commonly used ones

BeforeMount is called before the mount starts

Called after Mounted el is replaced by the newly created vm.$el and mounted to the instance

6. Transfer value

1) from father to son

(by binding a custom attribute instruction to the child component tag, the value is the passed data

The subcomponent is received internally through the props attribute name (in an array with quotation marks ["name"]), within the template of the subcomponent

Parse the received property name directly. )

Call

2) the son passes on the father

(by binding custom events to the subcomponent tag, data is pushed within the subcomponent through $emit

The parent component receives data through event call function parameters)

In the sub-component script

In the parent component body

The received data is assigned to the data in the method of the parent component

3) parallel components pass values (values are passed between non-parent and child components-empty vue object $emit ('', data) send $on to receive)

It can be seen as upgrading $emit to the overall situation.

The above is about the content of this article on "what are the methods of Vue snooping". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.