Vue系列之 => 组件中的data和methods
<!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/jquery2.1.4.min.js"></script>
<script src="./lib/Vue2.5.17.js"></script>
<link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
</head> <body>
<div id="app">
<mycom1></mycom1>
</div> <template id="temp1">
<div>
<h1>呵呵嘿嘿嘻嘻</h1>
<h2>{{ msg }}</h2>
</div>
</template>
<script>
// 组件可以有自己的data数据，组件的data和实例的data不一样
//实例中的data可以为一个对象，在组件中的data必须是一个方法且返回一个对象
//组件中的数据和实例中使用的方式一样
Vue.component('mycom1',{
template : '#temp1',
data : function(){
return {
msg : '这是组件自己定义的data数据'
}
}
})
var vm = new Vue({
el: '#app',
data: {},
methods: { },
}) </script>
</body> </html>
使用methods >> 为什么组件中的data必须要用function
<!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/jquery2.1.4.min.js"></script>
<script src="./lib/Vue2.5.17.js"></script>
<link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
</head> <body>
<div id="app">
<counter></counter>
<hr>
<counter></counter>
<hr>
<counter></counter>
<hr>
</div> <template id="tmp1">
<div>
<input type="button" value="点我+1" @click="increment">
<h3>{{ count }}</h3>
</div>
</template>
<script>
// 在外部定义一个对象
var dataObj = { count : 0}
// 这是一个计数器的组件
Vue.component('counter',{
template : '#tmp1',
data : function(){
// 直接return外部的dataObj,此时会有一个问题，3个计时器共用了这个对象,
//当点击第一个计时器，其他计时器也跟着增加了。
// return dataObj 这种方式是错误的
return {count : 0} //使用function来防止
},
methods: {
increment(){
this.count++
}
},
}) var vm = new Vue({
el: '#app',
data: {},
methods: { },
}) </script>
</body> </html>
Vue系列之 => 组件中的data和methods的更多相关文章
- 黑马vue---59-60、组件中的data和methods
黑马vue---59-60.组件中的data和methods 一.总结 一句话总结: 1. 组件可以有自己的 data 数据 2. 组件的 data 和 实例的 data 有点不一样,实例中的 dat ...
- vue组件中的data与methods
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> ...
- vue 父组件使用子组件中的data或methods
1.调用子组件的时候 定义一个ref 2.在父组件里面通过 this.$refs.verify.属性 this.$refs.verify.方法
- 深入理解--VUE组件中数据的存放以及为什么组件中的data必需是函数
1.组件中数据的存放 ***(重点)组件是一个单独模块的封装:这个模块有自己的HTML模板,也有data属性. 只是这个data属性必需是一个函数,而这个函数返回一个对象,这个对象里面存放着组件的数据 ...
- 15.Vue组件中的data
1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...
- Vue 组件中的data数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue组件中的data为什么是函数？
一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...
- 第六章 组件 56 组件-组件中的data
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- vue-为什么子组件中的data选项必须是函数？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 转：HashMap实现原理分析（面试问题：两个hashcode相同 的对象怎么存入hashmap的）
原文地址:https://www.cnblogs.com/faunjoe88/p/7992319.html 主要内容: 1)put 疑问:如果两个key通过hash%Entry[].length得 ...
- 【Python全栈-后端开发】Django入门基础
Django基础知识 一. 什么是web框架? 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统,简单地说,就是你用别人搭建好的 ...
- 运行vs2010,Debug时发生“无法启动程序"http://localhost:xxx",系统找不到指定文件
网上参考回答:应该是Visual Studio不能启动浏览器导致的结果!第一种结果是没有设置默认的浏览器,第二种情况是注册表被修改了! 我的尝试: 1.在启动处点击下三角,选择“使用以下浏览器浏览” ...
- ef codefirst 模型字段类型与sqlserver表字段类型对应概要
1.sqlserver中nvarchar(50),对应EF中: [MaxLength(, ErrorMessage = "最大长度为{1}")] public string Nam ...
- struts2 中的 addActionError 、addFieldError、addActionMessage的方法【转】
一.addActionError("错误内容"): Action级别的错误消息this.addActionError("错误信息1");this.addAct ...
- left join 太神奇了
概念: 把left join左边的表的记录全部找出来.系统会先用表A和表B做个笛卡儿积,然后以表A为基表,去掉笛卡儿积中表A部分为NULL的记录.最后形成你的结果. 进行左连接时,就有涉及到主表.辅表 ...
- vue中computed和watch的用法
computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理: computed比较适合对多个变量或 ...
- 快学Scala 1
1. Scala解释器读到一个表达式,对它进行求值,将它打印出来,接着再继续读下一个表达式.这个过程被称作“读取-求值-打印-循环”,即REPL. 2. 从技术上来讲,scala程序并不是一个 ...
- 由swap引发的关于按值传递和引用传递的思考与总结
函数的参数传递定义:在调用一个函数时,将实参传递给形参. C++中函数的参数传递有按值传递.地址传递和引用传递3种方式.注意:地址也是一种值,按值传递和按地址传递都是单向的值传递方式,即形参都不会回传 ...
- 对k8s service的一些理解
服务service service是一个抽象概念,定义了一个服务的多个pod逻辑合集和访问pod的策略,一般把service称为微服务 举个例子一个a服务运行3个pod,b服务怎么访问a服务的pod, ...