登录的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)
- 事件
- mouse缩放与拖动
- drag拖动
- 事件兼容
- animation/transition
- canvas
- 改变图片颜色
- html转图片
- 视频操作
- 图片缩放、水印、放大镜
- 虚线
- 圆环进度条
- 形状事件
- 圆角矩形
- 绘制注意
- arcTo与贝塞尔
- 椭圆及椭圆进度
- 五角星进度
- 常用图形
- 计算显示文本宽度
- 算法
- 几何算法
- 地图应用相关
- 运行符
- web安全
- 新窗口打开
- xss
- 分享交流
- php环境搭建及xhr交互
- node环境搭建及xhr交互
- node之socketio
- svg之入门介绍
- svg动画
- vue之搜索联想
- vue之登录和echarts
- vue之组件交互与slot
- vue之loading
- vue之上传进度
- webpack及cli
- 开发技巧
- 常用
- 移动端
- 错误处理
- 预加载
- 代理判断
- 数组扩展
- 对象扩展
- 字符串扩展
- 语音播报
- 收集
- 文章/日记
- 框架/库/插件
- 工具
- 学习网站
- 专业术语
- 正则
- 常用验证
- 方法基础
- es6扩展
- 深入实践
- 快捷使用
- html
- css
- http协议
- http
- https
- socket
- 地图/图表
- mapbox
- echarts
- arcgis
- MapView及事件
- 添加WMS/WMTS层
- 增删点线面
- 入门使用
- popup弹层
- 大数据处理
- 批量点
- 批量线
- 在线绘制
- GraphicLayer显示/隐藏
- 动态改变位置
- 去除版权信息
- 添加控件
- Symbol
- 自定义path标记
- 图片标记
- 文本标记
- 旋转
- UI
- 自定义
- 3D地图
- 创建实例
- basemap
- 底图切换
- 自定义底图
- 中心和范围
- pupup弹层更新
- 坐标转换
- 方向线
- leaflet
- amap
- 框架/类库/脚手架
- vue
- 常见问题
- 组件框架
- vue-router
- 命名视图
- url参数映射到prop
- sublime支持
- 随手记
- 常用功能
- threejs
- 常用效果
- 其他特效
- requirejs
- 简单使用
- jquery
- 方法扩展
- 使用笔记
- 组件扩展
- react
- 党见问题
- 学习笔记
- 学习笔记-进阶
- react-redux
- react-router
- redux
- 其他模块说明
- 组件框架
- sublime支持
- gulp
- 安装使用
- js压缩
- css压缩
- 组合使用
- copy文件
- 项目使用
- protobuf
- 入门
- layui
- 登录验证
- laydate
- 安装工具
- yarn
- reactNative
- 入门介绍
- vueNative
- 入门介绍
- 版本控制
- git常用
- git扩展
- git问题
- git其他
- git扩展2
- 编辑器
- vscode
- atom
- webstorm
- 插件
- clipboard
- 奇淫巧技
- js
- 个性打印
- css
- 滤镜效果
- 文本省略
- 当前色
- 新特性
- 花样边框效果
- 波纹效果
- 个性placeholder
- 伪元素内容
- 容器居中
- 知识点
- js
- 递归
- 沙箱
- 内存泄漏
- es6语法
- 变量介绍
- FileRead
- ajax
- web存储
- css
- rem布局