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实例