Vue_learning_1.1

Vue_learning_1.1

1.SFC && Component API styles:

1.1 SFC

Before we learn vue we have to know two definitions .

the first definition is SFC .

we author Vue components using an HTML-like file format called Single-File Component

A Vue SFC encapsulates the component's logic (JavaScript), template (HTML), and styles (CSS) in a single file. Here's the previous example, written in SFC format:

An SFC is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written inside a .vue file.

1.2 Vue components API styles

the Second definition is Component Api styles.

Vue components can be authored in two different API styles:

Options API and Composition API.

In fact, the Options API is implemented on top of the Composition API!

Options API

we define a component's logic using an object of options Properties defined by options are exposed on this inside functions, which points to the component instance

The Options API is centered around the concept of a "component instance"

Composition API.

The Composition API is centered around declaring reactive state variables directly in a function scope and composing state from multiple functions together to handle complexity

2.The core feature of Vue

2.1 declarative rendering

three steps:

1.define reactive state properties

2.write template

3.render template

2.2 how to render

1.render dynamic text

2.render attribute

3.render event listener

4.form binding

5.conditionally render

6.list render

二.than

core future of the vue :

1.derective randering

1.1:.html->javascript state -> reactive state ->