[TOC]

1.1.1 label operation v-text & v-html

v-text: the data value bound in data will be output as is.

v-html: output the value of data and parse the HTML code automatically

<! -- the specified content can be displayed in the label body -- >
< label v-text = "" > / label > <! -- display in [text] -- >
< tag v-html = "" > < tag > <! -- display in [HTML code] -- >

1.2.1 attribute binding: v-bind: XXX & v-bind: Class

• Common attribute: v-bind:xxx

<!--Complete writing-->
<Label v-bind:Attribute name=""></Label>

<!--Ellipsis, v-bind It can be omitted. -->
<Label :Attribute name=""></Label>

1.Display if necessary data Area data,direct writing. for example: url
2.Display normal string if necessary,Single quote required. for example: '?username=jack'
3.data The data and common strings of the region can be accessed through the+Connect

<template>
  <div>
      <a v-bind:href="url">School Official Website</a> <br/>
      <a :href="url">School Official Website(Ellipsis Edition)</a> <br/>
  </div>
</template>

<script>
export default {
    data() {
        return {
            url : 'http://www.czxy.com'
        }
    },
}
</script>

<style>

</style>

• class special

Mode 1: Character string,Must use single quotes
<Label v-bind:class="'Character string'"></Label>

//Method 2: object, key is class name; value is Boolean value, display or not. (object data can be in data area)
<Label v-bind:class="{'Character string':true,'Character string':false}"></Label>

//Mode 3: array, equivalent to the simplified version of method 2, all of which are true 
<Label v-bind:class="['Character string','Character string']"></Label>


//Step 3: bind the style to the div
<template>
  <div>
      <div v-bind:class="mc"></div>
      <div v-bind:class="{'myClass':true,'myClass2':false}">   </div>
      <div v-bind:class="['myClass','myClass2']"></div>
  </div>
</template>

<script>
export default {
    //Step 2: the data area provides a variable to store the corresponding style name
    data() {
        return {
            mc : 'myClass2'
        }
    },
}
</script>

<style>
//Step 1: write 2 styles
    .myClass {
        height: 10px;
        background-color: #f00;
    }
    .myClass2 {
        height: 10px;
        background-color: #0f0;
    }
</style>

• style attribute: v-bind:style

Method 1: object, key style name, value style value. 
	//Single quotes are required for key and value
	//key can be used without single quotation marks. You need to name the hump with - named attributes. For example, ABC DEF is written as abcDef
 < tag v-bind:style = "{'attribute name': 'attribute value', 'attribute name': 'attribute value'}" >

Mode 2: array, running binding multiple objects
 < tag v-bind:class = "[object name, object name 2]" >

<template>
<div> 
<div v-bind:style="{'background-color':'#f00',fontSize:'40px','text-align':align}"></div>
</div>
</template>

1.3.1 statement control

v-show Control whether the element is displayed
<Label v-show="true|false"></Label>

v-if control dom Element exists
	v-if/v-else-if/v-else

1.4.1 data binding

• Data bidirectional binding can be completed through v-model

<! -- data bi-directional binding
	data area - > DOM element
    _If the data in the data area changes, the data on the dom element will be changed automatically.
	dom element - > data area
    _If the data of dom element changes, the data stored in data will be changed automatically.
-->
< label v-model="data area attribute name" > < label >

************************************************************
<template>
  <div>
      <input type="text" v-model="username">  <br/>
      Input: {{username}}
  </div>
</template>

<script>
export default {
    data() {
        return {
            username : 'jack'
        }
    },
}
</script>

<style>

</style>

1.5.1 event binding

< tag v-on: event name = "function" > < tag >

< tag @ event name = "function" >

2. Case: user login

2.1 demand

1. Provide login form: user name and password
2. Click the submit button to send the user name and password to the server (jack and 1234)
3. If it is jack and 1234, the login is successful. Hide the login form and display the login user name "good morning, Mr. Chen"
4. If not, the login fails, and the error message "user name or password does not match" is displayed in the fixed position of the form.

2.2 development steps

1. Create vue file, write form, provide 3 elements (2 input s, 1 button)
2. The data area creates the user object and binds the data to the form element
3. Bind click event to button
4. Click the event ajax to send the login data, and process the response data through the server
   1. If successful, show user information, hide form
   2. If it fails, an error message is displayed

<template>
  <div>
    <form action v-show="isShow">
      //User name:
      <input type="text" v-model="user.username" />
      <br />Password:
      <input type="password" v-model="user.password" />
      <br />
      <span v-text="error"></span>
      <br/>
      <input type="button" value="Sign in" @click="login" />
    </form>

    <span v-show="!isShow">Good afternoon,Mr.Wang</span>
  </div>
</template>

<script>
const axios = require("axios");
axios.defaults.baseURL = "http://localhost:8080";
export default {
  data() {
    return {
      user: {
        username: "",
        password: ""
      },
      error: "",
      isShow: true
    };
  },
  methods: {
      login(){
         console.info(this.user);
         axios.post('/user/login',this.user)
         .then(res => {
             var msg = res.data;
             if(msg=='Login successfully'){
                this.isShow=false;
             }else{
                this.error=msg; 
             }
         })
         .catch(err => {
             console.error(err); 
         })
      }
  }
};
</script>

<style>
</style>

The summary of daily learning is mainly for the sake of future reading. Of course, if you have any good suggestions, please comment.