//index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/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与之前写法一致