vue学习 访问vue内部元素或者方法

Posted 2021-11-26 xuchao0506

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