app.js
// 组件 Vue.component("greeting",{ template:`<p>{{name}}大家好,给大家介绍一下我的女朋友@关晓彤 <button v-on:click="changeName">点击我变化</button></p> `, data:function(){ return{ name:"鹿晗" } }, methods:{ changeName:function(){ this.name="Herry"; console.log(123) } } }) // 对象 new Vue({ el:"#ttt", data:{ color:"red", dis:true } });
index.html
<!DOCTYPE html> <html lang="en"> <head> <title>lucax测试</title> <link rel="stylesheet" href="style.css"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="ttt"> <!-- #使用组键 --> <greeting></greeting> </div> <script src="app.js"></script> </body> </html>
效果
