VUE是什么?
VUE是前端开发框架。诞生于2014年吧。
原始的前端开发框架需要工程师写html、写css、写javascript(js)。js是脚本语言,浏览器可以运行js来执行一些js支持的动作,例如点击反馈,下拉菜单、操作html的DOM元素之类。这样开放效率就很低了。
后来诞生了一些前端开发框架,VUE就是其中之一。目前在国内前端开发中,特别是手机app的h5页面的开发部分,被很多公司采用。
使用VUE开发的时候,不需要js直接操作html元素,只需要管理js的变量值,html会自动更新这些值。传统的html配合js能完成的功能,VUE都给出了实现方案,开发只写简单的html和js语句就可以实现。
VUE开发的工具一般是visio stdio code(vscode),稍微适应两天就可以熟练应用了。还是很强大的。
但是vscode本身只是编辑器,开发编译类语言需要自己配编译环境,具体我没配过。
前端开发不需要配编译环境了,只需要把需要的各种库、工具在命令行界面安装就行。具体过程网上搜“从零开始搭建vue项目”。
刚建立好的项目一定是下面这种目录结构(ranktable.vue是我后加的)
这对于新手村的人会引起头晕呕吐,老子啥都没写就出来这么多文件,不但数量不少,文件种类还齐全。
学习VUE别想一下吃的太多,除非你本身前端经验丰富。否则先看懂红色箭头的几个文件吧,看懂这几个就算入门了。看的顺序严格按照下面这样。
index.html->main.js->App.vue->index.js->HelloWorld.vue
我将这几个文件大概讲一讲,你就能有个清晰的脉络了。
一、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>
页面开发当然是要有html了,VUE开发也不例外。这个html就是整个项目的入口了。只不过是<body>里面过于简单。<div id="app"></div>表示本html绑定了一个id为app的VUE对象。
二、main.js
new Vue({ //new Vue语句就是定义了一个VUE对象
el: '#app', //vue对象的id是app
router,
components: { App }, //vue的组件名是APP
template: '<App/>' //template 名是APP
})
这就定义了一个app的VUE对象,index.html就可以找到它了。
三、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>
上面的template都理解为html的一部分片断就行了,片断可以拼接到html对应的位置,构成一个有内容的完整的页面。<img src="./assets/logo.png">这句被我注释了,否则页面会显示这个图片的。下面的<route-view/>部分是路由,根据用户的url不同,会路由到不同的vue文件,进而展示不同的页面内容。
四、index.js
项目里有不只一个index.js,一定看准了,我要讲解的是router目录下的index.js.
//这里的配置决定了App.vue里<router-view/>位置会展示什么内容
export default new Router({
routes: [
{
path: '/', //当用户访问http://localhost:8080/根目录也就是默认目录会被路由到HelloWorld组件,
//这个组件的所有内容会被在App.vue里<router-view/>显示出来
name: 'HelloWorld',
component: HelloWorld
},
{//当用户访问http://localhost:8080/ranktable会显示ranktable.vue内容
//ranktable.vue是我后加的
path: '/ranktable',
name: '/ranktable',
component: ranktable
}
]
})
五、HelloWorld.vue
最后看看这里有什么
<template>
<div>
原来的内容被我删除了,现在页面显示这句话。
</div>
</template>
<script>
</script>
vscode命令行执行npm run dev,看见下面说明成功了,将地址贴进浏览器
Compiled successfully in 983ms 15:43:26
I Your application is running here: http://localhost:8080
如果想要更复杂的功能,在helloworld.vue实现就行了,比如我要一个填表查询功能,里面改成
<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>
这个例子有点复杂,需要下面<script>里实现很多内容,引入vux的一些组件,vux大家可以自行研究。效果是这样的
- java与ruby的直观比较
- 每天一个Linux命令:chmod
- SparkSql 中外连接查询中的谓词下推规则
- Caliburn.Micro学习笔记(三)----事件聚合IEventAggregator和 Ihandle<T>
- Python进行数据可视化分析快速教程实例
- 一个抓取豆瓣图书的开源爬虫的详细步骤
- Java 8 Stream 教程 (三)
- silverlight ListBox 多列图片效果
- ZooKeeper构建分布式锁(选译)
- Caliburn.Micro学习笔记(二)----Actions
- 每天一个Linux命令:find
- textFile构建RDD的分区及compute计算策略
- 一个基于Flask和MongoDB的CMS内容管理系统
- c++多重继承小结
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- [MySQL学习笔记]2. mysqldump命令详解 Part 1
- 怎样在PF_ring上使用RSS实现网络流量负载均衡
- Docker镜像原理 aufs overlay overlay2
- Zabbix 5.0 LTS 安装
- 技术博客测试: Elasticsearch
- Oracle基本参数(COMPATIBLE)
- Oracle基本参数(CONTROL_FILES)
- Oracle基本参数(DB_BLOCK_SIZE)
- Oracle基本参数(DB_CREATE_FILE_DEST,DB_CREATE_ONLINE_LOG_DEST_n)
- React16的memo函数有啥用
- 要点2:循环、条件控制
- VSCode代码格式化设置
- MapReduce之MapJoin案例
- MapReduce之多个Job串联的案例
- Java Class文件常量池