vue framework
- Construction of a user interface framework Progressive
- from the ground up using the incremental development of the design
- the core library focus only on the view layer
- When single-file assemblies and vue ecosystem support libraries used in combination, are fully able to provide the drive for complex one-page application
- vue to the unity of management by api, the whole team can code a uniform style and approach to operational standards
- when the package assembly by two Props principles and standards of the Event to call
A todo-list application integrates two events, two data data can be done, and can clearly be observed in the binding information by Template Html templates, data linkage and real-time changes:
- v-model and the data in the examples msg stored data is bound in
- @ Keyup.enter = "push" to carry out key events keyup ships, at the same time enter button to listen with enter modifier, when the trigger methods in the push function, this list would like to add a list object data
- V-for circulating through the entire list in the instruction data, the corresponding cyclic nodes
- Click on each node node performs when deleteItem event, delete the corresponding
<Template> <-! - TODO-List template> <div the above mentioned id = "TODO-List"> <-! define input output label, two-way binding output data msg, keyup listen to bind the event push button event -> <INPUT type = "text" V-model.trim = "MSG" @ keyup.enter = "Push"> <UL> <-! V-cycle instructions for data inside the entire list -> <Li V- for = "(Item, index) in List": Key = "index" = @ the Click "the deleteItem (index)"> {{{{item.name, for index}}}} </ Li> </ UL> < / div> </ Template> <Script> Export default { name: 'TODO-List', data(){ return( { msg: "", List: [], } ) }, Methods: { Push () { // INPUT msg information to the array of push list newly input the this .list.push ({name: the this a .msg}); the this . = MSG "" }, the deleteItem (index) { // delete the corresponding index node the this .list.splice (index,. 1 ) } } } </ Script>Dom respect to the operation of writing the current data driving vue differences :
- Rendering the data, through a third party will template engine, such as artTemplate, Jade etc., after completion of rendering then append to the root element
- vue only cycle through all the nodes corresponding to a v-for instruction, as long as the previous write cycle and then the stencil Html
- Implementation of events, it is necessary to select DOM elements to the DOM element addEventListener event listener function
- Vue directly through your Template integration templates directly on the binding element event events need to occur as long as the implementation of a v-on binding event you need to bind all native events directly
- When the need to store data, you need to set a bunch of variables, there are local and global variables, resulting in subsequent variables are difficult to maintain and may even lead to a variable name conflict, the scope call error, unable to locate exactly the correct data source
- Vue through data options, with each property to save the rendered data and temporary excessive data, with the option to preserve a unified data, allowing users at a glance
- Function to perform all functions, both events need to be performed, or the need to call the package, written in a script tag declared by function, large amount of code, there will not be a variable name conflicts and accurate positioning method
- Vue by Methods option designed for function and function packages need to call the event executed, like trash, like, an accurate position can be put, needs to find and execute the desired function calls directly to accurately locate the Methods options
- Usually we want to be some processing of some data, such as the removal of a rear space, key vacancies, have to go through a filter or judgment js
- Vue provide a lot of modifiers encapsulates these filters and judgment, lets developers write less code to put time into service, just use. Modifiers
User performs an operation -> back to the VM processing (Model variations can lead) -> VM layer changes, update the data page corresponding to the location directly binding relationship
It can be simply understood: the data drive than the operating node, but to directly update the virtual page abstract data. This is the main point, data-driven framework was able to have a faster speed
VUE mode
, The data in the dynamic data by {} {} unbound text node with a static data Props mapping relationship, when the data of the attribute or attributes Props are subject to change, in the above two operations each data is required behavior data on a template or stencil data view of data need to be rendered, wherein once a property changes, the operation and behavior of all data associated with the same rendering time synchronization changes, this data-driven model for large-scale application development more gradual. As long as the rational organization of data and code, it would not seem subsequent soft leather
Event-driven
Event-driven to some extent make up for the lack of data-driven
In DOM: Find node needs to operate through a specific selector -> to add the appropriate node event listeners
In response to user actions: the implementation of an event (click, output, rewind, etc.) -> JavaScript call to modify the node
Disadvantages: the system will grow in size, frequently find nodes and modify nodes, efficiency is too low
Data-driven
Read template, while obtaining data abstraction layer and resumes VM (view-model) of the -> filling page
Corresponding to the three layers MVVM
M-Model is to be understood that the data layer
V-View View
VM-ViewModel view model (dummy layer) may be bound to a data layer V; (V and M Interaction)
data options
When an instance is created, the data system in response Vue will put option data, when the value of the property is changed, the view will produce a "response" that is updated to a new value matching. The initial behavior of the code of the given row will also respond with a mapping system, the data in the data may be arbitrarily changed in the example, are not affected, the data must be provided to keep the logical complement
<template>
<div>
<p v-if="boolean">true</p>
<p v-for="value in obj ">{{vallue}}</p>
<p v-for="item in list">{{item}}</p>
<p>{{StringMsg}}</p>
<p>{{NumberMsg}}</p>
</div>
</template>
<script>
export default {
data(){//data数据
return {
obj:{a:'1',b:'2',c:'3'}, //对象obj，用v-for遍历
list:[ "A", "B", "C"], :Booleanarray list, for traversal by-V//
to true , // Boolean value, with v-if Analyzing
StringMsg: "Hello World", // String object
NumberMsg: 2.4 // digital object
}
}
}
</ Script>
Dynamic data and static data Props comparison data:
Same point:
- Both options can be stored in various types of data, when the operating behavior changes, synchronize all changes in behavior and operations used in the template data rendered colleagues will occur
difference
- Cause data is called dynamic data, in each instance, in any case, it can change the type of data and data structures, will not be affected by any environmental
- Props reason is referred to static data, in each instance, once the initialization is well defined type, based on the Vue way data flow, when the data transfer has been unable to change the data type
- More critical is the understanding of the way the data stream, props data is passed through the parent component or components higher data or literal manner, it does not allow direct operation of changing the respective data instance props, and by other means it is required to change the data transfer source
When you run the code, data option has entered the Vue response system. model (data layer) and the View (view level) is a response corresponding to any data type can be defined
When the user clicks the occurrence of operation, co-workers can StringMsg, NumberMsg swap data, which shows "regardless of the value and types can be freely converted."
to sum up:
- data in the data is flexible
- Any type of data can be defined
- Any type of data can be changed
- When the data changes, the view and behavior bound data will be synchronized change
View and map data
data data:
<template>
<div>
<p>{{StringMsg}}</p>
<p>{{NumberMsg}}</p>
<button @click="changeData">改变数据</button>
</div>
</template>
<script>
export default {
data(){
return{
StringMsg:"hello world",
NumberMsg:24
}
},
methods:{
changeDate(){
this.StringMsg=24,
this.NumberMsg="hello world"
}
}
}
</script>
This .vue is an example, in the data defines two types of data, String type, Number type, while also methods defined changeDate () event
Props
Use props transfer data scope is isolated, it is the parent component is passed through from the template, would like to accept the data from the parent component, needs to be accepted by props
Statement subassembly to be displayed to accept {the number, type, initial value} parent component to transfer data
Simply accept props can be accepted by the array type: [ 'props']
Parent component:
<! - parent element ->
<Template>
<div>
<! - demo write subassembly within parent components in html ->
<! - the data are msgData mathData parent element binding to the sub-transmission components ->
<Demo: MSG = "msgData": Math = "mathData"> </ Demo>
</ div>
</ Template>
<Script> // introduced subassembly Demo
Import Demo from './demo.vue' ; //
Export default {
data () { // set data of parent data component return {
msgData: "parent pass child" ,
mathData: 2
}
},
conponents:{
Demo
}
}</script>
Subassembly
<! - subassembly ->
<Template>
<div class = "Demo">
<P> {{MSG}} </ P>
<P> Math {{}} </ P>
</ div>
</ Template>
<Script>
Export default {
name: 'Demo' ,
the props: [ 'MSG', 'Math'] // value of the parent element to accept delivery
}
</ Script>
: The bind-V == : MSG = msgData // MSG first parameter must be the same name as the subassembly props: props: [ 'MSG'] // msgData data is transmitted to the parent sub-assembly components required
Subassembly need need, those receiving data from the parent components defined by the display, the same within parent components, subassembly v-bind to the template transfer subassembly received data to be displayed
props can define a display or one or more data, for receiving data, may be various types of data, it can also be a transfer function