//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与之前写法一致