<!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>vue学习</title>
</head>
<body>
<div id="app">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<!-- 组件模板抽离 -->
<template id="cpn">
<div>
<h3>When you are gone</h3>
<h3>计数器：{{count}}</h3>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
</body>
<script src="js/vue.js"></script>
<script>
Vue.component('button-counter',{
template:"#cpn",
data:function(){
return {
count:0
}
},
methods:{
increment:function(){
this.count++
},
decrement:function(){
this.count--
}
}
});
const app = new Vue({
el:"#app"
});
// 为什么组件data必须是函数
// 不是函数的话 一个实例的改变其他实例全部改变
const obj = {
name:"why",
age:18
}
function abc(){
return obj;
}
let obj1 = abc();
let obj2 = abc();
let obj3 = abc();
obj1.name="kobe";
console.log(obj2);//kobe
console.log(obj3);//kobe
// 是函数的话 实例之间互不影响
function a(){
return {
name:"why",
age:18
}
}
let obj11 = a();
let obj21 = a();
let obj31 = a();
obj1.name="kobe";
console.log(obj21);//why
console.log(obj31);//why
</script>
</html>
4246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
