使用data
 <!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/jquery2.1.4.min.js"></script>

     <script src="./lib/Vue2.5.17.js"></script>

     <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">

 </head>

 <body>

     <div id="app">

         <mycom1></mycom1>

     </div>

     <template id="temp1">

         <div>

             <h1>呵呵嘿嘿嘻嘻</h1>

             <h2>{{ msg }}</h2>

         </div>

     </template>

     <script>

         // 组件可以有自己的data数据，组件的data和实例的data不一样

         //实例中的data可以为一个对象，在组件中的data必须是一个方法且返回一个对象

         //组件中的数据和实例中使用的方式一样

         Vue.component('mycom1',{

             template : '#temp1',

             data : function(){

                 return {

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

                 }

             }

         })

         var vm = new Vue({

             el: '#app',

             data: {},

             methods: {

             },

         })

     </script>

 </body>

 </html>

使用methods >> 为什么组件中的data必须要用function

 <!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/jquery2.1.4.min.js"></script>

     <script src="./lib/Vue2.5.17.js"></script>

     <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">

 </head>

 <body>

     <div id="app">

         <counter></counter>

         <hr>

         <counter></counter>

         <hr>

         <counter></counter>

         <hr>

     </div>

     <template id="tmp1">

         <div>

             <input type="button" value="点我+1" @click="increment">

             <h3>{{ count }}</h3>

         </div>

     </template>

     <script>

         // 在外部定义一个对象

         var dataObj = { count : 0}

         // 这是一个计数器的组件

         Vue.component('counter',{

             template : '#tmp1',

             data : function(){

                 // 直接return外部的dataObj,此时会有一个问题，3个计时器共用了这个对象,

                 //当点击第一个计时器，其他计时器也跟着增加了。

                 // return dataObj 这种方式是错误的

                 return {count : 0} //使用function来防止

             },

             methods: {

                 increment(){

                     this.count++

                 }

             },

         })

         var vm = new Vue({

             el: '#app',

             data: {},

             methods: {

             },

         })

     </script>

 </body>

 </html>

Vue系列之 => 组件中的data和methods的更多相关文章

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

    黑马vue---59-60.组件中的data和methods 一.总结 一句话总结: 1. 组件可以有自己的 data 数据 2. 组件的 data 和 实例的 data 有点不一样,实例中的 dat ...

  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. <笔记>Effective Objective-C 2.0 编写高质量iOS与

    1. 内存管理-引用计数 2. 非对象类型  int float double char 3.运行时--编译器(编译时)函数调用 4.@class  缩短编译时间,降低依赖,耦合 5.使用字面量而不是 ...

  2. LeetCode 412 Fizz Buzz 解题报告

    题目要求 Write a program that outputs the string representation of numbers from 1 to n. But for multiple ...

  3. word标题自动编号

    1.打开word文档中多级列表->定义新的多级列表 2.根据下图设置级别对应的标题,然后确定

  4. disruptor的并行用法

    实现EventFactory,在newInstance方法中返回,ringBuffer缓冲区中的对象实例:代码如下: public class DTaskFactory implements Even ...

  5. idea+maven+springboot+mybatis+springmvc+shiro

    springboot就是把创建项目简单化,省去了以往的配置mybatis.springmvc的繁琐过程. 搭建web应用三个主要功能,请求和响应,数据库交互,权限配置. 一.idea创建项目 (1) ...

  6. 继承数组的slice方法

    <script> var arr=[1,2,3,4,5]; console.log(Array.prototype.slice.call(arr,1)); </script> ...

  7. STLの应用

    QAQ因为绝望地发现好像这些应用都没有题目...所以就专门开了个随笔存题面qwq 谁的孙子最多 给定一棵树,其中1号节点是根节点,问哪一个节点的孙子节点最多,有多少个.(孙子节点,就是儿子节点的儿子节 ...

  8. 【PyQt5-Qt Designer】工具箱（QToolBox）用法讲解

    QToolBox() 实现抽屉效果 总体介绍: QToolBox类提供了一列选项卡的小部件(选项卡内含项目). 工具箱是一个小部件,它将选项卡一个一个的显示,当前项目显示在当前选项卡下方.每个选项卡在 ...

  9. sqlserver配置允许快照隔离

    ALTER DATABASE TustenaOS SET ALLOW_SNAPSHOT_ISOLATION ON

  10. 嵌入式Qt4.8.0支持ttf字库，并显示中文

    引言 最近在做QT项目发现中文没法显示,于是百度QT嵌入式显示中文,基本上提示的都是把ttf字库转换为QPF(QT专门支持二进制的),发现这个qpf本身制作就很麻烦,按照网上的做法实实在在来了一边,发 ...