未加星标

用mpvue实现一个简单的demo

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

彻底的组件化开发能力:提高代码 完整的 Vue.js 开发体验

这句话的意思呢,就是说 mpvue 基本集成了 vue 的核心代码,亦即继承了 vue 的核心功能-组件。组件可以拓展 html 、封装以及复用代码,它阐述一个组件树是由无数的组件去组成的。通常一个应用会以一棵嵌套的组件树的形式来组织:


用mpvue实现一个简单的demo

而一个好的组件树具有封装性、复用性、拓展性。

封装性

组件的封装过程有这几步骤:【创建一个 .vue 文件】-【进行独立的逻辑处理】-【向外暴露必要的属性、方法等】。 举个 demo :列表卡片。里面的信息包括标题 title 、内容 content 、图片 image 、时间 time 等。这是一个独立的功能项,可以将其封装起来,只暴露一个 Array 的属性变量,非常简洁、独立。 此时,其他开发者可以不用关注列表项的细节,只需要专注于当前模块的逻辑处理。

复用性

组件的复用,换个专业术语便是,组件间通信。以前面的 demo 列表卡片来讲,它只负责里面UI功能的实现,不负责与服务端进行打交道;而它的父组件能通过它暴露的 Array 属性,将需要的数据传进去,达到数据的渲染,这样便可以达到减少耦合的效果,同时如果其他模块需要用到卡片这个组件,比如收藏啊,评论呀等等。因此,可以复用的组件亦即称为通用组件。

拓展性

谈到拓展性,这个可以说是 vue 的优秀做法了,利用面向对象的思想,达到组件间相互继承的目的。 举个 demo : Echarts 实现的数据可视化图。通过组件化进行图表的基础配置,在业务实现的过程中,将extends图表组件进行折线图、柱状图以及力导向图等的切换。 小小聊一下, vue 也有一个钩子叫做 mixins ,这个其实跟 extends 功能很相似,都是起到混合合并的作用,而它们的区别是 extends 的优先级较高,执行的顺序要优先于父组件。

pvue的目录结构

关于mpvue初始化的项目结构,一起来看一张图,展示的是主要的目录结构,

project └───build //编译打包的node.js脚本和webpack配置文件 └───config //用于开发和生产环境下的不同配置 └───src //主要进行小程序功能编写的地方 │──components │──pages │──utils │──app.json │──App.vue │──main.js └───static //用于存放各种小程序本地静态资源 └───package.json //项目的主配置文件 └───project.config.json //用于管理微信开发者工具的小程序项目的配置文件 复制代码

从这张图可以看出各个目录结构的功能以及应用。一般进行业务开发的时候,一般也只需要在src目录下进行开发即可。

mpvue的生命周期

mpvue ( github 地址请参见 )是一个使用Vue.js开发小程序的前端框架。框架基于 Vue.js 核心, mpvue 修改了 Vue.js 的runtime和compiler实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。

因此,mpvue的生命周期既包括vue的生命周期也包括了小程序的生命周期。 对于小程序的生命周期来讲,分为2种情况。 APP对象有 onLaunch , onShow 以及 onHide 。 Page对象有 onLoad , onShow , onReady , onHide 和 onUnload 。 而对于vue的生命周期来讲,主要有8个钩子。 【 beforeCreate 】-【 created 】-【 beforeMount 】-【 mounted 】-【 beforeUpdate 】-【 updated 】-【 beforeDestroy 】-【 destroyed 】。 mpvue 由于关联了小程序与 vue 这两种,因此 mpvue 的生命周期实际上是 vue 的实例兼容小程序的生命周期的。一起来参照下mpvue的源码【 mpvue / mpvue-quickstart 初始化后的项目】-【 node_modules 】-【 mpvue 】-【 LIFECYCLE_HOOKS 数组】。


用mpvue实现一个简单的demo
从这张图片可以看出, mpvue

的生命周期就是按照这个顺序来对应的。

实现toolsList的简单demo

简介:利用 mpvue 初始化的项目,进行实现一个简单的增删改查的列表 demo ,过程分为几个小步骤。

创建一个todolist组件 首先,我们需要在【 src 】-【 components 】创建一个【 todolist.vue 】;接着在 pages 新建一个文件夹【 todolist 】,这是小程序新建一个页面,专门来显示todolist。 project └───build └───config └───src │──components │──todolist.vue //创建一个组件 │──pages │──todolist //创建一个文件夹 │──utils │──app.json │──App.vue │──main.js └───static └───package.json └───project.config.json 复制代码 着手入口文件 在 todolist 的文件夹里,新建一个入口文件 main.js ,这是一个统一的写法,将新创建的组件进行引用以及挂载。 import Vue from 'vue'; import App from './index'; const app = new Vue(App); app.$mount(); 复制代码 新建一个入口组件 创建一个 index.vue 的页面,在里面调用 components 下的 todolist.vue 组件 <template> <div> <todo-list></todo-list> </div> </template> <script> import TodoList from '@/components/todolist'; export default{ components: { TodoList }, } </script> 复制代码 实现 todolist 的业务逻辑 <template> <div> <todo-list></todo-list> </div> </template> <script> import TodoList from '@/components/todolist'; export default{ components: { TodoList }, } </script> 复制代码 呈现的效果
用mpvue实现一个简单的demo

ok,基本一个简单的增删改查 demo 已完成,虽然简单,但里面的坑位不少,比如 eslint 规则, wx:for 问题等等,所以有空的老铁可以去 GitHub 那里拿下我的代码对比下,希望能有个更深的学习。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:用mpvue实现一个简单的demo
本站链接:https://www.codesec.net/view/611126.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(69)