Vue framework

What is the Vue

Vue is a progressive Js framework, mainly used for external Js files. By Yu Yuxi. **Vue website address :**cn.vuejs.org/

Write a HelloWorld using Vue

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello world Vue!</title>
</head>
<body>
<div id="my" style="text-align: center; color: burlywood; background-color: black">
{{text}}
</div>
</body>
<! - import the Vue. Js - >
<script type="text/javascript" src=".. /js/vue.min.js"></script>

<script type="text/javascript">
  new Vue({
    el:"#my".data: {"text":"hello world"}});</script>
</html>
Copy the code

Pay attention to

1. Generally, a Vue object corresponds to a mount point. The mount point is usually set using an ID.

2. Attributes in Vue objects are fixed values, such as EL, data, methods, etc., but attribute values are variable.

3. The mount point location in the Vue environment is actually the combination of HTML and JS code.

4.Vue generally uses two syntax bindings for data.

(1) Insert binding

Grammar:

{{}}
Copy the code

(2) Instruction binding

V-bind :value v-model:value /* and other instructions.. * /Copy the code

Unidirectional and bidirectional binding of Vue

One-way binding

Grammar:

(1) Standard grammar:

v-bind:value
Copy the code

(2) Shorthand syntax:

:value
Copy the code

Function: flows data from a Vue object to a mount point.

Application scenario: Bind the value attribute in the form.

Example:

<div id = "context">User name 1:<input type="text" name="userName" v-bind:value="un" value="sss"><br>User name 2:<input type="text" name="userName" :value="un" value="sss"><br>
</div>
Copy the code
var vm = new Vue({
    el:"#context".data: {"un":"zhangsan"}});Copy the code

Two-way binding

Grammar:

(1) Standard grammar:

v-model:value
Copy the code

(2) Shorthand syntax:

v-model
Copy the code

Function: flow data from the Vue object to the mount point, and reverse, flow data from the mount point to the Vue object.

Example:

<div id = "app">Email address 1:<input type="text" name = "email" v-model:value="email"><br>Email 2:<input type="text" name = "email" v-model="email"><br>Results: {{email}}</div>
Copy the code
new Vue({
    el:"#app".data: {"email":"[email protected]"}});Copy the code

V-bind vs. V-Model

V-model can only be used on form class tags (user input class elements) such as Input, SELECT, and so on.

Second way to specify the mount point (.$mount)

Write outside the parentheses

<! DOCTYPEhtml>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hello world Vue!</title>
</head>
<body>
<div id="my" style="text-align: center; color: burlywood; background-color: black">
{{text}}
</div>
</body>
<! - import the Vue. Js - >
<script type="text/javascript" src=".. /js/vue.min.js"></script>

<script type="text/javascript">
const app = new Vue({
 // el:"#my",//
 data: {"text":"hello world"}});// Set the mount point, second method
app.$mount('#my');
</script>
</html>
Copy the code

The $mount method is more flexible, such as specifying the data in the data instead of specifying the mount point immediately, but writing several lines of code before specifying the mount point, so it takes some time for data to be loaded to the mount point.

The second way to write data: functional

// Two ways to write data
		new Vue({
			el:'#my'.// The first way to write data: object
			/* data:{ text:"hello world" } */
 
			// The second way to write data: function
			data(){
				console.log(this) // This is the Vue instance object. If you use the arrow function this to point to the window code, you will get an error
				return{
					text:"hello world"}}});Copy the code

Binding style sheets

Grammar:

(1) Standard grammar

v-bind:class
Copy the code

(2) Shorthand syntax

:class
Copy the code

What it does: Dynamically binds style sheets

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .classA{
            /* Background color */
            background-color: hotpink;
        }
        .classB{
            /* Text color */
            color: skyblue;
        }
        .classC{
            /* Font size */
            font-size: 80px;
        }
    </style>
</head>
<body>
    <div id="app">
        <p class="classA classB">Paragraph a</p>
        <p v-bind:class="{classA:isA,classB:isB}">Paragraph 2</p>
        <p :class="{classA:isA,classB:isB}">Paragraph 3</p>
    </div>
</body>
<script type="text/javascript" src=".. / js/vue_v2. 6.14. Js. ""></script>
<script type="text/javascript">
    new Vue({
        el:"#app".data: {"isA":false."isB":true}});</script>
Copy the code

Vue conditional rendering

(1) the if… else

Grammar:

v-if
v-else
Copy the code

Features: when the condition is true, the display only if the data, the condition is false only display the data in the else [if you don’t show the data, also won’t load the code, because the js is to explain and execute 】

(2) show

grammar

v-show
Copy the code

Display data if the condition is true, hide data if the condition is false

(3) Examples

<body>
    <div id="app">
        <p v-if="bool">Paragraph a</p>
        <p v-else="bool">Paragraph 2</p>
        <p v-show="bool">Paragraph 3</p>
    </div>
</body>
<script type="text/javascript" src=".. / js/vue_v2. 6.14. Js. ""></script>
<script type="text/javascript">
    new Vue({
        el:"#app".data: {"bool":true}});</script>
Copy the code

List rendering in Vue

Grammar:

v-for="Data traversal name in data group name"
Copy the code

When in use, call our custom data traversal name.

What it does: Render lists

The sample code

<body>
    <div id="context">
        <ul>
            <li v-for="stuName in stuNameList">{{stuName}}</li>
        </ul>
        <table border="1" width="500px" height="300px">
            <tr>
                <th>Student student id</th>
                <th>Students' gender</th>
                <th>The student age</th>
                <th>Students' gender</th>
            </tr>
            <tr align="center" v-for="(student,index) in studentList">
                <td>{{index}}</td>
                <td>{{student.stuName}}</td>
                <td>{{student.stuAge}}</td>
                <td>{{student.stuGender}}</td>
            </tr>
        </table>
    </div>
</body>
<script type="text/javascript" src=".. / js/vue_v2. 6.14. Js. ""></script>
<script type="text/javascript">
    new Vue({
        el:"#context".data: {"stuNameList": ["guoqiang888"."xiudong777"."zhenhua666"]."studentList":[
                {"stuName":"guoqiang"."stuAge":18."stuGender":"Male"},
                {"stuName":"xiudong777"."stuAge":19."stuGender":"Male"},
                {"stuName":"zhenhua666"."stuAge":20."stuGender":"Male"}]}});</script>
Copy the code

Vue event driven

Grammar:

① Standard Grammar

V - on: the event nameCopy the code

② Shorthand syntax

@ event nameCopy the code

The sample code

<body>

    <div id="app">
        <form action="target.html" method="post">User name:<input @blur="checkUserName" v-model="uname" type="text" name="username">
                    <span>{{userNameMsg}}</span>
            <br>
            <! Event-driven -->Password:<input @blur="checkPwd" v-model="password" type="password" name="pwd">
                    <span>{{pwdMsg}}</span>
            <br>
            <input type="submit" @click="checkLogin" value="Login">
        </form>
    </div>

</body>
<script type="text/javascript" src=".. / js/vue_v2. 6.14. Js. ""></script>
<script type="text/javascript">
    // When the focus is lost, the authentication user name cannot be empty
    var vm = new Vue({
        el:"#app".// Set the mount point
        data: {// Set the binding data
            // "uname":this
            // Bidirectional binding to get data
            "uname":""."password":"".// Interpolate bindings, hint
            "userNameMsg":""."pwdMsg":""
        },
        methods: {// Set the correlation function
            checkUserName:function(){
                this.userNameMsg = "";
                // console.log(" +this :"+this);
                // console.log(" comma this:",this);
                // console.log("uname:",vm.uname);
                if(vm.uname == "") {this.userNameMsg = "User name cannot be empty, please re-enter #####";
                    // Cancel the default behavior of the controlevent.preventDefault(); }},checkPwd(){
                // console.log("this:",this);
                this.pwdMsg = "";
                if(this.password == "") {this.pwdMsg = "Password cannot be empty, please re-enter!";
                    // Cancel the default behavior of the controlevent.preventDefault(); }},checkLogin(){
                // checkUserName(); / / error
                this.checkUserName();
                this.checkPwd();
                / * if (this. Uname = = "") {/ / alert (" user name cannot be empty, please input again # # # # #"); This. userNameMsg = "User name cannot be empty, please re-enter #####"; // Cancel the default behavior of the submit control // return false; Alert ("event:",event); event.preventDefault(); } * /}}});</script>
Copy the code

Where is the event function for Vue written?

Methods: Use commas (,) to separate multiple event functions within curly braces. Note that the name of the function must be the same as the name of the triggering event function written in the HTML. The format is event name :function(parameter){method body} or event name (parameter):{method body}.

Functions written in HTML can be abbreviated without parentheses if they have no arguments.

How do you know if the textbox is empty?

V-model bidirectional binding is used here, so the Vue object can also receive data passing through the page. If you want to get the data in an event-driven context, you simply Vue the object name. After receiving the variable name of the value, you get the data. Since this refers to the Vue object in the method, we can also write this. The name of the variable that received the value.

How do I prevent form submission?

When Vue is not used (e.g. in a form property, outside of Vue in Js), we can use return false in the function to prevent form submission. However, since Vue is associated with events in a special way, return false is invalid and cannot be used to prevent form submission. Vue = **event.preventDefault(); ** method, the default method for blocking events.

Use of console.log and alert methods.

If you use the plus sign (+) in the console.log method, if the data type is different from the data type, it will be output as string concatenation. If both data types are different, it will be added. If a comma is used, then it defaults to a string and prints with a space in place of the comma.

In the case of alert, you can only use the plus sign (the same use as console.log). Commas are not supported. If a comma is encountered, it ends. Anything after the first comma is not printed.

How do I call other custom methods?

Cannot call directly, use “this. method name”

Vue this keyword

JS in this

(1) This:

Points to the Window object (representing the current browser window).

② In the function this:

Points to the object that called this function.

In JS, the this keyword is mutable. The JS this reference is indeterminable, which means it can be changed dynamically. Call /apply is a function that changes what this refers to. This design makes the code more flexible and reusable.

This in the Vue

() this outside the methods area:

Points to the Window object (representing the current browser window).

(2) this in the methods area:

Points to the Vue object in which it resides.

Event object

define

The Event object represents the state of the Event, such as the element in which the Event occurred, the state of the keyboard key, the position of the mouse, and the state of the mouse button.

Commonly used attributes

Target: Returns the element that started this event (the target node of the event).

Commonly used method

PreventDefault (): cancel the control default behavior. Tell the browser not to perform the default action associated with the event

StopPropagation () : Cancels event bubbling. [No more event distribution]

Vue’s listening property — the “watch” property

This one is used to listen for events and call the function we wrote when an event occurs.

Such as:

<div id="app">
	<p>I have: {{firstName}}</p>
	<p>Name: {{lastName}}</p>I have:<input type="text" v-model="firstName" /><br/>Name:<input type="text" v-model="lastName" /><br/>
	<p>Full name: {{fullName}}</p>
</div>
Copy the code

Based on the code above, we want the fullName property to change when the firstName or lastName property changes. You need to “listen” on the firstName or lastName attribute.

Specifically, “listening” is to monitor the message property and call our prepared function when the value of the firstName or lastName property changes.

We can use Vue to declare a “listen” function on the “firstName” and “lastName” properties in the “watch” property as follows:

var app = new Vue({
	el:"#app".data: {"firstName":"jim"."lastName":"green"."fullName":"jim green"
	},
	watch: {"firstName":function(inputValue){
			this.fullName = inputValue + "" + this.lastName;
		},
		"lastName":function(inputValue){
			this.fullName = this.firstName + ""+ inputValue; }}});Copy the code

Life cycle of Vue

The concept of life cycle in a program: refers to the process of an object from creation to destruction.

Overview of the Vue lifecycle

① Creating an Object

[beforedCreate] before creating objects

【 Created 】

② Data mounting

ⅰ Before data mounting

【Mounted】

③ Data update

ⅰ Before data Update

【 Updated 】

④ Destroy the object

ⅰ Before destroying objects 【beforeDestroy】

【 Destroyed 】