Vue.js (pronounced /vjuː/, similar to view) is a progressive framework for building user interfaces.
Vue only focuses on the view layer and adopts a bottom-up incremental development design.
Vue's goal is to implement response data binding and combined view components through the simplest possible API.
Vue is very simple to learn. This tutorial is based on the Vue 2.1.8 version test.
Before reading this tutorial, what you need to know:
· HTML
· CSS
· JavaScript
Set up the environment
If you want to do well, you must first sharpen your tools. Our learning plan starts with learning to build the environment required by Vue. Needless to say, the environment of node and npm is necessary. Now the front-end process is very popular. Basically, new technologies will be available. To develop on the basis of this process, we only need to stand on the giant's XX and install*. I assume that you already have the latest node and npm on your machine, then we only need to execute the following commands:
$ npm install -g vue-cli
After the build is complete, just enter a directory we prepared in advance, such as the demo directory, and then do the initialization operation in the directory:
$ vue init webpack myProject
The webpack parameter means that the myProject project will help you automatically package the code during the development and completion stages, such as combining js files into one file, and combining and compressing CSS files. If you don’t know webpack, it’s better to understand it first. Of course, if you don’t understand it, it won’t affect us to go down.
During the init process, you will be asked to define some descriptions for the project. You can ignore the information such as version. Keep typing y to confirm skipping. After completion, the following interface will appear. The red box will prompt you to do the next operation. Just keep typing the code.
cd myProject
npm install
npm run dev
npm install is the dependency needed to install the project. The simple understanding is to install some necessary plug-ins, which takes a while;
npm run dev is to start executing our project. Once this command is executed, after a short while, the browser should automatically open a link with tab http://localhost:8080/#/, this link is us The homepage of the locally developed project is now, if not, it means something went wrong. Please move to the comment section to reply. . .
(PS: After the development is completed, executing npm run build will compile our source code to generate the final release code, in the dist directory)
Take a look at what files Vue generates for us. Among them, we need to pay attention to the following files
package.json saves some dependency information, config saves some project initialization configuration, build saves some webpack initialization configuration, index.html is our home page, besides these, the most critical code is in the src directory, and index is in many server languages The middle is preset as the home page, like index.htm, index.php, etc.; open webpack.base.conf.js in the build directory, and you will see this code
Explain that our entry js file is in main.js in the src directory, then we will analyze these initialization codes first;
Follow the code
The core architecture of Vue, according to the official explanation and personal understanding, mainly lies in the two major modules of components and routing. As long as you understand the ideological content of these two modules, the rest of the API is only a matter of minutes. So in my series of articles, I will teach you to develop a front-end component library around components and routing. This process is also a training project I personally learn. I personally feel that after I have done it step by step, my understanding of Vue can be regarded as a master, better than Read the book documentation 10 times. That's something to be said. Let's take a look at the most basic default code generated by Vue!
// The Vue build version to load with the import command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue’import App from './App’import router from ‘./router’
Vue.config.productionTip = false
/* eslint-disable no-new */new Vue({
from: '#app',
router,
template: ‘’,
components: { App }
})
First sentence
import Vue from 'vue'
This sentence is easy to understand, just like you want to introduce jQuery, vue is jquery-min.js, then Vue is $; then the ./App file is introduced, which is App.vue in the directory and main.js at the same level File; import files in Vue can be imported directly, and the file extension can be .vue, which is Vue's own file type. The webpack mentioned before will package js and css files. For the same reason, configure the vue plugin in webpack Later (the default configuration of the project), webpack can integrate and package .vue files, which is similar to require in nodeJs.
Speaking of the App.vue file, this is a view (or component and page). Imagine that there is nothing in our index.html. There is only one view. This view is equivalent to a container, and then we put it in this container Various building blocks (other components or other pages), the content in App.vue we will talk about later;
import router from ‘./router’
This code introduces a piece of routing configuration, and the same is said later (don’t worry about it soon)
The next instantiation of new Vue is actually equivalent to the usual init when we write js, and then declare el:'#app', which means that all views are placed in the dom element whose id value is app, and components indicate the introduction The file, that is, the above App.vue file, the content of this file will be written into #app in such a tag. In general, this code means to put App.vue in #app, and then refer to Our #app.
import Vue from'vue' import App from'./App' /import the App component /import router from'./router'/import routing configuration /
Vue.config.productionTip = false
/* eslint-disable no-new */new Vue({
el:'#app',/The final effect will replace the div element with id app in the page /
router,/ use routing /
template:'',/ Tell the page that this component is wrapped with such a tag and use it /
components: {App }/ Tell the current page that you want to use the App component /
})
Single page component
Okay, now open our App.vue file. In Vue, the official website calls it a component. Single page means that the structure, style, and logic code are all written in the same file. When we import this file, it is quite In terms of introducing the corresponding structure, style and JS code, isn't this what we want to see most when doing front-end componentization? The previous ASP and PHP also had such file ideas.
The node side can recognize the .vue file because the webpack mentioned earlier extracts the html, js, and css in the .vue file into a new single file when compiling.
Single-page components will be fully reflected in the actual combat later, so I won’t do too much description here;
See that our file is divided into three parts, namely
Looking back at our browser page, the picture is there, but where are the text and link code below? Here is about to start involving routing.
routing
Here is the general concept of routing: traditional php routing is returned to the front-end different page codes by the server side according to a certain url rule matching, such as the following address
https://isux.tencent.com/about and https://isux.tencent.com/recruit
Note that there are only about and recruit. These addresses without xxx.html are actually assigned to certain files on the server side through a layer of encapsulation. In the same way, the front end can also implement simple routing based on anchor points (no need to refresh the page)
https://zhitu.isux.us/index.php/preview/install#mac
Among them #mac is our anchor route, pay attention to the address we opened in the browser at the beginning:
http://localhost:8080/#/，
Routing allows us to visit pages such as http://localhost:8080/#/about/ or http://localhost:8080/#/recruit without refreshing and display them directly. Now go back to the App.vue file we just opened to see this line of code
This code puts a routing view container in the page. When we visit http://localhost:8080/#/about/, the content of about will be put in, visit http://localhost:8080/#/recruit Will put the content of recruit in
In this way, no matter if we open http://localhost:8080/#/about/ or http://localhost:8080/#/recruit, the pictures in the page are public parts, and become only the content inside the router, then the router Who controls the content?
The src/main.js mentioned above has a code to introduce the router.
import router from ‘./router’
Now let us open the js file in the router directory.
import Vue from 'vue’import Router from 'vue-router’import Hello from '@/components/Hello’import About from '@/components/about’import Recruit from ‘@/components/recruit’
Vue.use(Router)
export default new Router({
routes: [
{
path: ‘/’,
name: ‘Hello’,
component: Hello
},
{
path: ‘/about’,
name: ‘about’,
component: About
},
{
path: ‘/recruit’,
name: ‘recruit’,
component: Recruit
}
]
})
The routing plug-in vue-router was introduced first, and then the routing Vue.use(Router) was explicitly declared. Note that Hello, About, etc. are all pages (or components), and then register the router, and then start to configure routing.
The routing configuration should be clear at a glance. Different pages (or components, pages and components are actually the same concept) are assigned to different paths. The name parameter is not important but only used for identification. You can understand from here that the content of the red box mentioned above is actually the content in Hello. You can understand it by opening Hello.vue in the components directory.
Here you can complete the routing configuration. I personally like to put the page in the pages directory and the components in the components directory. Some people may ask if you want to visit http://localhost:8080/#/about/me How to configure it is very simple, just add one more sub-route configuration to the route, as follows:
{
path: ‘/blog’,
name: ‘blog’,
component: Blog,
children: [
{
path: ‘/’,
component: page1
},
{
path: ‘info’,
component: page2
}
]
}
When you visit /blog, you will visit the Blog page. Just put a router in the Blog, and then when you visit http://localhost:8080/#/blog/, the content of page1 will be placed in the routing container and visit http:// When localhost:8080/#/blog/info, the content of page2 will be placed in the routing container
//blog.vue
summary
Throughout the process we just learned, from initialization to page display, the page architecture flow of Vue is roughly like this
Summarize the previous content first:
1. Setting up the environment
2. Code logic
3. Single page component (simple to use)
4. Routing
5. Sub-route
The above process is a brief introduction when we first started contacting Vue. After I said that learning Vue can master the basic concepts of components and routing, it will be very helpful for us to understand his working mechanism. In this chapter, we are just simple Introduced single page components, in the next article, we will use a practical project to fully understand the importance of componentization in Vue construction.
It’s getting late, I should go back to sleep, and digest it. See you in the next article~~~
Attach all relevant codes and official document addresses at the end of the article~~~
http://cn.vuejs.org/v2/guide/
Attachment: src.zip
Q&A How does vue.js use plugins? Related reading Vue.js actual combat summary Angular and Vue.js in-depth comparison 0 basic rookie front-end Vue.js [Daily course recommendation] machine learning combat! Quick start online advertising business and CTR corresponding knowledge