Dark horse Vue-D1 – interpolation expression {{}}, Vue developer tool installation, various instructions, etc.

day01

1. Why should you learn Vue

1. Essential front-end skills

2. There are many jobs, and most Internet companies are using Vue.

3. Improve development efficiency

4. Essential skills for high salary (Vue2 + Vue3)

2. What is Vue

Concept: Vue (pronounced /vju?/, similar to view) is a progressive framework for building user interfaces **

Vue2 official website: https://v2.cn.vuejs.org/

1. What is building a user interface

Render an interface that users can see based on data

2. What is progressive

The so-called progressive approach means step by step. You don’t have to learn all the APIs in Vue to develop Vue. You can learn a little and develop a little.

Two development methods of Vue:

1. Vue core package development

   Scenario: Local module transformation

2. Vue core package & Vue plug-in & engineering

   Scenario: Whole site development

3. What is a framework

The so-called framework: it is a complete set of solutions

Give me a chestnut

If a complete project is compared to a renovated house, then the framework is a rough house.

We only need to add functional codes on the basis of the “rough house”.

When it comes to frameworks, we have to mention libraries.

• A library, similar to a toolbox, is a collection of methods, such as axios, lodash, echarts, etc.
• The framework is a complete solution that implements most of the functions. We only need to code according to certain rules.

The picture below is a comparison of libraries and frameworks.

Features of the framework: There is a set of rules or constraints that developers must abide by.

Our learning framework is the rules we learn. Official website

Summary: What is Vue?

What is Vue:

What is building a user interface:

What is progressive:

What is a framework:

3. Create a Vue instance

We already know that the Vue framework can help us render the user interface based on data, so what should we do?

For example, for the above data, how can we render the data that can be displayed on the right side based on the provided msg?

Core steps (4 steps):

1. Prepare container
2. Yinbao (official website) – development version/production version
3. Create a Vue instance new Vue()
4. Specify configuration items and render data
   1. el:Specify the mount point
   2. data provides data

Summary: What are the 4 steps required to create a Vue instance

4. Interpolation expression {{}}

Interpolation expression is a template syntax of Vue

We can use interpolation expressions to render the data provided by Vue

1. Function: Use expressions to interpolate and render them into the page

Expression: It is a code that can be evaluated, and the JS engine will calculate a result

The following situations are all expressions:

money + 100
money-100
money*10
money/10
price >= 100 ? 'Really expensive':'Alright'
obj.name
arr[0]
fn()
obj.fn()

2. Grammar

Interpolation expression syntax: {{ expression }}

<h3>{<!-- -->{<!-- -->title}}<h3>

<p>{<!-- -->{<!-- -->nickName.toUpperCase()}}</p>

<p>{<!-- -->{<!-- -->age >= 18 ? 'Adult':'Minor'}}</p>

<p>{<!-- -->{<!-- -->obj.name}}</p>

<p>{<!-- -->{<!-- -->fn()}}</p>

3. Wrong usage

1. The data used in the interpolation expression must be provided in data
<p>{<!-- -->{<!-- -->hobby}}</p> //If it does not exist in data, an error will be reported.

2. Expressions are supported instead of statements, such as: if for...
<p>{<!-- -->{<!-- -->if}}</p>

3. {<!-- -->{<!-- --> }} interpolation cannot be used in label attributes (interpolation expressions can only be used in the middle of labels)
<p title="{<!-- -->{username}}">I am a P tag</p>

4. Summary

1. What is the function of interpolation expression?

2. What is syntax?

3. Notes on interpolation expressions

5. Responsive features

1. What is responsiveness?

? A simple understanding is that the data changes and the view changes accordingly.

2. How to access and modify data in data (responsive demonstration)

The data in data will eventually be added to the instance

① Access data: “Instance.Attribute name”

② Modify data: “Instance.Attribute name” = “Value”

3. Summary

1. What is responsive
2. How to access and modify the data in data

6. Installation of Vue developer tools

1. Install through Google Play Store (foreign website)
2. Minimalist plug-in download (recommended) https://chrome.zzzmh.cn/index

installation steps:

After installation, you can see an additional Vue debugging panel after F12.

7. Common instructions in Vue

Concept: Directives are special tagsattributes provided by Vue with v- prefix.

Why you should learn it: To improve programmers’ efficiency in manipulating DOM.

Instructions in vue can be divided into the following 6 categories according to different uses:

• Content rendering instructions (v-html, v-text)
• Conditional rendering instructions (v-show, v-if, v-else, v-else-if)
• Event binding instructions (v-on)
• Attribute binding directive (v-bind)
• Two-way binding instructions (v-model)
• List rendering instructions (v-for)

Instructions are the most basic, commonly used, and simplest knowledge points in vue development.

8. Content rendering instructions

Content rendering instructions are used to assist developers in rendering the text content of DOM elements. There are two commonly used content rendering instructions:

• v-text (similar to innerText)

• • Usage syntax:

    hello

    , which means rendering the uame value into the p tag

  • Similar to innerText, using this syntax will overwrite the original content of the p tag.

• v-html (similar to innerHTML)

• • Usage syntax:

    hello

    , which means rendering the intro value into the p tag

  • Similar to innerHTML, using this syntax will overwrite the original content of the p tag.
  • Similar to innerHTML, using this syntax can render the style of HTML tags.

Code demo:

  <div id="app">
    <h2>Personal information</h2>
// Since the directive is a special HTML attribute provided by Vue, we can use it as an attribute when writing.
    <p v-text="uname">Name:</p>
    <p v-html="intro">Introduction:</p>
  </div>

<script>
        const app = new Vue({<!-- -->
            el:'#app',
            data:{<!-- -->
                uname:'Zhang San',
                intro:'<h2>This is a<strong>very good</strong> boy<h2>'
            }
        })
</script>

9. Conditional rendering instructions

Conditional judgment instructions are used to assist developers in controlling the display and hiding of DOM as needed. There are two conditional rendering instructions, namely:

1. v-show

   1. Function: Control the display and hiding of elements
   2. Syntax: v-show = “expression” The expression value is true to display, false to hide
   3. Principle: Switch display:none to control display and hiding
   4. Scene: frequently switch to show hidden scenes

   

2. v-if

   1. Function: Control the display and hiding of elements (conditional rendering)
   2. Syntax: v-if= “expression” The expression value true is displayed, false is hidden
   3. Principle: Based on conditional judgment, whether to create or remove element nodes
   4. Scene: Either show or hide, scenes that are not frequently switched

   

   Sample code:

    <div id="app">
       <div class="box">I am a box controlled by v-show</div>
       <div class="box">I am a box controlled by v-if</div>
     </div>
   
     <script src="//i2.wp.com/cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
     <script>
       const app = new Vue({<!-- -->
         el: '#app',
         data: {<!-- -->
           flag: false
         }
       })
     </script>
   

3. v-else and v-else-if

   1. Function: Assist v-if to judge rendering
   2. Syntax: v-else v-else-if=”expression”
   3. Need to be used immediately after v-if

Sample code:

 <div id="app">
    <p>Gender: ♂ male</p>
    <p>Gender: ♀Female</p>
    
    <p>Grade A: Award a computer</p>
    <p>Grade B: Bonus weekend outing</p>
    <p>Grade C: Reward snack gift pack</p>
    <p>Grade D: Punishment: not allowed to use mobile phone for one week</p>
  </div>
  
  <script src="//i2.wp.com/cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>

    const app = new Vue({<!-- -->
      el: '#app',
      data: {<!-- -->
        gender: 2,
        score: 95
      }
    })
  </script>

10. Event binding instructions

When using Vue, if you need to register events for the DOM, it is extremely simple. The syntax is as follows:

• button
• Button
• Button
• v-on: is abbreviated as @

1. inline statement

   <div id="app">
       <button @click="count--">-</button>
       <span>{<!-- -->{<!-- --> count }}</span>
       <button v-on:click="count + + "> + </button>
     </div>
     <script src="//i2.wp.com/cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
     <script>
       const app = new Vue({<!-- -->
         el: '#app',
         data: {<!-- -->
           count: 100
         }
       })
     </script>
   

2. event handler

   Notice:

   • The event handling function should be written in a configuration item (methods) at the same level as data
   • This inside the functions in methods all points to the Vue instance

<div id="app">
    <button>Toggle display and hide</button>
    <h1 v-show="isShow">Dark Horse Programmer</h1>
  </div>
  <script src="//i2.wp.com/cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({<!-- -->
      el: '#app',
      data: {<!-- -->
        isShow: true
      }
    })
  </script>

3. Pass parameters to the event processing function

• If no parameters are passed, the method does not need parentheses; e can be used directly as the event object in the methods method.

• If parameters are passed, the actual parameter $event represents the event object, fixed usage.

 <style>
    .box {<!-- -->
      border: 3px solid #000000;
      border-radius: 10px;
      padding: 20px;
      margin: 20px;
      width: 200px;
    }
    h3 {<!-- -->
      margin: 10px 0 20px 0;
    }
    p {<!-- -->
      margin: 20px;
    }
  </style>

 <div id="app">
    <div class="box">
      <h3>Xiaohei vending machine</h3>
      <button>Coke 5 yuan</button>
      <button>Coffee 10 yuan</button>
      <button>Milk 8 yuan</button>
    </div>
    <p>Bank card balance: {<!-- -->{<!-- --> money }} yuan</p>
  </div>

  <script src="//i2.wp.com/cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({<!-- -->
      el: '#app',
      data: {<!-- -->
        money: 100
      }
    })
  </script>

11. Attribute binding instructions

1. **Function:** Dynamically set the tag attributes of HTML, such as: src, url, title
2. Syntax: **v-bind:**Attribute name=”expression”
3. **v-bind:** can be abbreviated as => :

For example, there is an image, and its src attribute value is an image address. This address is stored in data data.

Then you can set the attribute value like this:

• (v-bind can be omitted)

 <div id="app">
    <img v-bind:src="imgUrl" v-bind:title="msg" alt="">
    <img :src="imgUrl" :title="msg" alt="">
  </div>
  <script src="//i2.wp.com/cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({<!-- -->
      el: '#app',
      data: {<!-- -->
        imgUrl: './imgs/10-02.png',
        msg: 'hello Bo Zai'
      }
    })
  </script>

12. Small Case – Bo Zai’s Learning Journey

Requirements: The first picture in the array is displayed by default. Click on the previous page and next page to switch back and forth between the pictures in the array.

Implementation ideas:

1. Array stores image path [url1’, url2’, url3’,…]

2. You can prepare a subscript index to get the image address from the array.

3. Bind the current image address to src through v-bind

4. Click on the previous page and next page and you only need to modify the subscript value.

5. When showing the first picture, the previous page button should be hidden. When showing the last picture, the next page button should be hidden

 <div id="app">
    <button v-show="index > 0" @click="index + + ">Previous page</button>
    <div>
      <img :src="list[index]" alt="">
    </div>
    <button @click="index--">Next page</button>
  </div>
  <script src="//i2.wp.com/cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({<!-- -->
      el: '#app',
      data: {<!-- -->
          index: 0,
        list: [
          './imgs/11-00.gif',
          './imgs/11-01.gif',
          './imgs/11-02.gif',
          './imgs/11-03.gif',
          './imgs/11-04.png',
          './imgs/11-05.png',
        ]
      }
    })
  </script>

13. List rendering instructions

Vue provides the v-for list rendering instruction to assist developers in looping and rendering a list structure based on an array.

The v-for directive requires special syntax of the form (item, index) in arr, where:

• item is each item in the array
• index is the index of each item and can be omitted if not needed
• arr is the array being traversed

This syntax can also iterate over objects and numbers

//Traverse the object
<div v-for="(value, key, index) in object">{<!-- -->{<!-- -->value}}</div>
value: the value in the object
key: key in the object
index: The traversal index starts from 0

//Iterate through numbers
<p v-for="item in 10">{<!-- -->{<!-- -->item}}</p>
item starts from 1

Fourteen. Small Case-Xiao Hei’s Bookshelf

need:

1. Render the right list based on the data on the left (v-for)

2. When clicking the delete button, the current row should be deleted from the list (get the ID of the current row and use filter to filter)

Prepare the code:

<div id="app">
    <h3>Xiao Hei’s Bookshelf</h3>
    <ul>
      <li>
        <span>"A Dream of Red Mansions"</span>
        <span>Cao Xueqin</span>
        <button>Delete</button>
      </li>
    </ul>
  </div>
  <script src="//i2.wp.com/cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({<!-- -->
      el: '#app',
      data: {<!-- -->
        booksList: [
          {<!-- --> id: 1, name: 'A Dream of Red Mansions', author: 'Cao Xueqin' },
          {<!-- --> id: 2, name: 'Journey to the West', author: 'Wu Chengen' },
          {<!-- --> id: 3, name: '"Water Margin"', author: 'Shi Naian' },
          {<!-- --> id: 4, name: '"The Romance of the Three Kingdoms"', author: 'Luo Guanzhong' }
        ]
      }
    })
  </script>

15. Key in v-for

Syntax: key=”unique value”

Function: A unique identifier added to the list item. It is convenient for Vue to correctly sort and reuse list items.

<ul>
  <li v-for="(item, index) in booksList" :key="item.id">
    <span>{<!-- -->{<!-- --> item.name }}</span>
    <span>{<!-- -->{<!-- --> item.author }}</span>
    <button @click="del(item.id)">Delete</button>
  </li>
</ul>

<div id="app">
    Account:<input type="text"><br><br>
    Password: <input type="password"><br><br>
    <button>Login</button>
    <button>Reset</button>
  </div>
  <script src="//i2.wp.com/cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({<!-- -->
      el: '#app',
      data: {<!-- -->
        username: '',
        password: ''
      },
    })
  </script>

<div id="app">
    Account:<input type="text"><br><br>
    Password: <input type="password"><br><br>
    <button>Login</button>
    <button>Reset</button>
  </div>
  <script src="//i2.wp.com/cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({<!-- -->
      el: '#app',
      data: {<!-- -->
        username: '',
        password: ''
      },
    })
  </script>