Vue 常用特性：表单操作自定义指令计算属性侦听器过滤器生命周期

Posted 2021-10-16 _Tough_Girl

1、Vue 常用特性

1.1 Vue 常用特性概览

• 表单操作
• 自定义指令
• 计算属性
• 侦听器
• 过滤器
• 生命周期

1.2 表单操作

（1）基于 Vue 的表单操作

• Input 单行文本
• textarea 多行文本
• select 下拉多选
• radio 单选框
• checkbox 多选框

（2）表单域修饰符

• number：转化为数值
• trim：去掉开始和结尾的空格
• lazy : 将 input 事件切换为 change 事件

<input type="text" v-model.number='age'>
<input type="text" v-model.trim='info'>
<input type="text" v-model.lazy='msg'>

1.3 自定义指令

（1）为何需要自定义指令？

内置指令不满足需求。

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

// 自定义指令
Vue.directive('focus', {
    // 当被绑定的元素插入到 DOM 中时
    inserted: function (el) {
        // el表示指令所绑定的元素
        el.focus();  // 获取焦点
    }
});

（3）自定义指令用法

<input type="text" v-focus>

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

// 自定义指令-带参数
Vue.directive('color', {
    // el：指令所绑定的元素，可以用来直接操作 DOM。
    // binding：一个对象,包含：
    // name：指令名，不包括 v- 前缀。
    // value：指令的绑定值  除此之外还有其他内容，这里省略
    bind: function (el, binding) {
        // console.log(binding);
        // console.log(binding.value);
        console.log(binding.value.color);
        // 根据指令的参数设置背景色
        el.style.backgroundColor = binding.value.color;
    }
});

（5） 指令的用法

<input type="text" v-color='{color:"orange"}'>

（6）局部指令

 // 自定义指令-局部指令
 var vm = new Vue({
     el: '#app',
     data: {
         msg: {
             color: 'red'
         }
     },
     methods: {
         handle: function () {
         }
     },
     directives: {
         color: {
             // el：指令所绑定的元素，可以用来直接操作 DOM。
             // binding：一个对象,包含：
             // name：指令名，不包括 v- 前缀。
             // value：指令的绑定值  除此之外还有其他内容，这里省略
             bind: function (el, binding) {
                 // console.log(binding);
                 // console.log(binding.value);
                 console.log(binding.value.color);
                 // 根据指令的参数设置背景色
                 el.style.backgroundColor = binding.value.color;
             }
         },
         focus: {
             inserted: function (el) {
                 el.focus();
             }
         }
     }
 });

<div id="app">
    <input type="text" v-color='msg'>
    <input type="text" v-focus>
</div>

1.4 计算属性

（1） 为何需要计算属性？

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

（2）计算属性的用法

<!-- 为何需要计算属性？ -->
<!-- 表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁 -->
<div id="app">
    <div>{{msg}}</div>
    <div>{{reverseString}}</div>
</div>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'ni hao'
        },
        // 计算属性
        computed: {
            reverseString: function () {
                return this.msg.split('').reverse().join('');
            }
        }
    });
</script>

（3） 计算属性与方法的区别

• 计算属性是基于它们的依赖进行缓存的。
• 方法不存在缓存。

1.5 侦听器

（1）侦听器的应用场景

数据变化时执行异步或开销较大的操作。

（2）侦听器的用法

<div id="app">
    <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>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<!-- 侦听器的应用场景：数据变化时执行异步或开销较大的操作 -->
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'Jim',
            lastName: 'Green',
            fullName: 'Jim Green'
        },
        // 计算属性
        // computed: {
        //     fullName: function () {
        //         return this.firstName + ' ' + this.lastName;
        //     }
        // },
        // 侦听器：数据一旦发生变化就通知侦听器所绑定方法
        watch: {
            firstName: function (val) {
                // val表示变化之后的值
                this.fullName = val + ' ' + this.lastName;
            },
            lastName: function (val) {
                // val表示变化之后的值
                this.fullName = this.firstName + ' ' + val;
            }
        }
    });
</script>

1.6 过滤器

（1）过滤器的作用是什么？

格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等。

（2）自定义过滤器

Vue.filter(‘过滤器名称’, function(value){
	// 过滤器业务逻辑
})

（3）过滤器的使用（支持级联操作 ）

<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div>
<div v-bind:id=“id | formatId"></div>

（4）局部过滤器

filters:{
	upper: function(){}
}

例子：

<!-- 过滤器的作用是什么？
格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等 -->
<div id="app">
    <input type="text" v-model='msg'>
    <div>{{msg | upper}}</div>
    <div>{{msg | upper | lower}}</div>
    <div v-bind:abc='msg | upper'>测试数据</div>
</div>
<script src="js/vue.js"></script>
<script>
    // 过滤器
    // 1、可以用与插值表达式和属性绑定
    // 2、支持级联操作 
    // 全局过滤器
    // 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);
    });
    var vm = new Vue({
        el: '#app',
        data: {
            msg: ''
        },
        // 局部过滤器
        filters: {
            upper: function (val) {
                return val.charAt(0).toUpperCase() + val.slice(1);
            }
        }
    })
</script>

（5）带参数的过滤器

Vue.filter(‘format’, function(value, arg1){
	// value就是过滤器传递过来的参数
})

（6）过滤器的使用

<div>{{date | format(‘yyyy-MM-dd')}}</div>

例子：

 <div id="app">
     <div>{{date | format('yyyy-MM-dd')}}</div>
 </div>
 <script src="js/vue.js"></script>
 <script>
     // 过滤器案例：格式化日期
     Vue.filter('format', function (value, arg) {
         // value就是过滤器传递过来的参数
         if (arg == 'yyyy-MM-dd') {
             var ret = '';
             ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
             return ret;
         }
     });
     
    var vm = new Vue({
        el: '#app',
        data: {
            date: new Date()
        }
    });
</script>

1.7 生命周期

（1）主要阶段

• 挂载（初始化相关属性）
  ① beforeCreate
  ② created
  ③ beforeMount
  ④ mounted

• 更新（元素或组件的变更操作）
  ① beforeUpdate
  ② updated

• 销毁（销毁相关属性）
  ① beforeDestroy
  ② destroyed

（2）Vue 实例的产生过程
① beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用。此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问 methods， data， computed等上的方法和数据。

② created：在实例创建完成后被立即调用。在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。

③ beforeMount：在挂载开始之前被调用。相关的 render 函数首次被调用（虚拟DOM），实例已完成以下的配置： 编译模板，把 data 里面的数据和模板生成 html，完成了 el 和 data 初始化，注意此时还没有挂在 html 到页面上。

④ mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。模板中的 HTML 渲染到 HTML 页面中，此时一般可以做一些 ajax 操作，mounted 只会执行一次。

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

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

⑦ beforeDestroy：实例销毁之前调用，此时实例仍然完全可用。这一步还可以用 this 来获取实例，一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的 dom 事件。

⑧ destroyed：实例销毁后调用。调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用。