<!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. 十一、postman接口测试（安装nodejs和npm）

    cmder安装:https://cmder.net/ node安装:https://nodejs.org/zh-cn/ 打开cmd命令,在命令提示窗输入 npm install -g cnpm --r ...

  2. stl中map的四种插入方法总结

    stl中map的四种插入方法总结方法一:pair例:map<int, string> mp;mp.insert(pair<int,string>(1,"aaaaa&q ...

  3. ROS tf广播编写

    博客参考:https://www.ncnynl.com/archives/201702/1310.html ROS与C++入门教程-tf-编写tf broadcaster(广播) 说明: 介绍如何广播 ...

  4. 安装好oracle后如何使用PLSQL连接【我】

    简单的说: 一.如果你本地安装的是32位的Oracle,可以直接在PLSQl中配置oracle安装路径下的相关目录文件,直接启动PLSQL 二.如果你本地安装的是64位的Oracle或者oracle服 ...

  5. ERROR 1130:mysql 1130连接错误的有效解决方法

    今天在用sqlyog连接非本地的Mysql服务器的数据库,居然无法连接很奇怪,报1130错误, ERROR 1130: Host 192.168.3.100 is not allowed to con ...

  6. 【VS开发】最小化到托盘 shell_notifyicon和NOTIFYICONDATA

    shell_notifyicon和NOTIFYICONDATA Shell_NotifyIcon函数,向任务栏的状态栏发送一个消息 函数原型 BOOL Shell_NotifIcon( DWORD d ...

  7. alpine docker exec: "/bin/bash": stat /bin/bash: no such file or directory 解决方案

    sudo docker exec -it 1df4f9732e06 sh

  8. websockify文档

    一.官网地址 地址:https://github.com/novnc/websockify 二.开启代理 1.单台服务器 python /usr/local/websockify/websockify ...

  9. JVM(一) 内存结构

    JVM内存结构 方法区(JDK8以上叫元空间)和堆为线程共享区,虚拟机栈.本地方法栈及程序计数器为线程独占区,  还有一个没有在下图中体现的叫做直接内存(Direct Memory),不受JVM GC ...

  10. LeetCode 896. 单调数列(Monotonic Array)

    896. 单调数列 896. Monotonic Array 题目描述 如果数组是单调递增或单调递减的,那么它是单调的. 如果对于所有 i<=j,A[i]<=A[j],那么数组 A 是单调 ...