Vue 常用特性

常用特性概览

（1）表单操作
（2）自定义指令
（3）计算属性
（4）侦听器
（5）过滤器
（6）生命周期

表单操作

基于 Vue 的表单操作

① Input 单行文本
② textarea 多行文本
③ select 下拉多选
④ radio 单选框
⑤ checkbox 多选框

表单域修饰符
① number：转化为数值
② trim：去掉开始和结尾的空格
③ lazy : 将input事件切换为change事件

自定义指令

为何需要自定义指令？
内置指令不满足需求。

自定义指令的语法规则（获取元素焦点）

自定义指令用法

带参数的自定义指令（改变元素背景色）

带参数指令的用法

局部指令（本组件内有效）

计算属性

为何需要计算属性？
表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁。

计算属性的用法

计算属性与方法的区别
（1）计算属性是基于它们的依赖进行缓存的
（2）方法不存在缓存

侦听器

侦听器的应用场景
数据变化时执行异步或开销较大的操作。

侦听器的基本用法

场景案例：验证用户名是否可用

需求：
输入框中输入姓名，失去焦点时验证是否存在，如果已经存在，提示从新输入，如果不存在，提示可以使用。
分析：
① 通过v-model实现数据绑定
② 需要提供提示信息
③ 需要侦听器监听输入信息的变化
④ 需要修改触发的事件
参考代码：

过滤器

过滤器的作用是什么？
格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等。

自定义过滤器

过滤器的使用

1、可以用与插值表达式和属性绑定
2、支持级联操作

局部过滤器

带参数的过滤器

使用

格式化日期

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>格式化日期过滤器参考代码</title>
  </head>
  <body>

      <div id="app">
          <div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>
      </div>

      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
          Vue.filter('format', function(value, arg) {
              function dateFormat(date, format) {
                  if(typeof date === "string") {
                      var mts = date.match(/(\/Date\((\d+)\)\/)/);
                      if(mts && mts.length >= 3) {
                          date = parseInt(mts[2]);
                      }
                  }
                  date = new Date(date);
                  if(!date || date.toUTCString() == "Invalid Date") {
                      return "";
                  }
                  var map = {
                      "M": date.getMonth() + 1, //月份 
                      "d": date.getDate(), //日 
                      "h": date.getHours(), //小时 
                      "m": date.getMinutes(), //分 
                      "s": date.getSeconds(), //秒 
                      "q": Math.floor((date.getMonth() + 3) / 3), //季度 
                      "S": date.getMilliseconds() //毫秒 
                  };

                  format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
                      var v = map[t];
                      if(v !== undefined) {
                          if(all.length > 1) {
                              v = '0' + v;
                              v = v.substr(v.length - 2);
                          }
                          return v;
                      } else if(t === 'y') {
                          return(date.getFullYear() + '').substr(4 - all.length);
                      }
                      return all;
                  });
                  return format;
              }
              return dateFormat(value, arg);
          })
          var vm = new Vue({
              el: '#app',
              data: {
                  date: new Date()
              }
          });
      </script>
  </body>
</html>

生命周期

主要阶段
挂载（初始化相关属性）
① beforeCreate
② created
③ beforeMount
④ mounted
更新（元素或组件的变更操作）
① beforeUpdate
② updated
销毁（销毁相关属性）
① beforeDestroy
② destroyed

Vue 实例的产生过程
① beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。
② created 在实例创建完成后被立即调用。
③ beforeMount 在挂载开始之前被调用。
④ mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。
⑤ beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前。
⑥ updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
⑦ beforeDestroy 实例销毁之前调用。
⑧ destroyed 实例销毁后调用。

<!DOCTYPE html>
<html>

  <head>
      <meta charset="UTF-8">
      <title>测试Vue生命周期参考代码</title>
  </head>

  <body>
      
      <div id="app">
          <div>{{msg}}</div>
          <hr />
          <button @click="update">测试更新</button>
          <hr />
          <button @click="destroy">测试销毁</button>
      </div>
      
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script>
          const vm = new Vue({
              el: '#app',
              data: {
                  msg: 'Vue实例生命周期'
              },
              methods: {
                  update: function() {
                      this.msg = '我是测试更新操作的！';
                  },
                  destroy: function() {
                      this.$destroy();
                  }
              },
              beforeCreate: () => {
                  console.log('beforeCreate:' + '在实例初始化之后，数据观测和事件配置之前被调用');
              },
              created: () => {
                  console.log('created:' + '在实例创建之后立即被调用');
              },
              beforeMount: () => {
                  console.log('beforeMount:' + '在挂载开始之前被调用');
              },
              mounted: () => {
                  console.log('mounted:' + '在被创建的vm.$el替换，并挂载到实例上去之后调用');
              },
              beforeUpdate: () => {
                  console.log('beforeUpdate:' + '数据更新事被调用');
              },
              updated: () => {
                  console.log('updated:' + '由于数据更新，页面重新渲染后被调用');
              },
              beforeDestroy: () => {
                  console.log('beforeDestroy:' + '实例销毁之前被调用');
              },
              destroyed: () => {
                  console.log('destroyed:' + '实例销毁后被调用');
              }
          })
      </script>       
  </body>
</html>