从项目中由浅入深的学习vue,微信小程序和快应用 (1)

常用指令

@(v-on)绑定事件, v-if/v-show是否创建/和是否显示,v-for循环

生命周期

8个生命周期beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy和destroy

观察计算

computed和watch

data属性

定义变量,同样变量使用必须先定义

组件注册

components局部注册,Vue.component()全局注册

组件通讯

子传父:this.$emit,父传子:props,平级组件:vuex或路由传参

插件注册

Vue.use()注册插件,如Vue.use(element)是调用element内部的install方法

路由注册

vue-router:Vue.use(router)也是调用内部的install方法,挂载到vue实例中生成route和router属性

路由模式

mode属性可以设置history和hash

子路由

children:[]可以配置子路由

路由钩子

router.beforeEach(实现导航钩子守卫)和router.afterEach

vuex

4个属性,state,getters, actions(异步获取数据)和mutations(同步获取数据)

vuex

4个辅助函数,mapState,mapGetters, mapActions和mapMutations,就是辅助处理commit或distapch方法

axios

拦截器,interceptors.request请求拦截器,interceptors.response响应拦截器

axios

baseUrl配置公共请求路径,必须符合http标准的链接,否则设置无效

axios

请求方法,get,post,put,delete等

axios

跨域,withCredentials: true,需要后端支持

css

sass,对应嵌套不超过三层,滚动条样式设置,文本两行超出build问题

iconfont

阿里字体图标，可以自定义icon

布局

基于弹性布局

指令

for：循环，if、show

生命周期

页面的生命周期：onInit、onReady、onShow、onHide、onDestroy、onBackPress、onMenuPress

app生命周期

onCreate、onDestroy

事件

$on、$off、$emit、$emitElement

路由配置

manifest文件的router属性配置

路由跳转

router.page

组件通讯

父子组件：$emit，props，兄弟组件：通过 Publish/Subscribe 模型

原生组件

list，map，tabs和canvas

消息机制

websocket使用

常用指令

bindtap绑定事件, wx:if/wx:show是否创建/和是否显示,wx:for循环

生命周期1

应用生命周期(app.js里):launch,show,hide

生命周期2

页面生命周期(page里):load,show,ready,hide,unload

生命周期3

组件周期(component里):created,attached,moved,detached

wx.request

ajax请求

背景音乐

wx.getBackgroundAudioManager

音频

wx.createAudioContext

图片

wx.chooseImage

文件

wx.getFileInfo

路由

在app.json里面pages属性定义pages目录下面的文件

路由切换

wx.navigateTo，wx.navigateBack， wx.redirectTo，wx.switchTab，wx.reLaunch

分包

在app.json里面subPackages属性定义分包路由

weui组件

weui官网

原生组件

微信原生组件

业务组件

在json文件usingComponents注册

组件通讯

定义globalData，storage和路由