关于MVVM
- Model–View–ViewModel (MVVM) 是一个软件架构设计模式,由微软 WPF 和 Silverlight 的架构师
Ken Cooper 和 Ted Peters 开发,是一种简化用户界面的事件驱动编程方式。由 John Gossman(同样也是 WPF
和 Silverlight 的架构师)于2005年在他的博客上发表 - MVVM分为三个部分:
-
分别是M(Model,模型层 )泛指后端进行的各种业务逻辑处理和数据操控,对于前端来说就是后端提供的 api 接口。
-
V(View,视图层),VM(ViewModel,控制器,V与M连接的桥梁)也就是用户界面。前端主要由 HTML 和 CSS 来构建
-
VVM 源自于经典的 Model–View–Controller(MVC)模式 ,MVVM的出现促进了前端开发与后端业务逻辑的分离,极大地提高了前端开发效率,MVVM 的核心是 ViewModel层,它就像是一个中转站(value converter),负责转换 Model中的数据对象来让数据变得更容易管理和使用,该层向上与视图层进行双向数据绑定,向下与 Model 层通过接口请求进行数据交互,起呈上启下作用
关于Object.defineProperty
Object.defineProperty可以再一个对象中定义或者修改一个属性,然后返回这个对象,并且可对该属性的可写行,可便利性,存取描述符(get、set)等进行设定,兼容性好,支持 IE9,而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平,因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写
参数:Object.defineProperty(obj, prop, descriptor)
路由传参
- 父组件中:
<router-link to="/需要跳转的路由路径/需要传递的参数"></router-link>
子组件中:使用this.$route.params.num来接收路由参数 - 通过路由属性中的name来确定匹配的路由,通过params来传递参数
子组件接收
Webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。
Webpack入门教程
Bootstrap
简洁、直观、强悍的前端开发框架。
编译 Less/Sass 源码时需要使用 Autoprefixer 工具
Bootstrap 利用 Autoprefixer 自动为 某些 CSS 属性添加针对特定厂商的前缀。如果你是从 Less/Sass 源码编译 Bootstrap 的,并且没有使用 Bootstrap 自带的 Gruntfile 文件,那你就必须将 Autoprefixer 集成到你的编译工具和编译过程中。如果你使用的是我们预先编译好的 Bootstrap 文件或者使用的是我们提供的 Gruntfile 文件,那就无需操心了,因为我们提供的 Gruntfile 中已经集成了 Autoprefixer。编译 CSS 和 JavaScript 文件。
H5和APP的交互
App内嵌H5页面:两种传值方式
app给h5传值(方法主体由h5人员编写,移动端调用)
h5给app传值 (方法主体由移动端人员编写,h5调用)
在h5调用Android方法时需要一个通讯桥梁,这个通讯桥梁的名字可两方协定
//h5调用移动端的方法
//Android的调用方法
window.JSBright.getPrintData(this.clickchecknum);
//ios的调用方法:
window.webkit.messageHandlers.getPrintData.postMessage({
params: this.clickchecknum,
});
//移动端调用h5方法
window.getParams = this.getParams;
1 首先判断当前打开的页面是否在app中
如果在app中,则进行之后的交互(与app人员约定一个方法名,方法由app人员去写)
如果不在app中,则判断环境进行下载的操作
2 下载的操作
- 区分是不是微信环境(android在微信中不能直接下载~,IOS会弹出提示,然后可直接跳转到appStore)
- 区分IOS/Android
这是如果是Andorid环境,则需要自己添加遮罩层提示用户三方浏览器打开下载
vuex存储流程:
vuex五种属性,分别是State、 Getter、Mutation 、Action、Module
- state 基本数据(储存数据数据)
- getters 从基本数据(state)派生出来的数据,相当于state的计算属性,具有返回值的方法
- mutations 提交更新数据的方法,同步(如果需要异步使用action),commit:同步操作,写法: this.$store.commit(‘mutations方法名’,值)
- actions 包裹mutations,使之可以异步。Action 可以包含任意异步操作。
- modules:模块化vuex。
-
在vue组件里面,通过dispatch来触发actions提交修改数据的操作。
-
然后再通过actions的commit来触发mutations来修改数据。
-
mutations接收到commit的请求,就会自动通过Mutate来修改state里面的数据。
-
最后由store触发每一个调用它的组件的更新
Vuex的作用:项目数据状态的集中管理,复杂组件(如兄弟组件、隔代组件)的数据通信问题。
路由守卫参考vue-router