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