<!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. FPGA引脚锁定 注意err和高阻状态

    1.fpga没有用的的管脚一定要设置成高阻状态设置路径如下: Assignmen->Device->Device&Pin Option->Unused pins->As ...

  2. VB.net删除节点，数据库，文件

    Private Sub mnuDel_Click()'删除节点Dim sKey As String'Dim sFile As StringDim oFS As FileSystemObjectDim ...

  3. PCA 主成分分析

    链接1 链接2(原文地址) PCA的数学原理(转) PCA(Principal Component Analysis)是一种常用的数据分析方法.PCA通过线性变换将原始数据变换为一组各维度线性无关的表 ...

  4. 1118. Birds in Forest (25)

    Some scientists took pictures of thousands of birds in a forest. Assume that all the birds appear in ...

  5. 10年前文章_UC3A/B 开发环境设置

    大部分设置和 Z32U 交叉编译环境的配置 类似 Windows 环境 步骤二: 安装 toolchain 和mkII lite V2 的驱动 安装运行 avr32-gnu-toolchain-2.0 ...

  6. C语言对传入参数的处理

    /* Loop through argv parsing options. */    while ((c = getopt(argc, argv, ":f:a:l:h")) != ...

  7. Flask实现分页功能

    可以参考: https://blog.csdn.net/weixin_36380516/article/details/80295101 也可以参考我的代码: https://github.com/z ...

  8. linux-lampweb

    http://www.lampweb.org/linux/2/6.html      

  9. ubuntu重装--备份/配置

    https://github.com/wenlin-gk/document/blob/master/ubuntu%E5%A4%87%E4%BB%BD%2B%E9%85%8D%E7%BD%AE.txt

  10. 20191213用Python实现replace方法

    def myReplace(s,sub, dest, times =None): #如果times是None,替换的次数是s.count(sub) if times == None: times = ...