Vue.js 的学习笔记（2）_vuejs `$-CSDN博客

Vue.js 的学习笔记（2）

过滤器

Vue.js 允许自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符 | 指示。

定义方式：

私有过滤器：（获取时间：年月日时分秒）

	// HTML
	<p>{{item.ctime | dataFormat('yyyy-mm-dd')}}</p>
	
	// JS
	// 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用
	filters: {
    	dataFormat(input, pattern = "") { // 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错
	      var dt = new Date(input);
	      // 获取年月日
	      var y = dt.getFullYear();
	      var m = (dt.getMonth() + 1).toString().padStart(2, '0');
	      var d = dt.getDate().toString().padStart(2, '0');
	      // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
	      // 否则，就返回  年-月-日 时：分：秒
	      if (pattern.toLowerCase() === 'yyyy-mm-dd') {
	        return `${y}-${m}-${d}`;
	      } else {
	        // 获取时分秒（在时分秒前不够两位的补 0 ）
	        var hh = dt.getHours().toString().padStart(2, '0');
	        var mm = dt.getMinutes().toString().padStart(2, '0');
	        var ss = dt.getSeconds().toString().padStart(2, '0');
	        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
	      }
	    }
 	 }

使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString=’ ‘) 或 String.prototype.padEnd(maxLength, fillString=’ ')来填充字符串

全局过滤器：

// 定义一个全局过滤器
Vue.filter('dataFormat', function (input, pattern = '') {
  var dt = new Date(input)
  // 获取年月日
  var y = dt.getFullYear()
  var m = (dt.getMonth() + 1).toString().padStart(2, '0')
  var d = dt.getDate().toString().padStart(2, '0')
  // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
  // 否则，就返回  年-月-日 时：分：秒
  if (pattern.toLowerCase() === 'yyyy-mm-dd') {
    return `${y}-${m}-${d}`
  } else {
    // 获取时分秒
    var hh = dt.getHours().toString().padStart(2, '0')
    var mm = dt.getMinutes().toString().padStart(2, '0')
    var ss = dt.getSeconds().toString().padStart(2, '0')
    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
  }
});

注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

键盘修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<input @keyup.enter="submit">

常用的按键修饰符：

.enter （回车键）
.tab （换行键）
.delete （捕获“删除”和“退格”键）
.esc （退出键）
.space（空格键）
.up （上）
.down （下）
.left（左）
.right（右）

vue-resource 实现 get，post，jsonp请求

除了 vue-resource 之外，还可以使用 axios 的第三方包实现实现数据的请求

常见的数据请求类型：get，post，jsonp
跨域问题：由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口号不同 的数据接口，浏览器认为这种访问不安全
vue-resource 的配置步骤：
直接在页面中，通过<script>标签，引入 vue-resource 的脚本文件；
注：先引用 Vue 的脚本文件，再引用 vue-resource 的脚本文件；

发送get请求

	// get 请求方式
	var url = ''
	getInfo () { 
	  this.$http.get(url).then(res => {
	    console.log(res)
	  })
	}

发送post请求

	// post 请求方式
	postInfo () {
	  var url = ''
	  // post 方法接收三个参数：
	  // 参数1： 要请求的URL地址
	  // 参数2： 要发送的数据对象
	  // 参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded
	  this.$http.post(url, { name: 'name' }, { emulateJSON: true }).then(res => {
	    console.log(res)
	  })
	}

发送jsonp请求

	// jsonp 请求方式
	jsonpInfo () {
	  var url = ''
	  this.$http.jsonp(url).then(res => {
	    console.log(res);
	  });
	}