Vue

组件通讯-非父子,slot插槽

组件通讯-非父子,slot插槽

组件通讯-非父子

非父子组件之间通过一个空的Vue实例来传递数据。

1
const bus = new Vue();   //bus:公交车  事件总线
  • 核心逻辑
1
2
3
4
5
组件A给组件B传值：
1. 创建一个bus对象
2. 组件a触发事件，给组件b发送数据
3. 组件b给bus对象注册事件
4. 组件b提供函数，用于接收数据

Read More

Vue

Vue计算属性、监视、生命周期、钩子函数

Vue计算属性、监视、生命周期、钩子函数

计算属性

将属性计算的过程封装到一个函数中，使用计算属性是会自动调用函数，函数的返回值就是计算属性的值

优点：

  1. 可维护性高
  2. 计算属性比直接用调用函数来使用性能要高（有缓存）
  3. 只有相关的属性发生了变化才会重新计算

Read More

Vue

Vue指令

vue指令

  • 解释：指令 (Directives) 是带有 v- 前缀的特殊属性，可以在html标签中使用，可以看成特殊的html属性
  • 作用：指令提供了一些特殊的功能，当指向绑定到标签上时，可以给标签增加一些特殊的行为

Read More

plugin

NProgress的使用

NProgress插件的使用

nprogress插件是一个适用于ajax应用的轻量级的进度条插件。

使用步骤

一、 引入

1
2
<link rel='stylesheet' ref='nprogress.css'/>
<script src='nprogress.js'></script>

二、语法

1
2
3
4
5
6
7
//引入了nprogress.js文件后，就有了一个全局对象NProgress对象
//开启进度条
NProgress.start();
//关闭进度条
NProgress.done();
// 配置禁用小圆环
NProgress.configure({ showSpinner: false });

和jQuery的配合使用

  • 添加到调用 Ajax 的地方，将它和 jQuery ajaxStart 和 ajaxStop 事件绑定起来

jQ中AJAX的全局事件

ajax提供了6个全局函数，会被页面中所有的ajax请求触发，在不同时间点会触发不同的全局事件。

在页面中会有很多的ajax请求，但是这些ajax请求都有相同的消息机制，比如我们需要在ajax请求发送之前弹出一个提示框，提示”正在读取数据….” ，在ajax请求成功时显示”获取数据成功…”，在ajax结束后隐藏提示框等。如果不使用全局事件，那么需要在每一个ajax的beforeSend、success、complete回调函数中都加上相同的代码。

  • jquery的全局事件需要给document注册（固定写法）
1
2
3
$(document).ajaxStart(function () {
  console.log("ajaxStart，这是在开始一个ajax请求时触发的事件");
});
  • 全局事件的执行时机
1
2
3
4
5
6
1. ajaxStart  	在开始一个ajax请求时触发
2. ajaxSend		在beforeSend回调函数之后触发
3. ajaxSuccess	在success回调函数之后触发
4. ajaxError	在error回调函数之后触发
5. ajaxComplete	在complete回调函数之后触发
6. ajaxStop		在ajax请求结束时触发

官网：http://ricostacruz.com/nprogress/

github地址：https://github.com/rstacruz/nprogress

参考文档：http://blog.csdn.net/joyhen/article/details/24458427

plugin

json-server的使用

json-server的使用

使用方法：

  1. npm i -g json-server

  2. 新建一个 JSON 文件，写入数据（一定要写id）

  3. 启动接口 json-server json文件名，一旦启动就可以生成一套基于 restful风格的一套api

  4. 增删改查：

    ① get请求（查询）：

    http://localhost:3000/json数据对象名 获取全部数据

    http://localhost:3000/json数据对象名/数据id值 获取指定id的数据

    ② post请求（只用于添加，可使用postman方便发送请求）：

    http://localhost:3000/json数据对象名 在请求体中写入数据

    ③ delete请求（只用于删除）：

    http://localhost:3000/json数据对象名/数据id值 删除指定id的数据

    ④ put请求（全量修改）：

    http://localhost:3000/json数据对象名/数据id值 在请求体中写入数据，覆盖指定id的所有数据

    ⑤ patch请求（局部修改）：

    http://localhost:3000/json数据对象名/数据id值 在请求体中写入数据，修改指定id数据的某一项

plugin

jquery-fileupload的使用

jquery-fileupload的使用

使用步骤

github地址：https://github.com/blueimp/jQuery-File-Upload

中文文档：http://www.jq22.com/jquery-info230

引包

1
2
3
4
5
6
7
8
<!-- jquery-fileupload依赖与jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- jquery ui小部件，上传插件依赖了jquery ui的小部件 -->
<script src="js/vendor/jquery.ui.widget.js"></script>
<!-- 如果上传图片需要跨域，那么需要引入这个js文件，如果不跨域，则不需要引入 -->
<script src="js/jquery.iframe-transport.js"></script>
<!-- jquery上传插件 -->
<script src="js/jquery.fileupload.js"></script>

html结构

1
2
3
4
<!-- name指定图片上传时的name属性 -->
<!-- data-url指定图片上传时的接口地址 -->
<!-- multiple指定多文件上传 -->
<input id="fileupload" type="file" name="files" data-url="server/php/" multiple>

js代码

1
2
3
4
5
6
7
8
$("#fileupload").fileupload({
      dataType:"json",
      //e：事件对象
      //data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
      done:function (e, data) {
        console.log(data);
      }
});
plugin

前端校验插件bootstrap-validator

前端校验插件bootstrap-validator

一、引包

  1. 引入bootstrap-validator的css文件。由于bootstrap-validator是bootstrap插件，因此需要先引入bootstrap。
1
2
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="lib/bootstrap-validator/css/bootstrapValidator.css">
  1. 引入bootstrap-validator的js文件
1
2
3
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="lib/bootstrap-validator/js/bootstrapValidator.js"></script>

Read More