2021-08-16 vue笔记-基础(三) 计算属性和监听属性,methods,过滤器,自定义指令,生命周期

前端OnTheRun

已于 2022-10-15 11:54:31 修改

阅读量164

点赞数

分类专栏： vue学习笔记文章标签： vue 生命周期 methods computed watch

于 2021-08-16 19:23:47 首次发布

本文链接：https://blog.csdn.net/rowlet/article/details/119732826

版权

这篇Vue笔记详细探讨了计算属性`computed`、监听属性`watch`、方法`methods`的使用，以及过滤器和自定义指令的创建。文章通过实例展示了它们的用法，并介绍了`computed`与`methods`的区别，以及如何实现对象的深度监听。同时，讲解了Vue组件的生命周期，帮助理解不同阶段的回调函数。

摘要由CSDN通过智能技术生成

文章目录

1.computed的用法

例子:

<div id="app">
    {
  {msg}}
    {
  {num}}
<!--    写在methods里:带括号()-->
    {
  {fn()}}
<!--    写在computed里:不带括号-->
    {
  {computedNum}}
</div>
<script>
    new Vue({
     
        el:"#app",
        data:{
     
            msg:"双击",
            num:6
        },
        methods:{
     
            fn(){
     
                return this.num
            }
        },
        computed:{
     
            computedNum(){
     
                return this.num;
            }
        }
    });
</script>

结果:

双击 6 6 6

2.computed和methods的用法与格式的异同

写在methods里:带括号()
写在computed里:不带括号
(计算属性可以当data用)

代码:

<div id="app">
    {
  {msg}}
    {
  {computedMsg}}
    <button type="button" @click="fn">点击改变</button>
</div>
<script>
    new Vue({
     
        el:"#app",
        data:{
     
            msg:"hello",
        },
        methods:{
     
            fn(){
     
                this.msg="world"
            }
        },
        computed:{
     
            computedMsg(){
     
                return this.msg.split('').reverse().join('');
            }
        }
    });
</</