基于微信的巨型用户量及易传播社交属性。C端采用了微信中嵌入APP的形式,即WebApp。然而2017年新兴微信小程序有越来越火代替Webapp的趋势,这是后话了。
图为WebApp个人页面
.vue文件的基本结构:
以最简单的控制Header显示隐藏,这是一个最精简的写法,真实项目定义比这个要庞大的多。主要体现在动画的加入,各种样式的定义,思路大体相同。
初始化操作
一般情况下,在created()、mouted()生命周期方法中,进行页面的初始化操作。见 vue生命周期
如:页面数据初始化。
this.$http.get('personal').then(res=>{
if(res.data.state==1){
//做失败处理
}else{
//做成功处理
}
]})
页面路由
进行页面跳转,使用vue生态的vue-router。在mainRouter.js中定义与配置路径
代码示例
this.$router.push(){
name:"personalData"
}
router页面跳转有两个方法push()和replace()
push()方法和replace()方法的区别:push()方法会保留之前的数据,可返回;replace()方法则会直接替代掉之前的页面,不可返回。
附:vue项目常用语法 见 vue语法API文档
:customMethod="" 等价于 v-on:customMethod=""
@click @click.prevent
{{UserName}} 模版语法
$emit()
总结:
这篇文章主要讲了面向产品的 抽象通用组件(设计方法),初始化操作,页面路由的基础概念与基础用法。
作者:橘子不太好吃
链接:https://www.jianshu.com/p/b9a55ed6abd3



