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)