Vue.js Introduction to day-1

Time:2021-3-1

Vue learning notes directory

The usage of Vue and v-bind in day-1

preface

In order to prepare for front-end learning, front-end Vue, ant design.


1、 What is Vue

Vue is a progressive framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue’s core library only focuses on visual layers, which is not only easy to use, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with modern tool chain and various supporting ~ ~ ~ class libraries, Vue can also provide drivers for complex single page applications.
Quoted from vue.js

1.1. Why Vue

Vue uses MVVM model

MVVM model

2、 Using Vue

2.1. Introduction Vue.js

Here I directly download and import from the official website as follows
<scripthtml"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<title>helloVue</title>
</head>
<body>
<div id="app">Hello {{message}}</div>

<script></script>
<script>
const app = new Vue({
El: '# app' // used to mount the data to be managed
Data: {// define data
message: "Vue"
}
})
</script>

</body>
</html>
<! -- output = > Hello Vue -- >

The interpolation expression is used here{{ }}, createdVueInstance, containingOptionsyes

  • el(string | HTML Element): specifyvueWhich one to manageDOMElements;
  • data(Object | function): some data (the component must be a function);
  • methods(function): contains some custom functions that need to be used, such as button response events.
  • And so on.

2.3. The life cycle of Vue

emmm

2.4. V-instruction

A series of instructions starting with V, very convenient!

2.4.1. v-once

The data is rendered only once and does not change as the data changes.

<div id="app" v-once>
    {{message}} <! -- message in data: "Hello Vue" - >
    < input type = button "value = change" @ Click = message ='Hello '"/ > Click
</div>
<! -- output after clicking the button = > Hello Vue -- >

2.4.2. v-html

It is used to fill in and display HTML fragments.

<div id="app" >
    <h2 v-html="url"></h2>
    <! -- URL in data: "a https://www.baidu.com '> Baidu once < / a > "-- >
</div>

The browser check elements are as follows

<div id="app">
    <h2><a href=" https://www.baidu.com "> Baidu</a></h2>
</div>

2.4.3. v-text

It is used to fill the data into the label. It is similar to the interpolation expression, but it covers the whole content.

<div id="app" >
    < H2 v-text = "message" > hello</h2>
    <! -- message in data: "hello" - >
</div>

The browser checks the following elements, and the original value in the tag is overridden.

<div id="app">
    <h2>Hello</h2>
</div>

2.4.4. v-pre

Used to display original information.

<div id="app" v-pre>
    <h2>{{url}}</h2>
    <! -- URL in data: "a https://www.baidu.com '> Baidu once < / a > "-- >
</div>
<! -- browser output = > {{URL}} -- >

2.4.5. v-cloak

Before Vue resolution, the attribute will exist in the tag; after Vue resolution, the attribute will be removed.
Available<style>[v-cloak]{display: none}</style>Before Vue parsing, the relevant{{ }}It will be hidden and inserted with data after parsing. Used to hide the interpolation expression during data loading{{}}Affect the user experience.
< font color = # 999aaa > in the following code, although the data insertion is delayed for 1 s, the {message} is not displayed in the browser.

<div id="app" v-cloak>
  {{message}}
</div>

<script>
  SetTimeout (() = > {// set 1s delay
    const app = new Vue({
      el: '#app',
      data: {
        Message: "hello"
      },
      methods: {}
    });
  }, 1000);
</script>

2.4.6. v-bind

Used to dynamically bind label properties, such assrchrefclassAnd so on. (grammar) sugar:
bindingclass

  1. Object syntax: through{}Binding objects

    `< H2: class = {key (attribute name): value (Boolean)} "> {{message}} < / H2 >`
     -It exists at the same time as the ordinary 'class' and does not conflict. It will be merged;
     -If the content is too complex, it can be returned in a function of 'methods' or' calculated '.
  2. Array syntax: by array

    `< H2: class = ['attribute name ','attribute name'] > {{message}}} < / H2 > 'or use variables
    `< H2: class = [variable1, variable2]] > {{message}} < / H2 >`

bindingstyle

  1. Object syntax
    < H2: class = {key (attribute name): value (attribute value or variable)} "> {message}}</h2>
  2. Array syntax

2.4.7. Calculation properties

The method without verbs has the same form and methodcomputedIn the middle.
Main difference: the calculated property will be cached. If it is used many times, the calculated property will only be called once.

summary

It’s very convenient to summarize what I learned on the first day.

Recommended Today

Large scale distributed storage system: Principle Analysis and architecture practice.pdf

Focus on “Java back end technology stack” Reply to “interview” for full interview information Distributed storage system, which stores data in multiple independent devices. Traditional network storage system uses centralized storage server to store all data. Storage server becomes the bottleneck of system performance and the focus of reliability and security, which can not meet […]