> For the complete documentation index, see [llms.txt](https://super-yusuke.gitbook.io/udemy-vue-basic/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://super-yusuke.gitbook.io/udemy-vue-basic/untitled/access-data-methods.md).

# access data, methods

<https://codesandbox.io/s/7mvw9q8yj1>

{% code title="main.js" %}

```javascript
import Vue from "vue";

new Vue({
  el: "#app",
  data: {
    title: "title"
  },
  methods: {
    changeTitle(event) {
      this.title = event.target.value;
    },
    returnName() { // この関数を呼び出す
      return "/ this is name";
    }
  }
});


```

{% endcode %}

{% code title="index.html" %}

```markup
<body>
	<div id="app">
		<input type="text" @input="changeTitle">
		{{ title }}
		{{ returnName() }} 
		<!-- () で読んであげれば自動的に method を呼ぶ -->
	</div>
</body>

```

{% endcode %}

### this にアクセス

<https://codesandbox.io/s/xlqwpvj34z>

{% code title="main.js" %}

```javascript
import Vue from "vue";

new Vue({
  el: "#app",
  data: {
    title: "title"
  },
  methods: {
    changeTitle(event) {
      this.title = event.target.value;
    },
    returnName() {
      return this.title + "test";
    }
  }
});


```

{% endcode %}
