三维交互可视化平台（智慧海上牧场平台）学习开发之Vue（一）

前言

最近找导师重新更换了研究方向，学的东西还是蛮杂的，本来就是一个代码菜鸟，捣鼓一大堆，全栈开发、各种语言、区块链开发等等，之前总是想要学会一项，完成一样功能才记录。目前我要完成的项目是一个智慧海洋牧场平台，前期学习了Flask+mysql+echarts的可视化展示，现在需要学习cesium和vue搭建三维交互平台，之前用的都是原生js，甚至连jquery也没有学，唯一用的就是ajax，给各位看看我想完成的目标（注意是我想完成的，因为我觉得目前在水产养殖行业缺少这种，而导师不这么想，下面会说到），如图：

以下是和导师交流过多次的需求图，有点乱，不过大致能理解就是一个管理系统，他说实时数据和监控的接口都会给我，如图：

学习路线是先vue，再前后端分离，接着做项目的管理系统，把管理系统完善后，最后学习cesium三维交互，达到我想要研究的最终效果。

环境

pycharm 2019 专业版
Flask框架

Vue入门

我是跟着这篇文章一路敲下来的，感兴趣的朋友请看这篇，接下来我的思路问题也会按照这篇进行。
原文链接：Vue

Vue安装

按照这篇文章
vue安装测试
先把vue该有的环境搭建好，该下载的下载，测试成功就行。

案例分析

敲第一个案例发现 v-model 黄色，提示"Attribute v-xxx is not allowed here"，我是引入了Vue.js的，经过资料查找需要在编译器插件中下载Vue.js，这样就会有代码提示，并且不会报错。

1.vue基础
大致了解vue怎么工作，基本语法v-bind,v-model,v-if,v-for,v-on等等，注意data中的数据都是json格式的，v-on需要注意涉及到方法调用，需要写一个类似于js的方法，下面以v-on为例模板：

<div id="app">
<!--click绑定了sayHi方法--><button v-on:click="sayHi">点我</button>
</div><!--1.导入Vue.js-->
<script src="../../static/js/vue.js"></script>
<script type="text/javascript">var vm = new Vue({el:"#app",data:{message:'Hello World'},methods:{sayHi:function(event){//'this'在方法里面指向当前Vue实例alert(this.message);}}});
</script>

2.v-model双向数据绑定
以多行文本为例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app">多行文本：<textarea v-model="pan"></textarea>&nbsp;&nbsp;多行文本是：{{pan}}
</div><script src="../js/vue.js"></script>
<script type="text/javascript">var vm = new Vue({el:"#app",data:{//注意这里是pan，要与上面的{{pan}}一致，原文里写的是messagepan:"Hello hello!"}});
</script>
</body>
</html>

3.组件部分
一组可以重复使用的模板，一个框架里有多个组件，可复用。
分为全局组件和局部组件：全局组件在Vue实例外部定义。局部实例在实例内定义，且仅在父模板内可用。
自定义指令，Vue.directive()全局指令。Vue实例中的directives属性，添加的是局部属性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>组件：可复用型</title><script src="../../static/js/vue.js"></script>
</head>
<body><div id="app"><pan v-for="item in items" v-bind:panh="item"></pan></div><!--Vue.cpomponent()注册组件 pan 定义组件名字 --><script type="text/javascript">// 先注册组件Vue.component("pan",{//pros是属性props:['panh'],template: '<li>{{ panh }}</li>'});// 再实例化Vuevar vm = new Vue({el:"#app",data:{// 参数放在data中被调用items:['a','b','c']}});</script>
</body>
</html>

4.异步axios
使用axios有几个方法，这里选两个:
1）.在终端输入：npm install axios
使用时
import Axios from 'axios' Vue.prototype.$axios=Axios
（这种方法我试了不好使，网页提示Cannot use import statement outside a module）
2）.在编译器直接引入并使用：
html <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
这种可以

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>{#解决闪烁问题#}[v-cloak]{display: none;}</style><script src="../../static/js/vue.js"></script><!--Axios异步通信，vue的ajax需要用到vue-resource库的axios-->
</head>
<body>
<div id="vue"><div>地名：{{ info.name }}</div><div>地址：{{ info.address.country }}--{{ info.address.city }}--{{ info.address.street }}</div><div>链接：<a v-bind:href="info.url" target="_blank">{{ info.url }}</a></div>
</div><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">var vm = new Vue({el:"#vue",// data属性vmdata(){return{info:{name:null,address:{country:null,city:null,street:null},url:null}}},mounted() {//钩子函数，get中的url是json本目录下的json文件axios.get('data.json').then(response=>(this.info=response.data));//这个等价于什么呢}});</script></body>
</html>

5.计算属性
跑5.2的时候达不到预期，应该是原文代码有问题，我就放弃按照原文敲了，转到

computed和methods的效果相同，但是他们的区别在于computed性能更好，如果不用缓存，可以使用methods。
computed默认属性有getter，也可以设定setter

<div id="app"><p>{{ site }}</p>
</div>
<script>var vm = new Vue({el:'#app',data:{name:'zhang',url:'www.baidu.com'},computed:{site:{get:function () {return this.name + '  ' +this.url},set:function (newValue) {var names = newValue.split(' ')this.name = names[0]this.url = names[names.length - 1]}}}})vm.site = '菜鸟教程http://www.ds';
</script>

6.监听属性
类似于v-on自动触发版,@click是v-on:click的简写

<div id="app"><!--<h1>计数器：{{ counter }}</h1><button @click="counter++">点击</button>-->千米：<input type="text" v-model="kilometers">米：<input type="text" v-model="meters">
</div>
<script>
var vm = new Vue({el: '#app',data: {kilometers: 0,meters: 0},watch:{kilometers:function (val) {this.kilometers = val;this.meters = this.kilometers*1000;},meters:function (val) {this.meters = val;this.kilometers = this.meters/1000;}}
});
// vm.$watch('counter', function(nval, oval) {//alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
//});
</script>

7.样式绑定
后面的样式属性会覆盖前面相同的属性，例如background

<style>
.active {width: 100px;height: 100px;background: green;
}
.text-danger {background: red;
}
</style>
</head>
<body><div id="app"><div v-bind:class="[activeClass, errorClass]"></div>
</div><script>
new Vue({el: '#app',data: {activeClass: 'active',errorClass: 'text-danger'}
})
</script>

8.事件处理器
以下是事件修饰符，还有按键修饰符，第6节已经介绍@click，其他也是类似写法

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div><!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

9.Vue路由
vue路由需要加载vue-router库:
npm install vue-router@4
使用时，引用的@3.0.0始终指向最新版本，所以不用担心

<script https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../../static/js/vue.js"></script><script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
</head>
<body><div id="app"><h1>hello,router</h1><!--<router-link> 是一个组件，默认被渲染成一个<a>标签，该组件用于设置一个导航链接，切换不同 HTML 内容。to 属性为目标地址， 即要显示的内容。以下实例中我们将 vue-router 加进来，然后配置组件和路由映射，再告诉 vue-router 在哪里渲染它们。--><p><router-link to="/foo">Go to foo</router-link><router-link to="/bar">Go to bar</router-link></p><!--路由出口，匹配到的组件渲染在这--><router-view></router-view></div><script type="text/javascript">//1.定义路由组件，也可以从其他文件导入const Foo = {template:'<div>foo</div>'}const Bar = {template:'<div>bar</div>'}//2.定义路由//每个路由应该映射一个组件，其中可以是"component"//通过Vue.extend()创建的组件构造器const  routes = [{path:'/foo',component:Foo},{path:'/bar',component:Bar}]//3.创建router实例，传'routes'配置const router = new VueRouter({routes //相当于routes：routes})//4.创建和挂载根实例//要通过router配置参数注入路由，从而让整个应用都有路由功能const app = new Vue({router}).$mount('#app')</script></body>
</html>

10.实例运用
1）案例一：导航栏，根据点击不同的链接，下面会产生相应文字
用法总结：抛开css样式不谈，在点击链接时触发makeActive方法，将item参数赋给active触发{{active}}，延伸可以用作方法绑定或者页面跳转，点击导航栏，跳转到某个url。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>实例训练一，导航栏</title><script src="../../static/js/vue.js"></script>
<!--    <link rel="stylesheet"  href="../../static/less/new_1.css">-->
</head>
<body>
<div id="app">
<!--    激活的菜单样式为active类-->
<!--    为了阻止链接点击时跳转，使用了“prevent”修饰符--><nav v-bind:class="active" @click.prevent><!--当菜单上的链接被点击时，调用了makeActive方法，在Vue实例中创建--><a href="#" class="home" @click="makeActive('home')">Home</a><a href="#" class="projects" @click="makeActive('projects')">Projects</a><a href="#" class="services" @click="makeActive('services')">Services</a><a href="#" class="contact" @click="makeActive('contact')">Contact</a></nav><p>选择了<b>{{active}}</b></p></div><script>var vm = new Vue({el:'#app',data:{active:'home'},//点击菜单使用的函数methods:{makeActive: function (item) {this.active = item;}}})</script></body>
</html>

2）案例二：文本编辑
用法总结：抛开css样式不谈，@click绑定显示编辑栏和隐藏编辑栏方法，利用v-model与文本双向绑定。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文本编辑</title><script src="../../static/js/vue.js"></script>
</head>
<body>
<div id="app" @click='hideTooltip'><div @click.stop v-if="show_tooltip"><input type="text" v-model="text_content"></div><p @click.stop="toggleTooltip">{{text_content}}</p>
</div>
<script type="text/javascript">var vm = new Vue({el:'#app',data:{show_tooltip:false,text_content:'点我编辑'},methods:{hideTooltip:function () {this.show_tooltip = false;},toggleTooltip:function () {this.show_tooltip = !this.show_tooltip;}}})
</script>
</body>
</html>

附注：

我编译器里的less代码里面的选择器嵌套无法识别，例如

.from_box{form{input{}}
}
//以上识别不了.from_box form input{}
//这种可以

以下两篇文章教你如何在编译器中使用less
12

//这里后缀注意是.css
less只是预编译
.css才是你要调用的
<link rel="stylesheet"  href="../static/less/index.css">

三维交互可视化平台（智慧海上牧场平台）学习开发之Vue（一）相关推荐

三维交互可视化平台（智慧海上牧场平台）学习开发Flask+Vue+Echarts+Mysql+websocket 实战（四）
前言三维交互可视化平台(智慧海上牧场平台)学习开发之Vue(一) 三维交互可视化平台(智慧海上牧场平台)学习开发之Flask+Vue+Mysql(二) 三维交互可视化平台(智慧海上牧场平台)学习开发 ...
前端开发之vue可视化数据图表组件（Chart.js）
前端开发之vue可视化数据图表组件(Chart.js) 前言制作好的效果图 vue2中使用Chart.js 1.在项目中安装Chart.js 组件 2.vue文件 vue3中使用Chart.js v ...
python可视化拖拽平台_python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例...
PyQt5数据拖曳Drag与Drop介绍为用户提供的拖曳功能很直观,在很对桌面应用程序中,复制或移动对象都可以通过拖曳来完成基于MIME类型的拖曳数据传输是基于QDrag类的,QMimeData对 ...
Sovit3D数字孪生智慧海上风电场3D可视化管理平台
建设背景双碳目标背景下,大力发展新能源产业已成为各界共识.风能凭借其资源总量丰富.环保.运行管理自动化程度高.度电成本持续降低等突出的优势,目前已成为开发和应用最为广泛的可再生能源之一,是全球可再生 ...
现代化智慧园区管理平台的建设方案详解
伴随着大家对生活.居住.工作环境的要求愈来愈高,园区的个性化要求愈来愈重要.园区按其功能性与需求性可可分为:物流园区.高新科技园区.工业园区.软件园区.文化园区.创业园区.综合园区等等.智慧园区是融合 ...
网吧智慧消防监控平台
一.行业背景 1.近年来,部分社会力量探索运用了智慧用电技术,在单位(场所)增设电气相关频发的现状推出的消防物联NB烟感.WiFi烟感,各消防主机远程传输模块,4G远程控制模块,无线智能NB压力表 ...
vue-threeJS数据驱动的三维图形可视化
数据驱动的三维图形可视化在信息暴涨的2010-2016年间,冷暴力的扁平化确实有效降低用户的信息焦虑感,使有限的精力更高效处理过多的信息流.二维平面化扁平化在苹果等大头引领下,成为大众用户机器交流默 ...
智慧油田-三维管网可视化信息平台
智慧油田-三维管网可视化信息平台随着社会经济的快速发展,各种管线纵横交错,在油田内有从油井到集输站的管线,在油田外有从选油站到炼化厂的管线,在国际还有越境跨国的输油管线等.更多石油管线.天燃气管线和 ...
智慧城市/园区三维GIS可视化平台
以三维GIS平台为载体构建的智慧城市三维GIS可视化平台,包括城市总体规划.区域规划.区域资源.智慧管理功能. 充分发挥三维GIS平台的数据叠加能力.可视化展示能力.三维空间分析能力,将业务管理.物联 ...

三维交互可视化平台（智慧海上牧场平台）学习开发之Vue（一）

前言

环境

Vue入门

附注：

三维交互可视化平台（智慧海上牧场平台）学习开发之Vue（一）相关推荐

最新文章

热门文章