知识点
- axios数据请求
- MVVM/MVC
- Vue和MVVM的暧昧关系
- 补充内容
axios数据请求 {:&.flexbox.vleft}
- 概念
- 基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 node.js 中使用
- github地址
- 基本例子
axios.get('http://api.openweathermap.org/data/2.5/forecast/daily?q=Beijing&appid=7c5219469d1d3aa869d2599559d26fc1&lang=zh_cn')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
MVVM/MVC
MVC
- 概述
- MVC 即 Model-View-Controller 的缩写，就是 模型-视图-控制器 , 也就是说一个标准的Web 应用程序是由这三部分组成.
- View 用来把数据以某种方式呈现给用户。Model 其实就是数据。Controller 接收并处理来自用户的请求，并将 Model 返回给用户。
- 中间的过渡过程
- MVC 架构模式对于简单的应用来看起是OK 的，也符合软件架构的分层思想。 但实际上，随着H5 的不断发展，人们更希望使用H5 开发的应用能和Native 媲美，或者接近于原生App 的体验效果，于是前端应用的复杂程度已不同往日，今非昔比。这时前端开发就暴露出了三个痛点问题
- 开发者在代码中大量调用相同的 DOM API, 处理繁琐 ，操作冗余，使得代码难以维护。
- 大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。
- 当 Model 频繁发生变化，开发者需要主动更新到View ；当用户的操作导致 Model 发生变化，开发者同样需要将变化的数据同步到
- MVC 架构模式对于简单的应用来看起是OK 的，也符合软件架构的分层思想。 但实际上，随着H5 的不断发展，人们更希望使用H5 开发的应用能和Native 媲美，或者接近于原生App 的体验效果，于是前端应用的复杂程度已不同往日，今非昔比。这时前端开发就暴露出了三个痛点问题
MVVM
- MVVM 由 Model,View,ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象
- ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM,
Vue和MVVM的暧昧关系
- Vue.js 可以说是MVVM 架构的很好实践，专注于 MVVM 中的 ViewMode(只需关注业务逻辑，不需要手动操作DOM)
[图片上传失败...(image-4149a-1516350102775)]
补充内容
- 实例属性 ref
- ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子组件上，引用就指向组件实例
- $mount()
// 可以使用 vm.$mount() 手动地挂载一个未挂载的实例。 let vm=new Vue({ data:{ a:101 } }).$mount('#box');
-
v-pre
- v-pre 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
-
v-cloak
- 解决闪烁问题
- 第一css设置
<style> [v-cloak] { display: none; } </style> - 第二指令
- 第一css设置
- 解决闪烁问题
-
自定义指令
- 全局定义
- 局部定义
