The front end of Xiaogao's not quite walking – Vue

preface

In this chapter, we will learn Vue's template syntax, Vue's conditional statements, and Vue's circular statements.
What you need to know before reading this tutorial:

HTML
CSS
JavaScript

This tutorial mainly introduces vue3 Use of version X.

1, Vue template syntax

(1) Interpolation

text
The most common form of data binding is text interpolation using {{...}} (double braces):

  <div id="app">
  <p>{{ message }}</p>
</div>
<font color=#999AAA >

The content of the {{...}} tag will be replaced with the value of the message attribute in the corresponding component instance. If the value of the message attribute changes, the content of the {{...}} tag will also be updated. If you do not want to change the content of the label, you can perform one-time interpolation by using the v-once instruction. When the data changes, the content at the interpolation will not be updated.

This will not change: {message}}</span>

Html
Use the v-html instruction to output HTML code:

<div id="example1" class="demo">
    <p>Text interpolation using double braces: {{ rawHtml }}</p>
    <p>use v-html instructions: <span v-html="rawHtml"></span></p>
</div>
 
<script>
const RenderHtmlApp = {
  data() {
    return {
      rawHtml: '<span style="color: red">Red will be displayed here!</span>'
    }
  }
}
 
Vue.createApp(RenderHtmlApp).mount('#example1')
</script>

attribute
The value in the HTML attribute should use the v-bind instruction

<div v-bind:id="dynamicId"></div>

For Boolean attributes, the general value is true or false. If the attribute value is null or undefined, the attribute will not be displayed

< button v-bind: Disabled = "isbuttondisabled" > button, < / button >

2, Vue conditional statement

(1) v-if

** **

The condition judgment uses the v-if instruction, which will be displayed only when the expression of the instruction returns true:
Use the v-if instruction in the element:

<div id="app">
    <p v-if="seen">Now you see me</p>
</div>
    
<script>
const app = {
  data() {
    return {
      seen: true /* If it is changed to false, the information cannot be displayed */
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

(2) v-else

You can use the v-else instruction to add an "else" block to v-if:

v-else instruction
Randomly generate a number, judge whether it is greater than 0.5, and then output the corresponding information:

<div id="app">
    <div v-if="Math.random() > 0.5">
      Random number greater than 0.5
    </div>
    <div v-else>
      Random number less than or equal to 0.5
    </div>
</div>
    
<script>
Vue.createApp(app).mount('#app')
</script>

(3) v-else-if

v-else-if is the else if block of v-if, which can be used multiple times in a chain:
v-else instruction
Judge the value of type variable:

<div id="app">
    <div v-if="type === 'A'">
         A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
const app = {
  data() {
    return {
      type: "C" 
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

3, Vue loop statement

(1) v-for iteration object

v-for can iterate data through the attributes of an object:

v-for

<div id="app">
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
</div>
 
<script>
const app = {
  data() {
    return {
      object: {
        name: 'Rookie tutorial',
        url: 'http://www.runoob.com',
        slogan: 'Learning is not only technology, but also a dream!'
      }
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

(2) v-for iterative integer

v-for can also loop integers * * v-for**

<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">

summary

Vue.js (pronunciation) / vju ː/, Similar to view), it is a progressive framework for building user interfaces.

Vue only focuses on layers and adopts the design of bottom-up incremental development.

Vue's goal is to achieve responsive data binding and combined view components through as simple an API as possible.