vue之登錄和echarts · 前端技術總結

登錄的vue代碼也是比較簡單的，沒有什么操作，純屬寫個示例，嘿嘿 ![](https://box.kancloud.cn/750cc1d8555e34f28ef5fd81eaa1468d_270x108.jpg) demo.html ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登錄</title> <script type="text/javascript" src="vue.min.js"></script> </head> <body> <style> .class1{ width: 100px; height: 30px; border: none; background-color: #666; } .class2{ background-color: #999; } </style> <div id="app"> <div>　用戶名：<input type="text" v-model.trim="username"></div> <div>　密　碼：<input type="password" v-model.trim="password"></div> <div>記住密碼：<input type="checkbox" v-model="checked"></div> <button type="button" v-bind:class="[btn, disable?'class2':'']" v-bind:style="[btnStyle, btnColor]" v-on:click="handleLogin">登錄</button> </div> <script> var app = new Vue({ el: '#app', data: { username: '', password: '', checked: false, btn: 'class1', disable: false, btnStyle: { borderRadius: '3px' }, btnColor: { color: '#fff' } }, methods: { handleLogin: function() { this.disable = !this.disable; console.log(this.username); console.log(this.password); console.log(this.checked); // $.ajax({ // type: 'post', // url: 'demo.php', // data: {"username": this.username, "password": this.password}, // dataType: 'json', // success: function(res) { // console.log(res); // } // }); } } }); </script> </body> </html> ~~~ v-model.trim 用來刪除數據的前后空格，類似的還有很多，都是對數據進行處理的。。上面的class及style的引用，個人推薦使用數組的形式，省得到時記混了，如有特殊需求可看vue文檔，根據需求來定。登錄驗證 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登錄驗證</title> <script type="text/javascript" src="vue.min.js"></script> </head> <body> <div id="app"> <form action="" method="post" enctype="multipart/form-data"> <div>　手機號　<input type="text" placeholder="請輸入手機號" v-model.number="input.phone"></div> <div>　密　碼　<input type="password" v-model.trim="input.password"></div> <div>記住密碼　<input type="checkbox" value="1" v-model="input.remember"></div> <button v-bind:style="style.btn" type="button" v-on:click="submit" v-on:keyup.enter="submit">登錄</button> </form> </div> <script> var app = new Vue({ el: '#app', data: { input: { phone: '', password: '', remember: [] }, style: { btn: { marginLeft: '80px' } } }, methods: { submit: function() { var errMsg = ''; // 判斷是否是手機號 if(!/1[34578]{1}\d{9}/.test(this.input.phone)) { errMsg += '手機號沒有填寫或格式不正確~\n'; } // 判斷密碼是否為空 if(this.input.password === '') { errMsg += '密碼不能為空~'; } if(errMsg !== '') { alert(errMsg); } else { alert('正在登錄...'); } } } }); </script> </body> </html> ~~~ 登錄比較少，就此過去了，下面我們來看下vue之echarts使用一個簡單的自刷新實例 ![](https://box.kancloud.cn/a9aca0af5d8764ef3e22ca5fc0e3e848_452x228.gif) demo.html ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>echarts</title> <script type="text/javascript" src="vue.min.js"></script> <script type="text/javascript" src="echarts.common.min.js"></script> <style> .zh-chart { width: 500px; height: 260px; } </style> </head> <body> <div id="app"> <div class="zh-chart"></div> </div> <script> var app = new Vue({ el: 'app', data: { chartData: [ {value:335, name:'直接訪問'}, {value:310, name:'郵件營銷'}, {value:234, name:'聯盟廣告'}, {value:135, name:'視頻廣告'}, {value:1548, name:'搜索引擎'} ] }, mounted: function() { // 掛載完成 var chart = echarts.init(document.querySelector('.zh-chart')); var option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, legend: { orient: 'horizontal', x: 'left', data: (function() { var legend = this.chartData.map(function(item) { return item.name; }); return legend; }.bind(this))() }, series: [ { name:'訪問來源', type:'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '30', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data: this.chartData } ] }; chart.setOption(option); // 實際刷新 setInterval(function() { // 改變數據 this.chartData.forEach(function(item) { item.value = Math.round(Math.random() * 300); }.bind(this)); // 清空內容 chart.clear(); // 添加數據 chart.setOption(option); }.bind(this), 1000); } }); </script> </body> </html> ~~~ charts的組件形式，一樣很簡單，多看看API就OK了可以先看看 [菜鳥手冊](http://www.runoob.com/vue2/vue-component.html) 我也就是拿來主義，好讀書而不求甚解~~ ![](https://box.kancloud.cn/3a6d7dabb6ee9498e32b20974d540e46_126x156.jpg) demo.html ~~~ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>echarts組件</title> <script src="js/vue.min.js"></script> <script src="js/echarts.common.min.js"></script> <style> .zh-chart{width: 500px;height: 270px;} </style> </head> <body> <div id="app"> <Chart></Chart> <Tips tooltips="呵呵"></Tips> </div> <script> // 全局組件 Vue.component('Chart', { props: ['name'], template: '<div class="zh-chart"></div>', data: function() { // 這個data必須勢函數，且返回值必須是對象 return { chartData: [ {value:335, name:'直接訪問'}, {value:310, name:'郵件營銷'}, {value:234, name:'聯盟廣告'}, {value:135, name:'視頻廣告'}, {value:1548, name:'搜索引擎'} ] }; }, mounted: function() { var chart = echarts.init(document.querySelector('.zh-chart')); var option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, legend: { orient: 'horizontal', x: 'left', data: (function() { var legend = this.chartData.map(function(item) { return item.name; }); return legend; }.bind(this))() }, series: [ { name:'訪問來源', type:'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '30', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data: this.chartData } ] }; chart.setOption(option); } }); var app = new Vue({ el: '#app', components: { // 局部組件 'Tips': { props: { tips: { type: String, default: '餅狀圖標~~' }, tooltips: String }, template: '<p>{{tips}}{{tooltips}}</p>' } } }); </script> </body> </html> ~~~ 其實也不知道寫些什么了。。手冊上都寫的明明白白~~ ![](https://box.kancloud.cn/9c36af2f0afa4ee65473447273170859_125x155.jpg)