Vue常用特性

2022-04-02 本文已影响0人生命里那束光

✍目录总览：（表单操作、自定义指令、计算属性、侦听器、过滤器、生命周期）

思维导图

一、表单操作

1. 基于Vue的表单操作

v-model指令：在表单控件元素上创建双向数据绑定。v-model 会根据控件类型自动选取正确的方法来更新元素。

1.1 Input 单行文本

<body>
<div id="app">
  <p>input 元素：</p>
  <input v-model="message" placeholder="编辑我……">
  <p>消息是: {{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob'
  }
})
</script>
</body>

1.2 textarea 多行文本

<body>
<div id="app">
  <p>textarea 元素：</p>
  <p style="white-space: pre">{{ message2 }}</p>
  <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob',
    message2: '菜鸟教程\r\nhttp://www.runoob.com'
  }
})
</script>
</body>

1.3 radio 单选框

实现多选一效果。常见场景：性别选择
v-model变量的值和value一致时，即勾选

<div id="app">
  <span> 性别：<span/>
  <span>
     <input type="radio" id="male" value="1" v-model="picked">
     <label for="male">男</label>
     <input type="radio" id="female" value="2" v-model="picked">
     <label for="female">女</label>
  <span/>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    //设置默认值为1，即默认选择性别为男
    picked : 1
  }
})
</script>

1.4 select 下拉表单（单选和多选）

表单元素添加multiple="true"属性可以将单选下拉表单 变成多选下拉表单
多选下拉表单（需要把data中v-model绑定的属性类型改为数组）。

<div id="app">
  <-- 单选下拉表单 -->
  <select v-model="selected" name="fruit">
    <option value="">选择一个网站</option>
    <option value="www.runoob.com">Runoob</option>
    <option value="www.google.com">Google</option>
  </select>
  <div id="output">
      选择的网站是: {{selected}}
  </div>
  <-- 多选下拉表单 -->
  <select v-model="website" name="fruit"  multiple="true">
    <option value="">选择一个网站</option>
    <option value="www.runoob.com">Runoob</option>
    <option value="www.google.com">Google</option>
  </select>
  <div id="output">
      选择的网站是: {{website}}
  </div>    
</div>

<script>
new Vue({
  el: '#app',
  data: {
    //默认选择Runoob 
    selected: 'www.runoob.com' ,
    //多选下拉表单默认无选中
    website:[]
  }
})
</script>

1.5 checkbox 复选框（单个和多个）

v-model变量的值和value一致时，即勾选。

<body>
<div id="app">
  <p>单个复选框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
    
  <p>多个复选框：</p>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <span>选择的值为: {{ checkedNames }}</span>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    //默认打勾
    checked : true,
    //默认打勾 Runoob Google Taobao
    checkedNames: ["Runoob", "Google", "Taobao"]
  }
})
</script>
</body>

2.表单修饰符

修饰符	作用	示例
.number	自动将用户的输入值转化为数值类型	`<input v-model.number = "age" />`
.trim	自动过滤用户输入的首尾空白字符	`<input v-module.trim = "msg" />`
.lazy	在 `change` 时而非 `input` 时更新(失去焦点或回车时)	`<input v-model.lazy = "msg" />`

2.1 .number

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

<input v-model.number="age" type="number">

这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。

2.2 .trim

如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

<input v-model.trim="msg">

2.3 .lazy

在默认情况下， v-model 在 input 事件中同步输入框的值与数据。
但你可以添加一个修饰符 lazy ，从而转变为在 change 事件（当是去input输入框失去焦点或敲击回车）中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

二、自定义指令

使用场景：内置指令不满足需求

1.自定义指令

Vue.directive('focus' {
    inserted: function(el) {
    // 获取元素的焦点
    el.focus();
    }
})
//用法
<input type="text" v-focus>

2.带参数的自定义指令

Vue.directive(‘color', {
    inserted: function(el, binding) {
        el.style.backgroundColor = binding.value.color;
    }
})
//用法 修改背景颜色
<input type="text" v-color='{color:"orange"}'>

3.局部自定义指令

directives: {
    focus: {
    // 指令的定义
        inserted: function (el) {
        el.focus()
        }
    }
}

三、计算属性（computed）

1.概念和用法

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

用法（computed）：

<div id="app">
    <div>{{msg}}</div>
    <div>{{msg.split('').reverse().join('')}}</div>
    <div>{{reverseString}}</div>
    
var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Nihao'
      },
      computed: {
        reverseString: function () {
          return this.msg.split('').reverse().join('');
        }
      }
    });

2.计算属性与方法的区别

计算属性是基于他们的依赖进行缓存的（如果输入不变，后续直接调用第一次计算结果的缓存数据）
方法不存在缓存（每次输入，都需要进行计算。）

四、侦听器

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

4.2 基本用法：和计算属性相似

<div>
   <span>名：</span>
   <span>
      <input type="text" v-model='firstName'>
   </span>
</div>
<div>
   <span>姓：</span>
   <span>
      <input type="text" v-model='lastName'>
   </span>
</div>
<div>{{fullName}}</div>

watch: {
   firstName: function(val) {
          this.fullName = val + ' ' + this.lastName;
   },
   lastName: function(val) {
          this.fullName = this.firstName + ' ' + val;
   }
}

侦听器案例：验证用户名是否可用

<div>
    <span>用户名：</span>
    <span>
        <input type="text" v-model.lazy='uname'>
    </span>
    <span>{{tip}}</span>
</div>


methods: {
    checkName: function(uname) {
    // 调用接口，但是可以使用定时任务的方式模拟接口调用
        var that = this;
        setTimeout(function(){
            // 模拟接口调用
            if(uname == 'admin') {
                that.tip = '用户名已经存在，请更换一个';
            }else{
                that.tip = '用户名可以使用';
            }
        }, 2000);
     }
},
watch: {
    uname: function(val){
    // 调用后台接口验证用户名的合法性
        this.checkName(val);
        // 修改提示信息
        this.tip = '正在验证...';
     }
}

五、过滤器

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

5.2 过滤器的基本用法：

//过滤器的使用
<input type="text" v-model='msg'>
<div>{{msg | upper }}</div>
<div>{{msg | upper | lower}}</div>  //会被处理两次，先首字母大写，再首字母小写
<div :abc='msg | upper'>测试数据</div>  //动态添加属性

//自定义全局过滤器
Vue.filter('upper', function(val) {
      return val.charAt(0).toUpperCase() + val.slice(1);
});
Vue.filter('lower', function(val) {
      return val.charAt(0).toLowerCase() + val.slice(1);
});

//自定义局部过滤器filters
var vm = new Vue({
      el: '#app',
      data: {
        msg: ''
      },
      filters: {
        upper: function(val) {
          return val.charAt(0).toUpperCase() + val.slice(1);
        }
      }
});

5.3 带参数的过滤器

过滤器是 JavaScript 函数，因此可以接收参数：{{ message | filterA('arg' )}}
这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg' 作为第二个参数

//过滤器使用  
<div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>
//过滤器定义  value是形参，表示过滤器要处理的原始数据
Vue.filter('format', function(value, arg) {
    if(arg == 'yyyy-MM-dd') {
        var ret = '';
        ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
        return ret;
    }
    return value;
})

过滤器案例：格式化日期

获取data数据使用过滤器格式化为‘2022-4-1 12:22:19’的格式

//过滤器使用 
<div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>
//过滤器定义function内部套用处理时间格式的固定模板
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);
})

六、生命周期

1. 主要阶段

挂载（初始化相关属性）

① beforeCreate

② created

③ beforeMount

④ mounted

更新（元素或组件的变更操作）

① beforeUpdate

② updated

销毁（销毁相关属性）

① beforeDestroy

② destroyed

2. Vue实例的产生过程

挂载;

① beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。

② created 在实例创建完成后被立即调用。

③ beforeMount 在挂载开始之前被调用。

④ mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。

跟新：

⑤ beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前。

⑥ updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。

销毁：

⑦ beforeDestroy 实例销毁之前调用。

⑧ destroyed 实例销毁后调用。