<!DOCTYPE html>
<html>
<head>
<title>培訓代碼</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/vue.js"></script>
</head>
<body>
<div>
在new Vue()的時候，是可以給data直接賦值為一個對象的。
但是在組件中，data必須是一個函數,注冊組件其實並不產生新的組件類，但會產生一個可以用來實例化的新方式。
因為可能在多處調用同一組件，所以為了不讓多處的組件共享同一data對象，只能返回函數
</div>
<div> data屬性的三種寫法及區別：
<script type="text/javascript">
var app=new Vue({
el:'#ap',
data:{
isLogin: false
}
})
</script>
<script type="text/javascript">
var app=new Vue({
el:'#ap',
data: function(){
return {
isLogin: false
}
}
})
</script>
<script type="text/javascript">
var app=new Vue({
el:'#ap',
data() {
return {
isLogin: false
}
}
})
<!-- 第3種是第2種的ES6寫法 -->
</script>
</div><br><br><br><br>
<html>
<head>
<title>培訓代碼</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/vue.js"></script>
</head>
<body>
<div>
在new Vue()的時候，是可以給data直接賦值為一個對象的。
但是在組件中，data必須是一個函數,注冊組件其實並不產生新的組件類，但會產生一個可以用來實例化的新方式。
因為可能在多處調用同一組件，所以為了不讓多處的組件共享同一data對象，只能返回函數
</div>
<div> data屬性的三種寫法及區別：
<script type="text/javascript">
var app=new Vue({
el:'#ap',
data:{
isLogin: false
}
})
</script>
<script type="text/javascript">
var app=new Vue({
el:'#ap',
data: function(){
return {
isLogin: false
}
}
})
</script>
<script type="text/javascript">
var app=new Vue({
el:'#ap',
data() {
return {
isLogin: false
}
}
})
<!-- 第3種是第2種的ES6寫法 -->
</script>
</div><br><br><br><br>
<div>兩個實例：
<p>1.用function return 其實就相當於申明了新的變量，相互獨立</p>
<div id="app">
<my-btn></my-btn>
<my-btn></my-btn>
<my-btn></my-btn>
<my-btn></my-btn>
<my-btn></my-btn>
</div>
<!--注冊一個組件-->
<template id='myBtn'>
<button @click="counter += 1">點擊的次數{{counter}}</button>
</template>
<p>1.用function return 其實就相當於申明了新的變量，相互獨立</p>
<div id="app">
<my-btn></my-btn>
<my-btn></my-btn>
<my-btn></my-btn>
<my-btn></my-btn>
<my-btn></my-btn>
</div>
<!--注冊一個組件-->
<template id='myBtn'>
<button @click="counter += 1">點擊的次數{{counter}}</button>
</template>
<script>
Vue.component('my-btn', {
template: '#myBtn',
data() {
return {
counter: 0
}
}
})
new Vue({
// el: '#app',
}).$mount('#app')
</script>
<br>
<p>2.如果不用function return 每個組件的data都是內存的同一個地址let data2，那一個數據改變其他也改變了，</p>
<div id="app2">
<my-btn2></my-btn2>
<my-btn2></my-btn2>
<my-btn2></my-btn2>
<my-btn2></my-btn2>
<my-btn2></my-btn2>
</div>
<!--注冊一個組件-->
<template id='myBtn2'>
<button @click="counter += 1">點擊的次數{{counter}}</button>
</template>
<script>
let data2 = {
counter:0
}
Vue.component('my-btn2', {
template: '#myBtn2',
data() {
return data2;
}
})
new Vue({
// el: '#app2',
}).$mount('#app2');
</script>
</div>
</body>
</html>
// el: '#app',
}).$mount('#app')
</script>
<br>
<p>2.如果不用function return 每個組件的data都是內存的同一個地址let data2，那一個數據改變其他也改變了，</p>
<div id="app2">
<my-btn2></my-btn2>
<my-btn2></my-btn2>
<my-btn2></my-btn2>
<my-btn2></my-btn2>
<my-btn2></my-btn2>
</div>
<!--注冊一個組件-->
<template id='myBtn2'>
<button @click="counter += 1">點擊的次數{{counter}}</button>
</template>
<script>
let data2 = {
counter:0
}
Vue.component('my-btn2', {
template: '#myBtn2',
data() {
return data2;
}
})
new Vue({
// el: '#app2',
}).$mount('#app2');
</script>
</div>
</body>
</html>