实例方法与实例事件

来源：互联网发布：mac怎么卸载双系统编辑：程序博客网时间：2024/06/05 13:56

实例方法

$mount挂载

    <div id="app"></div>    <script type="text/javascript">        var v = Vue.extend({            template : `<p>{{message}}</p> `,            data : function() {                return {                    message : "hello"                }            }        });        var vm = new v().$mount("#app");    </script>

$destroy销毁

    <div id="app">    </div>    <button onclick="destroyed()">删除</button>    <script type="text/javascript">        var v = Vue.extend({            template : `<p>{{message}}</p> `,            data : function() {                return {                    message : "hello"                }            },            destroyed : function() {                console.log('destoryed --')            }        });        var vm = new v().$mount("#app");        function destroyed() {            vm.$destroy();        }    </script>

$forceUpdate更新方法

   <div id="app">    </div>    <button onclick="forceUpdate()">更新</button>    <script type="text/javascript">        var v = Vue.extend({            template : `<p>{{message}}</p> `,            data : function() {                return {                    message : "hello"                }            },            updated: function() {                console.log('updated --')            }        });        var vm = new v().$mount("#app");        function forceUpdate() {            vm.$forceUpdate();        }    </script>

$nextTick数据修改方式

    <div id="app">    </div>    <button onclick="nextTick()">修改</button>    <script type="text/javascript">        var v = Vue.extend({            template : `<p>{{message}}</p> `,            data : function() {                return {                    message : "hello"                }            }        });        var vm = new v().$mount("#app");        function nextTick() {            vm.message = "Vam";            vm.$nextTick(function() {                console.log("message更新完之后调用");            });        }    </script>

实例事件

可以通过实例的$on 和 $once添加实例事件，可以通过 $off 注销指定的实例事件

$on

    <div id="app">        <p>{{num}}</p>        <button v-on:click="add">add</button>    </div>    <button onclick="reduce()">reduce</button>

        var v = new Vue({           el : "#app",            data : {              num : 0            },            methods: {                add : function() {                    this.num++;                }            }        });        v.$on('reduce', function() {            v.num -= 1;        });        function reduce() {            v.$emit('reduce');        }

$once

    <div id="app">        <p>{{num}}</p>        <button v-on:click="add">add</button>    </div>    <button onclick="reduceOnce()">reduce</button>    <script type="text/javascript">        var v = new Vue({           el : "#app",            data : {              num : 0            },            methods: {                add : function() {                    this.num++;                }            }        });        v.$once('reduceOnce', function() {            v.num -= 2;        });        function reduceOnce() {            v.$emit('reduceOnce');        }    </script>

$off

   <div id="app">        <p>{{num}}</p>        <button v-on:click="add">add</button>    </div>    <button onclick="reduce()">reduce</button>    <button onclick="reduceOnce()">reduceonce</button>    <button onclick="off()">off</button>    <script type="text/javascript">        var v = new Vue({           el : "#app",            data : {              num : 0            },            methods: {                add : function() {                    this.num++;                }            }        });        v.$on('reduce', function() {            v.num -= 1;        });        v.$once('reduceOnce', function() {            v.num -= 2;        });        function reduceOnce() {            v.$emit('reduceOnce');        }        function reduce() {            v.$emit('reduce');        }        function off() {            v.$off('reduce');        }    </script>

阅读全文

0 0