2. 程式人生 > >vue的常用實例方法--$mount(),$destroy(),$watch(),$forceUpdate()

vue的常用實例方法--$mount(),$destroy(),$watch(),$forceUpdate()

阿新 • • 發佈：2019-02-17
mes col methods style console 更新 實例化 date() troy

常用的實例方法： 
$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>

vue的常用實例方法--$mount(),$destroy(),$watch(),$forceUpdate()

相關推薦

Vue2.0筆記——Vue常用實例屬性，實例方法

Vue實例屬性 vm.$el vm.$data vm.options vm.$refs vm.$root vm.$el 該實例屬性用於獲取Vue實例使用的根DOM元素,即el選項所指的元素DOM <body> <div id="app"> <h4>你好，這是四級

vue的常用實例方法--$mount(),$destroy(),$watch(),$forceUpdate()

mes col methods style console 更新 實例化 date() troy 常用的實例方法： $mount（）外部設置el, vue的作用範圍 $destroy()手動銷毀 $watch()監聽 $forceUpdate()強制更新

vue11 vue實例方法

utf char bsp www cti str con itl b- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t

ajax常用實例代碼總結參考

瀏覽器兼容 var edi else article ndt ons font 名稱 http的交互方法有四種：get、post、put(增加數據)、delete(刪除數據) put和delete實現用的是get和post get方式 頁面不能被修改，只是獲取查詢信息

VUE入門實例，模版組件用法

模板 children 容器 nsh .com mount use script pla 終於見到vue模板組件實例了 來源於 http://www.jianshu.com/p/23e041fc013e 第一種 //首先，別忘了引入vue.js<div id="us

靜態方法與實例方法

內部 缺點 name 使用 而且 getc .... 調用 屬於 分四個方面來看看C#靜態方法與非靜態方法的差異： C#靜態方法與非靜態方法比較一、C#靜態成員： ①靜態成員屬於類所有，非靜態成員屬於類的實例所有。 ②每創建一個類的實例，都會在內存中為非靜態成員新分配一塊存

Vue.js 實例和內置組件 入門

接收 bootstra red jquery 技術 屬性和方法 ots col amp 首先來看看實例的概述： 實例就是在構造器外部操作操作構造器內部的屬性和方法。 實例的作用就是給Vue提供與其它js及其框架結合使用的接口。 進入實例階段： 首先來看 Vue.js 搭

6. 靜態方法和實例方法

blog ron 方法調用 int static關鍵字 oid amp 關鍵字 進行 1、定義 　　（1）靜態方法：有static關鍵字即為靜態方法；　　作用：簡化編程，方便調用。 　　（2）實例方法：不含static關鍵字的即為實例方法。即使用實例對象調用的方法； 2、方

創建一個 Vue 的實例

技術 就是 doc utl pda 可復用 read ack eve 每個 Vue 應用都是通過 Vue 函數創建一個新的 Vue 實例開始的： var vm = new Vue({ // 選項 }) 因此在文檔中經常會使用vm (ViewModel 的簡稱

Vue購物車實例

eth name als blog 易懂 代碼 多說 compute app 這是效果圖 看起來很簡單是不是 之前一直寫Jquery代碼 總是想著 DOM 操作 思維感覺沒有切換過來 想了很久,最後使用Vue的屬性進行控制,實現了多選計算屬性的功能 直接上源碼!

Java多線程 5：Thread中的實例方法

守護 nds 屬性 exc pre 在線 結束 正在 ini Thread類中的方法調用方式：快速到底 學習 Thread 類中的方法是學習多線程的第一步。在學習多線程之前特別提出一點，調用 Thread 中的方法的時候，在線程類中（千萬別忘記了這個前提條件），有兩種方式

python3的實例方法

文檔 ack sim 字符 形參 文檔字符串 info 類型 sel 1. 語法class 類型(繼承列表):def 實例方法名(self,形式參數1,形式參數2,...) "文檔字符串" 語句..2. 作用用於描述一個對象的行為.，讓此類型

vue各種實例集合

url ins creat 手動 .org created v-on cdn html 註意：以下所有示例基於vue 2.x、Vuex 2.x、 vm.$mount()-掛載： <body> <div id="a"> </di

類的實例方法

傳參 ise 小時 方法名 行為 pri class lee 語句 實例方法 method 語法: class 類名(繼承列表): def 實例方法名(self, 參數1, 參數2, ...): ‘文檔字符串‘

靜態方法和實例方法

不能 static關鍵字 不一定 name oid lin 包括 判斷 特定 判斷是否靜態方法的標識 1) 有static關鍵字：靜態方法 2) 沒用static關鍵字：實例方法 區別： 靜態方法部隊特定實例進行操作，靜態方法只能訪問類中的靜態成員，而

python中@staticmethod、@classmethod和實例方法

dir pri cep ear 代碼 應用 can 打印 靜態 1.形式上的異同點： 在形式上，Python中：實例方法必須有self，類方法用@classmethod裝飾必須有cls，靜態方法用@staticmethod裝飾不必加cls或self，如下代碼所示： 1

Python：類屬性，實例屬性，私有屬性與靜態方法，類方法，實例方法

所有 參數 方法 rate self 類屬性 不能 anaconda 賦值 類屬性可以直接在方法中賦值，但 一、調用該屬性時，必須先調用該方法； 二、與 init 方法區別是，init方法只初始化一次，初始化完成後作為全局變量。在方法中賦值屬性，每次調用該方法，該屬性初始化

Python-類方法、靜態方法、實例方法

utf-8 調用 orm method ati instance 靜態 color () #coding=utf-8 class Clsf(): nm=‘Class name‘ def __init__(self,nm): self.nm=

實例方法

elf 實例方法 compute 需要 傳遞 工作 字典 串操作 .... class Computer: # 實例方法 def play(self): print("電腦可以掃雷") # 在定義實例方法的時候. 必須給出一個參

（一）Python入門-6面向對象編程：02類的定義-類和對象的關系-構造函數-實例屬性-實例方法

語句塊 訪問 也不能 form 行為 sizeof 對象創建 div span 一：類的定義 　　如果把對象比作一個“餅幹”，類就是制造這個餅幹的“模具”。 　　我們通過類定義數據類型的屬性（數據）和方法（行為）,也就是說