前端学习日记Vue：Vue的实例属性与实例方法

今天药忘吃喽~ 2023-06-07 03:28 1阅读 0赞

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title></title>  
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>  
    </head>  
    <body>  
        <div id="app">  
              
            \{ \{a\}\},\{ \{b\}\}  
        </div>

//在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例对象。  
            var vm = new Vue(\{  
                el: "\#app",

//第一个data是属性,第二个data是之前js中声明的变量data，用于赋值  
                data: data  
            \});

//改变vm和data变量中的属性a和b的值  
            // data.a = "哈哈哈哈";  
            // data.b = "笑你个龟";  
            vm.a = "哈哈哈哈";  
            vm.b = "笑你个龟";

//vm中的属性el和data是undefined,  
            // console.log(vm.el);                   
            // console.log(vm.data);  
            console.log(vm.a);  
            console.log(vm.b);  
            //发现一个问题：无法访问vm中的data属性，这是为什么呢？  
            // vm.data.a = "哈哈哈哈";  
            // vm.data.b = "笑你个龟";  
    //由于vm是Vue实例，而Vue实例的特点是：访问实例中定义的el和data等实例属性时需要加$前缀  
            console.log(vm.$data.a);  
            console.log(vm.$data.b);              
            console.log(vm.$el);

// 除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：  
            //$watch 是一个实例方法,用于监听数据变化  
            //格式：  
            //Vue对象.$watch('属性名', function(newVal, oldVal)\{回调函数\}  
            vm.$watch('a', function(newVal, oldVal) \{  
                // 这个回调将在 \`vm.a\` 改变后调用  
                //打印新值和旧值  
                console.log(newVal, oldVal);

\})  
            //$data 是一个实例属性  
            vm.$data.a = "test....hahaha";  
        </script>

</body>  
</html>