Overview: Vue core idea is "data-driven components of the system." MVVM nature is through data binding link View and Model, so that data changes are automatically mapped to update the view.
A difference computed with the methods of
computed on the method of calculating an attribute with the attribute mode when not add (), and to the use of methods like manner as the method to use, must be added ().
Two ways in the cache is also very different, computed using the calculated property is reverseMessage with message binding only when the message will trigger a change in reverseMessage, and methods into the way each page must implement the method, but in utilizing real-time information, such as displaying the current time into the page, methods must embodiment
two, with the prefix instruction V-, to indicate that they are provided special characteristics Vue.
1, v-if conditions rendering instruction to render determined whether the value of the bool element according subsequent expression;
2, V-Show options for display elements according to the conditions. Usage roughly the same: <h1 v-show = " ok"> Hello </ h1>; the difference is the element with v-show will always be rendered and retained in the DOM!. v-show simply switch the CSS property display element. Note, v-show does not support the <template> Element, does not support v-else.
3, v-IF-VS v Show
v-IF "real" conditions rendering, because it will ensure that the event listener and sub-components within the conditional block is destroyed and rebuilt properly in the handover process.
v-if is inert: If the condition is false at the time of the initial rendering, do nothing - until the condition becomes true when the first time, will begin to render conditional block.
In contrast, v-show much simpler - no matter what the initial conditions, the elements will always be rendered, and simply based on the CSS switch.
In general, v-if higher switching overhead, and v-show a higher initial cost of rendering. Therefore, if the switching is very frequently used is preferably v-show; if conditions rarely change at runtime, using v-if preferred.
4, v-else element must immediately behind the belt element, or v-if v-else-if otherwise it will not be recognized.
5, v-for traversal JS similar usage as v-for = "item in items ", items is an array, item array elements in the array.
6, v-bind the instructions for updating HTML response characteristics, such as binding to a class style style element or elements. V-bind can be used to dynamically bind to prop parent component data
7, v-on for monitoring the specified elements in the DOM events, such as the click event.
8, v-model instruction, it can easily form a two-way binding between input and application state.
9, v-once instruction, you can perform a one-time interpolation, when the data changes, the content is not updated at the interpolation. However, please pay attention to other data that affects the binding of the node
10, v-html instructions, curly brackets will be interpreted as ordinary text data, instead of the HTML code. In order to output the real HTML, you need to use v-html instructions
11, vm (abbreviation ViewModel) of the variable name represented Vue instance
when a Vue instance is created, it is added to the Vue response systems in their data objects can find all properties. When the values of these properties change, the view will produce a "response" that is updated to a new value matching. Instance is created only when data is present in response to an attribute type. In addition to data attributes, as well as methods and instance attributes, which are prefixed $, to distinguish them from the area of the user-defined attribute.
12, you can see there will be a lot of hook functions available to us to operate at different moments in the life cycle of vue vue a whole life cycle, then the first list all the hook function, and then we 11 Xiangjie: https: / /segmentfault.com/a/1190000011381906
13, on the underlying implementation, Vue will be compiled into a virtual template DOM rendering functions. Binding response system, we can calculate Vue intelligently re-rendering requires a minimum number components, number of operations and minimize the DOM.
14, commands (Directives) is a special property with v- prefix. Value of the property is expected to be a single instruction JavaScript expression (v-for is an exception, we discuss later). Duty instruction that also affect when the value of the expression, which is produced responsively acting DOM.
15, parameters of
a number of instructions capable of receiving a "parameter", represented by the colon after the instruction name. For example, v-bind command can be used to update the HTML responsive properties: <a v-bind:href="url"> ... </a>, href here is a parameter, the command informing v-bind element href attribute value binding expression of url.
Another example is the v-on instruction, which is used to monitor DOM event: <a v-on:click="doSomething"> ... </a> here parameter is the name of the event monitor. We will also discuss event handling in more detail.
16, modifier
modifier (Modifiers) is a half-width full stop. Specified special suffix used to indicate that an instruction should be bound in a special way. For example, .prevent modifier tells v-on instruction for event-triggered calls event.preventDefault (): <v-on form: submit.prevent = "onSubmit"> ...
(1) v-bind full syntax: <a v-bind:href="url"> ... </a>
(2) the bind-V abbreviated syntax follows: <a :href="url"> .. . </a>
(. 3) V-ON full syntax: <a v-on:click="doSomething"> ... </a>
(. 4) V-ON abbreviated syntax follows: <a @ click = " doSomething "> ... </a>
three renderer list
1, a corresponding array-for V
(1) for V-rendering option list according to the instruction set of the array.
(2) v-for item in items instruction requires special syntax form.
(3) v-for full access to the block parent scope attributes.
(4) v-for optional further supports a second parameter is the index of the current item.
You can also use as a separator in an alternative of:
2, corresponding to a target v-for.
(1) the first parameter value attribute object iteratively.
(2) by the second argument attribute name object iteratively.
(3) The third parameter is the index of the object to iterate.
Seven Ways Vue.js custom components template: https: //laravel-china.org/articles/4382/seven-ways-to-define-a-component-template-by-vuejs
four, Vue global function
1, Vue .component: examples of components are reusable Vue
2, Vue.extend: data object merging internally shallow (depth layer attributes), and data components when the collision occurs preferentially to the component data.
3, Vue.directive: custom instruction
4, Vue.use: use plug-ins. It needs to be done before you call the new Vue () to start the application.
V. events and assemblies
1, event. Background: (1) in the properties of html tags, the case shall be resolved to lowercase; (2) in js, the event name does not exist automated case translation; (3) html and js the name of the event to the event name entirely same. Implementation: In the event name in html and js, (1) are used in the scribe line is; and (2) are used hump is wrong; (. 3) with the underlined html, js is wrong with the hump.
2, components: an internal component and its property name in js, the conversion is automatic, i.e., underlined type components and attribute names are automatically converted to js camel variable names and attribute names.
Six, Data VUE assembly, can not be an object, you must be a function. Reason:
1, a reference object is a data type, the same address data of each component are instances of the same memory, the other a data change has changed;
2, when data is composed of a scope function, each component instance has its own scope, each instance independently of one another, they do not affect each other.
Seven, pop dialog elementUI the use of
`` `JavaScript
<EL-the Button of the type =" text "@ the Click =" centerDialogVisible = to true "> Click the Open Dialog </ EL-the Button>
<EL-dialog
: visible.sync = "centerDialogVisible">
<span>
<slot name = "Content" />
<span slot = "footer" class = "Dialog-footer">
<EL-Button @ the Click = "centerDialogVisible = to false"> Cancel </ EL-Button>
</ span>
</ EL-Dialog>
<div slot = "content">
</ div>
`` `
. 1, rendering a custom component, from the content between the custom component <span slot =" aaa "> , rendering to the custom component interpolation slot <slot name = "aaa"> ( named slot).
2, when defining el-dialog, which should contain empty, occupying the slot label, so here <span slot = "footer"> corresponds only.
JavaScript `` `
<span
slot =" footer "/ * not superfluous * /
class =" Dialog-footer "
>
<slot / * Bank redundant * /
V-IF =" config.footer " / * Bank superfluous.
If * / name = "footer" / * the Bank superfluous. Easily lead to misleading * /
/> / * Bank redundant * /
<div
v-the else / * extra * Bank /
= class "diolog-footer"
>
</ div>
</ span>
`` `
Eight, rolling load
` `` JavaScript
v-Infinite-the Scroll = "loadMore"; // callback function is a wireless scroll loadMore
Infinite-scroll- disabled = "busy"; // busy execution is false, the implementation of wireless scroll callback function loadMore, that is not a busy time.
infinite-scroll-distance = "10 "; // here 10 determines the page to scroll to the end of the page when the number of pixels from the trigger callback function, the pixel value is 10. Usually we would do a few pixels tall "is loading ..." In the end of the page, so you can put this div height can be set to a value of infinite-scroll-distance.
`
Nine, es6 assembly vue2.0 wording of
` JavaScript
Export default {
name: 'ComTpl', // component name
props: {// parent component for receiving data transmitted to the subassembly
Tester: {
type : Object
}
},
selectedTest: {}
};
},
computed: {// attributes calculation, all get, set in the context of this example are bound to Vue
method name () {
// .....
}
},
Created () {/ / html rendered template before call, i.e. typically initialize certain attribute values, and then rendered into the view
this.classMap = [ 'A', 'B', 'C', 'D', 'E'];
// The asynchronous data request to
the this http.get $ ( '/ API / Tests') the then ((Response) => {..
Response = response.body;
IF (response.errno === 0) {
this.goods Response = .data;
}
});
},
Mounted () {// the template rendered in html calls, usually page initialization is complete, then the node for the html dom some operations require
this $ nextTick ((.) = > {
this._initScroll ();
this._initPics ();
});
},
methods: {// definition method
method name (parameter) {
// ...
}
},
Filters: {// filter can be used to write, such as code formatted date
// embodiment
the formatDate (Time) {
the let DATE = a Date new new (Time);
return the formatDate (DATE, 'the mM-dd-YYYY HH: mm');
}
},
Watch: {// data used to observe changes Vue example, after performing the method
// ...
} ,
components: {// registration component, the first component to be introduced into the uppermost
// the test (to add import test from 'path ...' on the default Export;
}
};
`` `
ten, ref obtain DOM element or referenced assembly.
. 1, REF applied to the common element, is acquired by this.ref.name dom element
2, ref is applied to the sub-assembly, is obtained by this.ref.name component instance, be used method All components.
eleven, elementUI input validation rules in
`` `JavaScript
<-form EL
` Twelve, VUE defined components: example Vue component is reusable, they receive the same configuration as the new new Vue, e.g. data, computed, watch, methods and lifecycle hooks and the like. The only exceptions Yes. (1) no el configuration items. (2) data must be a function, the data are maintained for each instance independently scope, examples of the change in the data will not affect the data in the other examples. JavaScript `` ` Vue.component ( 'the myComponent', {
Data: function () {
return {
COUNT: 0
}
},
Template: '<Button V-ON: the Click = "COUNT ++"> by You clicked Me {{COUNT}} Times </ Button>.'
})
`` `
ten Third, the components
1, Item component Definition: vue components, like template, render function is to create html templates; the first parameter is the render function createElement (or ignore createElement, under the premise of the introduction of babel, in render Intrinsic functions JSX syntax), the second parameter is a context, stateless, no examples of this component to facilitate acquisition properties, such as context.props.level, there are instances when using this this.level; this react with the. props.level.
JavaScript `` `
Export default {
name: 'the MenuItem',
Functional: to true,
The props: {
icon: {
type: String,
default: ''
},
title: {
type: String,
default:
}
},
The render (H, context) {
const {icon, title context.props} =
const of vnodes = []
IF (icon) {
vnodes.push (<icon icon SVG-icon-class {} = />)
}
IF (title) {
vnodes.push (<= span slot 'title'> {(title)} </ span>)
}
return of vnodes
}
}
`` `
2, Item component invokes the
<item v-if =" onlyOneChild.meta " : icon = "onlyOneChild.meta.icon || item.meta.icon" : title = "onlyOneChild.meta.title" />
XIV VUE routing configurations:
1, i.e. the introduction of class VueRouter import VueRouter from './router ', i.e. injection into the class Vue Vue.use (VueRouter);
2, new an VueRouter example var vueRouter = new VueRouter ({routes : constantRouterMap}), injected into vue Examples var app = new Vue ({el : '# app', vueRouter / * This is the injection behavior * /, store, render : h => h (App) }); attachment var constantRouterMap = [{path: '/ foo', component: foo}, {path: '/ bar', component: bar}]
. 3, in the Vue assembly by . this $ router.push ({path: '/'}) implement page jump; by this $ route / * this behavior is acquired * / XXX, pass over the jump is received parameters, such as name, path,.. query, params attributes;
fifteen, VUE call routing: HTTP: //www.sunfengxiang.com/1092.html
. 1, $ router.push ( 'User') // string route
2, $ router.push ( {path: 'user'}) // routing objects
3, $ router.push ({path: `/ user / $ {userId}`}) // i.e. "/ user / 123", // target route
4, $ router.push ({path: 'user' , query: {plan: 'private'}}) // routing objects
5, $ router.push ({name: 'route1', params: {userId: 123}}) / / "named routing"
for props is a "target route" in; against the params "named Route" a; not effective in the params "target route", as in $ router.push ({path: '/ user', params: {userId}}) the "params" does not take effect.
Sixteen, routing component parameter passing vue - Page Communication: HTTPS: //blog.csdn.net/mapbar_front/article/details/79362602
vue Crossing routing parameters: $ route object, which is a record dedicated for component parameters vue object.
1, in a conventional manner
(1) is defined in the router.js "route object" {path: '/ main /: ID', Component: the Main}
(2) in a router-link transmission parameters are: <router-link to = ' / main / 123 '> </ Router-Link>
(. 3) acquired in the Main.js: the console.log ($ route.params.id the this.); 123 //
2, in the "target route", configure " props "property
(1) Boolean mode: If props is set to true, route.params will be set to the properties of the component (this sentence is very important). {Path: '/ main /: id', component: Main, props: true}. In the Main.js: console.log (this.id);
(2) Object Mode: routing configuration attribute is an object of the props. {Path: '/ login', component: Login, props: {userName: 'mapbar_front'}}. In the Main.js, we can use: props: [ 'the userName'], Created: function () {the console.log (this.userName);}
(. 3) Function mode: props property is a function, the function returns a objects. The object of the key, is to be passed to the props Main components.
JavaScript `` `
{
path: '/ Login',
Component: the Login,
The props: () => {
return {
the userName: 'mapbar_front',
Age: 26 is
}
}
}
` ``
in the Main.js,
`` `JavaScript
Fun function (route) {
return {
the userName: "mapbar_front",
Age: route.params.age
}
}
Path {: '/ Login', Component: the Login, The props: funs}
`` `
seventeen, store the generated
` `` JavaScript
Vue.use (Vuex);
const = Store new new Vuex.Store ({
modules: {
App,
User,
permission
},
getters
})
`` `
eighteen, Vuex Vue status
Origin: HTTPS: //vuex.vuejs.org/zh/guide/state.html
. 1, in the store Vuex allows us to define the" getter "(may store the calculated attributes are considered); Vue calculated attribute is computed.
2, the only way to change Vuex store in a state variation is submitted, i.e. store.commit (mutation), wherein the mutation corresponds to react reducer, commit corresponds to react in the dispatch.
3, mapState (the store is mapped to a local state attribute calculation) and mapGetters (mapped to a local store in the getter property calculation) for obtaining data.
4, mapMutations and mapActions for sending events. The former `this.increment ()` mapped to `this. $ Store.commit ( 'increment ')`, which will `this.increment ()` mapped to `this. $ Store.dispatch ( 'increment ')`
5, Vuex allows us to store into module (module). Each block has its own state, mutation, action, getter, or even a nested block - from top to bottom in the same manner of dividing:
`` `JavaScript
const = {ModuleA
State: {...},
mutations: ...} {,
Actions: {...},
getters: {...}
}
const = {ModuleB
State: {...},
mutations: {...},
Actions: {...}
}
Store new new Vuex.Store = const ({
modules: {
a: ModuleA,
B: ModuleB
}
})
store.state.a // - status> moduleA of
store.state.b // -> state of ModuleB
`` `
Eighteen, VUE in configuration state:
1, the only way to change the status of the store Vuex is submitted mutation, `
`` JavaScript: RUN
mutations: {
INCREMENT (State) {
// change state
state.count ++
}
}
store.commit ( 'INCREMENT')
`` `
2, is submitted to the Action mutation, Action can contain any asynchronous operation. In a global method, Action triggered by store.dispatch; internal process in the assembly, Action triggered by this $ store.dispatch.
JavaScript `` `
Actions: {
INCREMENT (the commit {}) {
the commit ( 'INCREMENT')
}
}
store.dispatch ( 'INCREMENT')
` ``
nineteen, baseurl and BASE_API
Source: https: //www.cnblogs.com /zs-note/p/9118370.html
aid: HTTPS: //segmentfault.com/a/1190000010043013
`` `JavaScript
= Merge module.exports (prodEnv, {
NODE_ENV: ' "Development"',
BASE_API: ' "HTTP: // localhost: 8080"' // configured as a local virtual address will access the local server, so that by Step 1 proxy access API service, to avoid cross-domain
})
`` `
XX, when calling VUE component, the property name is a variable component definition when the VUE, the property value is variable on this page.
1, <comTab v-if = "hasTabs": datas = "tabs": parent = "parent" />: the equivalent of v-bind; @ corresponding to v-on; datas are attributes, where traditional values, defined when prescribed type.
2, Vue component prop property Description: HTTPS: //blog.csdn.net/itpinpai/article/details/80514690
. 3, component provides authentication of props: https://blog.csdn.net/wngzhem/article / details / 53394730
twenty-one, for ES6 allowed to write directly to variables and functions, as object properties and methods. Such writing more concise. http://es6.ruanyifeng.com/#docs/object
`` `JavaScript
The props: {
DATAS: {
type: the Array,
default: function () {
[]
},
},
}
`` `
attached to a parameter and return value of the function tab
1, the parameters
(1) the this;
(2) Page-related objects (including the number of each page the current page total number of pages optional);
(3) when the jump up from other pages, carrying parameters assigned to the filter condition, another request to the background;
(4) filtering the related objects;
(5) callback is encapsulated into the function (3) 2;
(6) returns back the received variable data;
2, the return value of
the above parameters (1);
(2) check the related objects;
(3) click the tab function, requires a target, 2 callback function, a total of three parameters, which calls a function body (5) function; and
(4) whether there is a filter term;
(5) other functions, such as checking whether the air function, filter function, filter function clears , number of page display change function, checking function;
attached to two, a filter condition check, the processing logic page tab
1, each rendering, are based on the ID array, check to decide whether
the case 2, a request to the background click comprising filtration or clicks per click tab or the number
3, according to the filtering conditions each time, send a request to the background, the The data returned is assigned to paging, paging decided to show
attached three times with multi-level navigation tab
There are left and right display area display area, display area is divided into a right tab (the code) and the display area (the lower the code, which is divided into a plurality of blocks of the same level, each block of one component), click on the tab items (columns), so that the display area to display different blocks, passing different data display area.
Four attachment: angular1 specific usage
<span the bind-ng = "li.rule"> </ span>
<Load-Show the dir = "data.myLoad"> </-tableload the dir>
<icon the dir-name = " 'Edit ' "> </ dir-icon >
the call angular1 component, the attribute names are variables angular1 component definition, the page attribute value is variable.
Methods the Table
clearSelection table used for multiple choice, the choice of the user to empty
this $ refs.multipleTable.clearSelection ().;
59VUE Basics:
Guess you like
Origin www.cnblogs.com/gushixianqiancheng/p/10966982.html
Ranking