zoukankan      html  css  js  c++  java
  • vue----常用实例方法--$mount(),$destroy(),$watch(),$forceUpdate()

    常用的实例方法:
    $mount()外部设置el,  vue的作用范围
    $destroy()手动销毁
    $watch()监听
    $forceUpdate()强制更新

    1.$mount()外部设置el, vue的作用范围

    <body>
        <div id="app">
            <h2>{{message}}</h2>
        </div>
     
        <button onclick="add()">添加el</button>
    </body>
    </html>
    <script src="vue.js"></script>
    <script>
     
        var vm = new Vue({
            data:{
                message:"张三"
            }
        })
     
        //实例外创建el
        function add(){
            //外部设置el。vue的作用范围
            vm.$mount("#app");
        }
     
    </script>
     
     
    <body>
        <div id="app">
            <h2>{{message}}</h2>
            <p>{{age}}</p>
            <input type="text" v-model="obj.name">
            <button @click="watchDeep()" >外部监听</button>
     
        </div>
     
        <button onclick="add()">添加el</button>
        <button onclick="destroy()">销毁</button>
        <button onclick="update()">强制更新</button>
        
    </body>
    </html>
    <script src="vue.js"></script>
    <script>
     
        var vm = new Vue({
            data:{
                message:"张三",
                obj:{
                    name:"张三",
                    age:18
                }
            },
            methods:{
                watchDeep(){
                    this.$watch("obj",()=>{
                        console.log("事件监听");
                    },{
                        deep:true
                    })
                }
            }
        })
     
        vm.age = 18;
     
        //实例外创建el
        function add(){
            //外部设置el。vue的作用范围
            vm.$mount("#app");
        }
     
        function destroy(){
            //销毁vm实例与DOM之间的关联
            vm.$destroy();
        }
     
        /*只有在实例化方法中,添加属性,才会有setter和getter方法,实现数据双向通信
            在实例化方法外,添加属性,没有setter和getter方法,不能双向通信,解决方法:强制更新$.forceUpdate()
        */function update(){
            vm.$forceUpdate();
        }
     
        //外部监听
        // vm.$watch("obj",()=>{
        //      console.log("执行监听")
        // },{
        //     deep:true
        // })
     
    </script>
     
     
     
     
     
     
     
     
  • 相关阅读:
    wx-charts 微信小程序图表 -- radarChart C# .net .ashx 测试
    C# dev SearchLookUpEdit 和 RepositoryItemSearchLookUpEdit 测试
    C# Dev XtraReport 简单测试
    SQL查询,关联查询的区别 (LEFT JOIN 、LEFT OUTER JOIN、INNER JOIN)
    NPOI 读取Excel文件
    C# 截屏
    C# 程序运行进度显示Lable
    gridcontrol 添加行删除行
    C# 任务 数据加载不影响其他操作
    ChartControl ViewType.Pie3D 用法测试
  • 原文地址:https://www.cnblogs.com/SRH151219/p/10390276.html
Copyright © 2011-2022 走看看