vue基础---05侦听器
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.使用普通函数的形式定义的 watch 侦听器，在页面首次加载后不会被调用。
watch: {
// 定义 total 侦听器，指向一个配置对象
total: {
// handler 属性用来定义侦听器的 function 处理函数
handler(newVal) {
const findResult = this.options.find(x => x.text === '购物车')
if (findResult) {
findResult.info = newVal
}
},
// immediate 属性用来声明此侦听器，是否在页面初次加载完毕后立即调用
immediate: true
}
}
02.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>
