mvvm 如何進行dom的操作

單頁面應用已經成為了我們前端工程師開發中的常客，我們總是會遇到這樣的情況如何從傳統的dom操作中走出來，以前我們進行dom操作，用的是js的document.getelementbyid，document.getelementsbyclassname，jquery的$('***')來進行操作，所以從傳統的web前端轉型過來的工程師，我們總是想著如何在mvvm中使用jquery.js，zepto.js來加快我們的開發，這樣的開發想法其實並沒有什麼錯誤，為了更好更快的開發嗎，但是我們既然用mvvm的框架進行開發就要掌握它的使用的正確姿勢，做為乙個vue.js開發的忠實愛好者和開發者，我就以它為例來進行介紹。

從我接觸到的angular和vue，它們都有directive這個概念，正所謂美好的事物總有相通之處。下面我們就來介紹一下directive這個概念在vue框架中所起的作用，指令作為vue框架中很重的一環，在vue中常用的有v-for, v-text， v-model，v-if， v-bind， v-on等，這些框架內建的指令我們在實用的過程中很常見，正是由於它們的存在從而使我們加快了開發中的速度，這根本的原因是我們對dom的操作更加方便，我們只需要通過簡單的幾行**就可以實現傳統開發中幾十行**實現的效果。

dom結構

this is 1 pargraph

this is 2 pargraph

this is 3 pargraph

this is 4 pargraph

js **

var vm = new vue(,
directives: 
}});效果：

根據使用的作用域的不同我們認為的將指令分為全域性指令和區域性指令，上面的例項即為區域性指令，將它轉換為全域性指令其實很簡單，這和我們自定義元件使用方法一致。處理形式如下：

var vm = new vue(
});vue.directive('tcolor', function(el, binding));

注意：在使用mvvm框架時，們應該注意在使用指令是要先定義指令，在mvvm開發時若我們需要某個外掛程式或某個元件的話我們應該先定義這個外掛程式元件，或指令，以及是說我們要在最後指定元素的容器。

上面所講只是指令的常規應用，在開發專案時我們可能因為開發需求的不同需要對專案做一些特殊處理。以下四個鉤子函式可以解決我們遇到的大部分問題。

bind: 只呼叫一次，指令第一次繫結到元素時呼叫，用這個鉤子函式可以定義乙個在繫結時執行一次的初始化動作。

inserted: 被繫結元素插入父節點時呼叫（父節點存在即可呼叫，不必存在於 document 中）。

update: 所在元件的 vnode 更新時呼叫，但是可能發生在其孩子的 vnode 更新之前。指令的值可能發生了改變也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新 (詳細的鉤子函式引數見下)。

componentupdated: 所在元件的 vnode 及其孩子的 vnode 全部更新時呼叫。

unbind: 只呼叫一次，指令與元素解綁時呼叫。

這些鉤子函式都包含了這樣幾個引數el, binding, vnode, oldvnode,其中binding引數是乙個物件包含value, oldvalue,name, expression,arg,modifiers六個屬性。

最後一句話，也是個人的心得體會，『要想mvvm用的好，就遠離jquery，zepto』，我這裡並不是說jquery不好，但是我們既然用mvvm就要充分發揮這個框架的特性，從而使我們的應用的效能達到最佳。

mvvm 如何進行dom的操作

如何進行svn relocate 操作

如何進行svn relocate 操作

如何進行批量更新操作

mvvm 如何進行dom的操作

如何進行svn relocate 操作

如何進行svn relocate 操作

如何進行批量更新操作

相關推薦