Vue.component("greeting",{ template: `<p>{{ name }}大家好 <button v-on:click="changeName">改名</button></p>`, data:function(){ return { name:'檐下听雨' } }, methods:{ changeName:function(){ this.name='yanxiatingyu'; } } }); new Vue({ el:'#vue-app-one' }); new Vue({ el:'#vue-app-two' });
Vue.js
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="vue.css"> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> <style type="text/css"> .cr{ color:red; } </style> </head> <body> <h3>初识Vue 组件</h3> <div id="vue-app-one"> <greeting></greeting> </div> <div id="vue-app-two"> <greeting></greeting> </div> <script src="app.js"></script> </body> </html>
HTML