axios && fetch
目的:实在框架中使用数据请求
数据请求
1。使用原生js提供的fetch
2。使用第三方封装库:axios
3. fetch 与 axios
axios对以获得的数据进行了一层封装XSRF
fetch并没有进行封装,拿到就是格式化后的数据
axios
案例
请求静态数据 [模拟假数据 - mock数据]
- 线上拷贝相似字段数据
- 使用第三方 mock.js 来生成json数据[用代码来生成数据]
- easy mock线上网站
请求动态数据【通过后端接口来请求数据】
* php *java *node *c
我们本该写在vm中的逻辑性语句,写在的v中,如果逻辑加重,那么就不合适了
解决:计算属性 computed
使用:1.在选项中定义一个computed属性,属性值是一个对象
2.在vm实例范围内,直接当作全局变量一样使用这个方法
3.注意,方法名后不加()
watch 是vue的一个选项
混入
mixin
混入的形式
- 全局混入 Vue.mixin({})
- 所有的组件都会加上去选项内容
- 局部混入
混入的作用
- 将选项中某一个或是多个单独分离出去管理,让职能更加单一高效,符合模块化思想
组价
1.了解前端组件化发展历史
前后端耦合
-
前后端不分离项目
1.找后台搭建项目开发环境 2.寻找项目目录中的静态资源目录 - js - img - css 3.同步修改css
前后端分离
前端团队合作项目的出现
- 组件化为了解决多人协作冲突问题
- 复用
2.组件的概念
组件是一个htnl,css,js,img等的一个聚合体
3.Vue中的组件属于扩展性功能
通过Vue.extend() 来扩展的
VueComponet这个构造函数我们不进行new实例化,我们希望组件是以标签化的形式展示
组件要想合法化,必须注册解析
组件的注册
- 全局注册
- 局部注册
4.组件的命名规则
大驼峰命名的在div中书写的要变成 ’ - ’
5.组件的使用规则
在html/h5中有一些标签,他的父子级元素是规定的,这个时候如果我们使用组件,那么就打破了 这个规则,就会出错
这类标签有: ul li \ tr td
- is 属性 + 动态组件 component +动态缓存组件 keep-alive
业务:点击一个开关切换两个组件 - template 模板标签
template标签是放在实例模板范围外的
template标签外在外层时是不会被解析的,也就是会在dom结构中出现,如果放在实例范围 内,会被解析,将来不会出现在dom结构中
template中直接子元素必须有且仅有一个
Vue.component('Hello',{
// template: '<div> 今年的目标: 找一个好的高薪工作 </div>'
template: '#hello-box'
})
new Vue({
el: '#app',
data: {
comp: 'UserLogin'
}
})
<template>
<p> 模板template </p>
</template>