<!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. tomcat 启动日志乱码,idea中运行Tomcat也出现中文乱码:“淇℃伅”

    打开到tomcat安装目录下的conf/文件夹 修改logging.properties文件, 找到 java.util.logging.ConsoleHandler.encoding = utf-8 ...

  2. Spring基础18——通过注解配置bean之间的关联关系

    1.组件装配 <context:component-scan>元素还会自动注册AutowiredAnnotaionBeanPostProcessor实例,这是一个bean的后置处理器,该实 ...

  3. python--线程锁,队列

    #线程数据安全处理--同步锁 import time def sub(): global num print("ok") lock.acquire()#获取这把锁--->只有 ...

  4. MyBatis源码浅析

    什么是MyBatis MyBatis是支持定制化SQL.存储过程以及高级映射的优秀的持久层框架.MyBatis 避免了几乎所有的 JDBC 代码和手工设置参数以及抽取结果集.MyBatis 使用简单的 ...

  5. string遍历

    #include <iostream>#include <string> using namespace std;int main(int argc, const char * ...

  6. [每日一学]apache camel|IBMWebsphere MQ header issue|MQRFH2 |MQSTR

    最近工作中,遇到一个很奇怪的问题: 现象:在camel开发中,通过 IBM Websphere MQ 给assasin 发送xml的message时,会多出<mcd>等这样的header出 ...

  7. Azure IoT 技术研究系列4

    上两篇博文中,我们介绍了将设备注册到Azure IoT Hub,设备到云.云到设备之间的通信: Azure IoT 技术研究系列2-设备注册到Azure IoT Hub Azure IoT 技术研究系 ...

  8. note 2019.12.16

    1.无序 HTML 列表: <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li& ...

  9. NOIP模拟赛(by hzwer) T1 小奇挖矿

    [题目背景] 小奇要开采一些矿物,它驾驶着一台带有钻头(初始能力值 w)的飞船,按既定 路线依次飞过喵星系的 n 个星球. [问题描述] 星球分为 2 类:资源型和维修型. 1. 资源型:含矿物质量 ...

  10. vue安装iview和配置

    在命令行工具上输入:npm install iview --save 等待安装完成. 在项目的src/main.js中添加三行代码引入iview import iView from 'iview' i ...