第三章 Vue组件的属性和方法（上）

华而有识

已于 2022-12-22 14:41:04 修改

阅读量372

点赞数

CC 4.0 BY-SA版权

分类专栏： vue.js 3 前端开发实战文章标签： vue.js

于 2022-09-22 13:41:41 首次发布

本文链接：https://blog.youkuaiyun.com/FrontEndEngineer/article/details/126989617

vue.js 3 前端开发实战专栏收录该内容

8 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了Vue组件的属性和方法使用，包括通过组件实例获取属性和调用方法。接着深入讲解了计算属性的概念、如何选择使用计算属性或函数，以及计算属性的赋值方法。同时，提到了属性侦听器的使用场景，如搜索关键词后的推荐词显示。最后讨论了函数限流的必要性和如何手动实现及利用lodash库进行函数限流，以优化用户交互和性能。

3.1 属性与方法基础
使用组件实例直接获取属性与使用$data方法获取属性

const App = {
        data() {
            return {
               count:0,
            }
        }
}
let instance = Vue.createApp(App).mount("#Application") 
console.log(instance.count)            //0
console.log(instance.$data.count)      //0

使用组件实例调用方法

       const App = {
         data() {
                return {
                    count:0,
                }
          },
          methods: {
                add() {
                    this.count ++

了解本专栏