标签：rem 方法 防止 char size lan title mat nbsp
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>
标签：rem 方法 防止 char size lan title mat nbsp
原文地址：https://www.cnblogs.com/winter-shadow/p/10203387.html
