Vue基础（四）--Vue实例的属性和方法

今天药忘吃喽~ 2023-06-11 06:29 29阅读 0赞

### Vue实例的属性和方法 ###

#### 1.属性 ####

*  vm.$el
 *  vm.$data
 *  vm.$options
 *  vm.$refs  
    ...

示例：

<!doctype html>
    <html>
    
        <head>
            <meta charset="utf-8">
            <title></title>
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <link href="../css/mui.min.css" rel="stylesheet" />
        </head>
    
        <body>
            <div id="content">
                {
       {msg}}
                <h1 ref="hello">我是注册过ref特性的哟</h1>
            </div>
            <script src="../js/mui.min.js"></script>
            <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                mui.init()
                var vm=new Vue({
                    el:"#content",
                    data:{
                        msg:"hello world!"
                    },
                    name:"yang",
                    age:23,
                    show:function(){
                        console.log("show!");
                    }
                })
                
                /**
                 * 属性
                 */
                //vm.属性名 获取data中的属性
                console.log(vm.msg);
                
                //vm.$el 获取Vue实例使用的根 DOM 元素。
                console.log(vm.$el);
                vm.$el.style.color="red";
                
                //vm.$data 获取数据对象data
                console.log(vm.$data);
                console.log(vm.$data.msg);
                
                //vm.$options 获取自定义属性和调用自定义方法
                console.log(vm.$options.name);
                console.log(vm.$options.age);
                vm.$options.show();
                
                //vm.$refs 获取所有添加过ref属性的元素（一个对象，持有注册过 ref 特性 的所有 DOM 元素和组件实例）。
                console.log(vm.$refs.hello);
                vm.$refs.hello.style.color="blue";
            </script>
        </body>
    
    </html>

#### 2.方法 ####

##### 2.1 vm.$nextTick( \[callback\] ) #####

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

new Vue({
      // ...
      methods: {
        // ...
        example: function () {
          // 修改数据
          this.message = 'changed'
          // DOM 还没有更新
          this.$nextTick(function () {
            // DOM 现在更新了
            // `this` 绑定到当前实例
            this.doSomethingElse()
          })
        }
      }
    })

示例：

##### 2.2 其他方法 #####

*  vm.$mount() 手动挂载Vue实例
 *  vm.$destroy() 销毁实例
 *  vm.$set() 向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。
 *  vm.$delete() 删除对象的属性。  
    ...

示例：

<!doctype html>
    <html>
    
       <head>
           <meta charset="utf-8">
           <title></title>
           <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
           <link href="../css/mui.min.css" rel="stylesheet" />
       </head>
    
       <body>
           <header class="mui-bar mui-bar-nav">
               <h1 class="mui-title">$set,$delete</h1>
           </header>
           <div class="mui-content" id="content">
               <button @click="updateName()">改变属性值</button>
               <button @click="addAge()">增加一个属性</button>
               <button @click="deleteAge()">删除一个属性</button>
    
    
               <div>
                   姓名{
       {user.name}}
                   <br>
                   年龄：{
       {user.age}}
               </div>
           </div>
           <script src="../js/vue.js"></script>
           <script src="../js/mui.min.js"></script>
           <script type="text/javascript">
               mui.init();
               var vm = new Vue({
                   el: "#content",
                   data: {
                       user: {
                           id: 1000,
                           name: "tom"
                       }
                   },
                   methods: {
                       updateName: function() {
                           this.user.name = "jack";
                       },
                       addAge: function() {
                           // this.user.age=23;//通过普通的方式为对象添加属性时,Vue无法实时监视到
                           
                           // this.$set(this.user,'age',23);//通过Vue实例的$set方法为对象添加属性,可以实时监视
                           // Vue.set(this.user,'age',23);//还有一种写法,通过全局 Vue.set方法,$set就是全局 Vue.set 的别名
                           
                           //示例,当还没有属性时添加属性,有属性就加1
                           if(this.user.age){
                               this.user.age++;
                           }else{
                               Vue.set(this.user,'age',23);
                           }
                       },
                       deleteAge:function(){
                           if(this.user.age){
                               // this.$delete(this.user,'age');//通过Vue实例的$delete方法为对象删除属性
                               Vue.delete(this.user,'age');//通过全局 Vue.delete方法
                           }
                       }
                   }
               })
           </script>
       </body>
    
    </html>

##### 2.3 vm.$watch( expOrFn, callback, \[options\] ) #####

观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。

示例：

<!doctype html>
    <html>
    
       <head>
           <meta charset="utf-8">
           <title></title>
           <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
           <link href="../css/mui.min.css" rel="stylesheet" />
       </head>
    
       <body>
           <header class="mui-bar mui-bar-nav">
               <h1 class="mui-title">$watch</h1>
           </header>
           <div class="mui-content" id="content">
    
               <input type="text" v-model="name" />
               <input type="text" v-model="age" />
               <div>
                   姓名{
       {user.name}}
                   <br>
                   年龄：{
       {user.age}}
               </div>
    
               
               <input type="text" v-model="user.name" />
           </div>
           <script src="../js/vue.js"></script>
           <script src="../js/mui.min.js"></script>
           <script type="text/javascript">
               mui.init();
               var vm = new Vue({
                   el: "#content",
                   data: {
                       name: "rose",
                       age: 25,
                       user: {
                           id: 1000,
                           name: "tom"
                       }
                   },
                   watch: { //方式2,是用Vue示例提供的watch选项
                       age: function(newValue, oldValue) {
                           console.log("age值发生改变，由" + oldValue + "变成了" + newValue);
                       },
                       user: {
                           //监视对象
                           handler: function(newValue, oldValue) {
                               //注意：在变异 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。
                               console.log("user对象值发生改变，由" + oldValue.name + "变成了" + newValue.name);
                           },
                           deep: true //深度监视,当对象中的属性发生变化时也会监视
                       }
                   }
               });
    
               //方式1,使用Vue示例的$watch方法监视数据变化
               vm.$watch('name', function(newValue, oldValue) {
                   console.log("name值发生改变啦，由" + oldValue + "变成了" + newValue);
               })
           </script>
       </body>
    
    </html>

原创不易，转载请注明出处。