00.watch（监听属性）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。 <div id="app"> {{msg}} </div> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ msg:"hello word!" }, watch:{//监听事件，当mag值发生改变时，就会触发下面的函数 msg:function(val){//val表示修改后的内容 console.log("监听事件-----msg"); } } }) </script> </body> </html> <!-- 在控制台输入app.msg="hello"修改msg来触发监听 -->
01.get和set
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> set设置后的值：{{msg}}<br/> get获取的值显示在这里：{{reverseMsg}}</h1> </div> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ msg:"hello word" }, computed:{ reverseMsg:{ // get:function(){ // return this.msg.split("").reverse().join("") // }, // set:function(value){ // this.msg=value.split("").reverse().join("") // } }, reverseMsg:function(){ return this.msg.split("").reverse().jojn("") } }, watch:{ msg:function(val){ console.log("监听事件---msg"); } } }) </script> </body> </html>
原文：https://www.cnblogs.com/hunter1/p/15250777.html