1.组件中展示数据和响应事件:
// 1. 组件可以有自己的 data 数据
// 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象
// 3. 但是组件中的 data 必须是一个方法 data: function(){}或者data(){}
// 4. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;
// 5. 组件中 的data 数据使用方式,和实例中的 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>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head> <body>
<div id="app">
<mycom1></mycom1>
</div>
<script>
// 1. 组件可以有自己的 data 数据
// 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象
// 3. 但是组件中的 data 必须是一个方法 data: function(){}或者data(){}
// 4. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;
// 5. 组件中 的data 数据使用方式,和实例中的 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>
注意：
Vue.component('mycom1', {
template: '<h1>这是全局组件 --- {{msg}}</h1>',
data: function () {
return {
msg: '这是组件的中data定义的数据'
}
}
})
注意：组件中的 data 必须是一个方法 data: 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>Document</title>
<script src="./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:表示每个组件中data数据共享
return { count: 0 } //私有
},
methods: {
increment() {
this.count++
}
}
}) // 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
</html>
Vue组件中的method,见上面代码