<!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>