功能点：ajax查询分页，搜索，时间控件，编辑，全选，ajax删除等
vue.js是最近两年很火的前端框架，之前写了几年的javascript和jquery，经历了javascript的繁缛到jquery的简洁快速强大，现在是该更熟练vue了(陆陆续续的了解熟悉vue的文档和语法)实际的去操作vue，我是后端主程就从自己电脑里的后端系统的增删改查来练习，感觉vue的思想是数据绑定，难点可能是各种组件吧。我本机vue.js版本是 2.9.6(cmd 。。。vue -V)，环境的搭建大家可以自己搞搞，后台是用YII框架写的拿其中一个模块来练手，还有几套TP框架写的后台在这里就不写了；
1.分页搜索列表页面：php代码就不写了(ajax获取，json返回)，，效果如下：
搜索：
代码如下：
/**
* Created by PhpStorm.
* User: haibo
* Date: 2019/04/12
* Time: 11:50
*/
use backend\assets\AppAsset;
use \yii\helpers\Html;
AppAsset::addScript($this, '@web/js/vue-2.5.16/vue.js');
AppAsset::addScript($this, '@web/js/layer/layer.js');
AppAsset::addScript($this, '@web/js/bootstrap-paginator/bootstrap-paginator.min.js');
AppAsset::addScript($this, '@web/js/bootstrap-paginator/qunit-1.11.0.js');
AppAsset::addScript($this, '@web/js/art_template/template-web.js');
AppAsset::addScript($this, '@web/js/laydate/laydate.js');
AppAsset::addScript($this, '@web/js/clipboard.min.js');
$preUrl = \Yii::$app->urlManager->createUrl(['fx-fans/index']);
$this->title = Html::a('分销管理 》 分销粉丝管理', $preUrl);
?>
用到是YII框架，数据双向绑定，循环，判断，ajax等，语法大家可以去看一下教程；
单个用户的下的粉丝列表：ajax列表分页，搜索等
搜索，全选(删除)，删除，编辑等
代码如下：
/**
* Created by PhpStorm.
* User: haibo
* Date: 2019/04/15
* Time: 11:50
*/
use backend\assets\AppAsset;
use \yii\helpers\Html;
AppAsset::addScript($this, '@web/js/vue-2.5.16/vue.js');
AppAsset::addScript($this, '@web/js/layer/layer.js');
AppAsset::addScript($this, '@web/js/bootstrap-paginator/bootstrap-paginator.min.js');
AppAsset::addScript($this, '@web/js/bootstrap-paginator/qunit-1.11.0.js');
AppAsset::addScript($this, '@web/js/art_template/template-web.js');
AppAsset::addScript($this, '@web/js/laydate/laydate.js');
AppAsset::addScript($this, '@web/js/clipboard.min.js');
$preUrl = \Yii::$app->urlManager->createUrl(['fx-fans/index']);
$this->title = Html::a('分销管理 》 分销粉丝管理 》 粉丝管理', $preUrl);
?>
全选
全选删除 确认框。
编辑信息页面 效果：
代码：
/**
* Created by PhpStorm.
* User: haibo
* Date: 2019/04/12
* Time: 17:03
*/
use backend\assets\AppAsset;
use yii\helpers\Html;
AppAsset::addScript($this, '@web/js/vue-2.5.16/vue.js');
AppAsset::addScript($this, '@web/js/layer/layer.js');
AppAsset::addScript($this, '@web/js/bootstrap-paginator/bootstrap-paginator.min.js');
AppAsset::addScript($this, '@web/js/bootstrap-paginator/qunit-1.11.0.js');
AppAsset::addScript($this, '@web/js/laydate/laydate.js');
$preUrl = \Yii::$app->urlManager->createUrl(['/fx-fans/fans-users-list']);
$this->title = Html::a('测试>>粉丝编辑', $preUrl);
?>
普通粉丝
永久粉丝
否
是
感觉vue的确比jquery方便很多，表单输入框不需要属性name直接数据绑定，数据赋值和判断的写法，写的比较肤浅，还在努力学习中(学习更牛逼的写法如组件等)，后续练习心得会博客跟进，如有问题还请大家多多指教，谢谢！
