摘要： 网络模型的变化 以前网页大多是b/s，服务端代码混合在页面里； 现在是c/s，前后端分离，通过js api(类似ajax的uni.request)获取json数据，把数据绑定在界面上渲染。 文件类型变化 以前是.html文件，现在是.vue文件 文件内代码架构的变化 以前一个html大节点，里面有s 阅读全文

摘要： uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。 快速上手： 1. 通过 HBuilderX 可视化界面 可视化的方式比较简单，HBuilderX内置相关环境 阅读全文

摘要： 如果要实现列表数据的按需切换，就需要用到 getters ，可以将数据源包装，按需来展示，并不会修改数据源。 1、定义 getters getters: { // 列表数据 infoList(state) { if (state.viewKey 'undone') { return state.li 阅读全文

摘要： 1、把底部按钮的默认 type 加上 <!--操作按钮--> <a-button-group> <a-button type="primary" >全部</a-button> <a-button type="default" >未完成</a-button> <a-button type="defau 阅读全文

摘要： 点击清除已完成按钮，把列表中的已完成就会被清除，只剩下未完成的任务事项。 1、给“清除已完成”添加点击事件： <!--把已经完成的任务清空--> <a @click="clean">清除已完成</a> <script> export default { methods: { // 清除已完成的任务事 阅读全文

摘要： 使用 getters 包装器 1、定义 getters 函数： getters: { // 统计未完成任务的条数 unDoneLength(state) { return state.list.filter(item => item.done false).length } } 2、引入 gette 阅读全文

摘要： 需求的功能是：点击对应复选框，拿到最新的状态，再根据点击对应项的 id，把最新的状态，赋值到 list 数组中对应的 item 项。 1、给复选框添加点击事件： <!--复选框--> <a-checkbox :checked="item.done" @click="checked(item.id)" 阅读全文

摘要： 1、把 list.json 文件中第一个和第三个数据的 done 改为：true 2、把完成状态和复选框做绑定 复选框是由 checked 属性来指定的。添加属性绑定： <!--复选框--> <a-checkbox :checked="item.done"> {{item.info}} </a-ch 阅读全文

摘要： 1、给删除按钮添加点击事件： <!--删除链接--> <a slot="actions" @click="delItem(item.id)">删除</a> <script> export default { methods: { // 删除对应事项 delItemById(id) { this.$s 阅读全文

摘要： 1、给添加事项按钮增加点击事件： <a-button type="primary" @click="addItemToList">添加事项</a-button> <script> import { mapState } from 'vuex' export default { methods: { 阅读全文

摘要： 1、在 store/index.js 中定义新的数据 inputValue ： state: { list: [], // 所以的任务列表 inputValue: 'aaa' // 文本框的内容 }, 2、回到 Home.vue 做文本框的双向绑定： <a-input placeholder="请输 阅读全文

摘要： 1、在 public 目录下新建 mock 文件夹夹，创建 list.json 文件： [ { "id": 0, "info": "Racing car sprays burnimg fuel into crowd.", "dome": false }, { "id": 1, "info": "Ja 阅读全文

摘要： 1、通过 vue ui 命令打开可视化面板，创建新项目：vuex-demo 2、安装 vuex 依赖包 npm install vuex axios ant-design-vue -S 当然也可以使用可视化面板的依赖安装。 ant-design-vue 是UI组件库。 3、实现 Todos 基本布局 阅读全文

摘要： 1、安装vuex依赖包 npm install vuex --save 2、导入vuex包 import Vuex from 'vuex' Vue.use(Vuex) 3、创建 store 对象 export default new Vuex.Store({ // state 中存放的就是全局共享的 阅读全文

摘要： ES6原生语法中提供了非常多好用的数组'遍历'方法给我们（forEach，every，some，map，filter，reduce，reduceRight，indexOf，lastIndexOf），让我们可以实现更多更强大的功能，下面让我们通过这篇文章好好学习下，该如何使用它们。 forEach 对 阅读全文