Vue的基本特性

最新推荐文章于 2024-06-17 10:44:10 发布

遥岑.

最新推荐文章于 2024-06-17 10:44:10 发布

阅读量181

点赞数

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

本文链接：https://blog.csdn.net/m0_52942098/article/details/121941061

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中的基本特性，包括data属性用于数据绑定，computed用于计算属性，methods用于定义方法。data中的数据会被自动监听，计算属性在依赖变更时自动更新，methods则用于响应DOM事件。示例展示了如何使用这三个特性进行实时数据更新和复杂数据处理。

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

Vue的基本特性

data

data：在Vue实例中初始化的data中的所有数据会自动进行监听绑定，然后可以使用两个大括号来绑定data中的数据。

<div id="app">
    <h2>{{message}}</h2>
    <input type="text" v-model="message">
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue'
        }
     });
</script>

后面只要通过vm.message=”XXX”，即可进行视图的实时更新，使用起来很简单。
注意data中的数据都是浅拷贝，如果修改原来的对象也会改变data，从而触发更新事件。

computed

computed：计算属性，在进行数据绑定的时候，对数据要进行一定的处理才能展示到HTML页面上。虽然Vue提供了非常好的表达式绑定方法，但是只能应对低强度的需求。
Vue提供的计算属性(computed)允许开发者编写一些方法，协助进行绑定数据的操作，这些方法可以跟data中的属性一样使用，注意用的时候不要加()。

<body>
    <div id="app">
        <table border="1" style="text-align: center;">
            <tr>
                <td width="100">生日</td>
                <td width="200">{{getBirthday}}</td>
            </tr>
            <tr>
                <td width="100">年龄</td>
                <td width="200">{{age}}</td>
            </tr>
            <tr>
                <td width="100">地址</td>
                <td width="200">{{address}}</td>
            </tr>
        </table>
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                birthday:1014228510514,
                age:19,
                address:'扬州'
            },
            //对数据做一些复杂的处理
            computed: {
                getBirthday:function() {
                    var m = new Date(this.birthday)
                    var str = m.getFullYear() + '年' +(m.getMonth()+1) + '月' + m.getDate() + '日'
                    return str
                }
            }
        })
    </script>
</body>

每一个计算属性都包含一个getter 和一个setter ，上面的示例是计算属性的默认用法，利用了getter 来读取。
在需要时，也可以提供一个setter 函数，当手动修改计算属性的值就像修改一个普通数据那样时，就会触发setter 函数，执行一些自定义的操作。

计算属性是基于它们的依赖进行缓存的，计算属性只有在它的相关依赖发生改变时才会重新求值
属性变化才执行getter函数，否则执行缓存默认的true指令打开缓存
如果频繁使用计算属性，而计算属性方法中有大量的耗时操作，例如在getter中循环一个大的数组，会带来一些性能问题。计算属性可以用来解决该问题

<body>
    <div id="app">
        <p>水果</p>
        <span>{{ pear }}</span>
        &nbsp;&nbsp;&nbsp;
        <span>{{ apple }}</span>
        &nbsp;&nbsp;&nbsp;
        <span>{{ banana }}</span>
        &nbsp;&nbsp;&nbsp;
        <span>{{ number }}</span>
        &nbsp;&nbsp;&nbsp;
        <p style="padding: 12px 0;">{{ result }}</p>
        <button @click="btn">输出结果</button>
    </div>

    <script>
        new Vue({
            el:'#app',
            data:{
                pear: '梨子',
                apple: '苹果',
                banana:'香蕉',
                number: '水果'
            },
            computed: {
                result: {
                    cache:true,
                    //默认调用get方法
                    get: function() {
                        return 'abcd'+this.pear+this.apple+this.banana+this.number
                    },
                    set:function(newVal) {
                        this.pear = newVal.substr(2,2)
                        this.apple = newVal.substr(2,2)
                        this.banana = newVal.substr(4)
                        this.number = newVal.substr(4)
                    }
                }
            },
            methods: {
                btn() {
                    //向set传值
                    this.result = '123456'
                }
            }
        })
    </script>
</body>

methods

methods：通过methods属性定义方法，并使用v-on指令来监听DOM事件。

<body>
    <div id="app">
        <p>原字符串:{{message}}</p>
        <p>反转字符串：{{reverseMessage()}}</p>
    </div>

    <script>
        new Vue({
            el:'#app',
            data: {
                message: '你是年少的欢喜'
            },
            methods: {
                reverseMessage:function() {
                    return this.message.split('').reverse().join('')
                }
            }
        })
    </script>
</body>