vue學習(五) 訪問vue內部元素或者方法

//html
<div id="app">
　　<input type="button" value="ok" v-bind:title="msg" v-on:click="show"></div>
　　<h1>{{msg}}</h1>
//script
<script>
　　var vm = new Vue({
　　　　el:'app',
　　　　data:{
　　　　　　msg:'點擊一下'
　　　　},
　　　　methods:{//methods中定義了當前vue實例中所有可用的方法
　　　　　　show:function(){
　　　　　　　　console.log(this.msg);//獲取msg里的內容
　　　　　　　　//獲取msg第一個字符"點"
　　　　　　　　var start = this.msg.substring(0,1)
　　　　　　　　//獲取msg剩下的字符"擊一下"
　　　　　　　　var end = this.msg.substring(1)
　　　　　　　　//把上邊的data對象的屬性msg的內容給修改為"擊一下點",相當於給msg重新賦值
　　　　　　　　this.msg = end+start
　　　　　　}
　　　　}
　　})
</script>

說明：

在vue實例中，如果想調用data中的屬性(獲取data上的數據)，或者調用methods中的方法，都需要通過this來訪問，this就代表我們當前的vue實例

格式為：this.數據屬性名  this.方法名 

vue會監聽自己身上data中所有數據的改變，只要數據一發生變化，就會自動把最新的數據從data中同步到頁面中去。也就是頁面原來的<h1>點擊一下</h1>，在我們點擊完ok按鈕，會被替換為<h1>擊一下點</h1>

這樣的好處就是 我們只需要處理數據，無需再渲染頁面。

***箭頭函數：解決thsi的指向問題，箭頭函數內部的this永遠和外部的保持一致，外部this指向vue實例，這樣的話內部this就也指向vue實例