过去的东西一再不复返，别等到失去的时候，才知道珍惜。用vue写一个简单的todolist。
自学了很久的vue，一直没实用过，自己琢磨写了个简单的 todolist 页面，留着以后看看。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
<style>
.jumbotron{
width: 600px;
padding: 20px;
}
.panel{
margin-top: 20px;
}
</style>
</head>
<body>
<div id="app" class="container jumbotron">
<h1>hello, {{name}}</h1>
<div class="input-group">
<input type="text" class="form-control" placeholder="任务的内容" v-model="message">
<span class="input-group-btn">
<button class="btn btn-default" type="button" @click="add">Go</button>
</span>
</div>
<div class="panel panel-default">
<div class="panel-heading">当前任务为：{{message}}</div>
<ul class="list-group">
<li v-if="!listDate" class="list-group-item" v-for="(item, index) in list">
{{index+1}}.{{item.text}}
<button type="button" class="close" @click="remove(index)">×</button>
</li>
<li v-if="listDate" class="list-group-item">暂无数据</li>
</ul>
<div id="sum" class="panel-footer">任务总计：{{list.length}}</div>
</div>
</div>
</body>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
name: 'todoList',
message: '',
listDate: false,
list: [
{
text: '声明式渲染'
},
{
text: '条件预循环'
},
{
text: '处理用户输入'
}
]
},
methods: {
add: function () {
this.listDate = false;
this.list.unshift({text: this.message})
},
remove: function (index) {
this.list.splice(index, 1);
if(this.list.length === 0){
this.listDate = true;
}
}
}
});
</script>
</html>也就几句的代码，在vue中做这些数据的事情真是非常方便。
前端如何做微信分享功能？
现在的网页大都需要适应手机端和各种屏幕兼容，而且还要在APP的浏览器上运行流畅，就必如现在我们经常使用的微信浏览器，UC，QQ等等，但大部分都是在微信使用的常见，因为要用的微信的一些功能，就必如说微信的分享，支付等等。
这次就我在做的项目使用分享的功能为例简单的说一下怎么在前端去实现。
要做到前端微信分享总共分为 3 个步骤：
1.通过自己的 appid 和 secret 来获取 access_token 值，用GET请求方式。
访问接口：https://api.weixin.qq.com/cgi-bin/token
$.ajax({
type: "GET",
url: 'https://api.weixin.qq.com/cgi-bin/token',
data: {
grant_type: 'client_credential', // 默认是固定
appid: '你的appid',
secret: '你的secret'
},
async: false,
success: function (ret) {
setCookie('access_token', ret.access_token, 2)
}
})
移动端做一个搜索历史记录功能。
在做移动端时候，特别是在做搜索功能，不仅会遇到搜索实时检索，还会做到搜索历史记录的功能。
在这里就简单介绍一下搜索历史记录的实现原理。
用的是浏览器自带的 localstorage 保存数组值
数组中最大长度只能为5条（可以自行编辑多少条），每插一条数据都在第一条数据的前面
如果有重复的数据，就把重复的数据删掉再把数据插入到数据的最前面
最新输入搜索的结果总是展示在数据的最前面
话不多说，下面看代码实现：
简单的数据搜索检索功能。
如何做到边搜索输入文字检索呢，其实很简单。
就是在搜索监听keyup 事件，然后在搜索的数据内对比当前输入的文字和数据内的文字是否一致，一致的话就显示出来，不一致就隐藏其他的数据，之后就是隐藏时候的动画效果了。
利用doTjs和BScroll做一个联系人列表功能。
做项目的时候要用到手机联系人列表的功能，没弄过，找了几仿的效果也并不是很好，没有原版手机联系人效果不能滑动不能顶部顶上去，想想用别人的代码，还不如自己写着痛快。想着就从QQ音乐的数据抓去歌手数据排行。我们常见的手机联系人信息是按字母顺序排列的列表，通过点击右侧的字母，会迅速定位检索到首字母对应的联系人，还可以根据右侧字母滑动检测到左边的首字母联系人，在向上滑动时可以明显观察到左侧字母向上顶的效果。综上那么多，这次就是来做这个列表吧
移动端解决点击Click300毫秒延迟的问题。
导读：移动端页面的快速相应是 UI 中的重点，试想如果用户点击一按钮等待或者有延迟卡顿，不但会影响体验还会让客户对软件的不喜爱。然而，出于对手指触摸滑动的区分，移动端页面对于触摸事件会有 300 毫秒的延迟，导致多数用户感觉移动设备上基于 HTML 的 web 应用界面响应速度慢。下面就简单的谈谈为什么会有这个延迟和怎么去解决。