Vue入门到放弃20（Vue的data和methods属性）

最新推荐文章于 2023-06-21 09:30:51 发布

开猿节流

最新推荐文章于 2023-06-21 09:30:51 发布

阅读量260

点赞数

分类专栏： vue Vue入门到放弃

本文为博主原创文章，未经博主允许不得转载。交流联系QQ：634487911

本文链接：https://blog.csdn.net/qq_38191191/article/details/103476115

版权

本文介绍了Vue组件中data属性必须是一个返回对象的方法，强调了这一点与Vue实例的差异。同时，阐述了methods属性的使用，展示了如何在组件中定义和调用方法。文章通过实例说明组件的复用性和与Vue实例的区别。

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

1. 组件可以有自己的 data 数据
2. 组件的 data 和实例的 data 有点不一样,实例中的 data 可以为一个对象,但是组件中的 data 必须是一个方法
3. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;
4. 组件中的data 数据,使用方式,和实例中的 data 使用方式完全一样!!!

<body>
  <div id="app">
    <mycom1></mycom1>
  </div>
  <script>
    // 1. 组件可以有自己的 data 数据
    // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是 组件中的 data 必须是一个方法
    // 3. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;
    // 4. 组件中 的data 数据,使用方式,和实例中的 data 使用方式完全一样!!!
    Vue.component('mycom1', {
      template: '<h1>这是全局组件 --- {
  {msg}}</h1>',
      data: function () {
        return {
          msg: '这是组件的中data定义的数据'
        }
      }
    })
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {}
    });
  </script>
</body>

methods属性的使用

在Vue组件中我们也可以通过methods属性来

最低0.47元/天解锁文章

开猿节流

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门到放弃20（Vue的data和methods属性）

1. 组件可以有自己的 data 数据2. 组件的 data 和实例的 data 有点不一样,实例中的 data 可以为一个对象,但是组件中的 data 必须是一个方法3. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;4. 组件中的data 数据,使用方式,和实例中的 data 使用方式完全一样!!!<body> <di...
复制链接

扫一扫