3.1 axios && fetch
目的: 是在框架中使用数据请求
回顾:
封装ajax
2. jquery 【 $ .get $ .post $.ajax $ .load 】
框架:
数据请求
使用原生js提供的fetch
使用第三方封装库: axios
Vue中可以统一对axios进行挂载
Vue.prototype.KaTeX parse error: Expected 'EOF', got '&' at position 1142: …ost/get.php?a=1&̲b=2') .then(r…http.get
this.
h
t
t
p
.
p
o
s
t
t
h
i
s
.
http.post this.
http.postthis.http({})
vue-resource有jsonp方法,而axios是没有的
Vue2.0
axios [ 可以说是目前最好的数据请求的封装库 ]
fetch
3.2 计算属性
computed 是Vue中的一个选项
作用:
computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理;
computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,举例:购物车里面的商品列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
3.2.1 侦听属性
watch 是Vue中一个选项
作用: 监听数据的变化,当数据发生改变时,我们完成一些操作
watch: {
firstName ( val ) {
this.fullName = val + this.lastName
},
lastName ( val ) {
this.fullName = this.firstName + val
},
num: {
deep: true, // 深度监听
handler ( val ) {
// 当num发生改变时,触发的方法
console.log( val )
}
}
}
总结: methods vs computed vs watch
项目中如何使用
事件处理程序: methods
watch
有大量数据交互和异步处理时进行
computed
有逻辑处理
V中像全局变量一样使用
3.3 混入
minxin
混入的形式
全局混入 【 不推荐 】
局部混入
混入的作用:
将选项中某一个或是多个单独分离出去管理,让职能更加单一高效,符合模块化思想
局部混入的使用
选项 minxins
全局混入
Vue.mixin({})
3.4 组件
了解前端组件化发展历史
1.前后端耦合
前后端不分离项目
1.找后台搭建项目开发环境
2.寻找项目目录中的静态资源目录
js
img
css
3.同步修改css
2.前后端分离
3.前端团队合作项目的出现
组件化为了解决多人协作冲突问题
复用
组件的概念
组件是一个html 、 css 、js 、img 等的一个聚合体
Vue中的组件属于扩展性功能
通过 Vue.extend() 来扩展的
ƒ Vue (options) {
if (!(this instanceof Vue)
) {
warn(‘Vue is a constructor and should be called with the new
keyword’);
}
this._init(options);
}
ƒ VueComponent (options) {
this._init(options);
}
VueComponet这个构造函数我们不进行new实例化,我们希望组件是以标签化的形式展示
-->
组件要想合法化,必须注册解析
组件的注册 【 创建 】
全局注册
局部注册