黑马vue---59-60、组件中的data和methods

一、总结

一句话总结：

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

1、组件数据使用实例？

template: '<h1>这是全局组件 --- {{msg}}</h1>'
    Vue.component('mycom1', {

      template: '<h1>这是全局组件 --- {{msg}}</h1>',

      data: function () {

        return {

          msg: '这是组件的中data定义的数据'

        }

      }

    })

二、组件中的data和methods

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>Document</title>

   <script src="./lib/vue-2.4.0.js"></script>

 </head>

 <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: {},

       methods: {}

     });

   </script>

 </body>

 </html>
 

黑马vue---59-60、组件中的data和methods的更多相关文章

  1. Vue系列之 => 组件中的data和methods

    使用data <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  2. vue组件中的data与methods

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> ...

  3. vue 父组件使用子组件中的data或methods

    1.调用子组件的时候 定义一个ref 2.在父组件里面通过 this.$refs.verify.属性 this.$refs.verify.方法

  4. 深入理解--VUE组件中数据的存放以及为什么组件中的data必需是函数

    1.组件中数据的存放 ***(重点)组件是一个单独模块的封装:这个模块有自己的HTML模板,也有data属性. 只是这个data属性必需是一个函数,而这个函数返回一个对象,这个对象里面存放着组件的数据 ...

  5. 15.Vue组件中的data

    1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...

  6. Vue 组件中的data数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. vue组件中的data为什么是函数？

    一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...

  8. 第六章 组件 56 组件-组件中的data

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. vue-为什么子组件中的data选项必须是函数？

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 巧用flex（一）

    在开发中我们经常遇到一个页面头部内容固定顶部,中间内容可滚动的需求,一般的逻辑就是把头部内容通过position以及z-index固定位置,提高层级,然后中间内容设置距离顶部一定距离,这样的效果是侧边 ...

  2. FastDFS高可用集群架构配置搭建及使用

    一,概述FastDFS 是一个开源的高性能分布式文件系统(DFS). 它的主要功能包括:文件存储,文件同步和文件访问,以及高容量和负载平衡.FastDFS 系统有三个角色:跟踪服务器(Tracker ...

  3. 谷歌浏览器chrome安装vue-devtools 插件

    1.打开https://github.com/vuejs/vue-devtools直接下载该项目,或者cmd方式直接输入:git Clone https://github.com/vuejs/vue- ...

  4. leetcode-55. Jump Game · Array

    题面 这个题面挺简单的,不难理解.给定非负数组,每一个元素都可以看作是一个格子.其中每一个元素值都代表当前可跳跃的格子数,判断是否可以到达最后的格子. 样例 Input: [2,3,1,1,4] Ou ...

  5. 【Distributed】分布式锁

    一.概述 1.1 分布式解决的核心思路 1.2 分布式锁一般有三种实现方式 二.基于Redis的分布式锁 2.1 使用常用命令 2.2 实现思路 2.3 核心代码 Maven依赖信息 LockRedi ...

  6. 常用git指令记录

    Generating an SSH key Checking for existing SSH keys Generating a new SSH key and adding it to the s ...

  7. JDK源码那些事儿之我眼中的HashMap

    源码部分从HashMap说起是因为笔者看了很多遍这个类的源码部分,同时感觉网上很多都是粗略的介绍,有些可能还不正确,最后只能自己看源码来验证理解,写下这篇文章一方面是为了促使自己能深入,另一方面也是给 ...

  8. 基于JQ的记忆翻牌游戏

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  9. let和const的区别

    es6语法中新增了 let和const 不再只是有var 1. let的用法 let是用来声明变量的,它和var的用法差不多,但是let所声明的变量只在它的代码块内有效,像for循环里用let会更好点 ...

  10. winfrom 窗体首次加载

    #region Override Functions /// <summary> /// OnLoad /// </summary> /// <param name=&q ...