What is vue.js?

Vue is a set of progressive frameworks for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue’s core library focuses only on the view layer, making it easy to get started and integrate with third-party libraries or existing projects. On the other hand, when combined with modern toolchains and various supporting libraries, Vue is perfectly capable of providing drivers for complex, single-page applications. In the last article we covered the basics, which can be found here: Vue’s Study Notes (part 1). This article we continue to clarify ~

Use style classes in Vue

The first way is to pass an array, where the class needs to use v-bind’s data binding.

<h1 :class="['thin', 'italic']"> </h1>Copy the code

Second, use a ternary expression in an array.

: < h1 class = "[' thin 'and' italic, flag? 'active' : ']" > hello world2! </h1>Copy the code

The third way to use arrays is to use objects instead of ternary expressions to improve code readability.

: < h1 class = "[' thin 'and' italic, {' active ': flag}]" > hello world3! </h1>Copy the code

When you bind an object with V-bind for class, the attribute of the object is a class name. Since the attribute can be quoted or unquoted, the value of the attribute is an identifier.

: < h1 class = "classObj" > hello world! </h1>Copy the code

The CSS style code is shown below:

The js code is shown below:

The effect picture is as follows:

Vue styles are dynamically bound styles, and objects are collections that do not require key-value pairs.

The first use is to write key-value pairs of objects in data, direct dynamic binding;

<h1 :style="styleObj1">The first H!! </h1>Copy the code

The second way is to use multiple key-value pairs of objects, using arrays, written in sequence;

<h1 :style="[ styleObj1, styleObj2 ]">The first H1!! </h1>Copy the code

The js code is shown below:

The effect picture is as follows:

Use of v-if and V-show

** FEATURES of V-IF: ** Re-deletes or creates elements each time, which has a high switching performance cost.

** V-show features: ** Does not re-delete and re-create the DOM each time, just toggle the display: None style of the element, which has a high initial rendering cost.

Use of v-if and v-show:

Instead of using v-if if the element involves frequent switching, use V-show, or v-if if the element may never be displayed to be seen by the user.

1. In HTML code, such as the following:

<input type="button" value="toggle" @click="flag=! Flag "> <h3 v-if="flag"> This is the element controlled by v-if </h3> <h3 v-show="flag"> This is the element controlled by V-show </h3>Copy the code

2. Define a flag in data, as shown in the following code:

data(){
      return{
        flag: false,
  }
}
Copy the code

3. The effect picture is as follows:

Five, the summary

1. Using the style class in VUE, there are three ways to pass an array, a ternary expression in an array, using objects instead of ternary expressions, and using V-bind to bind objects for class, where the object property is a class name and the value of the property is an identifier.

2. Use style style in VUE, style dynamic binding style in VUE, object is not a collection of key-value pairs, there are two ways to write key-value pairs of objects in data directly dynamic binding, multiple key-value pairs of objects, using array, write in sequence.

3. Vue-show essentially means that the tag display is set to None, and the control is hidden. Vue-if dynamically adds or removes DOM elements to the DOM tree.

4 code is relatively simple, I hope to help you!

Learn more about Crawlers and data mining in Python at pdcfighting.com/