<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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,
</script>
</footer>
</html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>