最新文章
- MySQL中， group by 和 order by 一起使用会有排序问题，group by 和 order by 同时使用时要注意的地方
- Vue学习笔记（10） ——Vue组件中的data和methods
- Vue学习笔记（9） ——Vue组件创建的几种方式
- Vue学习笔记（8） ——Vue实例的生命周期
- Vue学习笔记（7） —— 过滤器 filter的基本使用
- Vue学习笔记（6） ——v-if指令和v-show指令
- Vue学习笔记（5） —— v-for指令和key属性
- Vue学习笔记（5） —— Vue中样式-class样式和style样式
- Vue学习笔记（4） —— v-model指令，双向数据绑定
- Vue学习笔记（3） —— Vue事件修饰符
关注我
在线咨询
x
有什么可以帮到你
点击咨询
Vue学习笔记（10） ——Vue组件中的data和methods
- 分类：WEB前端
- 时间：2020-10-05
- 共2096人围观
简介组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象，但是 组件中的 data 必须是一个方法
1、组件可以有自己的 data 数据，data 数据 我们需要显示的返回一个对象，而不是返回一个具体的数据
2、组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象，但是 组件中的 data 必须是一个方法
3、组件中的 data 除了必须为一个方法之外，这个方法内部，还必须返回一个对象才行
4、组件中 的data 数据，使用方式,和 Vue实例中的 data 使用方式完全一样，但在这里大家需要搞 组件 和 Vue实例的区别，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>组件中的data和methods</title>
<script src="https://www.whmblog.cn/static/js/lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<mycom1></mycom1>
</div>
<script>
// 1. 组件可以有自己的 data 数据
// 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是 组件中的 data 必须是一个方法
// 3. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;
// 4. 组件中 的data 数据,使用方式,和 Vue实例中的 data 使用方式完全一样!!!
Vue.component('mycom1', {
template: '<h1>这是全局组件 --- {{msg}}</h1>',
data: function () {
return {
msg: '这是组件的中data定义的数据'
}
}
})
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
</html>
二、why components data must be a function
通过下面这个示例可以知道为什么组件中的data属性必须定义为一个方法并返回一个对象
<!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>组件-why components data must be a function</title>
<script src="https://www.whmblog.cn/static/js/lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<counter></counter>
<hr>
<counter></counter>
<hr>
<counter></counter>
</div>
<template id="tmpl">
<div>
<input type="button" value="+1" @click="increment">
<h3>{{count}}</h3>
</div>
</template>
<script>
var dataObj = { count: 0 }
// 这是一个计数器的组件, 身上有个按钮,每当点击按钮,让 data 中的 count 值 +1
Vue.component('counter', {
template: '#tmpl',
data: function () {
// return dataObj 使用该方式，计数器会全部进行计数，不是我们想要要的效果
return { count: 0 }
},
methods: {
increment() {
this.count++
}
}
})
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
</html>
返回列表：WEB前端