//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="vue-one">
<greeting></greeting>
</div>
<div id="vue-two">
<greeting></greeting>
</div>
<script src="app.js"></script>
</body>//app.js
Vue.component("greeting",{
template:`<p>
{{name}}--{{age}}:today is a good day
<button @click="change">press</button>
</p>`,
data:function(){
return{
name:"mike",
age:30
}
},
methods:{
change:function(){
this.name="lucy";
this.age="20";
}
}
})
new Vue({
el:"#vue-one"
});
new Vue({
el:"#vue-two"
});
效果图：
点击第一个之后
所有的vue实例对象中，只存放el，其他的methods、data……这些，全部存放在组件中
首先先起一个组件名字，这里为greeting，所以html中直接引用<greeting></greeting>标签即可
现在分析组件里面的内容：（记得每个分开的有逗号）
template：写html代码，可以减少html文件的代码量，这里为了方便美观，采用es6语法写，否则用双引号连接会不能分行，所有html语句都在一行，影响编程，这里用反引号（1左边的那个），template里面只允许有一个根标签，如果把button写出来，会报错
data：数据，但是这里一定要用return返回，每一个数据都是，如果单独写在外面一个data，直接return data，会导致一个按钮press，两个vue都会变，这里记住是要用return 返回每一个值就好了
methods与之前写法一致
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
