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

</head>

<body>

    <div id="app">

        <connter></connter>

        <hr>

        <connter></connter>

        <hr>

        <connter></connter>

    </div>

    <template id="tmp">

        <div>

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

            <!-- 组件中的data的使用方法与实例中的完全一样，但是组件的data必须是一个Function，并且返回值

                必须是内部中的一个对象,否则如果多次使用一个同一个组件，那么组件中的事件就会互相干扰 -->

            <h1>{{count}}</h1>

        </div>

    </template>

</body>

<script>

    var dt = {

        count: 0

    }

    Vue.component('connter', {

        template: '#tmp',

        data() {

            //return dt

            return {

                count: 0

            }

        },

        methods: {

            TT() {

                this.count++

            }

        }

    })

    var vm = new Vue({

        el: '#app',

        data: {

        },

        methods: {

        }

    })

</script>

</html>

Vue.js 组件中data的使用的更多相关文章

  1. 039——VUE中组件之子组件中data使用实例与text-xtemplate的使用方法

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

  2. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  3. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  4. 浅尝Vue.js组件(一)

    本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...

  5. Vue.js 组件编码规范

    本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...

  6. Vue.js 组件的三个 API：prop、event、slot

    组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...

  7. Vue.js组件的重要选项

    Vue.js组件的重要选项 实例化Vue对象一些很重要的选项,Vue的所有数据都是放在data里面的,Vue的参数是个对象,对象里面的字段叫做data,data里面也是对象,data也可以写作是thi ...

  8. 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  9. 如何Vue-cli开始使用在Vue.js项目中启动TDD（测试驱动开发）

    通常,使用测试驱动开发(TDD)最困难的部分是开始.你必须下载带有奇怪依赖项的软件包,让测试套件与你的构建系统协同工作,然后你必须弄清楚如何编写一个测试!难怪这么多的开发者在你提起它的时候就开始跑开了 ...

随机推荐

  1. Django模型层1

    Django模板系统 官方文档 常用语法 只需要记两种特殊符号: {{  }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量 在Django的模板语言中按此语法使用:{{ 变量名 ...

  2. PAT Basic 1014 福尔摩斯的约会 (20 分) Advanced 1061 Dating (20 分)

    大侦探福尔摩斯接到一张奇怪的字条:我们约会吧! 3485djDkxh4hhGE 2984akDfkkkkggEdsb s&hgsfdk d&Hyscvnm.大侦探很快就明白了,字条上奇 ...

  3. codeforces 299E Cube Problem

    Cube Problem Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Submit   Stat ...

  4. 写了一个简单可用的IOC

    根据<架构探险从零开始写javaweb框架>内容写的一个简单的 IOC 学习记录    只说明了主要的类,从上到下执行的流程,需要分清主次,无法每个类都说明,只是把整个主线流程说清楚,避免 ...

  5. linux tomcat 中文文件上传乱码

    找到tomcat文件夹下的conf/server.xml,在connector节点下新增URIEncoding="utf-8"参数 <Connector connection ...

  6. flask项目中设置logo

    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}&qu ...

  7. LAMP架构编译安装过程详解

    linux Git 安装 1.安装git依赖包 . yum install -y perl-ExtUtils-MakeMaker package . yum install -y tcl build- ...

  8. Django【第7篇】：Django之ORM跨表操作（聚合查询，分组查询，F和Q查询等）

    django之跨表查询及添加记录 一:创建表 书籍模型: 书籍有书名和出版日期,一本书可能会有多个作者,一个作者也可以写多本书,所以作者和书籍的关系就是多对多的关联关系(many-to-many); ...

  9. CDMA原理

    CDMA原理——特点 CDMA具有抗多径干扰.抗窄带干扰.抗认为干扰.抗多径延迟扩展的能力.同时有提高蜂窝系统的通信容量和便于模拟与数字体制的共存与过渡等优点.与TDMA技术形成强劲的竞争力. 与FD ...

  10. 七夕-心形表白-简单css代码

    今天你要和谁过? 今天你要怎么过?? 今天去哪里吃??? 公司的三连问,对于一些单身狗有点招架不住啊. 在此送上一个薄礼,来安慰下受伤的心灵... 确定是安慰不是连环打击嘛..... 回答:确定! 来 ...