Some basics of Vue

This is the 28th day of my participation in the August Text Challenge.More challenges in August

1.vue.js

1.1 Hello Vue. Js

 <div id="app">
     <div>{{msg}}</div>
 </div>
 <script src="vue.js"></script>
 <Script>
       new Vue ({
         el: '#app',
         data:{
             msg:'Hello Vue.js'
         }
 })
 </script>
Copy the code

1.2 Example parameter analysis

El: Mount position of the element (value can be CSS selector or DOM element)
Data: Model data (value is an object)

1.3 Usage of interpolation expressions

Populate the data with HTML tags
Interpolation supports basic computation operations

1.4Vue code operation principle analysis

Overview of the compilation process (Vue syntax -> native syntax)

2.Vue template syntax

2.1 How to understand front-end rendering

Fill the data into the HTML tag

2.2 Front-end rendering mode

Native JS concatenated string
Use a front-end template engine
Use vUE specific template syntax

3. The instruction

3.1 What is a directive

The essence of directives is custom properties
The format of the command: begin with a V – (e.g., v-cloak)

3.2 Usage of the V-cloak command

Problems with interpolation: “flash”
How to solve this problem: Use the V-cloak command
The solution to this problem is to hide, replace the value and then display the final value

 <style>
     [v-cloak]{
         display:none
 }
 </style>
 <div id="app">
     <div v-cloak>{{msg}}</div>
 </div>
 <script src="vue.js"></script>
 <Script>
       new Vue ({
         el: '#app',
         data:{
             msg:'Hello Vue.js'
         }
 })
 </script>
Copy the code

3.3 Data Binding

V-text fills plain text
- Compared to interpolation expressions more concise, no flash problems, more recommended
V-html populates HTML fragments
- There are security issues
- This website internal data can be used, data from third parties can not be used
V-pre fills in the original information
- Display the raw information, skip the compile process (analyze the compile process)

3.4 Data responsiveness

How to understand reactive
- Responsive in HTML5 (style changes due to changes in screen size)
- Responsiveness of data (changes in data lead to changes in page content)
What is data binding
- Data binding: Populates the label with data
V-once compiles only once
- Performance can be improved by no longer having responsive functionality after displaying content

3.5 Bidirectional data Binding

Even if changing the page affects changing the data, changing the data also affects changing the page

 <input type="text" v-model='msg'/>
Copy the code

3.6 Event Binding

V-on command usage

 <input type ="button" v-on:click='num++'/>
Copy the code

Short for V-ON

 <input type ="button" @click='num++'/>
Copy the code

How function events are called

Directly binding function names does not require passing event objects

 <button v-on:click ='say'>
     hello
 </button>
Copy the code

The last argument to the call function is the event object

 <button v-on:click ='say()'>
     sayhi
 </button>
Copy the code

3.7 Event function parameter passing

Ordinary parameters and event objects

 <button v-on:click='say("hi",$event)'>
     say hi
 </button>
Copy the code

If the event is directly bound to the function name, the event object is passed as the first argument to the event function by default
If the event-binding function is called, the event object must be passed as the last argument, and the name of the event object must be $event

3.8 Event modifiers

.stop prevents bubbling

<a v-on:click.stop='handle'>

.prevent Prevents default behavior

<a V-on :click.prevent='handle'>

That way the jump won’t happen

Key modifier

Enter the enter key

<input v-on:keyup.enter='submit'>

Delete the delete key

<input v-on:keyup.delete='handle'>

Custom key modifier

Global config.keycodes.f1 = 112

Vue.config.keycodes. f1 = 112 (112 is the value of keycode)Copy the code

3.9 Attribute Binding

How does Vue handle properties dynamically

The use of the V-bind directive

<a v-bind:href='url'> Jump </a>Copy the code

abbreviations

<a :href='url'> jump </a>Copy the code

The underlying implementation principles of v-Model

 <input v-bind:value='msg' v-on:input="msg=$event.target.value">
Copy the code

4.1 Style Binding

Object syntax

 <div v-bind:class="{active: isActive}">
     
 </div>
Copy the code

Array syntax

 <div v-bind:class="[activeClass,errorClass]">
     
 </div>
Copy the code

4.2 Syntax details related to style binding

Object binding and array binding can be used together
The value of the class binding simplifies operations
What about the default class

The default class will not be overridden and will be retained

4.3 Style processing

Object syntax

 <div v-bind:style="{color: activeColor,fontSize:fontSize}">
     
 </div>
Copy the code

Array syntax

 <div v-bind:style="[baseStyles,overridingStyles]">
     
 </div>
Copy the code

4.4 Branch cycle structure

v-if
v-else
v-else-if
V-show Indicates the simple control display:none/block

V-if and V-show

V-if controls whether elements are rendered to the page
V-show controls whether the element is displayed (rendered to the page)

4.5 Cycle Structure

V-for traverses the loop

 <li v-for='item in list'>{{item}}</li>
 
 <li v-for='(item,index) in list'>{{item}} + '--' {{index}}</li>
Copy the code

What key does: Helps VUE differentiate between different elements, which improves performance

 <li :key='item.id' v-for="(item,index) in list">{{item}} +'--' {{index}}</li>
Copy the code

V-for traverses the object

 <div v-for='(value,key,index) in object'>
     
 </div>
Copy the code

V-if and V-for are used together

 <div v-if='value==12' v-for'(value,key,index) in object'>
     
 </div>
Copy the code