使用data
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <script src="./lib/jquery2.1.4.min.js"></script>
10 <script src="./lib/Vue2.5.17.js"></script>
11 <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
12 </head>
13
14 <body>
15 <div id="app">
16 <mycom1></mycom1>
17 </div>
18
19 <template id="temp1">
20 <div>
21 <h1>呵呵嘿嘿嘻嘻</h1>
22 <h2>{{ msg }}</h2>
23 </div>
24 </template>
25 <script>
26 // 组件可以有自己的data数据，组件的data和实例的data不一样
27 //实例中的data可以为一个对象，在组件中的data必须是一个方法且返回一个对象
28 //组件中的数据和实例中使用的方式一样
29 Vue.component(‘mycom1‘,{
30 template : ‘#temp1‘,
31 data : function(){
32 return {
33 msg : ‘这是组件自己定义的data数据‘
34 }
35 }
36 })
37 var vm = new Vue({
38 el: ‘#app‘,
39 data: {},
40 methods: {
41
42 },
43 })
44
45 </script>
46 </body>
47
48 </html>
使用methods >> 为什么组件中的data必须要用function
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <script src="./lib/jquery2.1.4.min.js"></script>
10 <script src="./lib/Vue2.5.17.js"></script>
11 <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
12 </head>
13
14 <body>
15 <div id="app">
16 <counter></counter>
17 <hr>
18 <counter></counter>
19 <hr>
20 <counter></counter>
21 <hr>
22 </div>
23
24 <template id="tmp1">
25 <div>
26 <input type="button" value="点我+1" @click="increment">
27 <h3>{{ count }}</h3>
28 </div>
29 </template>
30 <script>
31 // 在外部定义一个对象
32 var dataObj = { count : 0}
33 // 这是一个计数器的组件
34 Vue.component(‘counter‘,{
35 template : ‘#tmp1‘,
36 data : function(){
37 // 直接return外部的dataObj,此时会有一个问题，3个计时器共用了这个对象,
38 //当点击第一个计时器，其他计时器也跟着增加了。
39 // return dataObj 这种方式是错误的
40 return {count : 0} //使用function来防止
41 },
42 methods: {
43 increment(){
44 this.count++
45 }
46 },
47 })
48
49 var vm = new Vue({
50 el: ‘#app‘,
51 data: {},
52 methods: {
53
54 },
55 })
56
57 </script>
58 </body>
59
60 </html>
原文地址：https://www.cnblogs.com/winter-shadow/p/10203387.html
时间： 2024-10-12 14:19:40