Vuejs Getting Started-----installation + Basic Grammar Learning Notes

First, the basic introduction

Vuejs is a set of progressive frameworks for building user interfaces.

VUE-CLI Scaffolding Building Basic code Framework
Vue-router Official Plugin Management routing
Vue-resourse Ajax Communication
Webpack Build Tool
Es6+eslint ESLINT:ES6 Code Style Check tool
Modular modularity of Engineered components

Mobile Common development Tips: Flex flexible layout css Stickyfooter cool interactive Design

2-vuejs Introduction
Architecture migrates from traditional background mvc to rest api+ front-end mv*
Mvvm:view (view, DOM) ViewModel (Communication, observer) model (data, JS object)
Application scenario: For front-end applications with complex interaction logic
Provides the underlying architectural abstraction
Ensure user experience with Ajax data persistence
Eg:angular react Vuejs

Lightweight MVVM Framework
Data-driven + modular front-end development
GitHub surpasses 25k+ 's star count, community perfect

Data-driven: DOM is a natural mapping of data
Component: Extending HTML elements, encapsulating reusable code
Principle: Each independent visual/interactive area on the page is treated as a component
Each component corresponds to a project directory, and the various resources required by the component are maintained near this directory.
A page is simply a component container, and the component can be nested freely to form a complete page

Second, installation

I use the NPM method to install. (see another essay on the previous work: Nodejs download to other disk environment Configuration + first HTTP server build)

Open cmd to enter the following command, My-project This is the project name, can be casually up. First go to the folder you want to create and then create the Webpack.

Installing the VUE-CLI first is equivalent to building the construction workers to put the frame in order to continue to work.

　　

After the second step, there are a number of questions: (my project is called sell, return to continue)

Follow the instructions in the red box and enter them in turn. The browser will open automatically

Description The installation Vue was successful.

Third, the directory structure:

Build: Where the final release code is stored

Config: Configure directory, including port number, etc.

NODE_MODULES:NPM Loaded Project Dependency module

SRC: Developing directory source code

Assetes: Put some pictures, such as logos, etc.

Components: A component file is placed in the directory and can be used without

App.vue: Project entry file, we can write the component directly here

Main.js: Core document of the project

Static resource directory, tablet font, etc.

Test: Initial testing directory, can be deleted

. * *.: Configuration file

Index.html: Home Portal File

Package.json: Project configuration file

README.MD: Description Document for Project

Iv. module Syntax

1. Interpolation

Text: Data binding {{message}}

Html:

Property: V-bind

Expression: JS expression

2. Instruction

Parameter: v-bind directive is used to update HTML properties in response

Here the href is the parameter

<a v-on:click= "DoSomething" >

V-on used to listen for DOM events

Modifier: Half-width period (not quite understood)

3. User input

Input box with V-model instructions for bidirectional data binding

V-on Monitoring Events

4. Filter

V. Conditional statements

1. Condition judgment

V-if: Using in Elements and template

V-else:

V-else-if:

V-show: template syntax not supported

Six, the circular statement

The V-FOR directive requires a special syntax in the form of site in sites, sites is the source data site is an array element alias

Iteration object: V-for= "value in Object"

Index key value pair

It's probably all about learning Oracle, which is similar to a cursor for loop traversal.

Vii. Calculated attributes

Computed vs methods

Using methods instead of computed effect is the same, but computed can cache the data

Eight, style binding

1. Class Attribute Binding

More properties are passed in the object to dynamically switch multiple Class:<div class= "static active Text-danger" ></div>

2. Array syntax

You can pass an array to V-bind-class

3, V-bind:style

IX. Event handlers

V-on for event Monitoring

Event Decoration: click.stop (Block event bubbling) submit.prevent (the Commit event no longer overloads the page) Click.capture (use event capture mode when adding event listeners) click.self (only triggered when the event is triggered by the element itself) Click.once (event triggered at least once)

Ten, form

check box

<! DOCTYPE html>
　　
Radio Box
<! DOCTYPE html>
　　
Drop-down menu
<! DOCTYPE html>
　　
Modifier:. Lazy <!--updated in "change" instead of "input" event
<input v-model.lazy= "MSG" >
. number
If you want to automatically convert the user's input value to number type (if the original value is NaN then return the original value), you can add a modifier number to V-model to process the input value
. Trim
If you want to automatically filter the end and end spaces of user input, you can add trim modifier to filter input on V-model
XI. components
1. Global Components
<! DOCTYPE html>
2. Local components
<! DOCTYPE html>
　　
Vue's development documentation is friendly, with only the basic syntax listed here, and you need to see the development documentation.
------------------------------------------------------------------------------------------Aloha---------------------------- ---------------------------------------------------------------------------------------------------------------
It's not a teaching post, just a note in your own study.
Original, copyright protection.
Over
Vuejs Getting Started-----installation + Basic Grammar Learning Notes