实例方法 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例方法</title>
    <meta name="flexible" content="initial-dpr=2,maximum-dpr=3" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <script src="../assets/js/flexible_css.js"></script>
    <script src="../assets/js/flexible.js"></script>
    <script src="../assets/js/jquery-3.2.1.js"></script>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="app">
        
    </div>
    <button onclick="destroy()">销毁</button>
    <button onclick="reload()">刷新</button> 
    <button onclick="tick()">数据更改</button> 
</body>
<script type="text/javascript">
    var cai=Vue.extend({  //   扩展器
        template:`<p>{{message}}</p>`,  //模版
        data:function(){   //数据
            return {
                message:'你好我蔡蔡'
            }
        },
        mounted:function(){  //挂载运行次方法
            console.log('mounted 被创建！')
        },
        destroyed:function(){  //销毁后 调用次方法  生命周期
            console.log('destroyed  销毁之后')
        },
        updated:function(){
            console.log('updated更新后')
        }
    })
    var vm=new cai().$mount("#app");  //挂载
    function destroy(){  //  js方法函数
        vm.$destroy();    //销毁
    }
    function reload(){
        vm.$forceUpdate();  //更新
    }
    function tick(){
        vm.message="修改后的内容";
        vm.$nextTick(function(){  //数据修改方法  在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
            console.log('message更改完成后我被调用了');
        })
    }

</script>
</html>

 

posted @ 2018-02-28 23:24  Jinsuo  阅读(152)  评论(0)    收藏  举报