Vue2的基础用法——Vue的过滤器，侦听器，axios

最新推荐文章于 2024-05-14 08:57:42 发布

今天星期几呢

最新推荐文章于 2024-05-14 08:57:42 发布

阅读量441

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/shhghvvh/article/details/128617372

版权

4.基于axios直接发起GET和POST请求

1.过滤器

过滤器(Filters)是vue为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方:插值表达式和v-bind 属性绑定。
过滤器应该被添加在JavaScript表达式的尾部，由“管道符”进行调用，示例代码如下:

1私有过滤器

在filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前vm实例所控制的el区域内使用。

定义一个首字母大小的过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>messagedd的值是: {
  { message | capitalize}}</p>
    </div>
    <script src="../lib/vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                message:"hello vue"
            },
            //声明过滤器
            filters:{
                //过滤器函数形参中的 val,永远都是“管道符”前面的那个值
                capitalize (val){
                    //字符串有 charAt方法，这个方法接收索引值，表示从字符串中把索引对应的字符，获取出来
                    const first = val.charAt(0).toUpperCase()
                    //字符串的slice方法，可以截取字符串，从指定索引往后截取
                    const other = val.slice(1)
                    //过滤器中一定要有一个返回值
                    return first+other
                }
            }
        })
    </script>
</body>
</html>

2.全局过滤器

如果希望在多个vue实例之间共享过滤器，则可以按照如下的格式定义全局过滤器:

//定义全局过滤器

Vue.filter("capitalize",(str)=>{

})

全局过滤器-独立于每个vm实例之外

Vue.filterO方法接收两个参数:

第1个参数，是全局过滤器的"名字“

第2个参数，是全局过滤器的"处理函数”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>messagedd的值是: {
  { message | capitalize}}</p>
    </div>

    <div id="app2">
        <p>messagedd的值是: {
  { message | capitalize }}</p>
    </div>
    <script src="../lib/vue.js"></script>
    <script>
        //定义全局过滤器
        Vue.filter("capitalize",(str)=>{
                return str.charAt(0).toUpperCase()+str.slice(1)+"~~"
            })
        const vm = new Vue({
            el:"#app",
            data:{
                message:"hello"
            }
        })

        const vm2 = new Vue({
            el:"#app2",
            data:{
                message:"world"
            }
        })
    </script>
</body>
</html>

2.侦听器

所有的侦听器，都应该被定义到 watch节点下

侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即

newVal是“变化后的新值”，oldVal是“变化之前的旧值”

<body>
    <div id="app">
        <input type="text" v-model="username">
    </div>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                username:""
            },
            //所有的侦听器，都应该被定义到 watch节点下
            watch:{
                //侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即
                //newVal是“变化后的新值”，oldVal是“变化之前的旧值”
                username(newVal,oldVal) {
                    console.log(newVal,oldVal)
                }
            }
        })
    </script>
</body>