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.

We have shared the study notes of Vue (middle part) and Vue (first part) in the past few days. Today, let’s have a look at the next part.

2. Vue’s V-for loop

(1) V-for loop ordinary array

1. Define normal arrays in data;

data(){
return{
list: [1, 2, 3, 4, 5]
}
}
Copy the code

2. Render in HTML using the V-for command;

< p v - for = "(item, I) in the list" > index value is: {{I}} - the value of each item is: {{item}} < / p >Copy the code

3. The effect picture is as follows:

Array of V-for loop objects

1. Define object arrays in data;

data(){
return{
        list: [
  { id: 1, name: 'zhan1' },
  { id: 2, name: 'zhan2' },
  { id: 3, name: 'zhan3' },
  { id: 4, name: 'zhan4' }
]
}
}
Copy the code

2. Render in HTML using the V-for command:

< p v - for = "(user, I) in the list" > Id: {{. User Id}} - name: {{user. The name}} - index value is: {{I}} < / p >Copy the code

3. The effect picture is as follows:

(3) V-for loop object, in addition to the object’s key pair, val, key, in the third position index value.

1. Define an object in data;

Data (){return{user: {id: 1, name: 'zhan', gender: 'zhan'}}}Copy the code

2. Render in HTML using the V-for command:

< p v - for = "(val, key, I) in the user" > value is: {{val}} - the key is: {{key}} - index value is: {{I}} < / p >Copy the code

3. The effect picture is as follows:

V -for = 1 v-for = 1 v-for = 1 v-for = 1 v-for = 1 v-for = 1 v-for = 1

1. Render in HTML using the V-for command:

<p v-for="count in 5"> This is {{count}} for the first time </p>Copy the code

2. The effect picture is as follows:

(5) The use of key attribute in V-for loop

In the v-for loop, the value of the key must be specified by the V-bind attribute. In the v-for loop, the value of the key must be specified by the V-bind attribute. In the v-for loop, the value of the string/number type must be specified by the V-for attribute. The value of the key.

1. Define object arrays in data;

data(){
return{
        list: [
  { id: 1, name: 'zhan1' },
  { id: 2, name: 'zhan2' },
  { id: 3, name: 'zhan3' },
  { id: 4, name: 'zhan4' }
]
}
}
Copy the code

2. Render code in HTML with V-for instruction as shown below:

3. The effect picture is as follows:

Three, the basic use of Vue filter

1. Define a Vue global filter, named msgFormat, as the first argument to the string replace method. In addition to writing a string, you can define a re.

2. In js code, such as the following code:

Vue.filter('msgFormat', function (msg, arg, arg2) {
  return msg.replace(/day/g, arg + arg2)
})


Vue.filter('test', function (msg) {
  return msg + '========'
})
Copy the code

3. In HTML code, such as the following:

< p > {{MSG | msgFormat (' I ', '123') | test}} < / p >Copy the code

4. In data, define a MSG:

data(){
return{
msg:'the day is cloudless'
}
}
Copy the code

5. The effect picture is as follows:

Four,

1. Vue v-for loop has ordinary array, object array, object, iteration number, key attribute use, these usage details, hope to help you.

2. Vue filter the basic use of local filters prior to the global filter is called, an expression can use multiple filters, the filters need to be separated by pipeline operators “|”, between its execution order from left to right.

3. These codes are relatively simple, I hope to help you!