Vue.js Getting Started Guide
Recently visiting the major sites, forums, and other programming Q & A community like SegmentFault found Vue.js extremely strong, repetitive questioning and content are many, their landlord also take advantage of this great front-end of the boom, started studying for some time Vue.js, it is currently doing with their graduation project.
In the process of doing it also has a lot of knowledge of the official document Vue.js and its various characteristics. Prior to PHP + as a template engine based development, from a never touched except HTML + CSS + JavaScript + JQuery other than front-end technology to people now and can be used independently Vue.js UI libraries affiliated to various development projects I summed up some of the knowledge and experience to share with you.
Here I will share in the form of questions and answers to it. It is assumed that you are only just mastered HTML + CSS + JavaScript, if you for example PHP, JSP as well as the understanding of this front-end JQuery library, and a variety of back-end template language and then used it would be great.
What 1.Vue.js that?
Vue.js (pronunciation / vjuː /, similar to the view) is a progressive frame constructing user interfaces. Other heavyweight frame is different, Vue incremental development bottom-up design. Vue core library focus only on the view layer, and very easy to learn, easy to integrate with other libraries or existing project. On the other hand, Vue is fully capable of driving the use of single-file assemblies and Vue ecosystem support library complex one-page application development.
Vue.js goal is to achieve as far as possible through a simple API response data binding component, and combinations of views.
If you are an experienced front-end developer, wanted to know the difference between Vue.js with other libraries / frameworks, see compared to other frameworks .
This is the official website of the introduction, is not that very very abstract official? After reading you may still have a lot of people do not really understand this framework is used in the end what to do, what is the "progressive framework"? What is a "bottom-up incremental development"? What is "the view layer"? What is a "single-file assembly"? What is a "complex one-page application?" The second paragraph the words inside "data in response to the combination of binding and view components" This is a what? There is one final passage, "The difference Vue.js with other libraries / frameworks," what is?
Do not worry if you slowly read all the questions and answers and there will surely be in front of those technical terms that you may have never heard of a feeling came to understand.
2.Vue.js in the end is what?
I must now see this article who know almost all the reading with the APP or the web version. Vue.js for a building is known almost similar on the web that many single table, and the contents of the web need to be modified in accordance with user's operation app.
3. Single Page Application (SPA)
As the name suggests, a single-page application generally refers to a page that application, of course, also be a sub-application, for example, know almost a page can be viewed as a sub-application. Single-page application process generally interact very much, and the contents of the page the user needs to operate according to the dynamic changes.
4. You said earlier, I know almost web version can also write with JQuery ah, why should Vue.js it?
Talked about JQuery, I have to say the JavaScript DOM manipulation. If you use JQuery to develop a know almost, then you need to use a variety of methods JQuery DOM manipulation to operate in the HTML DOM structure.
Now we have a web application abstract look, then the HTML DOM is actually view a web page is through a combination of DOM and nested, forming the basic structure of the view, and then modified by CSS, the basic structure of the view " makeup "let them look more beautiful. Finally relates to the interaction part, you need to use JavaScript to accept a user interaction request, and in response to user interaction through the event mechanism, and modify various data in the event handler, for example, modifying the DOM a the innerHTML or innerText portion.
We put in the HTML DOM can open an independent division and other parts out of a level, this level is called the view layer.
Vue core library focus only on the view layer
Why do we view layer extracted separately and to pay attention to it then?
Because like know almost this page element is very large, very large structure of the page, and view the data if all mixed together, the same as traditional development all mixed in HTML, then to deal with them will be very strenuous, and If there are lingering relationship that exists between several structures, it will lead to greater problems on the code, what is this problem?
Do you remember when you had to write JQuery, have written $ ( '# xxx'). Parent (). Parent (). Parent () This code? The first time you write, you feel much elements on the page, not the father of this element is to find the right father's father, my father's father write clearly a big deal of this element in the comments dad does not like it there. But what if you had a few days after your project leader or product manager suddenly you do web amend the requirements, the amendment request will affect the structure of the page, which is associated with the nesting level DOM to be changed, then $ ( '# xxx'). parent (). parent (). parent () might become $ ( '# xxx'). parent (). parent (). parent (). parent (). parent () a.
This is nothing, and other products later iterations faster and faster, more and more modified, and similar pages and nested DOM elements associated with more than one, then it will be very hard to modify. And JQuery selectors look for page elements and DOM manipulation itself is also a loss of performance, this page may open that time, it will become more and more cards, and you knowing where to start.
When you encounter this problem in the preparation of the project, you will complain about, why in the world would be like this HTML Inception many different needs div nested in order to make the language of the page, why did not learn JQuery fancy it is a simple DOM manipulation, but now they do not feel how simple it is, can I learn is false JQuery? Why is it so hard to write code, you want to hit the computer, the keyboard you want a shot at the dog's head on the product, blame him every day, change needs to let you spend original fragrance of tea-flavored clear code becomes so long and boring.
This time if you learned Vue.js, then these complaints will cease to exist.
5.Vue.js Why let them develop web-based front-end application so convenient?
Because there are Vue.js declarative, responsive data binding, and component-based development, and also uses the Virtual DOM techniques that look at the name on that tall.
But what are these terms?
6. The responsive data binding
Here is responsive media query @media not responsive layout, but to vue.js automatically in response to changes in some of the data page. As to how to respond, we can put the following code just paste it into a file named html extension and then use the browser to open, just enter some text in the text box inside, look at the page changes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" name="" value="" placeholder="在这里输入文字，下面会跟着变化" v-model="message">
<hr>
<p>{{ message }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
Is not find a very magical phenomenon, together with changes in the content of the text and the following text input box inside the p tags?
In other words, the label which by P {{message}} that is written with the input tag value bound together, wherein the change, and other data it is bound to follow the change.
Binding title, the automatic response is vue.js changes in data, and according to the binding relationship between the user pre-written code, and the data of all views are bound content modification. And this binding relationship, in the figure is a v-model attribute input tag to declare, so you may also see someone called vue.js is roughly declarative rendering engine template elsewhere.
7. The component-based development
Remember when the traditional front-end development, we are doing everyone a page, and then finally set into a variety of back-end template engine, such as the Smarty PHP or Java-JSP and so on.
But now we do a single-page application, and interactive page structure is very complex, there are many modules need to write on a page, and often a module of code size and workload is very large, if it is in accordance with the original approach to development then people will be exhausted. And after experiencing the future product needs to change, modify, it is also very troublesome, for fear of moving one of the div, div along with other avalanche, the entire page all hell broke loose, or because the JavaScript event bubbling mechanism, leading to modify some of the inner layer of the DOM event after processing functions, a variety of unexplained strange BUG appear.
In object-oriented programming, object-oriented, we can use the idea of the various modules packaged into a large class, or to split the service module into more smaller several classes. In the process-oriented programming, we can also split some of the many great features to function, then assign them to different people to develop.
In the front-end application, whether we can program just as the module package it? This introduces the idea of component-based development.
By Vue.js components, to split a single page application to a variety of modules of a single component (Component), we write the various components as long as the first label (representing pits) in the parent application, and component tag written to be passed in component parameters (passed as parameters to a function as this parameter is called the properties of the component), and then were written to achieve a variety of components (fill the hole), then the entire application even if done .
8.Virtual DOM
Now faster and faster speeds, many people at home are dozens or even hundreds of M optical fibers, 4G mobile phone is also underway, stands to reason that a web page only a few hundred K, and the browser itself will be a lot of resources cache files, so why dozens of M fiber open a previously opened, there have been cached page still feel slow it? This is because the browser itself the DOM is also a performance bottleneck, especially in the traditional development, when the DOM frequent operation with JQuery or native JavaScript DOM manipulation functions, the browser to stop rendering new DOM tree, cause a page looks very Caton.
The Virtual DOM DOM is a virtual English, in short, he is a kind of advance can be calculated by a variety of JavaScript, DOM manipulation the final calculated and optimized for this DOM operations belong to a preprocessing operation, and there is no real operating DOM, so called virtual DOM. Finally really DOM manipulation will be submitted in the calculation is completed, the operation will change to reflect DOM DOM tree.
For vue.js of Virtual DOM, the industry has mixed reviews. Some people think Vue.js as a lightweight framework for the introduction of Virtual DOM Vue.js itself will increase code size will consume more CPU (more power will be on the phone) (Note: do not consume more CPU means that the card will be more, because JavaScript is calculated background calculation, his computational still not let DOM operation becomes Caton), and when the operation of a single DOM element, but more a calculation process will be slower. But others believe that basically developed with Vue.js are a lot of elements in the page content, DOM certainly the order of operations generally larger, about the average or more cost effective.
9. I am in the end how to do a single-page application development with Vue.js?
Having said that, I still do not know how to use it to make a page like know almost as ah, in the end how to learn it then?
Earlier we saw a responsive data binding case, it is just a DEMO, but also do not see any practical significance, from the real one-page application even close, in the end how to use it to develop real projects it?
My advice is, first introduced - vue.js official document fundamental part of bite the bullet and see it again. In addition to components of this section involves a lot of obscure terms other than the first few chapters entirely to Vue.js to use as a template engine.
Then start learning the basic usage ECMAScript6, Webpack, NPM and Vue-Cli, preferably Node.js have to understand.
After the last component parts to broadly read, and understand what are the components inside the concept began to see online video as well as various real source article someone else open source.
10. In the earlier you mentioned several times ECMAScript, which is what?
ECMAScript and JavaScript seem to like to listen to the names, do they inextricably linked to what?
Yes you guessed it, really have a deep connection between them.
Teacher's words quoted Ruan Yifeng :( ECMAScript 6 entry )
Talk clearly this problem, we need to look back at history. In November 1996, the creators of Netscape's JavaScript, JavaScript decided to submit to the International Organization for Standardization ECMA, this language can hope to become an international standard. The following year, ECMA released the first version of the standard No. 262 document (ECMA-262), provides a standard browser scripting language, and this language called ECMAScript, this version is version 1.0.
The standard is for the JavaScript language developed from the beginning, but the reason is not called JavaScript, for two reasons. First, trademark, Java is a trademark of Sun Microsystems, according to the licensing agreement, only Netscape's JavaScript can legally use the name, JavaScript and Netscape itself has been registered as a trademark company. The second is to reflect the language of the makers are ECMA, not Netscape, this will help to ensure the openness and neutrality of the language.
Therefore, the relationship ECMAScript and JavaScript is that the former is the latter specification, which is an implementation of the former (another ECMAScript dialect as well as Jscript and ActionScript). Everyday occasions, the two words are interchangeable.
The ECMAScript6 is a new generation of JavaScript language.
Here also strongly recommend you learn ECMAScript6 when reference book ECMAScript 6 Getting Started
11. I always hear Webpack in learning Vue.js, which is what?
Webpack is a front end packaging and construction tools. If you have been previously handwritten HTML, CSS, JavaScript, and CSS will be introduced by the link tag of your HTML file, and importing external JS script via the src attribute of the Script tag, then you will certainly feel strange this tool. Does not matter, let's look at why should Webpack, and then with a reason to learn enough.
12. Why Webpack
Said earlier, do a single-page application itself is quite complex, and in time will certainly do a lot of material to use and other third-party libraries, how do we manage to do these things?
There are talked about in front of Webpack is a front-end packaging tool, front-end code Why do you want to pack it? Because the single-page applications use a lot of material, if every material through the src attribute or link to be introduced in HTML, then request a page, it may launch the browser will request a dozen times, often these requests resources are some of the script code or small pictures, these resources themselves only a few k, do not need to download even one second, but because HTTP is an application layer protocol that the underlying transport layer protocol is TCP this, TCP handshake and waved process consumes time may be longer than downloading the resource itself, so you need all these small files packaged into one file, so long as a TCP handshake process and waved, put more resources to the download, and multiple resources due all share a HTTP request, so the head and other parts are also shared, corresponds to the formation of scale, allowing web pages to show faster and better user experience.
Speaking in front of the building there Webpack function, which had referred to the ECMAScript6 this new version of JavaScript, but now there are a lot of people at home and abroad with the old version of the browser, the browser does not support ECMAScript6, then our how to run the project on the front end of this browser do? This requires the Webpack Loader automatically load a converter to convert us to write ECMAScript6 browser to support the old version of the JavaScript language, the name of this converter is called babel, if you hear or see the word in the future, should to know it is a ECMAScript6 to the old version of the JavaScript converter. It is also building capabilities of Webpack. Of course there is a deeper front-end students will know CSS preprocessor Sass, Less, stylus and the like, we can also write specific rules in the Loader to automatically convert these into ordinary language pre-CSS browsers identification of CSS code.
Introduced at the beginning of the mentioned vue.js can use a single component development project file, the file is actually a single component templates, styles, and JS transition to the main page by Webpack
Of course, more than Webpack this function, it can be extended by installing various plug-ins, such as the thermal load technology, it is the liberation of the keyboard F5 key. Let's modify the code, and then press Ctrl S to save, refresh the browser page automatically changes +, we do not need to manually refresh, and some plug-ins can automatically add annotations, auto CSS code to add some CSS3 compatible browser kernel to prefix , like webkit-xxx and the like.
What 13.NPM and Node.js is? They are what is the relationship?
First talk about Node.js. We know that under normal circumstances, JavaScript runtime environment is the browser, so the ability of JavaScript capable browser will be limited to the authority given to it. For example, read and write local file system this operation, running in the browser JavaScript code generally do not have this operation authority. If we want to write some of the run on the operating system, you can have like PHP, JAVA like programming language has the function of a program with JavaScript how to do it? Node.js to solve this problem. Node.js is a server-side JavaScript runtime environment can be achieved through independent programs written in JavaScript Node.js. Like we mentioned before Webpack Node.js is written, so as a front-end development, even if you do not have to write a separate program Node.js, also was equipped with a Node.js runtime environment, after all, a lot of front-end tools are written to use it .
NPM is a node.js package manager. When we developed the traditional, JQuery.js mostly Baidu search, then go to the official website to download, or introduced directly into the CDN resources, this method is too cumbersome. If you later encounter other packages, this package is the code itself may also call other packages (also known as a dependency of the package and a few other packages), then we want to introduce a package will change in your own projects very difficult. Now that we have this package NPM manager, directly through
npm install xxx包名称
The way it is introduced, for example,
npm install vue
Automatically import this package in the current project folder, and automatically download npm Well vue other packages this package depends on.
As for some people when configured in accordance with the online tutorial npm stepped pit and found the download speed is very slow or completely not download, it is because China has a well-known reasons, the Internet also has a variety of possible solutions to rectify this problem, everyone good using the search engine.
Mentioned earlier Webpack can install various plug-ins to extend the functionality, in fact, it is extended in this way.
If you learned PHP, then, NPM and PHP on the inside Composer similar. And also under the apt-get and yum in CentOS Ubuntu almost.
14.Vue-CLi is what?
It is a vue.js scaffolding tool. It means you automatically help generate a good project directory, configured Webpack, as well as various tools rely package, it can be
npm install vue-cli -g
Mounted behind the -g installation represents the global mean, mean that you can then open a command line to call it directly through vue command.
15. Should I learn Vue.js?
Now Vue.js whether or momentum of support is very good, but it is more and more Chinese data itself, but also a lot of tutorials, now casually open a few columns and front-end developers know almost related, basically able to see to related articles, the community is also very active.
As you should or should not learn, depends on you, if you are currently doing just to show content-based project, or just all day long with a variety of CMS establishment imitation station, and later are not going to replace a better job, you can temporarily do not have to learn. If you develop interactive project is very large, and the development of both the front and rear ends of the front and rear ends of the separation have a very clear understanding, then I can safely learn and use in the actual project.
16.Vue.js how fire up?
On this issue, say many of the Internet, I think a few years ago mainly large front-end changes too fast, and recently started a year Vue.js + Webpack this combination gradually stabilized, and already have a lot of Chinese data.
Contrary to what its competitors AngularJS, old and new versions of the project can not be a smooth upgrade, change too much makes the user feel less secure.
And React mainstream itself recommended that the JSX, the need for additional learning a grammar (what? Learn Vue.js also learn ECMAScript6? ECMAScript6 now is the trend, not only because Vue.js to learn), and React itself with the render the template is written to write the code, which makes a lot accustomed to using Smarty template engine back-end get people to use feels uncomfortable, it now appears React itself in some degree of popular Chinese forum community is still not high Vue.js.
Of course, not to say that in addition to Vue.js other frameworks are very poor. Know almost like a new version is developed by React, he still have their own excellent place to study in depth we can make their own judgments after.
17. I also see in many places Vuex and Vue-route, which is what?
Vuex is a state manager of vue. For centralized management of various conditions in a single page of the application.
Vue-route vue is a front-end router, the router is not what we use the Internet router, but a thing of the page entry and mapping relationship management requests. It can be achieved on a page without refreshing the partial replacement, allowing users to feel like switching to a different page.
Talk clearly these two things, you have to spend a lot of space, so here is just a brief mention, first learn vue.js itself is the most important.
18. I'm still some places seen Vue-resource and Axios, which is what?
We do not separate the traditional front and rear ends of development, back-end data through the template engine directly to splice into the HTML returned. Now do a single-page applications are in development before and after the end of the separation, the data of this one-page application would have a way to get through ajax, ajax also submitted to the backend by the way.
In the traditional development, we are xmlhttprequest by manual operation, or for data submitted by JQuery ajax method to obtain.
vue.js package itself is not operating ajax libraries, so we need to ajax operated by Vue-resource and Axios, but for various reasons, has now vue.js2.0 axios as the official recommendation of the ajax libraries.
19. Write Vue.js what development tools and computer use is it?
Front-end development basically do not need too much high-end computer can do the job, and now this era is the computer, installing editor can do front-end development.
The nature Vue.js component files or ordinary code file, so some of the various editors with syntax checking plug-sufficient. I am using a sublime text 3, after the installation of some plug-ins can achieve .vue single-file assembly code, and highlight a variety of auto-complete. Webstorm also has a similar plug-in, you can configure the environment under the guidance of a variety of teaching online article.
I use the theme Monokai, watch this topic for a long time will not hurt the eyes in most displays. I use the monitor LG IPS236, the luminance portion of the display color adjustment, this display is adjusted to about 2.0 I would be more comfortable, too low will lead brown bottom black background, a large contrast more tired, the contrast is too high will result in inadequate, the picture whitening effects of color.
Conclusion:
Probably a lot of people, myself included, see Vue.js in that magical way binding elegant writing will have a very amazing, but after seeing the Chinese document released immediately kind of like the urge to learn. Unfortunately, a large front-end, after all, a large front-end, if not a thorough understanding of all aspects of front-end to be able to think of asking for the moon, certainly sorry front of the big "big" word. Originally just looking to learn a Vue.js, incidentally, did not expect to ECMAScript6, Webpack configuration, ESLint configuration, bable configuration, npm use, node.js grammar, after vue family bucket of vuex, vue-route, etc., etc., learn again. Some time ago the Internet has spread out of a job, called Webpack configuration engineers, from here you can see the front of this hodgepodge does make sense is not so easy. Come together, what problems can also reply in the comments section, I will find time to add in the article content. Thank you for your support! ~
