前言
最近找導(dǎo)師重新更換了研究方向，學的東西還是蠻雜的，本來就是一個代碼菜鳥，搗鼓一大堆，全棧開發(fā)、各種語言、區(qū)塊鏈開發(fā)等等，之前總是想要學會一項，完成一樣功能才記錄。目前我要完成的項目是一個智慧海洋牧場平臺，前期學習了Flask+mysql+echarts的可視化展示，現(xiàn)在需要學習cesium和vue搭建三維交互平臺，之前用的都是原生js，甚至連jquery也沒有學，唯一用的就是ajax，給各位看看我想完成的目標（注意是我想完成的，因為我覺得目前在水產(chǎn)養(yǎng)殖行業(yè)缺少這種，而導(dǎo)師不這么想，下面會說到），如圖：
以下是和導(dǎo)師交流過多次的需求圖，有點亂，不過大致能理解就是一個管理系統(tǒng)，他說實時數(shù)據(jù)和監(jiān)控的接口都會給我，如圖：
學習路線是先vue，再前后端分離，接著做項目的管理系統(tǒng)，把管理系統(tǒng)完善后，最后學習cesium三維交互，達到我想要研究的最終效果。
環(huán)境
pycharm 2019 專業(yè)版
Flask框架
Vue入門
我是跟著這篇文章一路敲下來的，感興趣的朋友請看這篇，接下來我的思路問題也會按照這篇進行。
原文鏈接：Vue
-
Vue安裝
按照這篇文章
vue安裝測試
先把vue該有的環(huán)境搭建好，該下載的下載，測試成功就行。 -
案例分析
敲第一個案例發(fā)現(xiàn) v-model 黃色，提示"Attribute v-xxx is not allowed here"，我是引入了Vue.js的，經(jīng)過資料查找需要在編譯器插件中下載Vue.js，這樣就會有代碼提示，并且不會報錯。
1.vue基礎(chǔ)
大致了解vue怎么工作，基本語法v-bind,v-model,v-if,v-for,v-on等等，注意data中的數(shù)據(jù)都是json格式的，v-on需要注意涉及到方法調(diào)用，需要寫一個類似于js的方法，下面以v-on為例模板：<div id="app"> <!--click綁定了sayHi方法--> <button v-on:click="sayHi">點我</button> </div> <!--1.導(dǎo)入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雙向數(shù)據(jù)綁定
以多行文本為例：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> 多行文本：<textarea v-model="pan"></textarea> 多行文本是：{{pan}} </div> <script src="../js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ //注意這里是pan，要與上面的{{pan}}一致，原文里寫的是message pan:"Hello hello!" } }); </script> </body> </html>3.組件部分
一組可以重復(fù)使用的模板，一個框架里有多個組件，可復(fù)用。
分為全局組件和局部組件：全局組件在Vue實例外部定義。局部實例在實例內(nèi)定義，且僅在父模板內(nèi)可用。
自定義指令，Vue.directive()全局指令。Vue實例中的directives屬性，添加的是局部屬性。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>組件：可復(fù)用型</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>' }); // 再實例化Vue var vm = new Vue({ el:"#app", data:{ // 參數(shù)放在data中被調(diào)用 items:['a','b','c'] } }); </script> </body> </html>4.異步axios
使用axios有幾個方法，這里選兩個:
1）.在終端輸入：npm install axios
使用時import Axios from 'axios' Vue.prototype.$axios=Axios
（這種方法我試了不好使，網(wǎng)頁提示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屬性vm data(){ return{ info:{ name:null, address:{ country:null, city:null, street:null }, url:null } } }, mounted() { //鉤子函數(shù)，get中的url是json本目錄下的json文件 axios.get('data.json') .then(response=>(this.info=response.data)); //這個等價于什么呢 } }); </script> </body> </html>5.計算屬性
跑5.2的時候達不到預(yù)期，應(yīng)該是原文代碼有問題，我就放棄按照原文敲了，轉(zhuǎn)到
computed和methods的效果相同，但是他們的區(qū)別在于computed性能更好，如果不用緩存，可以使用methods。
computed默認屬性有g(shù)etter，也可以設(shè)定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.監(jiān)聽屬性
類似于v-on自動觸發(fā)版,@click是v-on:click的簡寫<div id="app"> <!-- <h1>計數(shù)器：{{ 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('計數(shù)器值的變化 :' + oval + ' 變?yōu)?' + 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節(jié)已經(jīng)介紹@click，其他也是類似寫法<!-- 阻止單擊事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重載頁面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修飾符可以串聯(lián) --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修飾符 --> <form v-on:submit.prevent></form> <!-- 添加事件偵聽器時使用事件捕獲模式 --> <div v-on:click.capture="doThis">...</div> <!-- 只當事件在該元素本身（而不是子元素）觸發(fā)時觸發(fā)回調(diào) --> <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>標簽， 該組件用于設(shè)置一個導(dǎo)航鏈接，切換不同 HTML 內(nèi)容。 to 屬性為目標地址， 即要顯示的內(nèi)容。 以下實例中我們將 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.定義路由組件，也可以從其他文件導(dǎo)入 const Foo = {template:'<div>foo</div>'} const Bar = {template:'<div>bar</div>'} //2.定義路由 //每個路由應(yīng)該映射一個組件，其中可以是"component" //通過Vue.extend()創(chuàng)建的組件構(gòu)造器 const routes = [ {path:'/foo',component:Foo}, {path:'/bar',component:Bar} ] //3.創(chuàng)建router實例，傳'routes'配置 const router = new VueRouter({ routes //相當于routes：routes }) //4.創(chuàng)建和掛載根實例 //要通過router配置參數(shù)注入路由，從而讓整個應(yīng)用都有路由功能 const app = new Vue({ router }).$mount('#app') </script> </body> </html>10.實例運用
1）案例一：導(dǎo)航欄，根據(jù)點擊不同的鏈接，下面會產(chǎn)生相應(yīng)文字
用法總結(jié)：拋開css樣式不談，在點擊鏈接時觸發(fā)makeActive方法，將item參數(shù)賦給active觸發(fā){{active}}，延伸可以用作方法綁定或者頁面跳轉(zhuǎn)，點擊導(dǎo)航欄，跳轉(zhuǎn)到某個url。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>實例訓練一，導(dǎo)航欄</title> <script src="../../static/js/vue.js"></script> <!-- <link rel="stylesheet" href="../../static/less/new_1.css">--> </head> <body> <div id="app"> <!-- 激活的菜單樣式為active類--> <!-- 為了阻止鏈接點擊時跳轉(zhuǎn)，使用了“prevent”修飾符--> <nav v-bind:class="active" @click.prevent> <!--當菜單上的鏈接被點擊時，調(diào)用了makeActive方法，在Vue實例中創(chuàng)建--> <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' }, //點擊菜單使用的函數(shù) methods:{ makeActive: function (item) { this.active = item; } } }) </script> </body> </html>2）案例二：文本編輯
用法總結(jié)：拋開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代碼里面的選擇器嵌套無法識別，例如文章來源：http://www.zghlxwxcb.cn/news/detail-405438.html
.from_box{
form{
input{}
}
}
//以上識別不了
.from_box form input{}
//這種可以
以下兩篇文章教你如何在編譯器中使用less
12文章來源地址http://www.zghlxwxcb.cn/news/detail-405438.html
//這里后綴注意是.css
less只是預(yù)編譯
.css才是你要調(diào)用的
<link rel="stylesheet" href="../static/less/index.css">
到了這里，關(guān)于三維交互可視化平臺（智慧海上牧場平臺）學習開發(fā)之Vue（一）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
