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>
相关推荐
庸俗今天不摸鱼33 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下40 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周1 小时前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei2 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码2 小时前
Spring Task 定时任务
java·前端·spring