> For the complete documentation index, see [llms.txt](https://xml-1.gitbook.io/vuejs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://xml-1.gitbook.io/vuejs/component-ok.md).

# Component (ok)

```
C:\xampp\htdocs\vujs\index.html
```

```
var data = {
	name: "Lionel"
}
Vue.component('xinchao',{
	template: '<p>Xin chào {{data.name}}<button v-on:click="changeName()">Change Name</button></p>',
	data: function() {
		return {
			data
		}
	},
	methods: {
	  changeName:function() {
	    this.data.name = "Change "
	  },
	},
});
new Vue({
	el: "#app",
	data: {
		
	},
});
```

C:\xampp\htdocs\vujs\app.js

```
Vue.component('xinchao',{
	template: '<p>Xin chào {{name}}</p>',
	data: function() {
		return {
			name: "Lionel"
		}
	}
});
new Vue({
	el: "#app",
	data: {
		
	},
});
```