It is said that in the current era, one of the latest mobile framework technologies is the Vue.Js framework. Using and learning it in the field of front-end development is a kind of ability.
Ask a question
What is the use of vue? What did we use in vue, why should we use it? Then how can we play the effect of vue after it is introduced into html?
1.1. It is said that vue is good, how can I use vue.js?
Vue is JS, so it can also be introduced by importing like other js files. According to the official website, there are two ways:
- Official website download reference
- Official website CDN link reference
After importing the HTML file, run it, you can directly open the HTML file, or use a tool such as Hbuider to run the HTML file, because the Hbuider tool has a built-in operating environment that can run the code file. View the effect of the page code in the browser.
1.2. Then how can we play the effect after the introduction of Vue?
After the introduction, we will first use the script part of HTML, write data binding js in the tag, that is, first declare the global variable, generate a vue global variable app, var app = new Vue ({ el : "#app" data: {Write the data inside, and then use the { {}} brackets on the html to call the data directly, so you don’t need to bind the gte DOM like the original js to output the data, which just omits and simplifies this step.} })
How does it work?
Introduce js, as shown in the figure above, create a new global object in the js part, and output the data data directly to the div of html.
What is the use of vue?
It can directly perform data binding, and can directly generate data in the page and output it to the browsing view, and when the browsing view modifies the data, the data will also change.
What did we use in vue?
two-way data binding
Why do we use it?
In order to make it easier, the operation of DOM is omitted, and it can be bidirectional.
What does npm install vue do?
This operation is different from importing. Importing is to use the vue.js file, and this operation will directly download the source code of vue, that is, the source code of vue released by You Yuxi. What are the functions of these source codes? It is mainly used to study other The deep principle is that we better understand vue. It has no direct effect on the project. What really affects the project is vuecli scaffolding. Vuecli is a tool for initialization, construction, operation, and testing, not a framework. This tool It can be used to build a vue project, it can generate the vue directory structure and the project files needed to run vue, so that we can more conveniently create our own code on these directories.
Since the official website installation page taught me to npm install vue, I got these source codes, I want to know what is the use of it, why should it be downloaded for me, and what is the point of downloading it for me?
The first is that it is open source. The second is that the official website downloads it for us so that we can study its principles. The third may be for us to package it, or it may be used when packaging the project. The fourth is to support vue The environment required for the project to run.
Source code research address:
https://blog.csdn.net/qq_15506265/article/details/110390630
https://www.zhihu.com/question/423163060/answer/1528710219
About vue dynamic routing.
How to display the new page of vue-routing
vue After I create a new file, how to click this menu and jump to display this page. The old method is a tag, then href, but routing is needed in vue, so how do I configure the routing address.
Create a new vue page. The normal process is in the routing index.js file. Normally there will be three routing keys, path, custom routing address, component path, which is the path of the vue file, and a menu name. Add the routing of the newly created file, that is, the jump path of the newly created file, and then add the routing address of the file, plus the plain text of the file, what is the routing address, we click this menu, and then we configure a routing address, link column will jump to the routing address. After we configure the routing address binding file (component) jumping address, the router will automatically jump to the content of the file. The routing is composed of routing address and component content.
The initial question, how do I add an additional page to this system, how do I add an additional menu, and how do I display my newly created page when I click on the menu? After the following preliminary understanding, it is recommended to take a look at the vue routing course.
As a background management system, how to create a new page, how to create a new menu and click on this menu to jump to this page and display the content?
When we manage the background, the menu and routing address jump address will be stored in the database, the purpose is to dynamically generate, without having to operate the code every time, and then control the permissions through the background. Control who can see this menu.
So after the logic is written in the background, normally we create a new vue file, we get the system menu of the management system, go to the management menu and the new menu, the newly created menu not only fills in the menu name, but also the routing address in the sky, Generally, it is customized, and then the path address of the file is uploaded in the sky, so a file menu is generated, and then click the address bar to display the routing address, and the content of the jump is the path address of the file.