<!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. Dart 变量、常量和命名规则

    /* Dart 变量: dart是一个强大的脚本类语言,可以不预先定义变量类型 ,自动会类型推导 dart中定义变量可以通过var关键字可以通过类型来申明变量 如: var str='this is ...

  2. android studio 把 ionic 打包时修改应用名称、修改应用图标、修改启动画面，升级打包

    在项目中resources中替换成自己的图标和启动画面即可 在config.xml 修改包名 打正式包和升级打包同原生的类似,在Androidmanifest.xml修改版本号和版本名

  3. python的argparse模块parse_known_args()方法的使用

    parse_known_args()方法的用处就是有些时候,你的选项配置可能不会在一个函数或包中调用完成 在很多使用,我们可能会需要根据一些输入的选项,比如在深度学习中,我们可能会根据传入的模型设置- ...

  4. Linux记录-mysql参数优化

    1.参数优化show variables like ''/etc/my.cnf[mysqld]Max_connections =1024 #请求的最大连接数back_log =1024 #mysql能 ...

  5. iOS popToViewController具体用法

    [self.navigationController popToViewController:[self.navigationController.viewControllers objectAtIn ...

  6. 一个80后妈妈的邪淫忏悔(转自学佛网：http://www.xuefo.net/nr/article55/551761.html)

    我是一个80后独生女,2012年因为孩子小产后,痛苦难当,悲伤中想起可为孩子超度,因此开始了与佛法的缘分.断断续续几年的学习,才真的知道了邪淫的可怕 我从小面容姣好,气质超群,一直被父母,老师宠爱.想 ...

  7. 【物联网】UI设计

    https://designshidai.com/7337.html https://designshidai.com/24908.html http://www.qianqian-ye.com/sm ...

  8. ubuntu 18.04使用sysbench测试MySQL性能

    首先下载安装sysbench: sudo apt-get install sysbench -y 查看一下sysbench版本是多少: zifeiy@zifeiy-S1-Series:~$ sysbe ...

  9. Beta冲刺（3/4）

    队名:秃头小队 组长博客 作业博客 组长徐俊杰 过去两天完成的任务:学习了很多东西 Github签入记录 接下来的计划:继续学习 还剩下哪些任务:后端部分 燃尽图 遇到的困难:自己太菜了 收获和疑问: ...

  10. docker安装MongoDB创建用户，并用工具Robo连接简单CRUD

    搜索mongo docker search mongo 拉取mongo[这里默认为latest] docker pull mongo 查看本地镜像 启动容器[就是安装,-v后面的参数表示把数据文件挂载 ...