Vue 实例方法

xml 复制代码
<!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>
相关推荐
乌旭1 小时前
量子计算与GPU的异构加速:基于CUDA Quantum的混合编程实践
人工智能·pytorch·分布式·深度学习·ai·gpu算力·量子计算
艾小逗1 小时前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
deephub2 小时前
CLIMB自举框架:基于语义聚类的迭代数据混合优化及其在LLM预训练中的应用
人工智能·深度学习·大语言模型·聚类
小小小小宇3 小时前
手写 zustand
前端
Hamm4 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
小小小小宇5 小时前
前端国际化看这一篇就够了
前端
大G哥5 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext5 小时前
html初识
前端·html
小小小小宇5 小时前
一个功能相对完善的前端 Emoji
前端
m0_627827525 小时前
vue中 vue.config.js反向代理
前端