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

This article introduces the knowledge of "what is the method of Vue data and event binding and filter filter". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Vue data binding unidirectional binding

After you bind Model to View, when you update Model with JavaScript code, View updates automatically. (model-- > view)

The implementation process of one-way binding is:

Only one copy of all the data is kept.

Once the data changes, update the page (only data-- > DOM, no DOM-- > data)

If the user makes an update on the page, it will collect it manually (bi-directional binding automatic collection) and merge it into the original data.

Application of one-way binding:

(1) interpolation binding: it is the basic form of data binding and is implemented in {{}}.

(2) v-bind binding: if some attributes of HTML can support one-way binding, as long as the attribute is preceded by a v-bind instruction, Vue will recognize the instruction when parsing and bind the attribute value to the Model of the Vue instance.

The attribute can then be manipulated dynamically through Model to achieve linkage updates of DOM.

For example:

New Vue ({el:'#app', data: {src:'../images/8.png.jpeg', / / after modifying the Model, the view also changes the title:' butterfly'}) two-way binding

The core function of Vue framework is bidirectional data binding.

Bi-directional binding: bind Model to View and View to Model at the same time, so you can update View automatically by updating Model, and update Model data by updating View.

Elements that can achieve two-way data binding-form elements (input, textarea, select, etc.), are bound using v-model instructions.

Content replication method: equivalent to shallow copy

For example:

{{message}} var vm=new Vue ({el:'#app', data: {bidirectional binding of message:' data'}})

Model affects view: data data message has changed, content in div has changed

View affects the model: the content of the input input box changes, and so does the message in data, so does the content in h3.

Value binding

V-model is used to synchronize data between View and Model.

But sometimes you need to control the timing of synchronization, or convert the data to the Number type before synchronizing to Model-- adding decorated instructions to the form control where the v-model instruction is located.

Modifier:

.lazy (lazy load) modifier

{{msg}}

New Vue ({el:'#app', data: {msg:' lazy load'}})

.number modifier

.trim modifier

For example:

Type of num: {{typeof (num)}}

New Vue ({el:'#app', data: {num:''}}) event binding

Bind events through the v-on directive.

Event handler

(1) method processor: you can use v-on instructions to listen for DOM events. (bind directly to a method)

(2) inline statement processor: in addition to directly binding to a method, you can also use inline JavaScript statements

Say Hi / / inline statement processor Say What / / access native DOM event new Vue ({el:'# example', methods: {say: function (msg) {alert (msg)} / / say: function (msg) Event) {/ / event.preventDefault () / /})

Note: what does not have parentheses is the function name; what has parentheses is actually a JS statement called an inline processor.

Event modifier

.stop-stop bubbling

.default-blocks the default event

.capture-add event listeners using capture mode

.self-listens only for events that trigger this element

.once-triggered only once

For example:

... Key modifier

.enter-enter event

.left-left button event

.right-right right event

.middle-Intermediate wheel event

For example:

Class binds with style binds class

You can pass an object or array to v-bind:class and change the style through the v-on binding event.

Bind inline style

Pass an object or array to v-bind:style.

Grapefruit data: {fontColor: 'white', mySize:' 30px'} Xi'an University of posts and Telecommunications data: {baseStyles: {'color':' red'}, vueStyles: {'font-size':'35px'}} filter filter

1. In Vue.js, filters are mainly used to:

Text formatting

Date formatting

Filtering of array data

2. Location to be used:

(1) interpolation expression: ({expression | filter})

{{message | filterA}}

(2) v-bind: attribute | filter

3. Usage: pipe character (|)

4. Essence: essence is a function

5. Classification:

(1) Global filter

Vue.filter ('filter name', function () {filter function}) Vue.filter ('filterA',function (value) {return value+'Hello'}) new Vue ({})

(2) Local filter: defined through the filter option in the Vue instance

New Vue ({el:'#id', / / filters {/ / filter name: function (parameter) {/ / filtering function / /} /} filters: {/ / Local filter You can only use filterA:function (value) {return value+'Hello'} in the div bound to the current vue instance)

(3) Series connection of filters

{{message | filterA | filterB}}

Message as a parameter-- > filter function filterA-- > filter filterB

Or:

{{message | filterA ('arg1', arg2)}}

FilterA is defined as a filter function that takes three parameters. Where the value of message is the first parameter, the value of 'arg1' is the second parameter, and the value of arg2 is the third parameter.

For example:

{{'2022' | filterA | filterB}}

New Vue ({el:'#app', filters: {filterA:function (value) {return value+' is'}, filterB:function (value) {return value+' composing'})

This is the end of "what are the methods of Vue data and event binding and filter filter". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.