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

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

工具/原料

Vue.js
HBuilder
瀏覽器
截圖工具

方法/步驟

第一步,創建靜態頁面von.html,並引入vue.js關鍵的核心js文件,如下圖所示:

第二步,在主題元素下插入div標籤元素,並在其中插入一個input輸入框和一個按鈕,利用v-on指令綁定點擊事件queryDate,如下圖所示:

第三步,在div標籤下方編寫vue.js點擊事件,事件是獲取當前日期,如下圖所示:

第四步,為了讓輸入框和按鈕有間距,這裡設置body元素樣式,如下圖所示:

第五步,預覽該靜態頁面,然後點擊按鈕,發現輸入框沒有值,調試下發現錯誤,缺少jquery核心js文件,如下圖所示:

第六步,引入jquery核心js文件後再次預覽頁面,並單擊按鈕,這時日期就顯示在輸入框內,如下圖所示:

注意事項

注意利用v-on指令綁定按鈕點擊事件
注意jquery賦值時需要引入jquery核心js

相關文章

  1. 如何利用Vue.js庫中的v-text指令綁定數據源

    Vue.js庫中的v-text指令可以更新元素的內容,{{變量}}也可以綁定一個v-text指令.在給Vue.js變量設置一個值,然後利用v-text進行綁定.下面利用一個實例說明v-text指令的用 ...
  2. 如何利用Vue.js庫中的v-html指令添加html元素

    Vue.js庫中的v-html指令,可以更新元素的innerHMTL,按照普通HTML元素插入:可以利用{{變量}}綁定數據.下面利用一個實例說明v-html指令的用法,操作如下: 工具/原料 Vue ...
  3. 如何利用Vue.js庫中的v-bind綁定樣式屬性

    Vue.js庫中的v-bind指令用於響應HTML元素的特性,可以是一個或多個屬性,也可以是一個動態的表達式.v-bind主要是綁定不同的樣式和屬性,如style.class和src等.下面利用一個實 ...
  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庫中的綁定內聯樣式v-bind:style

    一般HTML文件里元素設置樣式,利用的是style屬性,如style="font-size:12px;color:#FF0000;width:400px;height:500px;" ...
  7. 如何利用Vue.js庫中的v-for循環生產有序列表

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

    Vue.js庫中帶有一些內部指令,有v-if.v-show.v-else.v-on等.其中,v-if是根據表達式的值判斷一個元素是生成或移除,如果判斷為true,就生成元素:否則,移除元素.下面利用一 ...
  9. 如何利用Vue.js庫設計無序列表

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

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

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

    表單校驗是web開發中一個重要環節,當用戶輸入錯誤的字符或者未輸入字符(必填項),表單校驗可以給用戶一個提示,幫助用戶完善輸入內容.Vue.js庫也具有校驗功能,利用vue-validator插件實現 ...
  13. 如何利用Vue.js庫實現兩個數據進行加法運算

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

    組件是Vue.js的功能之一,可以減少代碼量.可重複使用.組件可以有全局設定和局部設定,全局設定就是在父模塊上定義,沒有下級:局部設定就是讓組件放在其他組件內.註冊組件就是註冊界面,有用戶名.密碼等信 ...
  15. 如何利用ionic代碼庫中的不同樣式設置按鈕欄

    ionic是以AngularJS語法作為基礎的,但是它自身帶有大量的樣式類,可以設計出不同樣式的組件.下面利用一個實例說明利用ionic自帶的樣式對按鈕欄進行設計,操作如下: 工具/原料 HBuild ...
  16. 如何使用Vue.js語法中的插值動態綁定數據

    Vue.js中的語法有插值.指令和表達式,其中插值有文本插值和HTML插值:文本插值就是使用數值.字符串等,利用雙{},綁定數據對象:HTML插值是使用HTML代碼片段綁定數據對象.下面分別講述兩種插 ...
  17. 如何使用Vue.js中的按鈕點擊事件並獲取按鈕屬性

    在Vue.js中,v-on指令是用來綁定按鈕或其他元素事件的,可以是單擊事件.雙擊事件.切換事件等.這個事件函數跟JavaScript常規的事件函數是一樣的,有無參數和有參數的事件函數.下面利用一個說 ...
  18. 如何使用Vue.js中的v-html指令綁定HTML標籤元素

    在Vue.js中,可以使用v-html指定綁定HTML標籤元素,可以根據具體的標籤然後顯示在界面上:可以通過調試代碼,查看生成之後的代碼結構.下面利用一個實例說明v-html指令的用法,操作如下: 工 ...
  19. 如何利用Axure RP 8按鈕點擊事件觸發圖片顯示

    系統中顯示的圖片有時是隱藏,單擊按鈕觸發圖片顯示.Axure RP 8軟體工具中有自帶元件圖片,可以通過按鈕點擊事件控制圖片顯示,下面利用一個實例說明圖片,操作如下: 工具/原料 Axure RP 8 ...
  20. Vue.js 中的 *.Vue文件

    vue.js是一套構建用戶界面的漸進式框架,它採用自底向上增量開發的設計.(自底向上設計方法是根據系統功能要求,從具體的器件.邏輯部件或者相似系統開始,憑藉設計者熟練的技巧和豐富的經驗,通過對其進行相 ...