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 ...
随机推荐
- kafka实战读书笔记
1.katka_2.12-l.0.0.tgz 上面两个文件中的 2.11 /2.12 分别表示编译 Kafka 的 Scala 语言版本,后面的 1.0 .0 是 Kafka的版本 . 2.kafka ...
- javascript高级技巧篇（作用域安全、防篡改、惰性载入、节流、自定义事件，拖放）
安全的类型检测 在任何值上调用Object原生的toString()方法,都会返回一个[object NativeConstructorName]格式字符串.每个类在内部都有一个[[Class]]属性 ...
- 【Python基础】json.dumps()和json.loads()、json.dump()和json.load()的区分
json文件处理涉及的四个函数json.dumps()和json.loads().json.dump()和json.load()的区分 一.概念理解 1.json.dumps()和json.loads ...
- Linux 命令locate
原文:https://blog.csdn.net/liang19890820/article/details/53285624 简述 locate 可以很快速的搜寻档案系统内是否有指定的档案.其方法是 ...
- SmokePing介绍
一.SmokePing是什么? smokeping是rrdtool的作者Tobi Oetiker的作品,用Perl语言写的,主要是监视网络性能,所以它在图形显示方面有很大优势,也是一个很有特点的ope ...
- runtime实现weak属性
我们可以自己创建一个 A 类,然后在“宿主对象”和“值对象”建立 weak 关系的时候,偷偷地创建一个 A 类的实例 a,绑定在 “值对象” 上. 当“值对象”销毁后,这个 a 也会被销毁.而 A 类 ...
- python-面向对象-07_继承
继承 目标 单继承 多继承 面向对象三大特性 封装 根据 职责 将 属性 和 方法 封装 到一个抽象的 类 中 继承 实现代码的重用,相同的代码不需要重复的编写 多态 不同的对象调用相同的方法,产生不 ...
- 20180322 对DataTable里面的数据进行去重
对DataTable里面的数据进行去重 DataTable dt = new DataTable(); dt.Columns.Add("Id", typeof(int)); dt. ...
- Learn nodejs: Tutorials for Programmers of All Levels， 程序员每个阶段的示例
https://stackify.com/learn-nodejs-tutorials/ What is Node.js? Node.js can be defined as a dynamic, c ...
- （转）从拜占庭将军问题谈谈为什么pow是目前最好的共识机制
我们知道基于区块链技术现在有很多的共识机制,包括不限于POW,POS,DPOS,PBFT……,我先不说为什么我最认可POW,我们先来看看著名的拜占庭将军问题: 拜占庭帝国即中世纪的土耳其,拥有巨大的财 ...