如何利用Vue.js庫實現自定義指定

在Vue.js庫中,有時內置指令不能滿足需求,這時需要自定義指令來作為支持。自定義指令是一個將數據變化映射成元素變化。可以使用directives註冊自定義指令。下面利用一個實例說明自定義指令的用法,操作如下:

工具/原料

Vue.js
HBuilder
瀏覽器
截圖工具
CSS
HTML

方法/步驟

第一步,雙擊打開HBuilder編輯工具,創建靜態頁面vdefine.html,並引入vue.js和vue.common.js,如下圖所示:

第二步,body元素插入div和p,設置對應的ID屬性,

<div id="vdefine" v-define="{color:'red',text:'您好',label:'附加條件'}">           <p id="vdePtag">自定義指令</p></div>

如下圖所示:

第三步,在<script></script>標籤內編輯創建自定義標籤,注意指定對應的元素,如下圖所示:

第四步,預覽頁面發現自定義標籤內列印的數據為undefined,說明自定義標籤不起作用,如下圖所示:

第五步,修改js代碼,並列印自定義指令里的值,根據這個進行查看,如下圖所示:

第六步,將下面代碼進行修改

var define = new Vue({                el:'#vdefine'            });

如下圖所示:

注意事項

注意自定義指令和Vue.js內置指令的區別
注意自定義指令定義的方法

相關文章

  1. 如何利用Vue.js庫中的v-on指令綁定按鈕點擊事件

    Vue.js庫中的v-on指令用於綁定事件監聽器,v-on指令後可以帶參數,還可以增加修飾符.按鈕點擊事件也是v-on指令來綁定,利用v-on:click.下面利用一個說明v-on指令的用法,操作如下 ...
  2. 如何利用Vue.js庫中的v-bind綁定樣式屬性

    Vue.js庫中的v-bind指令用於響應HTML元素的特性,可以是一個或多個屬性,也可以是一個動態的表達式.v-bind主要是綁定不同的樣式和屬性,如style.class和src等.下面利用一個實 ...
  3. 如何利用Vue.js庫設計無序列表

    Vue.js是web交互的一種庫,有豐富的API文檔.無序列表是可以利用ul和li標籤實現,展示整齊的字符內容:無序列表默認展示的是以黑色的點,而有序列表是顯示數字.下面利用一個實例說明Vue.js庫 ...
  4. 如何利用Vue.js庫中的v-model綁定表單中的數據

    Vue.js跟AngularJS一樣,具有雙向綁定功能,而Vue.js實現雙向綁定功能的是v-model,v-model可以作用於表單元素上,自動獲取更新元素的數據.如果表單數據發生改變,其他的綁定數 ...
  5. 如何利用Vue.js庫中的v-show顯示和隱藏元素

    Vue.js庫中v-show指令是根據表達式的值來顯示或隱藏HTML元素,當v-show的值為true,表示元素顯示:如果v-show值為false,表示元素隱藏.下面利用一個實例說明v-show命令 ...
  6. 如何利用Vue.js庫綁定HTML標籤內的class屬性值

    在HTML文件內設置元素樣式可以利用class選擇器,如果出現多個class,可以寫成class="a b c".那麼,在Vue.js中該如何綁定HTML多個class?答案是用v ...
  7. 如何利用Vue.js庫實現表單校驗

    表單校驗是web開發中一個重要環節,當用戶輸入錯誤的字符或者未輸入字符(必填項),表單校驗可以給用戶一個提示,幫助用戶完善輸入內容.Vue.js庫也具有校驗功能,利用vue-validator插件實現 ...
  8. 如何利用Vue.js庫中的綁定內聯樣式v-bind:style

    一般HTML文件里元素設置樣式,利用的是style屬性,如style="font-size:12px;color:#FF0000;width:400px;height:500px;" ...
  9. 如何利用Vue.js庫中的v-text指令綁定數據源

    Vue.js庫中的v-text指令可以更新元素的內容,{{變量}}也可以綁定一個v-text指令.在給Vue.js變量設置一個值,然後利用v-text進行綁定.下面利用一個實例說明v-text指令的用 ...
  10. 如何利用Vue.js庫中的v-for循環生產有序列表

    Vue.js庫中生成循環遍歷數據,利用v-for,類似JavaScript中的for循環.有序列表是有序號的列表,它含有的數據可以利用v-for指令循環出來.使用這兩者結合起來,可以快速地生成有序列表 ...
  11. 如何利用Vue.js庫中的v-html指令添加html元素

    Vue.js庫中的v-html指令,可以更新元素的innerHMTL,按照普通HTML元素插入:可以利用{{變量}}綁定數據.下面利用一個實例說明v-html指令的用法,操作如下: 工具/原料 Vue ...
  12. 如何利用Vue.js庫中的v-if內部指令判斷元素顯示

    Vue.js庫中帶有一些內部指令,有v-if.v-show.v-else.v-on等.其中,v-if是根據表達式的值判斷一個元素是生成或移除,如果判斷為true,就生成元素:否則,移除元素.下面利用一 ...
  13. 如何利用Vue.js庫實現兩個數據進行加法運算

    Vue.js庫中具有計算屬性,根據輸入的值發生改變,其計算結果也發生改變.屬性值綁定需要用到v-model,這裡計算兩個數的和,當其中一個或兩個數據改變時,它們的和也隨之發生改變.下面利用一個實例使用 ...
  14. 如何利用Vue.js庫註冊組件並顯示在界面上

    組件是Vue.js的功能之一,可以減少代碼量.可重複使用.組件可以有全局設定和局部設定,全局設定就是在父模塊上定義,沒有下級:局部設定就是讓組件放在其他組件內.註冊組件就是註冊界面,有用戶名.密碼等信 ...
  15. vue.js自定義過濾器

    vue.js是一個構建數據驅動的 web 界面的漸進式框架.Vue.js 的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件.簡單容易學習也可以自定義一些自己的過濾方法 工具/原料 ...
  16. jQuery庫與其他JS庫衝突的解決辦法

    現在的js庫很多,而且各有所長,我就比較喜歡jQuery,但同時也會使用一下其他的js庫,如prototype.js.但是它們卻時不時地相互鬧些小矛盾,真是讓人頭痛.究其原因,原來是它們的全局對象定義 ...
  17. 怎樣利用美圖秀秀調整圖片指定大小

    現在許多網上報名,或網上驗證資料需要上傳照片,而且有的要求嚴格的還制定了相應的高寬.那麼如何利用美圖秀秀調整圖片指定大小呢. 工具/原料 美圖秀秀 圖片 方法/步驟 首先打開美圖秀秀,選擇" ...
  18. 如何利用ionic代碼庫中的不同樣式設置按鈕欄

    ionic是以AngularJS語法作為基礎的,但是它自身帶有大量的樣式類,可以設計出不同樣式的組件.下面利用一個實例說明利用ionic自帶的樣式對按鈕欄進行設計,操作如下: 工具/原料 HBuild ...
  19. 如何利用ionic代碼庫製作按鈕欄獲取按鈕標籤值

    ionic是一個開源的.免費的移動開發代碼庫,是基於AngularJS語法的:提供了大量的樣式,可以直接使用.下面利用一個實例說明使用ionic製作按鈕欄並獲取按鈕標籤值,操作如下: 工具/原料 HB ...
  20. 如何利用微信樣式庫設計按鈕

    微信作為現在非常流行的交流方式,對它研究的人也越來越多,對手機端的展示也越來越高了.微信公眾平台開發了自己的樣式庫,可以利用它設計更好.兼容性更好的頁面.那麼,下面講述下如何利用微信樣式設計按鈕,具體 ...