第3节数据与方法-CSDN博客

效果图： Object.freeze(被阻止后续修改现有属性的变量) ；变量.$watch('变量中的某个属性名',function(新值，旧值）{} ），该方法必须在定义新值前定义。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href=" "/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 数据渲染 DOM , 文本插值 -->
<div id="app">
    {{ a }} {{ b }}
</div>
<script type="text/javascript">
    window.onload = function () {
        var dataInApp = { a : 1 , b : 2};
        //Object.freeze(dataInApp);  // 方法阻止dataInApp修改现有的属性,
        var app = new Vue({
            el: '#app',                  // 哪个选择器使用 这个创建的vue对象
            data : dataInApp
        });
        //Object.freeze(app);  // 方法阻止app修改现有的属性
        dataInApp.b = 3; // 改变 b 的值   与 app.a = 'ha' 效果一致
        app.a = 'ha';
        app.$data.a = 'yo'; // $ 用于区分 vue的属性和用户定义的属性
        console.log(app.$el);
        // watch方法可以用于观察 变量新值和旧值  必须在新值定义前定义
        app.$watch('a',function(newVal,oldVal){
            console.log(newVal,oldVal);
        });
        app.$data.a='watch';
    }
</script>
</body>
</html>