前端框架vue.js系列（4）：事件修飾符與按鍵修飾符
vue修飾符是指在觸發事件或按鍵時額外的觸發條件或回撥。比如點選事件只允許觸發一次，可以使用@click.once。
原生事件物件
vue可以通過以下方式，獲取原生的事件物件：
<button @click="getEventDom($event);">getEventDom</button> <script> var vue = new Vue({ el: "#app", methods: { getEventDom: function(event) { event.preventDefault(); console.log(event); } } }); </script>
事件修飾符
事件修飾符是指與事件觸發相關的修飾符。按上例中原生事件物件，要阻止冒泡事件需要用到.preventDefault()，然而使用事件修飾符，僅需@click.stop即可。
<button @click.stop="clickStopEvnet"></button>事件修飾符有以下幾種，以click事件為例：
@click.stop 阻止繼續冒泡
@click.capture 由預設冒泡模式轉為捕獲模式
@click.prevent 提交事件不再過載頁面
@click.self 只當事件在該元素本身觸發時觸發回撥
@click.once 僅執行一次
修飾符間可以串聯使用，如用 @click.prevent.self 會阻止所有，而 @click.self.prevent 只會阻止該元素上的。
按鍵修飾符
按鍵修飾符是指與鍵盤事件相關的修飾符。如對Enter鍵的監聽@keyup.enter，快捷組合件的監聽等。按鍵修飾符一般與input標籤配合使用，有以下幾種：
.enter
.tab
.delete (捕獲 “刪除” 和 “退格” 鍵)
.esc
.space
.up
.down
.left
.right
新增修飾符
vue2.x版本後新增了下面幾種修飾符：
.ctrl
.alt
.shift
.meta
修飾符綜合demo：
<body>
<div id="app">
<button @click="getEventDom($event);">getEventDom</button>
<br />
<div @click.capture="outDivClick();" style="width: 200px; height: 200px; background-color: #FF0000;">
<div @click="innerDivClick();" style="width: 100px; height: 100px; background-color: azure;"></div>
</div>
<br />
<input @keyup.enter="enter();" />
<br />
<!-- Ctrl + Click -->
<div @click.ctrl="ctrlClick();">Ctrl + Click</div>
<!-- Alt + C -->
<input @keyup.alt.67="clear();">
</div>
</body>
<script>
var vue = new Vue({
el: "#app",
methods: {
getEventDom: function(event) {
event.preventDefault();
console.log(event);
},
outDivClick: function() {
alert("outDiv");
},
innerDivClick: function() {
alert("innerDiv");
},
enter: function() {
alert("enter");
},
ctrlClick: function() {
alert("ctrl+Click");
},
clear: function() {
alert("clear");
},
}
});
</script>自定義配置按鍵
Vue.config.keyCodes.f1 = 112; // 全域性定以後，就可以使用 @keyup.f1相關推薦
前端框架vue.js系列（4）：事件修飾符與按鍵修飾符
vue修飾符是指在觸發事件或按鍵時額外的觸發條件或回撥。比如點選事件只允許觸發一次，可以使用@click.once。 原生事件物件 vue可以通過以下方式，獲取原生的事件物件： <button @click="getEventDom($event);">
前端框架vue.js系列（10）：生命週期鉤子函式
每個vue例項在被建立之前都要經過一系列的初始化過程。例如需要設定資料監聽、編譯模板、掛載例項到dom、在資料變化時更新dom等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式，給予使用者機會在一些特定的場景下新增他們自己的程式碼。 下圖說明了例項的生命週期。你不需要立
深度學習框架Keras學習系列（一）：線性代數基礎與numpy使用（Linear Algebra Basis and Numpy）
又開一個新坑~~ 因為確實很有必要好好地趁著這個熱潮來研究一下深度學習，畢竟現在深度學習因為其效果突出，熱潮保持高漲不退，上面的政策方面現在也在向人工智慧領域傾斜，但是也有無數一知半解的人跟風吹捧，於是希望藉此教程，讓自己和讀者一起藉助keras，從上到下逐漸
前端JS框架——Vue.js筆記（一）
基本的Vue程式碼結構： 插值表示式： v-text: 使用v-cloak解決v-text閃爍問題： 使用v-html對html格式文字進行渲染 使用v-bind進行資料繫結： 它的縮寫是: 使用v-on進行事件監聽繫結： 它的縮寫是@符號 事件修飾符：
Vue.js學習（五）：vue+axios+php+mysql 實現前端介面資料動態更新
網上參考了很多例子，都沒有關於vue+php實現前後端的例子，後來自己總結了一個，希望大家批評指正。 vue實現動態資料的方式主要有vue-resource和axios，但是從Vue2.0開始，已經不
arcgis jsapi介面入門系列（4）：用程式碼在地圖畫點線面
PS：用程式碼畫點這樣寫是為了跟後面的用滑鼠畫點線面區分出來 畫點 drawPointGraphic: function () { //點有多種樣式：一般的點，顯示文字，顯示圖片 //一般的點
劍指offer系列（4）：重建二叉樹
題目描述 輸入某二叉樹的前序遍歷和中序遍歷的結果，請重建出該二叉樹。假設輸入的前序遍歷和中序遍歷的結果中都不含重複的數字。 樣例分析 例如輸入前序遍歷序列{1,2,4,7,3,5,6,8}和中序遍歷序列{4,7,2,1,5,3,8,6}，則重建二叉樹並返回{1,2,
Vue.js教程（一）：基本使用
vue.js是一套漸進式Javascript框架。是一個小巧好用的框架。 簡介 Vue既然是一個js框架，那麼基本上js能做的事情它都能做。Vue跟大多數js框架類似，都是優化js對DOM的操作。什麼是DOM操作呢？看下面： <div id="app"
Vue.js教程（二）：v-bind動態屬性
上一節我們學習了Vue的基本語法，裡面有個佔位變數{{message}}。這種{{message}}形式的vue變數只適合給標籤中的文字複製（開始標籤和結束標籤中間的文字）。v-bind是給屬性設定變數的。 簡介 v-bind是給屬性設定變數的。屬性和文字的
Vue.js教程（三）：v-if條件判斷
v-if是繼v-bind之後的又一個v-xxx系列 前言 v-if這是我們學習Vue中的的第二個v-xxx系列。學到這裡，不得不提一下的是，所有v-bind或者v-if所關聯的都是Vue的動態變數，
Vue.js教程（四）：v-for迴圈操作
前言 本篇主要是Vue的迴圈操作，需要遍歷陣列。所以本篇嚴格來說有兩個知識點： 1、v-for迴圈使用 2、vue中陣列的定義 v-for基本使用 1、定義陣列 <script type="text/javascript"> var app4
three.js學習（4）：相機
相機的型別 1.CubeCamera（立方體相機） 建立6個攝像機，將他們所拍攝的場景渲染到WebGLRenderTargetCube上。 （1）建構函式： CubeCamera（near：number， far：number， cubeResolution：n
深入理解JavaScript系列（4）：立即呼叫的函式表示式
javascript 函式function前面的一元操作符, 感嘆號、小括號、一元操作符!()+-|| 看下面內容之前可以先看看上面的文章，總結的非常贊 前言 大家學JavaScript的時候，經常遇到自執行匿名函式的程式碼，今天我們主要就來想想說一下自執行 在詳細
解讀ASP.NET 5 & MVC6系列（4）：核心技術與環境配置
asp.net 5是下一代的asp.net，該版本進行了全部重寫以適用於跨平臺，新新版本中，微軟引入瞭如下工具與命令：DNVM、DNX、DNU。 DNVM（.NET Version Manager）：由於要實現跨平臺的目錄，微軟提供了DNVM功能，DNVM是ASP.NET最底層的內容，他是一組Powershe
MVC之前的那點事兒系列（4）：Http Pipeline詳細分析（上）
文章內容 繼續上一章節的內容，通過HttpApplicationFactory的GetApplicationInstance靜態方法獲取例項，然後執行該例項的BeginProcessRequest方法進行執行餘下的Http Pipeline 操作，程式碼如下： // Get application i
Vue.js教程（六）：v-model表單操作
v-model和v-bind有點類似，都是用來繫結標籤屬性的。但是v-model是表單控制元件操作，在其他標籤是不好使。 簡介 v-model是用來配合表單控制元件實現文字實時顯示的效果（雙向繫結效果）。 v-model基本使用 如下程式碼效果，修改了表單中
Wowza伺服器系列（4）：使用rtmp協議向wowza推流的wowoza配置方法
1、去掉rtmp密碼鑑權2、推流（1）將mp4檔案作為視訊源推送給wowza ffmpeg-i "D:/sample.video/360.mp4" -vcodec copy -acode
機器學習導圖系列（4）：算法(含61公式)
ref 靈感 深入 作者 很多 機器 -c 導圖 tar 機器學習導圖系列教程旨在幫助引導開發者對機器學習知識網絡有一個系統的概念，其中有些具體釋義並未完善，需要開發者自己探索才能對具體知識有深入的掌握。本項目靈感來自Daniel Formoso的github開源項目。本文
呼叫鏈系列（4）：服務資訊上下文傳遞
在之前的呼叫鏈系列文章中，我們已經對呼叫鏈進行了詳細介紹，相信大家已經對呼叫鏈技術有了基本的瞭解。 拓展閱讀： 呼叫鏈系列（1）：解讀UAVStack中的貪吃蛇 呼叫鏈系列（2）：輕呼叫鏈實現 呼叫鏈系列（3）：如何從零開始捕獲body和header 其實，在呼叫鏈的繪製過程中，呼叫鏈上下文的傳
Java併發程式設計（4）：守護執行緒與執行緒阻塞的四種情況
守護執行緒Java中有兩類執行緒：User Thread(使用者執行緒)、Daemon Thread(守護執行緒) 使用者執行緒即執行在前臺的執行緒，而守護執行緒是執行在後臺的執行緒。 守護執行緒作用是為其他前臺執行緒的執行提供便利服務，而且僅在普通、非守護執行緒仍然執行時才需要，比如垃圾回收執行緒就是一個