“This is the 9th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

First, basic knowledge review

1. When to use v-bind, V-model and V-html

The original way they are written and the simplified way they are written is v-bind, v-on listening, @ 2. Data and Methods When a VUE instance is created, it adds to the vUE’s responsive system all the properties it can find in its data object. When the values of these properties change, the view responds, that is, the match is updated to the new value. When these data change, the view is re-rendered. It is important to note that attributes present in data are reactive only when the instance is created. 5. V-bind dynamically binds the data in data, passing values to child components if it is a parent component, or displaying properties after colons if it is a normal label. 6. Use javascript expressions For all data binding, vue.js provides full javascript expression support.

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}
Copy the code

<div v-bind:id="'list-' + id"></div>
Copy the code

Second, the difference between calculating attribute caches and methods

(1) Calculation attributes of different writing methods:

<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p></div>var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: {// Calculate the getter reversedMessage for the property: Function () {// 'this' points to the vm instance return this.message.split('').reverse().join('')}}})Copy the code

Methods:

<p>Reversed message: "{{reversedMessage()}}"</p>// In the componentCopy the code

methods: {

  reversedMessage: function () {

    return this.message.split('').reverse().join('')

  }}
Copy the code

As you can see from the above code, you can calculate attributes by writing the variable name in double curly braces, and in computed, you need to put parentheses after the variable name to indicate that the method is invoked, and in methods. (2) Cache different calculated attributes are cached based on their dependencies, and will be re-evaluated only when the related dependencies change. This means that as long as the Message has not changed, multiple visits to the reversedMessage computed property will immediately return the previous computed result without having to execute the function again. By contrast, the calling method will always execute the function again whenever a rerender is triggered. Let’s say we have a computationally expensive property that needs to iterate over a huge array and do a lot of computations.

Evaluate setters for properties

By default, you only have getters for computed properties, but you can also provide a setter if needed:

computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] }}}Copy the code

When vm.fullName = ‘John Doe’ is now run again, the setter will be called and vm.firstName and vm.lastName will be updated accordingly.

4, class and style binding

Attribute binding is divided into two types, one is the inherent attribute of the tag, the other is the custom attribute. Properties bound to the former can be directly displayed in the tag, such as ID, class, etc., while the latter is usually used in custom components to pass values to parent and child components. Vue.js is specifically enhanced when v-bind is used for class and style. The result of an expression can be an object or an array in addition to a string. Note: this applies only to class and style, if any other attribute or string, except for the parent component.

The class binding

The first is the class binding string. The second is the class binding object, which has a class name as its property and a Boolean value. The third is a class bound array, in which the elements can be strings, ternary operations, variable names, and objects. If you write class classes on a component, those classes are added to the root element of the component. Classes that already exist on this element are not overwritten.

Style binding

The v-bind:style object syntax is straightforward and looks a lot like CSS, but is actually a javascript object. The first is the Style binding object, whose property is the style name and value is the style value. CSS attribute names can be named with either a camel or a dash delimited (need to be enclosed in single quotes) :

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
Copy the code

The second is the style bound array:

<div v-bind:style="[baseStyles, overridingStyles]"></div>
Copy the code

Note: When v-if is used with V-for, v-for has a higher priority than V-if. V – show does not support