vue-day02

mock数据

• 线上模拟数据

  • fastmock

• 本地模拟数据

  1. 安装json-server 到全局环境

  npm i json-server -g  
  

  2. 创建data.json 文件

  3. 通过命名元素 data.json 文件生成后端的接口

  json-server ./data.json   
  

  --watch 实时监听文件变化  
  
  --port 设置端口号， 默认为3000  
  
  --host 设置ip，默认为localhost 
  
  json-server --watch --host 10.41.151.1 --port 8888 ./data.json 
  

  4. 常用的接口

  请求所有的资源 
  
   get http://localhost:8888/users
  
  根据id请求资源  
  
   get http://localhost:8888/users/:id 
  
  添加资源  
  
   post http://localhost:8888/users
  
  根据id更新资源
  
   put、patch http://localhost:8888/users/:id 
  
   put 会覆盖资源
  
   patch 只更新指定的资源
  
  根据id删除资源
  
   delete http://localhost:8888/users/:id 
  
  分页查询数据   
  
   get http://localhost:8888/users?_page=1&_limit=2
  
  模糊查询   
  
   get http://localhost:8888/users?q=关键词
  

发送网络请求

• xhr

• $.ajax()

• vue-resource 2.0 之后不更新了,而且只能在vue中使用

• axios 可以使用在任意的框架中

过滤器

全局写法Vue.filter("过滤器名称",callback)

局部写法

全局过滤器可以使用在任意的实例中，局部过滤器只能使用在当前实例中

如果全局过滤器和局部过滤器同时存在，就近原则使用局部的过滤器

自定义属性

全局写法Vue.directive("指令的名称",obj|callback)

局部写法

全局自定义指令可以使用在任意的实例中，局部自定义指令只能使用在当前实例中

如果全局自定义指令和局部自定义指令同时存在，就近原则使用

动画的元素

1.需要可切换的元素

2.需要使用transition包裹动画元素

• transition vue提供的动画组件

• name 设置使用的指定动画 ，如果不指定默认使用 .v- 的动画

• 为了防止使用上的错误，建议在定义样式的时候配置 name

3.设置起点和终点的位置以及状态

• 使用第三方动画 enter-active-class 设置进入的动画 leave-active-lass 设置离开的动画 animated 动画的基础样式
  duration

  string
  duration="800" 统一设置进入和离开的时间 obj
  :duration="{enter: 800, leave: 300}" 分开设置进入和离开的时间

• 列表动画

  • appear 设置进入页面立即开启动画
  • transition-group 用于实现列表动画