Vue的data和methods属性
在上篇文章的基础上我们继续来介绍下Vue组件中的data和methods属性,这两个属性和我们介绍的Vue实例中data和methods属性很类似,使用方式也是一样的
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">
<my-com></my-com>
</div>
<template id="com1">
<div>
<input type="button" value="点击一下..." @click="show">
<h2> 第二种创建的方式234234 -->{{id}}-->{{name}}</h2>
<span>234234</span></div>
</template>
<script>
Vue.component("myCom", {
template: "#com1",
data: function() {
return {
id: 1,
name: '小花'
};
},
methods: {
show() {
console.log('show被调用...');
}
}
})
var vm = new Vue({
el: "#app",
data: {
},
methods: {
}
})
</script>
</body>
</html>
定义的data数据显示的返回一个对象,获取data中的数据的时候还是通过 插值 表达式来实现。
methods属性的使用
在Vue组件中我们也可以通过methods属性来定义组件自身的方法来供组件使用,和Vue实例中的methods的使用差不多
data属性必须返回对象
在这里大家需要搞 组件 和 Vue实例的区别,Vue实例是在页面加载的时候被实例化的,一个页面就一个,而 组件是可以复用的.也就是在一个页面中可以同一个组件可以有多个实例。
<!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">
<!--复用3个 Vue 组件-->
<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>