This article describes the basic concepts and use of Vue. Share it for your reference, as follows:
1. What is it?
1). A front-end js library developed by a former Chinese Google engineer (You Yuxi)
2). Function: Dynamically build the user interface
3). Features:
* Follow MVVM mode
* Simple encoding, small size, high operating efficiency, mobile/PC development
* It only focuses on the UI, and can easily introduce vue plug-ins and other third library development projects
4). Relationship with other frameworks:
* Drawing on angular templates and data binding technology
* Drawing on react's componentization and virtual DOM technology
5). vue contains a series of extension plugins (libraries):
* vue-cli: vue scaffolding
* vue-resource(axios): ajax request
* vue-router: Router
* vuex: Status Management
* vue-lazyload: Image lazy loading
* vue-scroller: page sliding related
* mint-ui: Vue-based component library (mobile side)
* element-ui: Vue-based component library (PC side)
2. Basic use
1). Introduce
2). Create a Vue instance object (vm), specify the option (configuration) object
el : Specify the selector for the dom tag container
data : Specifies the object/function that initializes the status data (returns an object)
3). Use {{}} or vue directives in page templates
3. Options for Vue objects
1). el
Specify the selector for the dom tag container
Vue will manage the corresponding tags and their subtitles
2). data
Object or function type
Object that specifies the initialization status attribute data
vm will also automatically have all attributes in data
You can access it directly on the page
Data proxy: The vm object is used to proxy operations on all attributes in data (read/write)
3). methods
Object containing multiple methods
For event instructions on the page to bind callbacks
The callback function has event parameters by default, but it can also specify its own parameters.
All methods are called by vue objects, and the properties in data are directly used
4). computed
Object containing multiple methods
Calculate the status attribute and return a new data for the page to get the display
Generally, it is equivalent to a read-only property
Use the set/get method to realize the calculation and reading of attribute data, and monitor the changes of attribute data at the same time
How to define get/set attributes for objects
Specify when creating an object:
get name () {return xxx} / set name (value) {}
Specify after the object is created:
(obj, age, {get(){}, set(value){}})
5). watch
Objects containing multiple attribute monitoring
It is divided into general monitoring and deep monitoring
'xxx' : {
deep : true,
handler : fun(value)
}
Another way to add monitoring:
vm.$watch('xxx', funn)
4. Transition animation
Use vue to manipulate css transition/animation animation
Template: Use<transition name='xxx'>Includes tags with animations
css style
.fade-enter-active: Enter the process, specify the entry transition
.fade-leave-active: The departure process, specifying the departure transition
.xxx-enter, .xxx-leave-to: Specify the hidden style
Coding example
.xxx-enter-active, .xxx-leave-active {
transition: opacity .5s
}
.xxx-enter, .xxx-leave-to {
opacity: 0
}
<transition name="xxx"> <p v-if="show">hello</p> </transition>
5. Life cycle
vm/component object
Life cycle diagram
The main life cycle function (hook)
created() / mounted(): Start asynchronous task (start timer, send ajax request, bind listening)beforeDestroy(): Do some final work
6. Custom filters
1). Understand
Format the data to be displayed before displaying
2). Coding
1). Define filters
(filterName, function(value[,arg1,arg2,...]){
// Perform certain data processing return newValue
})
2). Use filters
<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>
7. Vue built-in commands
v-text/v-html: Specify the tag body
* v-text : Treat as plain text
* v-html : parse value as html tag
v-if v-else v-show: Show/hide elements
* v-if: If vlaue is true, the current tag will be output on the page
* v-else : Used with v-if, if value is false, output the current tag to the page
* v-show: The display style will be added to the tag. If vlaue is true, display=block, otherwise it is none
v-for : traversal
*Transfer the array: v-for="(person, index) in persons"
* Traversing object: v-for="value in person" $key
v-on: bind event listening
* v-on: Event name, can be abbreviated as: @ Event name
* Monitor specific buttons: @ @
* Stop bubbling of events and block event default behavior: @ @
* Implicit object: $event
v-bind: Force binding to parse expressions
* The html tag attribute does not support expressions, so you can use v-bind
* Can be abbreviated as: :id='name'
* :class
* :class="a"
* :class="{classA : isA, classB : isB}"
* :class="[classA, classB]"
* :style
:style="{color : color}"
v-model
* Two-way data binding
* Automatically collect user input data
ref: Identify a tag
* ref='xxx'
* Read the tag object: this.$
8. Custom commands
1). Register global commands
('my-directive', function(el, binding){
= ()
})
2). Register local instructions
directives : {
'my-directive' : function(el, binding) {
= ()
}
}
3). Use commands
<div v-my-directive='xxx'>
I hope this article will be helpful to everyone's programming.