vue指令以及dom操作
“AngularJS 通過被稱為 指令 的新屬性來擴充套件 HTML。AngularJS 通過內建的指令來為應用新增功能。AngularJS 允許你自定義指令。”
這是我最初接觸“指令”這個詞。還記得那時候，ng大行其道的時候，我特別好奇怎麼給一個div加一個"ng-app" 就能解決這麼多問題。
後來隨著前端工作的深入，我用了jq的data-attr並且學會了jq的外掛使用。但，這這並不能讓我把它“指令”聯想到一塊，後來外掛需要給節點加個標示來顯示某種“狀態管理” 我用了class 例如:pending,loading-end.
但是感覺和樣式混在一塊總是感覺不自在，後來我直接新增一個自定義標籤 例如:attr-pending,attr-loading-end,通過dom上的自定義標籤來標示某個狀態是否完成。
在這個時候，發現"attr-pending,attr-loading-end"與“ng-app,ng-html”什麼的非常類似，才恍然大悟，其實“指令”也可以理解為"標識",而具體的邏輯與它無關，它只是一個“標識”罷了。至於，ng-repeat，ng-click 同樣可以理解某個程式在dom上一個“標識” 程式通過它來掛載某個功能。
現在接觸了vue,vue比ng在開發上來說程式碼量很明顯少了很多，“指令”一般開發人員不需要自己來實現。但是如果是開發一套ui互動的元件，還是很需要它。
------------------------------------------------------------------------------------------------------------------------------------
----------------------------------直接複製---------------------------------------------------------
- bind: 僅呼叫一次，當指令第一次繫結元素的時候。
- update: 第一次是緊跟在 bind 之後呼叫，獲得的引數是繫結的初始值；以後每當繫結的值發生變化就會被呼叫，獲得新值與舊值兩個引數。
- unbind：僅呼叫一次，當指令解綁元素的時候。
1.指令的註冊
指令跟元件一樣需要註冊才能使用，同樣有兩種方式，一種是全域性註冊:
Vue.directive('dirName',function(){
//定義指令
});
另外一種是區域性註冊：
new Vue({
directives:{
dirName:{
//定義指令
}
}
});
2.可在指令函式配置中直接修改DOM[支援資料驅動] input裡面的值修改的時候#demo裡面的vue也會自動同步
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
</head>
<body>
<div>
<p>展示vue指令----vue和元素dom操作的完美結合【拓展】</p>
<p>{{msg}}</p>
<input type="text" v-model="msg">
</div>
<div id="demo" v-demo-directive="LightSlateGray : msg"></div>
<script>
Vue.directive('demoDirective', {
bind: function () {
this.el.style.color = '#fff'
this.el.style.backgroundColor = this.arg
},
update: function (value) {
this.el.innerHTML =
'name - ' + this.name + '<br>' +
'raw - ' + this.raw + '<br>' +
'expression - ' + this.expression + '<br>' +
'argument - ' + this.arg + '<br>' +
'value - ' + value
}
});
var demo = new Vue({
el: 'body',
data: {
msg: 'hello!'
}
})
</script>
</body>
</html>官網連結:http://v1-cn.vuejs.org/guide/custom-directive.html
相關推薦
vue指令以及dom操作
“AngularJS 通過被稱為 指令 的新屬性來擴充套件 HTML。AngularJS 通過內建的指令來為應用新增功能。AngularJS 允許你自定義指令。”這是我最初接觸“指令”這個詞。還記得那時候，ng大行其道的時候，我特別好奇怎麼給一個div加一個"ng-app"
vue指令與$nextTick 操作DOM的不同之處
非同步更新佇列 可能你還沒有注意到，Vue 非同步執行 DOM 更新。只要觀察到資料變化，Vue 將開啟一個佇列，並緩衝在同一事件迴圈中發生的所有資料改變。如果同一個 watcher 被多次觸發，只會被推入到佇列中一次。這種在緩衝時去除重複資料對於避免不必要的計算和 DOM 操作上非常
JavaScript的字串、陣列以及DOM操作總結
（一）JavaScript字串操作 JavaScript的字串就是用' '或" "括起來的字元表示，日常的學習中有時候需要對字串進行相關的操作。例如要獲取字串某個指定位置的字元，須使用類似Array陣列的下標操作，索引號從0開始： var str='Hello Worl
vue怎麽不通過dom操作獲取dom節點
urn mil tar code class func pla ret 消失 今天寫一個公眾號的項目，寫了一個vue的搜索組件，點擊搜索框時，背景出現一個遮罩，代碼結構如下： template:`<div class="searchBar-div">
JS基礎--函數與BOM、DOM操作、JS中的事件以及內置對象
對話框 回車 == 問題 tde tle ets fixed 訪問 前 言 絮叨絮叨 這裏是JS基礎知識集中講解的第三篇，也是最後一篇，三篇JS的基礎，大多是知識的羅列，並沒有涉及更難得東西，幹貨滿滿！看完這一篇後，相信許多正在像我一樣正處於初
DOM操作指令
back mov 類名 script 執行 語句 tel 進行 ack 查找元素： document.getElementById 查找元素的id，由於id是唯一的，所以查找出的是一個單獨的變量； document.getElementsByClassName 利用類名查
Windows下常用的100個CMD指令以及常見的操作
ron 前景 計劃任務 net view 次數 將不 -o dos系統 子目錄 gpedit.msc—–組策略 2. sndrec32——-錄音機 3. Nslookup——-IP地址偵測器 ，是一個 監測網絡中 DNS 服務器是否能正確實現域名解析的命令行工具
JavaScript的BOM、DOM操作、節點以及表格（二）
wid UNC HR 匿名函數 ast clone BE tab 位置 BOM操作 一、什麽是BOM BOM（Browser Object Model）即瀏覽器對象模型。 BOM提供了獨立於內容 而與瀏覽器窗口進行交互的對象； BOM由一系列相關的對象構
Vue.js如何獲得兄弟元素，子元素，父元素（DOM操作）
<button @click = “clickfun($event)”>點選</button> methods: { clickfun(e) { // e.target 是你當前點選的元素 // e.currentTarget 是你繫結事件的元素 } }, #獲得點選元素的
vue專案中傳送請求獲取到的資料渲染到介面之後無法對其進行DOM操作的問題
vue.js通常鼓勵開發人員沿著“資料驅動”的方式思考，避免直接接觸DOM。this.$nextTick()將回調延遲到下次DOM更新迴圈之後執行。在修改資料之後立即使用它，然後等待DOM更新。它跟全域性方法vue.nextTick一樣，不同的是回撥的this自動繫結到呼叫它的例項上。 &nbs
說說 Vue.js 中的 v-model 指令以及如何繫結表單元素
我們可以使用 Vue.js 中的 v-model 指令來完成表單資料的雙向繫結。 1 基礎用法 1.1 文字輸入框（text） 這裡演示了在文字輸入框上輸入的內容，會實時對映到繫結的資料上。 html： <div id="app"> <inp
Vue基礎以及指令 Vue 基礎篇一
Vue 基礎篇一 一、Vue框架介紹 之前大家學過HTML，CS
根據我開發過的六七個vue專案以及獨立開發的3個vue專案總結，手把手教你搭建一個結構清晰易開發易維護的公司的Vue專案，包含axios服務，vuex，公共元件/指令/過濾器/服務等
看了網上有很多搭建vue專案的demo，但是不是已經年久失修的專案就是很簡單的demo，那些只能做新手參考並不能直接拿來用。我近兩年中已經參與了六七個vue專案的開發，包含PC端、客戶端、手機端，其中獨立負責的vue專案主要為微信公眾號的開發。而在每個專案中，我都會取長補短的去搭建自己的專案，經
Vue.js 獲得兄弟元素，子元素，父元素（DOM操作）
pre lin col bsp 操作 attr current 綁定 tar e.target 是你當前點擊的元素 e.currentTarget 是你綁定事件的元素 e.currentTarget.previousEle
mongodb操作指令以及在node.js封裝mongodb的操作方法
1、啟動mongodb： cd path/mongodb/bin // 開啟命令列，切換到mongodb目錄下的bin目錄 mongod --dbpath path/mongodb/data/db // 設定p
vue的子元件操作父元件以及父元件操作子元件
1.子元件操作父元件 要為子元件建立一個ref屬性並且為它賦值，<chlid ref="title"></chlid> 然後在父元件中通過this.$refs.ref的屬性 來值呼叫它 比如：父元件 <template id="parent"> &nb
當代前端應該怎麼寫這個hello world？ 從DOM操作看Vue&React的前端元件化，順帶補齊React的demo 【前端優化之拆分CSS】前端三劍客的分分合合
前言 大概16年的時候我們隊react進行了簡單的學習：從DOM操作看Vue&React的前端元件化，順帶補齊React的demo，當時我們只是站在框架角度在學習，隨著近幾年前端的變化，想寫個hello world似乎變得複雜起來，我們今天便一起來看看現代化的前端，應該如何做一個頁面，今天我們學習r
Vue過濾器,自定義指令,ES6字串操作
陣列的方法 以下方法都會對陣列中的每一項進行遍歷, 並執行相關的操作; forEach: 無法被終止 some: 可以通過return true終止 filter: 可以過濾 findIndex: 可以找到相應物件的索引 刪除/增加index個後的陣列元
java開發C語言編譯器：jvm的return指令以及區域性變數的操作
請結合視訊閱讀本文以便獲得更清晰的理解。 更詳細的講解和程式碼除錯演示過程，請參看視訊 用java開發C語言編譯器 如果你對機器學習感興趣，請參看一下連結： 機器學習：神經網路導論 jvm執行位元組碼時，程式碼的執行必須圍繞兩種資料結構，一種
Vue中獲取要操作的元素DOM
在使用Vue的時候，有時候我們希望直接用Js操縱DOM來實現某些效果，具體實現只用利用Vue提供的ref屬性以及this.$refs即可實現。下面放一個小DEMO！ <!DOCTYPE html