Some students are confused in their studies, and they learn a lot without knowing the knowledge system, which finally leads to a little understanding of the basics, and the latter knowledge can be roughly understood.
It’s just that I can’t fully grasp it, so I hope that if you have friends who are confused in vue, don’t use vue scaffolding too early
First understand the core of vue
Before reading this article, make sure that you have learned the content of the article published by the author before,
Or you know for yourself the following implemented in other ways:
1. Webpack project construction skills
2. Various loaders of commonly used webpack and basic syntax of es5 and 6
3. What is a hot update
4. webpack comes with a server and webpack's node API
5. Basic introduction of vue and knowledge of common components
Today we skip the page declaration template to learn how to reference external vue files
First, you need to introduce the vue dependency package, vue-loader and vue-router into your project
package.json is as shown in the figure, other components are different
Let's take a look at the main file structure
We are using the test2 series this time
First, let's demonstrate the following how to reference external vue files in the main file
First create tem1.vue in tpl
As shown in the figure (how to write the vue file as a precondition, children's shoes who don't know how to read the official documents by themselves)
This is a simple vue module we have prepared
The following shows how to load into test2.html
Need to use the Vue object in test2.js to render the template file into the page
Well, we only need these few steps to introduce the template into the web page,
Then vuejs is a framework for single-page applications, so we may introduce a large number of template files in the same file
This means that the hyperlink jump pages we implement in the web page also need to be switched in a single page
Vue provides a routing function,
Through the middleware vue-router, you can quickly switch template files, just like jumping pages in a web page.
Let's make a simple example
Before this we need to create a second vue template tem2
The steps can repeat the above operations, and the steps are omitted here
At this point, we only need to make the following modifications in test2.js and test2.html to implement the routing function
Well, you can see the interface results below
The two texts in the hyperlink state can switch the display content below at any time
We should have an impression about the simple use of vue and routing here.
So what should I do if I want to pass parameters into the virtual page?
We can make the following modifications in the router-link, and do the value operation on the corresponding page.
Finally, let's do a test
This is the default state
The effect that appears when we click on app1
How about, compared to tedious interface processing, vue.js makes your code cleaner and more regulated
We have divided all the interface parts into modules and managed them separately. The modules can also communicate through the framework.
In this way, we can make a very large and scattered project program a highly maintainable single-page application,
Why Single Page Apps are so popular in this day and age is because it does have its benefits,
And vue.js draws on the advantages of react.js and angular.js in this regard, although it does not seem to be as big as the first two, but with its own advantages,
And the lower learning cost and more user-friendly api have won the favor of a large number of developers
In this era, if you only master basic code libraries such as jQuery, you will never be able to keep up with the pace of front-end learning.
so
If you want to see more of vue's style, complete the foundation, and then go to install vue scaffolding