<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <p id='node'>
        {{place}}
    </p>
</body>
<footer>
    <script type="text/javascript">
        /* 
            script脚本需要操作dom,但是必须在dom加载完毕以后,才可以进行操作。
            所以只能放在dom区域之外。
        */
        var data = {place: '珞珈山'};
        /*冻结一个对象,也就是说对象中的属性不可以继续改了。这里需要注意一点,那就是
          要想实现通过冻结使得Vue实例无法改变data属性的值,那么必须在将data挂载到
          Vue上之前就将它冻结。如果先挂载后冻结,那么冻结失效。如下红色字体代码所示。
        */
        Object.freeze(data);
        var vm = new Vue({
            el: '#node',
            data: data,

        });

        /*
            冻结了之后,vue不会再追踪对象属性的变化。那么,双向数据绑定就失效了。对属性数据的修改,在视图上就不会显示变化。
        */

        //Object.freeze(data);

        data.place = '西安';
    </script>
</footer>
</html>
Logo

前往低代码交流专区

更多推荐