vue.js資料例項化
阿新 • • 發佈：2021-01-21
技術標籤：Vue
今天分享的內容主要是：
1、如何修改值，
2、阻止值發生變化freeze()，
3、列印輸出新舊的值，watch()
4、以及$符號簡單區分使用者定義的變數
一切都在程式碼中~收藏學起來
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>例項化</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> {{a}} </div> <!-- object.freeze()阻止修改現有的屬性 --> <div id="app-2"> <p> {{foo}} </p> <button v-on:click='foo="new"'>改變它</button> </div> <!-- 使用$字首區分 使用者定義的prop屬性 --> <div id="app-3"> {{message3}} </div> <script> var data = { a: 1 }; var vm = new Vue({//vm就是英文縮寫的例項vuemodel el: '#app', data: data//屬性：變數物件 }); //data.a='hi' vm.$watch('a', function (newVal, oldVal) { console.log(newVal, oldVal);//控制檯檢視修改之前的值，以及輸出新的值 }) vm.$data.a = 'test...'//修改a的值 /***************************/ var obj={ foo:'原始值' } Object.freeze(obj)//阻止改變原有的屬性值 new Vue({ el:'#app-2', data:obj }) /***************************/ var data = {message3:3}//給變數賦初值 var vm=new Vue({ el:'#app-3', data:data//啥意思來著。。。 }) console.log(vm.$data===data)//true console.log(vm.$el===document.getElementById('app-3'))//true vm.$watch('message3',function(newVal,oldVal){ console.log(newVal,oldVal) })//結果：新的值 3 vm.$data.message3='新的值'//新的值寫在這裡 </script> </body> </html>
結果：
