码迷，mamicode.com
首页 > 其他好文 > 详细

Vue之VM对象提供的属性方法

时间：2020-06-17 18:20:24      阅读：45      评论：0      收藏：0      [点我收藏+]

标签：sub   阻止事件冒泡   需要   oct   innerhtml   格式化   model   常用   show   

Vue对象提供的属性功能

1、过滤器

过滤器，就是vue允许开发者自定义的文本格式化函数，可以使用在两个地方：输出内容和操作数据中。

定义过滤器的方式有两种。

1.1、使用Vue.filter()进行全局定义

格式：

Vue.filter("RMB1", function(v){
      //就是来格式化(处理)v这个数据的
      if(v==0){
            return v
      }

      return v+"元"
})

使用全局过滤器方法一：在vue对象外部声明

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

<div id="app">
    <p>{{price}}</p>
    <p>{{price|format}}</p>      
</div>
<script>
    Vue.filter("format", function(money){
      //就是来格式化(处理)money这个数据的
      return money.toFixed(2)+"元";
    });
    var vm = new Vue({
        el:"#app",  // vm的模板对象
        data:{      // vm的数据
            price: 8.156333,
        },
        methods:{}, // vm的方法
    });
</script>

</body>
</html>

使用全局过滤器方法二：也可以用外部js文件导入方式，解耦合使用全局过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <!--导入全局过滤器-->
    <script src="fileter.js"></script>
</head>
<body>

<div id="app">
    <p>{{price}}</p>
    <p>{{price|format}}</p>
</div>
<script>
    var vm = new Vue({
        el:"#app",  // vm的模板对象
        data:{      // vm的数据
            price: 8.156333,
        },
        methods:{}, // vm的方法
    });
</script>

</body>
</html>

filter.js

// 全局过滤器
    Vue.filter("format",function(money){
        return money.toFixed(2)+"元"; // js中提供了一个toFixed方法可以保留2位小鼠
    });

1.2、局部过滤器：在vue对象内通过filters属性来定义

格式：（局部过滤器只在当前vm对象中生效）

var vm = new Vue({
  el:"#app",
  data:{},
  filters:{
    RMB2:function(value){
      if(value==‘‘){
        return;
      }else{
          return ‘¥ ‘+value;
      }
    }
    }
});

局部过滤器使用示例：

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

<div id="app">
    <p>{{price}}</p>
    <p>{{price|format}}</p>
</div>
<script>
    var vm = new Vue({
        el:"#app",  // vm的模板对象

        // 局部过滤器只能在当前vm对象中使用
        filters:{     
            format:function (money) {
                return "￥" + money.toFixed(2);
            }
        },
        data:{      // vm的数据
            price: 8.156333,
        },
        methods:{}, // vm的方法
    });
</script>

</body>
</html>

补充：局部过滤器优先级大于全局过滤器

2、计算和侦听属性

2.1、计算属性(computed)

我们之前学习过字符串反转，如果直接把反转的代码写在元素中，则会使得其他同事在开发时时不易发现数据被调整了，所以vue提供了一个计算属性(computed)，可以让我们把调整data数据的代码存在在该属性中。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="num1">+
    <input type="text" v-model="num2">=<span>{{total}}</span>
</div>
<script>
    var vm = new Vue({
        el:"#app",  // vm的模板对象
        data:{      // vm的数据
            num1: 0,
            num2: 0,
        },
        methods:{}, // vm的方法
        computed:{   //计算属性：相当于创建一个新的变量保存数据计算的结果，里面的函数都必须有返回值
            total: function(){       // total是计算属性中的方法名，是上面标签内使用的文本
                // parseFloat 把数据转换成float类型
                // parseInt 把数据转换成int类型
                var ret = parseFloat(this.num1) + parseFloat(this.num2);
                // var ret = Number(this.num1) + Number(this.num2);     // 转换成数字Number
                return ret
            }
        }
    });
</script>
</body>
</html>

2.2、监听属性（watch）

侦听属性，可以帮助我们侦听data某个数据的变化，从而做相应的自定义操作。

侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数，当侦听的data数据发生变化时，会自定执行的对应函数，这个函数在被调用时，vue会传入两个形参，第一个是变化前的数据值，第二个是变化后的数据值。

 示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="app">
    <button @click="num++">赞({{num}})</button>
</div>
<script>
    var vm = new Vue({
        el:"#app",  // vm的模板对象
        data:{      // vm的数据
            num: 0,
        },
        methods:{}, // vm的方法
        watch:{   // 监听属性，监听指定变量的值是否发生变化，当发生变化时调用对应的方法
            num:function(newval,oldval){     // 两个参数，newval新的值，oldval旧的值
                //num发生变化的时候，要执行的代码
                // console.log(this.num,"修改后num="+newval,"修改前num="+oldval);
                if(this.num>=5){
                        this.num=5;
                    }
                    console.log(this.num,"修改后num="+newval,"修改前num="+oldval);
                }
            }
    });
</script>
</body>
</html>

3、vue对象的生命周期

每个Vue对象在创建时都要经过一系列的初始化过程。在这个过程中Vue.js会自动运行一些叫做生命周期的的钩子函数，我们可以使用这些函数，在对象创建的不同阶段加上我们需要的代码，实现特定的功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部过滤器</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <p @click="num++">{{num}}</p>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                num: 10,
            },
            beforeCreate(){
                console.log("----vm对象初始化完成之前自动执行的代码----");
                console.log(this.$el);
                console.log(this.$data);
            },
            created(){ // 这里主要实现到服务端获取页面数据[ajax]
                console.log("----vm对象初始化完成以后自动执行的代码----");
                console.log(this.$el); // 没有查找到vm需要控制的元素
                console.log(this.$data); // 已经把data模型中的数据注入到vm对象里面作为属性了
            },
            beforeMount(){
                console.log("----vm数据渲染到html模板之前执行的代码----");
                console.log(this.$el); // 没有查找到vm需要控制的元素，vm对象尚未把data数据显示到页面中
            },
            /*
            <div id="app">
                <p @click="num++">{{num}}</p>
            </div>
            */
            mounted(){ // 修改页面的内容[页面特效]
                console.log("----vm数据渲染到html模板之后执行的代码----");
                console.log(this.$el); // 查找到vm需要控制的元素，vm对象已经把data数据显示到页面中
            },
            /*
            <div id="app"><p>10</p></div>
            */
            // beforeUpdate(){
            //     console.log("----数据更新了，渲染之前执行的代码------");
            //     console.log(this.num);
            //     console.log(this.$el.innerHTML);
            // },
            // updated(){
            //     console.log("----数据更新了，渲染之后执行的代码------");
            //     console.log(this.num);
            //     console.log(this.$el.innerHTML);
            // },
            // 销毁vm对象 vm.$destroy()
            beforeDestroy(){
                console.log("--- 当vm对象被销毁之前，会自动执行这里的代码 ---");
                console.log( this );
            },
            destroyed(){
                console.log("--- 当vm对象被销毁以后，会自动执行这里的代码 ---");
            }
        });
    </script>
</body>
</html>

总结：常用created(用于初始化)和mounted(用于修改页面)

在vue使用的过程中，如果要初始化操作，把初始化操作的代码放在 mounted 中执行。
mounted阶段就是在vm对象已经把data数据实现到页面以后。一般页面初始化使用。例如，用户访问页面加载成功以后，就要执行的ajax请求。

另一个就是created，这个阶段就是在 vue对象创建以后，把ajax请求后端数据的代码放进 created

补充：在浏览器保存信息的方法-localStorage

技术图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部过滤器</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <p @click="num++">{{num}}</p>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                num: 10,
            },

            created(){ // 这里主要实现到服务端获取页面数据[ajax]
                console.log("----vm对象初始化完成以后自动执行的代码----");
                // console.log(this.$el); // 没有查找到vm需要控制的元素
                // console.log(this.$data); // 已经把data模型中的数据注入到vm对象里面作为属性了
                this.num = localStorage.num;
            },

            // 销毁vm对象 vm.$destroy()
            beforeDestroy(){
                console.log("--- 当vm对象被销毁之前，会自动执行这里的代码 ---");
                console.log( this );
                localStorage.num = this.num;     // localStorage将数据存储到浏览器上的本地仓库
            },

        });
    </script>
</body>
</html>
localStorage-保存信息到浏览器本地仓库

4、阻止事件冒泡和刷新页面

事件冒泡：指代js中子元素的事件触发以后，会导致父级元素的同类事件一并被触发到。

事件冒泡有好处，也有坏处。

好处：如果能正确利用这种现象，可以实现事件委托，提升特效的性能

坏处：如果没有正确使用，则会导致不必要的bug出现。

 

使用.stop阻止事件冒泡和.prevent阻止刷新页面

回顾js中阻止事件冒泡：

技术图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    <style>
    .box1{
        width: 400px;
        height: 300px;
        background-color: orange;
        padding-top: 100px;
    }
    .box2{
        width: 200px;
        height: 200px;
        background-color: #000;
        margin: auto;
    }
    </style>
</head>
<body onclick="alert(‘点击了body‘)">
    <div class="box1">
        <div class="box2"></div>
    </div>
    <script>
    var box1 = document.getElementsByClassName("box1")[0];
    var box2 = document.getElementsByClassName("box2")[0];
    box1.onclick = function(){
        alert("点击了box1");
    }
    box2.onclick = function(event){
        alert("点击了box2");
        console.log(event);
        // 原生js阻止事件冒泡
        event.stopPropagation();
    }
    </script>
</body>
</html>
js中阻止事件冒泡stopPropagation

js利用事件冒泡现象实现事件委托

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    <style>

    </style>
</head>
<body>
    <ul id="app">
        <li>1111111111111111</li>
        <li>2222222222222222</li>
        <li>3333333333333333</li>
        <li>4444444444444444</li>
        <li>5555555555555555</li>
    </ul>
    <script>
    // 批量元素绑定事件
    //  var list = document.getElementById("app").children;
    //  for(var i in list){
    //      list[i].onclick = function(){
    //          console.log(this.innerHTML);
    //      }
    //  }

     // 可以通过事件委托来提升性能
    var ul = document.getElementById("app");
     ul.onclick = function(event){
         // event:事件最初的触发元素
         var self = event.target;
         console.log(self.innerHTML)
     }
    </script>
</body>
</html>

vue中阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    <style>
    .box1{
        width: 400px;
        height: 300px;
        background-color: orange;
        padding-top: 100px;
    }
    .box2{
        width: 200px;
        height: 200px;
        background-color: #000;
        margin: auto;
    }
    </style>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app" class="box1" @click="show(‘点击了box1‘)">
        <div class="box2" @click.stop="show(‘点击了box2‘)"></div>
    </div>
    <script>
    // vue本质上就是js，所以vue中的事件操作也会存在事件冒泡现象
    // 可以使用辅助指令 @click.stop来阻止事件冒泡
    var vm = new Vue({
        el:"#app",
        methods:{
            show(message){
                alert(message);
            }
        }
    })
    </script>
</body>
</html>

vue阻止页面刷新(表单的提交按钮submit也可以使用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 辅助指令可以多个链式调用 -->
        <a href="http://www.baidu.com" @click.prevent="show(‘点击了a标签‘)">百度</a>
    </div>
    <script>
    // vue本质上就是js，所以vue中的事件操作也会存在事件冒泡现象
    // 可以使用辅助指令 @click.stop来阻止事件冒泡
    var vm = new Vue({
        el:"#app",
        methods:{
            show(message){
                alert(message);
            }
        }
    })
    </script>
</body>
</html>

阻止事件冒泡和阻止页面刷新综合：@click.stop.prevent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app" class="box1" @click="show(‘点击了box1‘)">
        <!-- 辅助指令可以多个链式调用 -->
        <a href="http://www.baidu.com" @click.stop.prevent="show(‘点击了a标签‘)">百度</a>
    </div>
    <script>
    // vue本质上就是js，所以vue中的事件操作也会存在事件冒泡现象
    // 可以使用辅助指令 @click.stop来阻止事件冒泡
    var vm = new Vue({
        el:"#app",
        methods:{
            show(message){
                alert(message);
            }
        }
    })
    </script>
</body>
</html>

5、综合案例-todolist

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <style type="text/css">
        .list_con{
            width:600px;
            margin:50px auto 0;
        }
        .inputtxt{
            width:550px;
            height:30px;
            border:1px solid #ccc;
            padding:0px;
            text-indent:10px;
        }
        .inputbtn{
            width:40px;
            height:32px;
            padding:0px;
            border:1px solid #ccc;
        }
        .list{
            margin:0;
            padding:0;
            list-style:none;
            margin-top:20px;
        }
        .list li{
            height:40px;
            line-height:40px;
            border-bottom:1px solid #ccc;
        }

        .list li span{
            float:left;
        }

        .list li a{
            float:right;
            text-decoration:none;
            margin:0 10px;
        }
    </style>
    <script src="vue.min.js"></script>
</head>
<body>
    <div class="list_con" id="app">
        <h2>To do list</h2>
        <input type="text" name="" id="txt1" class="inputtxt" v-model="content">
        <input type="button" name="" value="增加" id="btn1" class="inputbtn" @click="add">

        <ul id="list" class="list">
            <!-- javascript:; # 阻止a标签跳转 -->
            <li v-for="value,index in todolist">
                <span>{{value}}</span>
                <a href="javascript:;" class="up" @click="up(index)"> ↑ </a>
                <a href="javascript:;" class="down" @click="down(index)"> ↓ </a>
                <a href="javascript:;" class="del" @click="del(index)">删除</a>
            </li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                content: "",
                todolist:["学习html","学习css","学习javascript"]
            },
            methods: {
                // 数据添加
                add(){
                    this.todolist.push(this.content)
                    this.content = ""
                },
                // 数据删除
                del(index){
                    this.todolist.splice(index,1)
                },
                // 移动数据
                up(index){
                    let current = this.todolist.splice(index,1)[0]      // 拿到要移动的数据
                    this.todolist.splice(index-1,0,current)     // 插入数据
                },
                down(index){
                    let current = this.todolist.splice(index,1)[0]      // 拿到要移动的数据
                    this.todolist.splice(index+1,0,current)     // 插入数据
                }
            }
        })
    </script>
</body>
</html>

 

Vue之VM对象提供的属性方法

标签：sub   阻止事件冒泡   需要   oct   innerhtml   格式化   model   常用   show   

原文地址：https://www.cnblogs.com/baicai37/p/13152587.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！