zoukankan      html  css  js  c++  java
  • vue实例方法 example methods

    介绍几个vue 的实例方法:

    - $destroy()==>销毁方法

    - $forceUpdate()==>更新方法

    - $nextTick()==>数据修改方法

    需要配合钩子函数使用

    具体代码如下:

    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>example methods demo</title>
    <script src="../assets/js/vue.js"></script>
    <script src="../assets/js/jquery-3.1.0.min.js"></script>
    </head>

    <body>
    <h1>example methods demo</h1>
    <hr>
    <div id="app"></div>
    <button onclick="destroy()">destroy</button>
    <button onclick="reload()">reload</button>
    <button onclick="tick()">tick</button>

    <script>

    var js = Vue.extend({
    template: `<p>{{ message }}</p>`,
    data() {
    return {
    message: 'hello'
    }
    },
    mounted() {
    console.log('mounted 被创建');

    },
    destroyed() {
    console.log('destroyed 销毁之后');

    },
    updated() {
    console.log('updated 更新之后');
    },
    })
    var vm = new js().$mount('#app')

    function destroy() {
    vm.$destroy() // 销毁方法
    }

    function reload() {
    vm.$forceUpdate() // 更新方法
    }

    function tick() {
    vm.message = 'updated message info'
    vm.$nextTick(function () { // 数据修改方法
    console.log('message 更新后调用');

    })
    }
    </script>
    </body>

    </html>

  • 相关阅读:
    Ajax缓存的几种处理方式
    Day--1--网络协议
    Day4--js--递归各种大法渡难关
    你以为的BUG--BFC给你解决!
    Day3--js--可恶之变量声明提升大法.。。
    Day2--js--烧脑睿智循环的练习题
    ERwin创建逻辑模型
    ERwin入门
    Oracle存储过程由例子到理论
    oracle存储过程
  • 原文地址:https://www.cnblogs.com/sunyang-001/p/11105814.html
Copyright © 2011-2022 走看看