Vue 基础 day02

Vue Devtools 安装

https://chrome.google.com/webstore/search/vue%20devtools?hl=zh-CN 需要翻墙

过滤器

概念: Vue.js 允许你自定义过滤器, 可被用作一些常见的文本格式化, 过滤器可以用在两个地方: mustache插值和 v-bind表达式. 过滤器应该被添加在JavaScript表达式的尾部, 用"管道"符提示;

全局

<!-- 可以增加多个, 从左往右依次执行 -->
<td>{{ item.ctime | dataFormat('yyyy-mm-dd') | strRepace() }}</td> 

// 全局过滤器, 所有的vm实例都能调用;
Vue.filter('dateFormat', function (dataStr, pattern) {
  var dt = new Date(dataStr);
  var y = dt.getFullYear();
  var m = dt.getMonth() + 1;
  var d = dt.getDate();
    
  if (pattern.toLowerCase() === 'yyyy-mm-dd') {
    return `${y}-${m}-${d}`;
  } else {
    var hh = dt.getHours();
    var mm = dt.getMinutes();
    var ss = dt.getSeconds();
    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
  }
});

私有

// 就近原则, 如果有两个过滤器, 优先调用私有过滤器
var app2 = new Vue({
  el: '#app2',
  data: {
    dt: new Date()
  },
  methods: {},
  filters: { // 定义私有过滤器   过滤器名称, 处理函数
    dateFormat: function (dateStr, pattern) {
      var dt = new Date(dateStr);
      var y = dt.getFullYear();
      // ES6字符串方法 String.prototype.padStart(MaxLength, fillString='');
      var m = (dt.getMonth() + 1).toString().padStart(2, '0');
      var d = dt.getDate().toString().padStart(2, '0');
    
      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.js 内部提供了一些按键修饰符

.enter .tab .delete .esc .space .up .down .left .right

<input type="text" v-on:keyup.enter="">

自定义按键修饰符

Vue.config.keyCodes.f1 = 112;

自定义指令

全局

<input type="text" v-focus>

// 参数1: 指令的名称, 注意调用时, 前面要加 v-
// 参数2: 对象, 这个对象身上有一些指令相关的函数, 这些函数在特定的阶段, 执行相关操作
Vue.directive('focus', { 
  // 注意: 在每个函数中, 第一个参数, 永远是el 表示被绑定了指定的那个元素, 这个el是一个原生的JS对象
  bind: function () { // 每当指令绑定到元素上的时候, 会立即执行 bind 这个函数, 只执行一次
  },
  inserted: function (el) { // 表示元素插入到DOM的时候, 只执行一次
    el.focus();
  },
  updated: function () { // 每当VNode更新的时候, 会执行 可能多次
  }
});
// 简写 注意: 这个 function 等同于 把点吗写到 bind 和 update 中去
Vue.directive('focus', function(el) {
    el.focus();
});

私有

<p v-color="'red'" v-font-weight="900" v-fontsize="30">{{ dt | dateFormat("") }}</p>

directives: {
  'color': {
    bind: function (el, binding) {
      el.style.color = binding.value;
    }
  },
  'font-weight': {
    bind: function (el, binding) {
      el.style.fontWeight = binding.value;
    }
  }
}
// 简写 
directives: {
    'fontzise': function (el, binding) {
        el.style.fontSize = binding.value;
    }
}

相关文章

js 里面的键盘事件对应的键码