Vue学习—实例(二)实例方法

原创 2018年04月17日 16:32:25
  1. vm.$mount:用法:如果 Vue 实例在实例化时没有收到 el 选项,则它处于“未挂载”状态,没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。如果没有提供 elementOrSelector 参数,模板将被渲染为文档之外的的元素,并且你必须使用原生 DOM API 把它插入文档中。这个方法返回实例自身,因而可以链式调用其它实例方法。
    <body>
    <h1>实例方法 </h1>
    <div id="app">
    {{message}}
    <div class="text">{{message}}</div>
    </div>
    <script>
    var abc = Vue.extend({
    template: "<p>{{message}}</p>",
    data: function () {
    return {
    message: "Hello my Girl!"
    }
    }
    })
    new abc().$mount("#app"); //将abc挂载到app上
    </script>
    </body>

  2. vm.$destroy():完全销毁一个实例。清理它与其它实例的连接,解绑它的全部指令及事件监听器。这个方法会触发 beforeDestroy 和 destroyed 的钩子。在大多数场景中你不应该调用这个方法。最好使用 v-if 和 v-for 指令以数据驱动的方式控制子组件的生命周期。
    <p>
    <button onclick="xiezai()">卸载</button>
    </p>
    <div id="app">
    {{message}}
    <div class="text">{{message}}</div>
    </div>

    <script>
    var abc = Vue.extend({
    template: "<p>{{message}}</p>",
    data: function () {
    return {
    message: "Hello my Girl!"
    }
    },
    destroyed: function () {
    console.log("销毁之后");
    }
    })
    var vm = new abc().$mount("#app"); //将abc挂载到app上并且命名为vm
    function xiezai() {
    vm.$destroy();
    }
    </script>
  3. vm.$forceUpdate():迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。
    <p>
    <button onclick="update()">刷新</button>
    </p>
    <div id="app">
    {{message}}
    </div>
    <script>
    var abc = Vue.extend({
    template: "<p>{{message}}</p>",
    data: function () {
    return {
    message: "Hello my Girl!"
    }
    },
    updated: function () {
    console.log("被更新之后");
    }
    })

    function update() {
    vm.$forceUpdate();
    }
    </script>
  4. vm.$nextTick:将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。
    <p>
    <button onclick="xiugai()">修改</button>
    </p>
    <div id="app">
    {{message}}
    </div>
    <script>
    var abc = Vue.extend({
    template: "<p>{{message}}</p>",
    data: function () {
    return {
    message: "Hello my Girl!"
    }
    },
    destroyed: function () {
    console.log("销毁之后");
    },
    updated: function () {
    console.log("被更新之后");
    }
    });
    var vm = new abc().$mount("#app");
    function xiugai() {
    vm.$nextTick(function () {
    console.log("更新完后被调用");
    });
    }

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_41581499/article/details/79975858

Vue实例的一些简单方法

{{a}}
  • github_26672553
  • github_26672553
  • 2017-01-20 16:17:56
  • 2617

Vue2 实例属性 实例方法 实例事件

一.实例属性 $el {{ message }} var vm2 = new Vue({ el:"#app2", data:{ ...
  • xuanwuziyou
  • xuanwuziyou
  • 2017-09-18 17:47:49
  • 372

Vue实例的属性和方法

属性: vm.$el:获取Vue实例关联的DOM元素     vm.$data:获取Vue实例的data选项(对象);     vm.$options:获取Vue实例的自定义属性(如vm.$optio...
  • codesWay
  • codesWay
  • 2018-02-12 13:22:57
  • 65

VUE整理(二)

  • 2017年12月05日 16:52
  • 24KB
  • 下载

Vue基础之Vue实例

vue基础-vue实例
  • tian361zyc
  • tian361zyc
  • 2017-05-25 10:26:17
  • 430

vue实例的简单属性和方法调用

$mount() // 等同于 el: {{a}} var vm=new Vue({ data:{ ...
  • zw1046921704
  • zw1046921704
  • 2017-05-12 18:01:50
  • 286

Vue之实例属性

一、 组件树 1. $parent:用来访问组件实例的父实例 2. $root: 用来访问当前组件树的根实例 3. $children:用来访问当前组件实例的直接子组件实例 4. $refs:...
  • u014032819
  • u014032819
  • 2017-12-16 22:17:07
  • 228

Vue.js 2.0从入门到放弃---入门实例(二)

用Vue.js 2.0和vue-router 2.0做的一个简单实例,通过实例来学习vuejs。
  • u013182762
  • u013182762
  • 2016-11-03 23:22:36
  • 37834

静态方法和实例方法联系与区别

静态方法与实例方法联系与区别
  • sx5273
  • sx5273
  • 2017-01-11 15:24:11
  • 2650

vue.js-demo

  • 2018年02月05日 21:45
  • 417KB
  • 下载
收藏助手
不良信息举报
您举报文章:Vue学习—实例(二)实例方法
举报原因:
原因补充:

(最多只允许输入30个字)