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

Two development methods of Vue:

Vue core package development

Scenario: local module transformation
Vue core package & Vue plugin & engineering

Scenario: whole site development

3. What is a framework

The so-called framework: is a complete solution

give a chestnut

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

We only need to add function codes on the basis of the "rough room".

When it comes to frameworks, I 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 realizes most of the functions. We only need to code according to certain rules.

The figure below is a comparison of libraries and frameworks.

The characteristics of the framework: there is a set of rules or constraints that must be followed by developers

We learn the framework is to learn these rules official website

Summary: What is Vue?

What is Vue:

What is build UI:

What is progressive:

What is a frame:

3. Create a Vue instance

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

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

Core steps (4 steps):

Prepare the container
Citation package (official website) — development version/production version
Create a Vue instance new Vue()
Specify configuration items to render data
1. el: specify the mount point
2. data provides data

Summary: Which 4 steps need to be performed to create a Vue instance

4. Interpolation expression { {}}

Interpolation expressions are a Vue template syntax

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

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

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

The following cases are all expressions:

money + 100
money - 100
money * 10
money / 10 
price >= 100 ? 'Really expensive': 'Not bad'
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. Misuse

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, not statements, such as: if for ...
<p>{
  
  {if}}</p>

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

4. Summary

1. What is the function of the interpolation expression

2. What is grammar

3. Precautions for interpolation expressions

5. Responsive features

1. What is responsive?

A simple understanding is that the data changes, and the view responds to changes.

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

The data in data will eventually be added to the instance

① Access data: "Instance.Attribute name"

② Modify data: "Instance.Attribute name" = "Value"

3. Summary

What is responsive
How to access and modify the data in data

Six, Vue developer tool installation

Install via Google App Store (foreign website)
Minimalist plugin download (recommended) Minimalist plugin_Chrome extension store_Quality crx application download

installation steps:

After installation, you can see one more Vue debugging panel after F12

Seven, common instructions in Vue

Concept: Directives are special tag attributes provided by Vue with a v- prefix .

Why learn: Improve the efficiency of programmers in manipulating DOM.

The instructions in vue can be divided into the following 6 categories according to different purposes:

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

Instructions are the most basic, most 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. Commonly used content rendering instructions are as follows:

v-text (similar to innerText)

- Use the syntax: <p v-text="uname">hello</p>, which means to render 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)

- Use the syntax: <p v-html="intro">hello</p>, which means to render 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, the style of HTML tags can be presented.

Code demo:

 
  <div id="app">
    <h2>Personal information</h2>
    // Since the command is a special html attribute provided by vue, we can use it as an attribute when we write it
    <p v-text="uname">姓名：</p> 
    <p v-html="intro">Introduction:</p>
  </div> 

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

9. Conditional rendering instructions

Conditional judgment instructions are used to assist developers to control the display and hiding of DOM as needed. There are two conditional rendering instructions as follows:

v-show

Function: control element display and hide
Syntax: v-show = "expression" The expression value is true to display, false to hide
Principle: Switch display:none to control display and hide
Scene: Frequently switch to display hidden scenes

Sample code:

  <div id="app">
    <div class="box">I am the box controlled by v-show</div>
    <div class="box">I am the box controlled by v-if</div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      the: '#app',
      data: {
        flag: false
      }
    })
  </script>

v-else 和 v-else-if
1. Function: assist v-if to judge rendering
2. Syntax: v-else v-else-if="expression"
3. Need to be followed by v-if

Sample code:

  <div id="app">
    <p>Gender: ♂ Male</p>
    <p>Gender: ♀ Female</p>
    <hr>
    <p>Grade A: Reward a computer</p>
    <p>Grade B: Incentive weekend outing</p>
    <p>Grade C: Reward snack pack</p>
    <p>Grade D: Punishment for not playing mobile phones for a week</p>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>

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

10. Event binding instructions

When using Vue, if you need to register events for DOM, the syntax is as follows:

<button v-on:event name="inline statement">button</button>
<button v-on:event name="handling function">button</button>
<button v-on: event name="handling function (actual parameter)">button</button>
v-on:Abbreviated as @

inline statement

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

event handler

Notice:
- The event handling function should be written in a configuration item (methods) at the same level as data
- The this inside the function in methods all points to the Vue instance

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

3. Pass parameters to the event handler function

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

If parameters are passed, the actual parameter $eventrepresents 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="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      the: '#app',
      data: {
        money: 100
      }
    })
  </script>

11. Attribute Binding Instructions

Function: dynamically set the tag attributes of html such as: src, url, title
Syntax : v-bind: property name="expression"
v-bind: can be abbreviated as => :

For example, if there is a picture, its srcattribute value is a picture address. This address is stored in data data.

Then you can set the attribute value like this:

<img v-bind:src="url" />
<img :src="url" />(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="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      the: '#app',
      data: {
        imgUrl: './imgs/10-02.png',
        msg: 'hello Bobby'
      }
    })
  </script>

12. Small case - Bozai's learning journey

Requirement: The first picture in the array is displayed by default, click the previous page and the next page to switch back and forth between the pictures in the array

Implementation idea:

1. Array storage image path ['url1', 'url2', 'url3',...]

2. You can prepare a subscript index to fetch the image address in the array.

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

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

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

 <div id="app">
    <button>Previous</button>
    <div>
      <img src alt="">
    </div>
    <button>Next</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      the: '#app',
      data: {
        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>

Thirteen, list rendering instructions

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

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

item is each item in the array
index is the index of each item, it can be omitted if not needed
arr is the array to be traversed

This syntax can also iterate over objects and numbers

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

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

14. Small Case - Xiao Hei's Bookshelf

need:

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

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

Prepare code:

<div id="app">
    <h3>Xiaohei's bookshelf</h3>
    <ul>
      <li>
        <span>"A Dream of Red Mansions"</span>
        <span>Cao Xueqin</span>
        <button>Delete</button>
      </li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      the: '#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>

Fifteen, the key in v-for

Syntax: key="unique value"

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

Why add key: Vue's default behavior will try to modify elements in place ( in-place multiplexing )

Example code:

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

Notice:

The value of key can only be a string or a number
The value of key must be unique
It is recommended to use id as the key (unique), and it is not recommended to use index as the key (it will change and does not correspond)

Sixteen, two-way binding instructions

The so-called two-way binding is:

After the data changes, the rendered page results will be updated
When the page results are updated, the data will change accordingly

Function: For form elements (input, radio, select), two-way binding data, you can quickly get or set the content of form elements

Syntax: v-model="variable"

Requirements: Use two-way binding to achieve the following requirements

Click the login button to get the content in the form
Click the reset button to clear the contents of the form

<div id="app">
    Account: <input type="text"> <br><br>
    密码：<input type="password"> <br><br>
    <button>Login</button>
    <button>Reset</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      the: '#app',
      data: {
        username: '',
        password: ''
      },
    })
  </script>

17. Comprehensive Case - Xiaohei Notepad

Functional Requirements:

list rendering
delete function
Add function
Bottom count and clear

[Vue] day01-Vue Basics Introduction

day01

1. Why learn Vue

2. What is Vue

1. What is Building a User Interface

2. What is progressive