VUE is a front-end development framework. It was born in 2014.
The original front-end development framework requires engineers to write html, css, and javascript (js). js is a scripting language. The browser can run js to perform some actions supported by js, such as click feedback, drop-down menus, and manipulate DOM elements of html. In this way, the efficiency of opening is very low.
Later, some front-end development frameworks were born, and VUE is one of them. At present, in the domestic front-end development, especially the development part of the h5 page of the mobile app, it is adopted by many companies.
When developing with VUE, you don't need js to directly manipulate html elements, you only need to manage the variable values of js, and html will automatically update these values. Traditional html and js can complete the functions, VUE has given implementation plans, development can be achieved only by writing simple html and js statements.
The tools developed by VUE are generally visio stdio code (vscode), which can be used proficiently within two days of adaptation. Still very powerful.
But vscode itself is just an editor, and you need to configure your own compiler environment to develop a compiled language. I haven't done it specifically.
Front-end development does not need to be equipped with a compilation environment, just install the required libraries and tools on the command line interface. The specific process is searched online for "building a vue project from scratch".
The newly created project must have the following directory structure (ranktable.vue was added later)
This can cause dizziness and vomiting for the people in Novice Village. I have produced so many documents without writing anything. Not only are there a lot of them, but the types of documents are also complete.
Don't think about eating too much when learning VUE, unless you are experienced in front-end. Otherwise, let’s read the red arrow files first, and you’re just getting started if you understand them. The order of viewing is strictly as follows.
index.html->main.js->App.vue->index.js->HelloWorld.vue
I will talk about these documents briefly, and you will have a clear context.
One, index.html
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>tradedatapy</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body></html>
Of course, page development requires HTML, and VUE development is no exception. This html is the entrance to the entire project. It's just that the inside of <body> is too simple. <div id="app"></div> means that this html is bound to a VUE object whose id is app.
Two, main.js
new Vue({ //new Vue statement is to define a VUE object el:'#app', //vue object id is app router, components: {App }, //vue component name is APP template:'< App/>' //template name is APP})
This defines the VUE object of an app, and you can find it in index.html.
Three, App.vue
<template><div id="app"><!--<img src="./assets/logo.png">--><router-view/><!--default is Helloworld.vue--></div></template><script>export default {name: 'App' //export 了名为App的组件，main.js就可以找到它了}</script>
The above template can be understood as a part of html. The fragments can be spliced to the corresponding position of html to form a complete page with content. <img src="./assets/logo.png">This sentence was annotated by me, otherwise the page will display this image. The following <route-view/> part is routing. Depending on the user's url, it will be routed to different vue files to display different page content.
Four, index.js
There is more than one index.js in the project. I must have spotted it. I want to explain the index.js in the router directory.
//The configuration here determines what content will be displayed in the <router-view/> position in App.vue export default new Router({ routes: [{path:'/', //When the user visits http://localhost:8080 The /root directory, which is the default directory, will be routed to the HelloWorld component. //All the contents of this component will be displayed in App.vue <router-view/> name:'HelloWorld', component: HelloWorld }, {// When the user visits http://localhost:8080/ranktable, the content of ranktable.vue will be displayed//ranktable.vue is the path I added:'/ranktable', name:'/ranktable', component: ranktable} ]))
Five, HelloWorld.vue
Finally see what's here
<template> <div> The original content was deleted by me, and now the page displays this sentence. </div></template><script></script>
Execute npm run dev on the vscode command line, see the following instructions, and paste the address into the browser
Compiled successfully in 983ms 15:43:26 I Your application is running here: http://localhost:8080
If you want more complex functions, just implement it in helloworld.vue. For example, if I want a form-filling query function, change it to
<template><div><group title="城市"><selector placeholder="请选择城市" v-model="demo01" title="" name="district" :options="list" @on-change="onChange1"></selector></group><group title="街道"><selector placeholder="请选择街道" v-model="demo03" title="" name="district" :options="list4" @on-change="onChange3" @click.native="onClickpz"></selector></group><group title="小区"><selector placeholder="请选择小区" v-model="demo02" title="" name="district" :options="list3" @on-change="onChange2" @click.native="onClickheyue"></selector></group><group title="日期"><selector placeholder="请选择日期" v-model="demo04" title="" name="district" :options="list5" @on-change="onChange4" @click.native="onClickdate"></selector></group><group title="统计类型"><selector placeholder="请选择统计类型" v-model="demo06" title="" name="district" :options="list6" @on-change="onChange6"></selector></group><div style="padding:15px;"><x-button type="primary" @click.native="getValue('plainValueRef')">查询</x-button></div></div></template><script>import { Selector, Group, Cell, CellBox, XButton } from 'vux'此处省略很多东西</script>
This example is a bit complicated and needs to implement a lot of content in the following <script>, introduce some components of vux, vux everyone can study by themselves. The effect is like this
