组件的使用

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>

 

 

效果

 

posted @ 2020-07-22 21:33  凯宾斯基  阅读(230)  评论(0)    收藏  举报