Vue basic review 01-(Vue introduction, Vue instruction)

Getting started with Vue

Vue introduction

(1) What is Vue?

Vue is a JavaScript framework

(2) What's Vue for?

Building user pages

(3) What are the characteristics of Vue?

Progressive

Vue has two important features

Two important features of vue framework?

Data driven: without dom operation, Vue will automatically render the page according to the data
Component development: elements (HTML+CSS) are reused to facilitate development and maintenance

Vue basic usage

(1) Three processes using vue framework

Guide Package Vue
Write HTML structure
Initialize Vue instance

(2) If the vue mount point el is not set, what will happen?

Data is not rendered

(3) What will happen if the data of vue is not set?

report errors

Introduction to Vue's mount point

(1) What is the mount point el function of Vue?

Tell Vue which box to render the data to

(2) What is the best selector for the mount point of Vue? Why?

id selector: because it is unique

(3) What label can't Vue's mount point el be set?

body and html

Introduction to Vue's interpolation expression

(1)Vue interpolation syntax?

{{property name}}

(2) What syntax does Vue support and what syntax does Vue not support?

Support: array value, object value, binary operation, ternary operation
Not supported: if branch and for loop

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 1.Guide Package Vue -->
  <script src="./vue.js"></script>
</head>

<body>
  <!-- 2.Write web page structure -->
  <div id="app">
    <div class="one">
      <!-- Variable value -->
      <p>{{name}}</p>
      <!-- Array value -->
      <p>{{hobby[2]}}</p>
      <!-- Object value -->
      <p>{{student.name}}</p>
      <!-- Binary operation -->
      <p>{{age + 1}}</p>
      <!-- Ternary operation expression?Code 1:Code 2 -->
      <p>{{age>=30?'Old Bacon':'little fresh meat'}}</p>
    </div>
  </div>

  <script>
    /* 3.Create Vue instance object */
    let app = new Vue({
      //  el(element): mount point Tell Vue which box to render
      el: '#app',
      // Data: data Vue data to render
      data: {
        name: 'Zhang San',
        age: 30,
        hobby: ['having dinner', 'sleep', 'play mahjong'],
        student: {
          name: 'Li Si',
          age: 18,
          hobby: ['having dinner', 'sleep', 'Play games']
        }
      },
    })
  </script>
</body>

</html>

Vue instruction

Instruction name	Directive function	Examples	Abbreviated form
v-text	Sets the innerText of the element	v-text="111"	nothing
v-html	Sets the innerHTML of the element	v-html="<p>111</p>"	nothing
v-on	Bind events to elements	v-on:click="doClick"	@click="doClick"
v-bind	Set the element's native properties	v-bind:src="./logo.png"	:src="./logo.png"
v-for	List rendering	<li v-for=(item,index) in list></li>	nothing

(1) Instruction is one of the core functions of vue framework. What is the function of instruction?

Add some functions to the label

(2) What is the essence of instruction?

Custom properties

v-text instruction

(1) What is the function of the v-text instruction?

Sets the innerText of the element

(2) What is the difference between the v-text instruction and the difference syntax {}}?

v-text: replacing the entire innerText will overwrite the original text
Interpolation {}: only the part of braces can be replaced, local replacement

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 1.Guide Package Vue -->
  <script src="./vue.js"></script>
</head>

<body>
  <!-- 2.Write web page structure -->
  <div id="app">
    <!-- instructions: Replace all text -->
    <p v-text="msg">I'm a dark horse</p>
    <!-- interpolation:Only part can be replaced(Inside braces)text -->
    <p>I'm a dark horse{{msg}}</p>
  </div>

  <script>

    /* 3.Create Vue instance object */
    let app = new Vue({
      //  el(element): mount point
      el: '#app',
      // Data: data
      data: {
        msg: 'Vue'
      },
    })
  </script>
</body>

</html>

v-html instruction

(1) What is the function of v-html specification?

Sets the innerHTML of the element

(2) What is the difference between the v-html instruction and the v-text instruction?

-text: label in string not recognized
v-html: can identify the tag in the string

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 1.Guide Package Vue -->
  <script src="./vue.js"></script>
</head>

<body>
  <!-- 2.Write web page structure -->
  <div id="app">
    <p v-text="msg1"></p>
    <p v-html="msg1"></p>
  </div>

  <script>

    /* 3.Create Vue instance object */
    let app = new Vue({
      //  el(element): mount point
      el: '#app',
      // Data: data
      data: {
        msg: 'Vue',
        msg1: 'hello, Vue!'
      },
    })
  </script>
</body>

</html>

v-on instruction (binding event)

Basic use of v-on instruction

(1) What is the function of the v-on instruction?

Bind events to elements

(2) How many ways can the v-on instruction be written?

two types
- Standard syntax v-on: event type = "event handler"
- Concise syntax @ event type = "event handler"

(3) What should I pay attention to when using the v-on instruction?

Type of event without on
The event handler function is written in the methods object of the Vue instance

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 1.Guide Package Vue -->
  <script src="./vue.js"></script>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <!-- 2.Write web page structure -->
  <div id="app">
    <!-- Standard grammar -->
    <div class="box" v-on:click="doClick"></div>
    <div class="box" v-on:mouseenter="doEnter" v-on:mouseleave="doLeave"></div>
    <!-- Abbreviated grammar -->
    <div class="box" @mouseenter="doEnter" @mouseleave="doLeave"></div>
  </div>

  <script>

    /* 3.Create Vue instance object */
    let app = new Vue({
      // Mount point (element): 1
      el: '#app',
      // 2. data: data
      data: {
        msg: 'Vue',
        msg1: 'hello, Vue!'
      },
      // 3. methods: event handling function
      methods: {
        doClick() {
          alert('I have a surprise')
        },
        doEnter() {
          console.log('I moved in')
        },
        doLeave() {
          console.log('I moved out')
        }
      },
    })
  </script>
</body>

</html>

vue event modifier

(1) How to bind the enter key event?

@Event type enter = "event handling method"

(2) How to prevent event bubbling?

@Event type stop = "event handling method"

(3) How do I prevent event default behavior?

@Event type prevent = "event handling method"

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 1.Guide Package Vue -->
  <script src="./vue.js"></script>
  <style>
    .son {
      width: 100px;
      height: 100px;
      background-color: red;
    }

    .father {
      width: 300px;
      height: 300px;
      background-color: blue;
    }
  </style>
</head>

<body>
  <!-- 2.Write web page structure -->
  <div id="app">
    <!-- Prevent bubble modifier -->
    <div class="father" @click="fatherClick">
      <div class="son" @click.stop="sonClick"></div>
    </div>
    <!-- Block default jump modifier -->
    <form action="http://www.baidu.com">
      <button @click.prevent="doClick">I have a surprise</button>
    </form>
    <!-- Monitor key modifier -->
    <input type="text" @keyup.enter="doSearch" placeholder="Press OK to search">
  </div>

  <script>

    /* 3.Create Vue instance object */
    let app = new Vue({
      // 1. el(element): mount point 
      el: '#app',
      // 2. data: data
      data: {
        msg: 'Vue',
        msg1: 'hello, Vue!'
      },
      // 3. methods: event handling function
      methods: {
        fatherClick() {
          console.log('I am the parent element')
        },
        sonClick() {
          console.log('I am a child element')
        },
        doClick() {
          console.log('Submitted successfully!')
        },
        doSearch(){
          console.log('Search succeeded!')
        }
      },
    })
  </script>
</body>

</html>

this in vue method

(1) In vue's event handling function methods, we may often use this keyword. Please say who the vue event handling function points to?

Vue instance object

(2) If the arrow function is used in vue's methods, who will this point to? Why?

window
Reason: the arrow function itself does not have this, so you can access the superior scope this

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 1.Guide Package Vue -->
  <script src="./vue.js"></script>
</head>

<body>
  <!-- 2.Write web page structure -->
  <div id="app">
    <p>Trade name:{{name}}</p>
    <p>Quantity of goods:{{count}}</p>
    <button @click="doAdd">+</button>
    <button @click="doMinus">-</button>
    <!-- <button @click="count++">+</button>
    <button @click="count--">-</button> -->
  </div>

  <script>
    /* 3.Create Vue instance object */
    let app = new Vue({
      // 1. el(element): mount point 
      el: '#app',
      // 2. data: data
      data: {
        name: 'iPhone 13',
        count: '233'
      },
      // 3. methods: event handling function
      methods: {
        doAdd() {
          console.log(this) // Vue
          console.log(this === app) // true
          this.count++
        },
        doMinus() {
          this.count--
        }
      },
    })
  </script>
</body>

</html>

vue event parameters

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 1.Guide Package Vue -->
  <script src="./vue.js"></script>
</head>

<body>
  <!-- 2.Write web page structure -->
  <div id="app">
    <p>Article title:{{news.title}}</p>
    <p v-text="news.title"></p>
    <button @click="doClick($event,news.id)">Click I delete</button>
  </div>

  <script>
    /* 
    1.Learning objectives: Vue event parameters
    2.Syntax = "event handling function name: @"
    3.Note: 
      3.1 If the event handler does not pass parameters, the default parameter is the event object
      3.2 If the event handler has parameters, the default event object will be overwritten
      3.3 If you get the parameter + event object at the same time, $event can be used
        @click="doClick($event,(custom parameters)“
     */
    /* 3.Create Vue instance object */
    let app = new Vue({
      // 1. el(element): mount point
      el: '#app',
      // 2. data: data
      data: {
        news: {
          title: 'shock!',
          id: 10
        }
      },
      // 3. methods: event handling function
      methods: {
        doClick(e, id) {
          console.log(e)
          console.log(id)
        }
      },
    })
  </script>
</body>

</html>

v-bind instruction (value of binding standard attribute)

(1) What is the function of the v-bind command?

Native attributes can also use Vue's data

(2)v-bind syntax?

Standard syntax: v-bind: native attribute name = "value"
Abbreviation syntax: native attribute name = "value"

(3) What should I pay attention to when using the v-bind instruction?

If the class name has -, you need to quote it

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 1.Guide Package Vue -->
  <script src="./vue.js"></script>
</head>

<body>
  <!-- 2.Write web page structure -->
  <div id="app">
    <!-- By default,Native properties are not supported Vue grammar
        You can also use native attributes if you want Vue Data,You can use it v-bind -->

    <!-- Standard grammar -->
    <img v-bind:src="imageSrc" alt="" v-bind:title="title">
    <!-- Abbreviated grammar -->
    <img :src="imageSrc" alt="" :title="title" aaa="title">
  </div>

  <script>

    /* 3.Create Vue instance object */
    let app = new Vue({
      // 1. el(element): mount point
      el: '#app',
      // 2. data: data
      data: {
        imageSrc: './images/logo.png',
        title: 'picture'
      },
    })
  </script>
</body>

</html>

v-for instruction (list rendering)

(1) Please state the function of the v-for instruction

Repeat render data based on array length

(2)v-for syntax?

v-for="(item,index) in array name"
v-for="(value,key,index) in object name"

(2) Please state the precautions when using the v-for instruction?

If v-for is written on that label, it will generate which label repeatedly

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- Guide Package -->
    <script src="./vue.js"></script>
    <style>
        .red {
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- HTML structure -->
    <div id="app">
        <ul>
            <li v-for="(item,index) in list" 
                @click="currentIndex = index" 
                :class="{red:currentIndex == index}">
                <span>subscript:{{index}}</span>
                <span>element:{{item}}</span>
            </li>
        </ul>
    </div>

    <script>

        /* Create vue instance */
        let app = new Vue({
            //el: mount point
            el: '#app',
            //Data: data to render
            data: {
                currentIndex: 0,
                list: [
                    'Xiao Ming',
                    'cockroach',
                    'floret',
                    'Xiao Kun',
                    'Xiao Hei'
                ],
            },
        })
    </script>
</body>

</html>

v-model instruction (bidirectional data binding)

(1) Bidirectional binding v-model function?

Bidirectional binding
- Modify the value of the form and the data will change automatically
- If you modify the data of data, the form value will also change

(2) Bi directional binding v-model application scenario?

Get / modify the value of the form

(3) Two way binding v-model points for attention?

Can only be used for form elements
The data bound by v-model must be declared in data

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- Guide Package -->
    <script src="./vue.js"></script>
    <style>
        span {
            font-size: 20px;
            color: red;
        }
    </style>
</head>

<body>

    <!-- HTML structure -->
    <div id="app">
        user name:<input type="text" placeholder="enter one user name" v-model="username">
        password:<input type="text" placeholder="Please input a password" v-model="password">
        <button @click="doLogin">Sign in</button>
    </div>

    <script>

        /* Create vue instance */
        let app = new Vue({
            //el: mount point
            el: '#app',
            //Data: data to render
            data: {
                username: '',
                password: ''
            },
            // methods: event handler
            methods: {
                doLogin() {
                    // 1. Obtain the account and password entered by the user
                    console.log(this.username, this.password)
                    // Set the value of the form. If the user name is less than 6, clear the user name
                    if (this.username.length < 6) {
                        this.username = ''
                    }
                }
            },
        })
    </script>
</body>

</html>

Keywords: Javascript Front-end Vue Vue.js

Added by The14thGOD on Sat, 12 Feb 2022 14:58:03 +0200

Programming VIP