Vue基础语法

小石家

已于 2022-10-22 13:16:02 修改

阅读量166

点赞数

CC 4.0 BY-SA版权

文章标签： servlet vue.js

于 2022-10-19 23:11:42 首次发布

本文链接：https://blog.csdn.net/m0_68917672/article/details/127415062

本文详细介绍了Vue的基础语法，包括过滤器的作用和用法，如何注册全局和局部过滤器。此外，还讲解了自定义指令的用途，以及如何创建全局和带参数的自定义指令。最后，探讨了Vue实例的生命周期，阐述了各个阶段的常用钩子函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.过滤器的作用及用法

2.自定义指令

3.生命周期

文章目录

一、过滤器
过滤器的作用
全局过滤器
局部过滤器
二、自定义指令
自定义指令有什么用
Vue.directive注册全局自定义指令
Vue.directive注册全局自定义指令带参数
三、生命周期
声明周期有什么用
常用的钩子函数
总结

前言

本文重点陈述了过滤器的作用及用法以及自定义指令和生命周期的基本解析

以下是本篇文章正文内容

一、过滤器

1.过滤器是什么？

过滤器（filter）是输送介质管道上不可缺少的一种装置,大白话，就是把一些不必要的东西过滤掉,过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，我们也可以理解其为一个纯函数。

Vue 允许你自定义过滤器，可被用于一些常见的文本格式化

2.过滤器的作用？

- Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。
- 过滤器可以用在两个地方：双花括号插值和v-bind表达式。
- 过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示

3.全局过滤器

全局过滤器注册号之后所有的组件可以使用

全局注册时是filter，没有s的。而局部过滤器是filters，是有s的

（案例如下）:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">

    <input type="text" v-model='msg'>
    <!-- upper 被定义为接收单个参数的过滤器函数，表达式  msg  的值将作为参数传入到函数中 -->
    <div>{{msg | lower}}</div>
    <!--
  支持级联操作
 upper  被定义为接收单个参数的过滤器函数，表达式msg 的值将作为参数传入到函数中。
  然后继续调用同样被定义为接收单个参数的过滤器 lower ，将upper 的结果传递到lower中
 -->
    <hr>
    <!--手机号案例-->
    <input type="text" v-model='mgs'>
    <div>{{mgs | telFilter}}</div>
</div>
<script>
    //toUpperCase让字符变为大写的
    //tolowerCase让字符变为小写的
    //val.toUpperCase();直接将传入的数据都变为大写的
    //同理val.tolowerCase();将传入的数据都变为小写的
    Vue.filter('lower', function (val) {
        // return val.charAt(0).toUpperCase()+val.slice(1)
        return val.toUpperCase();
    });

    //手机号案例
    Vue.filter('telFilter', function (val) {
        // return val.charAt(0).toUpperCase()+val.slice(1)
        if (val.length <= 3) {
            return val;
        } else if (val.length > 3 && val.length <= 7) {
            return val.substring(0,3)+"-"+val.substring(3);
        }else {
            return val.substring(0,3)+"-"+val.substring(3,7)+"-"+val.substring(7)
        }
        return val.toUpperCase();
    });
    new Vue({
        el: "#app",
        data: {
            msg: "",
            mgs: ""
        },
        methods: {}
    })
</script>
</body>
</html>

4.局部过滤器

局部过滤器注册好之后只能在注册的组件内使用

写在vue实例中,等同于el,methods,data等同级的位置

语法:

filters:{

过滤器的名字(过滤的数据){

return 你过滤的逻辑

}

}

使用

{{数据|过滤器的名字}} // 管道符|

(案例如下):

var vm = new Vue({
  el: '#app',
  data: {
    msg: ''
  },
  //filters  属性 定义 和 data 已经 methods 平级 
  //  定义filters 中的过滤器为局部过滤器 
  filters: {
    //   upper  自定义的过滤器名字 
    //    upper 被定义为接收单个参数的过滤器函数，表达式  msg  的值将作为参数传入到函数中
    upper: function(val) {
      //  过滤器中一定要有返回值 这样外界使用过滤器的时候才能拿到结果
      return val.charAt(0).toUpperCase() + val.slice(1);
    }
  }
});

二.自定义指令

1.自定义指令有什么用

- 内置指令不能满足我们特殊的需求
- Vue允许我们自定义指令

-自定义指令的作用：可以自定义函数给元素执行
-自定义指令操作dom对象 js原生象 js原生

2.Vue.directive注册全局自定义指令

注意事项:

-使用自定义的指令，只需在对用的元素中，加上'v-'的前缀形成类似于内部指令'v-if'，'v-text'的形式.

-全局注册是没有directive是没有s,局部注册是有s.

<!--   注意点：
     1、 在自定义指令中  如果以驼峰命名的方式定义 如  Vue.directive('focusA',function(){})
       2、 在HTML中使用的时候 只能通过 v-focus-a 来使用注册一个全局自定义指令 v-focus-->
    <input type="text" v-focus>

<script>
  //自定义指令
    Vue.directive('focus', {
        // 当绑定元素插入到 DOM 中。 其中 el为dom元素
        inserted: function (el) {
            // 聚焦元素
            el.focus();
        }
    });
</script>

3.Vue.directive注册全局自定义指令带参数

注意:

--自定义指令-带参数

--bind - 只调用一次，在指令第一次绑定到元素上时候调用

<div id="app">  
 <!--Vue.directive注册全局自定义指令带参数-->
    <input type="text" v-color='color'>
</div>
<script> 
   // 自定义指令-带参数
    // bind - 只调用一次，在指令第一次绑定到元素上时候调用
    Vue.directive('color', {
        // bind声明周期, 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
        // el 为当前自定义指令的DOM元素
        // binding 为自定义的函数形参   通过自定义属性传递过来的值 存在 binding.value 里面
        bind: function (el, binding) {
            // 根据指令的参数设置背景色
            // console.log(binding.value.color)
            el.style.backgroundColor = binding.value.color;
        }
    });  
 new Vue({
        el: "#app",
        data: {
            msg: "",
            mgs: "",
            /*这里可以直接传*/
            // color:"red",
            color:{
                //也可以定义一个对象传参
                color:"green"
            }
        },
        methods: {}
    })
</script>