## transformation picture analysis button to link the route and displays the corresponding components page
## list of components drawn picture page structure and style beautify
1. Make the top of the slider
2. Make the bottom of the picture list of
### top slider to make the pit are:
1. need the help of tab-top-webview- MUI in main.html
2. class need to mui-fullscreen slider area to remove
3. slide the slider can not be triggered properly by checking the official document, which is found JS components, it needs to be initialized:
+ import mui.js
+ call of official way to initialize:
`` `
MUI ( 'MUI-scroll-warpper.') scroll. ({
deceleration: 0.0005 // Flick reduction coefficient, the greater the coefficient, the slower the scroll speed, the smaller the rolling distance, the default value 0.0006
}) ;
`` `
4. When we initialize the slider, mui.js import, however, the console error: `Uncaught TypeError: 'Caller', 'callee', and 'arguments The' accessed the Properties May not BE ON strict mode`
+ through our reasonable guess, that may be mui.js used in the 'caller', 'callee', and 'arguments' things, however, webpack packaged bundle.js, the strict mode is enabled by default, so the two by conflict;
+ solution: 1. mui.js non-strict mode code to get rid of; but unrealistic; 2. webpack pack when strict mode is disabled off;
+ in the end, we chose plan B is removed strict mode: use this plug-babel-plugin-transform-remove- strict-mode
Remove this strict mode belongs: bable, es6 should be something in it. npm After the package, we have to add in the bablerc
"Transform-remove-strict-mode" this node
This slide, bug how much
5. When just entering the photo sharing pages, the slider does not work, after careful analysis we found that, if you want to initialize the slider, it is necessary to wait for the DOM element is loaded, so we put the slider initialization code, moved mounted lifecycle functions;
6. when the slider debugging OK, discovery, tabbar can not work properly, this time, we need to put every tabbar button style `mui-tab-item` again a name change;
7. get all classification, and rendering classification list;
The difference between the methods and mounted
mounted: In this launch backend requests, back data, with the routing hook to do something (dom render complete assembly mounts to complete)
Some functions required in the event methods are generally defined trigger. Every time a trigger event, will perform the corresponding method. If the method computed in the written method performance will be wasted. computed value must return to a page bound to get value, and methods can be performed only logic code, you can have a return value, you do not.
Vue each instance when it is created to go through a series of initialization processes - such as, the need for data monitoring, compiling templates, examples will be mounted to the DOM and DOM updates when the data changes. But also run some function called the life cycle of the hook in the process, which gives the user the opportunity to add your own code at different stages.
Below is an example of the life cycle, at all stages of the life cycle will have a corresponding hook function. As can be seen from the figure, the runtime created, yet mount DOM, not have access to $ EL properties can be used to initialize some data, and DOM operations related to the created can not be performed; monuted runtime, instances have been linked to in the DOM, this time can be acquired DOM node DOM API.
Tell me what goes on their own life-cycle view of network
This means that the page has not finished loading, I can not get dom elements, such as jquery $ symbol, when the page is not loaded,
We're not obtain elements
It seems a little Vue periodic function or meaning of ah
How to modify the class name of others
All relevant should be re-written down