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更新的时候, 会执行 可能多次
  }
});
// 简写
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;
    }
}

Vue中的动画

动画能够提高用户体验；帮助用户更好理解页面中的功能；

使用过渡类名

/* v-enter 进入之前 元素的起始状态 此时还没有开始进入 */
/* v-leave-to 动画离开之后 离开的终止状态, 此时元素动画已经结束 */
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateX(80px);
}
/* v-enter-active 入场动画的时间段 */
/* v-leave-active 出场动画时间段 */
.v-enter-active,
.v-leave-active {
  transition: all 0.4s ease-in;
}

d="app">
  <input type="button" value="button" @click="msg = !msg">
  <!-- 使用1. transition 元素 把需要控制的动画包裹起来 Vue 官方提供的
    v- 并不是必须的, 如果需要更改为其他可以 transition 的 name 属性中指定 例如: my 那么调用时就是 my-enter -->
  <transition name="" mode="">
    <h3 v-if="msg">H3</h3>
  </transition>
</div>

使用动画钩子函数

<div id="app">
  <input type="button" value="button" v-on:click="flag = !flag">
  <transition name="" mode="" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
    <div class="ball" v-show="flag"></div>
  </transition>
</div>

methods: {
  // 注意: 动画钩子函数的第一个参数 el 表示, 要执行动画的那个 DOM元素 是个原生的JS对象
  beforeEnter(el) {  // 表示动画入场之前, 此时动画尚未开始, 可以在 before-enter 中设置 元素开始动画之前的起始样式
    el.style.transform = 'translate(0, 0)';
  },
  enter(el, done) { // enter 表示动画 开始之后的样式 这里设置 元素完成动画之后的结束状态
    el.offsetWidth;  // 这句话没有实际作用, 但是如果不写, 出不来动画效果 可以认为 el.offsetWidth 强制刷新动画
    el.style.transform = 'translate(150px, 450px)';
    el.style.transition = 'all 1s ease';
    // 这里的 done() 其实就是 afterEnter 这个函数, 也就是说 done 是 afterEnter 函数的引用
    done();
  },
  afterEnter(el) { // 动画完成之后 调用 after-enter
    console.log('ok');
    this.flag = !this.flag
  }
}

v-for 列表动画过渡

.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateY(40px);
}
.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}

<!-- 在实现列表过渡的时候, 如果需要过渡的元素的是通过v-for循环渲染出来的, 不能使用 transition 标签  需要使用 transitionGroup -->
<!-- 如果要为 v-for 循环渲染出来的元素设置动画, 必须为每一个 元素设置 :key 属性 -->
<!-- appear 给 transition-group 实现页面入场效果 -->
<!-- 通过 transition-group 设置 tag属性 执行 transition-group 设置为指定的属性 如果不指定渲染为 span 标签 -->
<transition-group appear tag="ul">
  <li v-for="(item, i) in list" :key="item.id" @click="del(i)">{{ item.id }} -- {{ item. name }}</li>
</transition-group>

var app = new Vue({
  el: '#app',
  data: {
    id: '',
    name: '',
    list: [
      {id: 1, name: 'mz'},
      {id: 2, name: 'we'},
      {id: 3, name: 'ls'},
      {id: 4, name: 'zs'},
    ]
  },
  methods: {
    add() {
      this.list.push({id: this.id, name: this.name});
      this.id = this.name = '';
    }
  }
});

/* 离场动画 固定写发 */
.v-move {
  transition: all 0.5s ease;
}
.v-leave-actice {
  /* width: 100%; */
  position: absolute;
}

相关文章

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