Vue实例-数据与方法 - xiaoxustudy

VUE官网：https://cn.vuejs.org/v2/guide/instance.html#%E6%95%B0%E6%8D%AE%E4%B8%8E%E6%96%B9%E6%B3%95

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script src="vue.js"></script>
 7     </head>
 8     <body>
 9         <div id="app">
10             {{ a }}       
11         </div>
12         <script>
13             var data = { a : 1 };
14             var vm = new Vue({
15                 el : '#app',
16                 data : data            //右边的data是第13行的data
17             });
18             //data.a = "hi~!";    //修改的是第13行的声明的变量data的属性，视图进行了重新渲染
19         </script>
20     </body>
21 </html>

预览效果：

说明：

体验一下 Vue 的响应式。高亮处为新增的代码。改变data的a属性，视图会被重新渲染。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script src="vue.js"></script>
 7     </head>
 8     <body>
 9         <div id="app">
10             {{ a }}       
11         </div>
12         <script>
13             var data = { a : 1 };
14             var vm = new Vue({
15                 el : '#app',
16                 data : data            //右边的data是第13行的data
17             });
18             data.a = "hi~!";    //修改的是第13行的声明的变量data的属性a的值，视图进行了重新渲染
19         </script>
20     </body>
21 </html>

视图被重新渲染了：

说明：

　　语句 data.a = "hi~!"；是改变了第13行声明的变量 data 的属性 a 的值。

　　用 vm 来保存了 Vue 的实现，如果用 vm 去改变 a 属性，效果是跟用 data.a = "hi~!"；语句改变是一样的。vm.a 等同于 data.a。

　　即将上面的语句 data.a = "hi~!"；更改为 vm.a = "hi~!"；效果也是一样的。

修改 vm.a ，data.a 同时改变。修改 data.a , vm.a 同时改变。

使用 Object.freeze() 之后，响应系统无法再追踪变化。

点击按钮之前：

点击按钮之后：

使用 Object.freeze() 。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app">
            {{ a }}
			<button v-on:click=" a='goodbye' ">按钮</button>
        </div>
        <script>
            var data = { a : 'hi' };
			Object.freeze( data );
            var vm = new Vue({
                el : '#app',
                data : data            
            });
        </script>
    </body>
</html>

点击按钮之前：

点击按钮之后：

使用前缀 $ 可以暴露 vue 示例的 property。

$watch 方法可以观察一个变量的变化，会纪录变量变化后的值与变化前的值。在变量变化后调用 $watch 方法。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app">
            {{ a }}
        </div>
        <script>
            var obj = { a : 'hi' };
            var vm = new Vue({
                el : '#app',
                data : obj            
            });
            vm.$watch('a', function(newVal, oldVal){
                console.log(newVal, oldVal);
            })
            vm.$data.a = "test";
        </script>
    </body>
</html>

View Code

控制台输出：

test hi

posted on 2020-05-08 11:01 xiaoxustudy 阅读(293) 评论(0) 收藏举报

刷新页面返回顶部