<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

</head>

<body>

    <div id="app">

        <mycom></mycom>

        <counter></counter>

    </div>

    <template id="temp">

        <div>

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

            {{count}}

        </div>

    </template>

</body>

<script src="node_modules\vue\dist\vue.js"></script>

<script>

    //组件中的data和实例中的不一样，实例中的data是一个对象，而组件中的data则是一个方法并且返回一个对象

    Vue.component("mycom", {

        template: "<h3>{{msg}}，这是一个组件</h3>", //引用时与实例一致

        data: function () {

            return { //返回对象是为了区分各个组件中的数据，因为不同组件返回的对象的地址都不一致所以不会产生影响

                msg: "hello" //组件中定义的数据

            }

        }

    })

    //添加一个增值函数

    Vue.component("counter", {

                template:"#temp",

                data: function () {

                    return {

                        count: 0

                    }

                },

                methods: {

                    increment() {

                        this.count++

                    }

                }

            });

                let vm = new Vue({

                el: "#app",

                data: {

                }

            });

</script>

</html>

　　效果图

vue组件中的data与methods的更多相关文章

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

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

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

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

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

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

  4. 15.Vue组件中的data

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

  5. Vue 组件中的data数据

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

  6. Vue组件中的data属性

    Vue中的data属性专门用来以对象方式存放数据,它有两种用法. var vm=new Vue({ data:{a:1,b:2,}, }) var vm=new Vue({ data(){return ...

  7. 为什么vue组件中的data不是一个对象而是一个函数

    如果两个实例引用同一个对象,当其中一个实例的属性发生改变时,另一个实例属性也随之改变,只有当两个实例拥有自己的作用域时,才不会相互干扰. 这是因为JavaScript的特性所导致,在component ...

  8. Vue组件中的Data为什么是函数。

    简单点说,组件是要复用的,在很多地方都会调用.   如果data不是函数,而是属性,就又可能会发生多个地方的相同组件操作同一个Data属性,导致数据混乱. 而如果是函数,因为组件data函数的返回值是 ...

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

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

随机推荐

  1. typescript装饰器定义 类装饰器 属性装饰器 装饰器工厂

    /* 装饰器:装饰器是一种特殊类型的声明,它能够被附加到类声明,方法,属性或参数上,可以修改类的行为. 通俗的讲装饰器就是一个方法,可以注入到类.方法.属性参数上来扩展类.属性.方法.参数的功能. 常 ...

  2. Web Service 和 WCF的比较

    Web Service 和WCF的比较 Web Service 的工作原理 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intra ...

  3. Spring MVC 数据转换和格式化

    HttpMessageConverter和JSON消息转换器 HttpMessageConverter是定义从HTTP接受请求信息和应答给用户的 HttpMessageConverter是一个比较广的 ...

  4. springboot整合mybatis的时候报错Caused by: java.lang.IllegalArgumentException: Property 'sqlSessionFactory' or 'sqlSessionTemplate' are required

    今天闲来无事,学习springboot整合mybatis,在bilibili看视频学的,视频中在dao层的interface上面加上org.apache.ibatis.annotations.Mapp ...

  5. [lodop]css样式after、before添加content内容之前和之后

    css样式可以在内容之前和之后加内容.格式是:css类名:before{content:在之前加的内容}css类名:after{content:在之后加的内容}这种写法在LODOP里直接测试是不行的, ...

  6. npm 安装 -D 和-S的区别

    -D 是在开发环境中协助开发需要使用的-S是生产环境打包时需要的,在package.json中 -D在devDependencies对象中,-S在dependencies对象中

  7. Docker 安装运行MySQL

    1.镜像主页 https://hub.docker.com/_/mysql 2.拉取5.7版本 docker pull mysql:5.7 3.或者拉取最新8.x版本 docker pull mysq ...

  8. 最新 苏州朗动java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.苏州朗动等10家互联网公司的校招Offer,因为某些自身原因最终选择了苏州朗动.6.7月主要是做系统复习.项目复盘.Leet ...

  9. 批处理快速合并多分Excel文件并将指定列的数据去重复

    1.批处理快速合并多个excel文件方法: 新建一个.txt文本文件,就命名为合并.txt吧. 而后开启文件,复制以下代码到文件中: @echo off E: cd xls dir copy *.cs ...

  10. jvm误区--动态对象年龄判定

    原文链接:https://blog.csdn.net/u014493323/article/details/82921740 虚拟机并不是永远地要求对象的年龄必须达到了MaxTenuringThres ...