Vue 实例方法

最新推荐文章于 2023-06-28 08:30:00 发布

Json____

最新推荐文章于 2023-06-28 08:30:00 发布

阅读量358

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Drug_/article/details/81136138

版权

前端专栏收录该内容

87 篇文章 0 订阅

订阅专栏

技术QQ交流群:294088839

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 实例方法</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue 实例方法</h1>
<hr>
<div id="app">

</div>
<p><button οnclick="destroy()">卸载</button></p>
<p><button οnclick="reload()">刷新</button></p>
<p><button οnclick="tick()">修改</button></p>
</body>
</html>
<script>
 var whl=Vue.extend({
     template:`<p>{{info}}</p>`,
     //扩展的直接写对象是不行的 必须用匿名函数来命名数据
     data:function () {
         return{
             info:'我是中国人'
         }
     },
     //挂载的时候执行
     mounted:function () {
         console.log('我是挂载的时候触发')
     },
     //删除的时候触发
     destroyed:function () {
         console.log('我是卸载的时候触发')
     },
     //被更新的时候触发
     updated:function () {
         console.log('我是更新之后触发')
     }
 })
    //构造  挂载方法 $mount
    var vm = new whl().$mount('#app')
   function destroy(){
     // 销毁 $destroy
      vm.$destroy();
   }

   function reload(){
     //刷新的方法
      vm.$forceUpdate()
   }
   //数据修改方法
    function tick(){
       vm.info='我更新该了';
       vm.$nextTick(function(){
           console.log('info更新完了 调用')
       })
    }
</script>