12月 2019

Home › Archives for 12月 2019

2019/12/27

Docker Desktop for Windows のデータの格納場所を変更（移動）する

## 環境  - Windows 10 - Docker Desktop for Windows 2.1.0.5  ## 移動先にフォルダを作成する  移動先に Docker のデータを格納するためのフォルダを作成しておきます。   今回は D ドライブに `DockerVM` というフォルダを作成しました。  ## Hyper-V の設定を変更する  スタートメニューから `Hyper-V マネージャー` を起動し、`DockerDesktopVM` の仮想マシンを右クリックして `移動` を選択します。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWdt0uAWNf6n6sN4eilZvizHASmpLDwUDSmc5SsbFzljJTW1VBOVxjepH1i1RRWtwp2OVxw0GSgC1KodCZ3cKY9n00zhBEd4ASMRQ5kGE5evcj2K5EfwKz9FbCqbE6UipElReGf6bs3ew/s1600/01.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWdt0uAWNf6n6sN4eilZvizHASmpLDwUDSmc5SsbFzljJTW1VBOVxjepH1i1RRWtwp2OVxw0GSgC1KodCZ3cKY9n00zhBEd4ASMRQ5kGE5evcj2K5EfwKz9FbCqbE6UipElReGf6bs3ew/s320/01.png" width="320" height="274" data-original-width="444" data-original-height="380" /></a>  ウィザードを次へ進んでいき、仮想マシンの新しい場所で、先ほど作成したフォルダ（ここでは `D:\DockerVM\`）を指定します。   <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgReZ6RIbcZNuohLJLy4hLxJ0LPELOhjpvPR9r39Z0XVr3oeqn-qmXMDxhpYkn2LOWT2z4zTJqzjH7PC8tCSCPumh0GLWctiKivn08IZgcKEetiIXRIO0-AynxNq_Fiqp6sKaBs7Fjy_RQ/s1600/02.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgReZ6RIbcZNuohLJLy4hLxJ0LPELOhjpvPR9r39Z0XVr3oeqn-qmXMDxhpYkn2LOWT2z4zTJqzjH7PC8tCSCPumh0GLWctiKivn08IZgcKEetiIXRIO0-AynxNq_Fiqp6sKaBs7Fjy_RQ/s320/02.png" width="320" height="225" data-original-width="704" data-original-height="495" /></a> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY7wsLPbQR8gOqG2LHqwjcC9VGqG0pH4eMoLVKQSlt09n-kCVfO8qSILjAjg7JsqH4F-pgw9icNpJkHy-19u074b94ceESX9O_FkrPJnKXPWU1OexaZxkRayhxl5LGl5kpfjzhww3TARM/s1600/03.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY7wsLPbQR8gOqG2LHqwjcC9VGqG0pH4eMoLVKQSlt09n-kCVfO8qSILjAjg7JsqH4F-pgw9icNpJkHy-19u074b94ceESX9O_FkrPJnKXPWU1OexaZxkRayhxl5LGl5kpfjzhww3TARM/s320/03.png" width="320" height="225" data-original-width="704" data-original-height="495" /></a> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJy9mDwKdhwh7XK-tfAhKxiYVkWch3xIYFnlTRVtxGoSUjKpbUFYDi8XAgmdy2nlqA5eHIugLJ2jvnzKdLh1ALK9gWuxBx6j0_Y_uXmX_EJUghP4QFKta2QJEe36v0ChuCZbD3vZlLm54/s1600/04.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJy9mDwKdhwh7XK-tfAhKxiYVkWch3xIYFnlTRVtxGoSUjKpbUFYDi8XAgmdy2nlqA5eHIugLJ2jvnzKdLh1ALK9gWuxBx6j0_Y_uXmX_EJUghP4QFKta2QJEe36v0ChuCZbD3vZlLm54/s320/04.png" width="320" height="225" data-original-width="704" data-original-height="495" /></a> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXHDHnqX7yvVjR2iuy4CyWrjITE9m7J5zcO-JOJL0yhqRZ-FlZ4NGLBvHYGOjvt02ohmJSN0OYDT_3inzBRAx6ql51xj7UVPKdeSR1an9i6IVFCeuW2GnjFRVeJnbcTNdjppxvlf9Wxro/s1600/05.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXHDHnqX7yvVjR2iuy4CyWrjITE9m7J5zcO-JOJL0yhqRZ-FlZ4NGLBvHYGOjvt02ohmJSN0OYDT_3inzBRAx6ql51xj7UVPKdeSR1an9i6IVFCeuW2GnjFRVeJnbcTNdjppxvlf9Wxro/s320/05.png" width="320" height="225" data-original-width="704" data-original-height="495" /></a> 次へ進むとデータの移動が開始されます。   ## Docker Desktop for Windows の設定を変更する  タスクバーの Docker アイコンを右クリックし、`Settings` を選択します。  `Advanced` の `Disk image location` で、先ほど作成したフォルダ内の `Virtual Hard Disks` （ここでは `D:\DockerVM\Virtual Hard Disks`）を選択します。     <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv8iz9_B-eb8BGLHsNNJC2I5ivepC8zfssbJSVvqIbqkPOyVim1V1DzRMHk_UQeN8ey_3mrV1Y0ZcrgZsFgwN4sLRGlcbRVnU0e-j8ASQBy4Pae8rRhrhiZgDy0diVrpgiNKLl6V-J86I/s1600/06.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv8iz9_B-eb8BGLHsNNJC2I5ivepC8zfssbJSVvqIbqkPOyVim1V1DzRMHk_UQeN8ey_3mrV1Y0ZcrgZsFgwN4sLRGlcbRVnU0e-j8ASQBy4Pae8rRhrhiZgDy0diVrpgiNKLl6V-J86I/s320/06.png" width="283" height="320" data-original-width="340" data-original-height="385" /></a> すると、`Disk image location` に選択したフォルダ内の `DockerDesktop.vhdx` が指定された状態になります。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKI7AAyOf587q9K0wUY6QRMbLCPvGS-rrvUT-nDq0Y2QznaiJQTutFHg-JfeWPJQTc-fzKxCIm7snhDPTn6kdf5iagxZlY88Bi3Pvm6LxnFlk-OyXnuGA-AT8EEw-Id2pyVzDE0lHlRcM/s1600/07.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKI7AAyOf587q9K0wUY6QRMbLCPvGS-rrvUT-nDq0Y2QznaiJQTutFHg-JfeWPJQTc-fzKxCIm7snhDPTn6kdf5iagxZlY88Bi3Pvm6LxnFlk-OyXnuGA-AT8EEw-Id2pyVzDE0lHlRcM/s320/07.png" width="320" height="220" data-original-width="832" data-original-height="573" /></a> `Apply` を押すと Docker が再起動し、完了です。

2019/12/23

NO IMAGE

[.NET Core] PublishSingleFile 有効時の実行パス

しかし、設定ファイルなどを exe ファイルと同じディレクトリに置いて読み込むようにしている場合などはちょっと注意が必要です。  単一の実行可能ファイルであっても、実行時には Temp ディレクトリにファイルを展開してから実行するという方法を取っているようで、実行パスが Temp ディレクトリになってしまうからです。  参考程度に、Windows 環境でのパスの取得結果を載せます。  ## 環境  - Visual Studio 2019 (16.4.2) - .NET Core 3.0 (ASP.NET Core 3.0)  ## サンプルコード  ```cs // Directory.GetCurrentDirectory() を使った場合 Console.WriteLine(Directory.GetCurrentDirectory());  // AppContext.BaseDirectory を使った場合 Console.WriteLine(AppContext.BaseDirectory);  // Process.GetCurrentProcess().MainModule を使った場合 using var processModule = Process.GetCurrentProcess().MainModule; Console.WriteLine(processModule?.FileName); Console.WriteLine(Path.GetDirectoryName(processModule?.FileName));  // Assembly.GetExecutingAssembly() を使った場合 Console.WriteLine(Assembly.GetExecutingAssembly().Location); Console.WriteLine(Path.GetDirectoryName(Assembly.GetExecutingAssembly().Location)); ```  ### デバッグ時の出力結果  Visual Studio のデバッガを使用した場合、以下のような出力となります。  ```cs // Directory.GetCurrentDirectory() を使った場合 C:\Users\username\Source\Repos\ConsoleApp1\ConsoleApp1\bin\Debug\netcoreapp3.1  // AppContext.BaseDirectory を使った場合 C:\Users\username\Source\Repos\ConsoleApp1\ConsoleApp1\bin\Debug\netcoreapp3.1\  // Process.GetCurrentProcess().MainModule を使った場合 C:\Users\username\Source\Repos\ConsoleApp1\ConsoleApp1\bin\Debug\netcoreapp3.1\ConsoleApp1.exe C:\Users\username\Source\Repos\ConsoleApp1\ConsoleApp1\bin\Debug\netcoreapp3.1  // Assembly.GetExecutingAssembly() を使った場合 C:\Users\username\Source\Repos\ConsoleApp1\ConsoleApp1\bin\Debug\netcoreapp3.1\ConsoleApp1.dll C:\Users\username\Source\Repos\ConsoleApp1\ConsoleApp1\bin\Debug\netcoreapp3.1 ```  基本的に全て同じパスを指します。   ### 単一の実行可能ファイルとして出力したときの出力結果  カレントパス `C:\Users\username` からリリースビルドした exe を実行した場合、以下のような出力になります。   ```cs // Directory.GetCurrentDirectory() を使った場合 C:\Users\username  // AppContext.BaseDirectory を使った場合 C:\Users\username\AppData\Local\Temp\.net\ConsoleApp1\ord2bgux.ncl\  // Process.GetCurrentProcess().MainModule を使った場合 C:\Users\username\Source\Repos\ConsoleApp1\ConsoleApp1\bin\Release\netcoreapp3.1\win-x64\publish\ConsoleApp1.exe C:\Users\username\Source\Repos\ConsoleApp1\ConsoleApp1\bin\Release\netcoreapp3.1\win-x64\publish  // Assembly.GetExecutingAssembly() を使った場合 C:\Users\username\AppData\Local\Temp\.net\ConsoleApp1\ord2bgux.ncl\ConsoleApp1.dll C:\Users\username\AppData\Local\Temp\.net\ConsoleApp1\ord2bgux.ncl ```  実行パスは Temp ディレクトリとなります。   従って、exe がある場所を取得したい場合は `Process.GetCurrentProcess().MainModule` を使う必要があります。

[Vue.js] select を使用するときに文字列ではなくブール値を返す方法

Vue.js

electronize start でエラーになる

Electron.NET

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzg2l104Rie2Oyowk9ZaoNTlkRCGo1xiF-8W_55lHDOoJyZpRVmuTuY4UqlVwMJlRehNV7bPsM20uZdLtXLyTGIe5CxNteTTwqrhmdfztZSvTSCRgB6XJS5TgUttuwcJCrAfeS4GGmS6E/s1600/https+_cdn-ak.f.st-hatena.com_images_fotolife_k_kondoumh_20190516_20190516223733.png" imageanchor="1" hidden><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzg2l104Rie2Oyowk9ZaoNTlkRCGo1xiF-8W_55lHDOoJyZpRVmuTuY4UqlVwMJlRehNV7bPsM20uZdLtXLyTGIe5CxNteTTwqrhmdfztZSvTSCRgB6XJS5TgUttuwcJCrAfeS4GGmS6E/s320/https+_cdn-ak.f.st-hatena.com_images_fotolife_k_kondoumh_20190516_20190516223733.png" width="320" height="320" data-original-width="200" data-original-height="200" /></a> ## 環境  - Windows 10 - .NET Core 3.1 - Node.js v12.13.1 - npm 6.12.1  ## エラー内容  `electronize start` を実行したとき、家では上手くいったのですが、会社で試すと以下のようなエラーが表示されてアプリケーションが起動しませんでした。  ```sh C:\Users\username\git\github\BlazorOnElectron\BlazorOnElectron\obj\Host\node_modules\electron\index.js:14     throw new Error('Electron failed to install correctly, please delete node_modules/electron and try installing again')     ^ Error: Electron failed to install correctly, please delete node_modules/electron and try installing again     at getElectronPath (C:\Users\username\git\github\BlazorOnElectron\BlazorOnElectron\obj\Host\node_modules\electron\index.js:14:11)     at Object.<anonymous> (C:\Users\username\git\github\BlazorOnElectron\BlazorOnElectron\obj\Host\node_modules\electron\index.js:18:18)     at Module._compile (internal/modules/cjs/loader.js:959:30)     at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)     at Module.load (internal/modules/cjs/loader.js:815:32)     at Function.Module._load (internal/modules/cjs/loader.js:727:14)     at Module.require (internal/modules/cjs/loader.js:852:19)     at require (internal/modules/cjs/helpers.js:74:18)     at Object.<anonymous> (C:\Users\username\git\github\BlazorOnElectron\BlazorOnElectron\obj\Host\node_modules\electron\cli.js:3:16)     at Module._compile (internal/modules/cjs/loader.js:959:30) ```  `node_modules/electron` を削除してもう一度インストールしろとあるものの解決せず。  また、ネットで検索してみると同じようなエラーが表示されたケースがそれなりに見つかるものの、どの対処方法でも解決しませんでした。   ## 対処方法  かなりはまりましたが、家と会社で大きく違うのがプロキシ環境下かどうかなので、electron のプロキシ設定について調べてみると以下のページを見つけました。   - https://github.com/electron/i18n/blob/master/content/ja-JP/docs/tutorial/installation.md#%E3%83%97%E3%83%AD%E3%82%AD%E3%82%B7  ちなみに npm config のプロキシ設定は設定済みです。  結果として、以下の環境変数を設定することで解決しました。   （Node.js のバージョンが 10 以降かどうかで異なるようなので注意してください。）  ```sh set ELECTRON_GET_USE_PROXY=true set GLOBAL_AGENT_HTTP_PROXY=http://proxyserver:port set GLOBAL_AGENT_HTTPS_PROXY=http://proxyserver:port ```  プロキシサーバーのアドレスとポートは環境に応じて変更してください。

2019/12/18

NO IMAGE

.NET Core の Publish Single File から除外するファイルを指定

.NET Core

Visual Studio 2019 用の .gitignore を自動生成する

Git Visual Studio

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinU7IwubLoDi1hxUL2CCl9fZU9ovF7DBMQElIESDCPP1tp12QPWvSRdwjAu-vtWn7UAe1ExnmIJdfxZJo_6quILudUaG12BfOK5Al0jIjaOxDBtYrpn13l9hsayMEcpQfdG3l3ddX6p6A/s1600/VisualStudio2019_Icon.png" imageanchor="1" hidden><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinU7IwubLoDi1hxUL2CCl9fZU9ovF7DBMQElIESDCPP1tp12QPWvSRdwjAu-vtWn7UAe1ExnmIJdfxZJo_6quILudUaG12BfOK5Al0jIjaOxDBtYrpn13l9hsayMEcpQfdG3l3ddX6p6A/s320/VisualStudio2019_Icon.png" width="320" height="320" data-original-width="256" data-original-height="256" /></a> Visual Studio 2017 ではソリューション作成時に「新しい Git リポジトリの作成」というチェック項目があり、ソリューションの作成と同時に git リポジトリの作成と、Visual Studio で無視するべきファイルが記載された .gitignore が自動生成されていました。  しかし、Visual Studio 2019 ではこの項目がなくなっていました。  git リポジトリは作ればいいだけなんですが、.gitignore を自分で作るのは面倒なので、自動生成する方法を探してみました。  ## dotnet new gitignore  .NET Core SDK 3.0 以降では以下のコマンドで .gitignore を自動生成できます。  ```sh dotnet new gitignore ```  ## gitignore.io  以下のサイトでプロジェクトに適した .gitignore を自動生成できます。    - https://gitignore.io/  Visual Studio 以外にもいろいろあります。

2019/12/11

NO IMAGE

[.NET Core] 同じインターフェイスで異なる実装を DI コンテナに登録し、区別して取り出す

.NET Core ASP.NET Core

[Vue.js] チェックボックスを変更したときの処理を実装

Vue.js

[C#] 用途に応じた特殊文字のエスケープ・エンコード

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaC4HXmfsxzrBnSd3EP2Y_HBFYxCs1vPrh3eH-goX4CX-WYze66L_wELHcGapgKDQ-mZ86WFu0C7uMwZxPgFnCTCew7tqeVRy5HEi99X2BNcdhyphenhyphenKvirEpwSe1qk-b5pXNHJMrf2A2Wx9E/s1600/c-sharp.png" imageanchor="1" hidden><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaC4HXmfsxzrBnSd3EP2Y_HBFYxCs1vPrh3eH-goX4CX-WYze66L_wELHcGapgKDQ-mZ86WFu0C7uMwZxPgFnCTCew7tqeVRy5HEi99X2BNcdhyphenhyphenKvirEpwSe1qk-b5pXNHJMrf2A2Wx9E/s320/c-sharp.png" width="284" height="320" data-original-width="256" data-original-height="288" /></a> ## 環境  - .NET Core 2.2  ## C# コード中のエスケープ  ファイルパスなど表す場合、文字列中の `¥` をエスケープする必要がありますが、`@` を使えばエスケープが不要になります。  ```cs using System;     public class Program {     public static void Main()     {         var str = @"C:\path\hoge";         Console.WriteLine(str);     } }  ```  **実行結果**  ``` C:\path\hoge ```  ## 正規表現で使用する文字をエスケープ  正規表現で使用される文字をエスケープしたい場合は `Regex.Escape` を使います。   半角スペースと `().*[]!#%$` の文字をエスケープしてくれます。  - https://docs.microsoft.com/ja-jp/dotnet/api/system.text.regularexpressions.regex.escape  ```cs using System; using System.Text.RegularExpressions;     public class Program {     public static void Main()     {         var str = Regex.Escape("().*[]!#%$");         Console.WriteLine(str);     } } ``` **実行結果**  ``` \ \.\*\[]!\#%\$ ```  ## HTML で使用する文字をエンコード  HTML で使用する `<` `>` `&` などの文字をエンコードしたい場合、`HttpUtility.HtmlEncode` を使用します。  - https://docs.microsoft.com/ja-jp/dotnet/api/system.web.httputility.htmlencode  ```cs using System; using System.Web;  public class Program {     public static void Main()     {         var str = HttpUtility.HtmlEncode("<\">&'");         Console.WriteLine(str);     } } ```  **実行結果**  ``` &lt;&quot;&gt;&amp;&#39; ```   ## JavaScript で使用する文字をエンコード  Razor を使っていると、C# で JavaScript のコードを出力することもあります。   このようなときは `HttpUtility.JavaScriptStringEncode` を使って `'` と `"` をエンコードできます。  - https://docs.microsoft.com/ja-jp/dotnet/api/system.web.httputility.javascriptstringencode  ```cs using System; using System.Web;  public class Program {     public static void Main()     {         var str = HttpUtility.JavaScriptStringEncode("'");         Console.WriteLine(str);     } } ```  **実行結果**  ``` \u0027 ```

[Vue.js] HTML の属性を変更する

Vue.js

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX9yUV52WRN9-XEPzRIaB1g6slT3APlWliZBXv_tOJMM8WL0YtHyBioCAtZ8r-T_wb2DyhCFoPQHFn-OwIBdQu1mMs0ZX1W1EcPckob5VioW7GbhZ_yYVJaUl3z0oOrWjZHdcDQwVb6hA/s1600/vuejs.png" imageanchor="1" hidden><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX9yUV52WRN9-XEPzRIaB1g6slT3APlWliZBXv_tOJMM8WL0YtHyBioCAtZ8r-T_wb2DyhCFoPQHFn-OwIBdQu1mMs0ZX1W1EcPckob5VioW7GbhZ_yYVJaUl3z0oOrWjZHdcDQwVb6hA/s200/vuejs.png" width="200" height="200" data-original-width="400" data-original-height="400" /></a> 以下、公式ドキュメントを自分なりにまとめなおしただけです。  - https://jp.vuejs.org/v2/guide/class-and-style.html  ## 基本  例えば、`class` の値を変更したい場合は以下のように記述します。  ``` <div v-bind:class="status"></div>```  ``` data: {   status: 'active', } ```  **展開後**  ``` <div class="active"></div>```  ## 条件指定（オブジェクト構文）  属性の出力を条件分岐させたい場合、以下のようなオブジェクト構文を使用します。  ``` <div v-bind:class="{ active: isActive }"></div>```  ``` data: {   isActive: true, } ```  `active` クラスの出力は、`data` プロパティの `isActive` の値によって決まります。   `{出力したい属性: 条件式}` です。  **展開後**  `isActive` が `true` の場合  ``` <div class="active"></div>```  `isActive` が `false` の場合   ``` <div class=""></div>```  ### 属性値がハイフンを含む場合  注意点として、クラスの属性値がハイフン `-` を含む場合は、シングルコーテーション `'` で括る必要があるようです。  ``` <div v-bind:class="{ 'text-danger': isActive }"></div>```  ``` data: {   isActive: true, } ```  ### オブジェクトとのバインド  上記はインラインでバインドを記述していますが、以下のように記述することもできます。  ``` <div v-bind:class="classObject"></div>```  ``` data: {   classObject: {     active: true,     'text-danger': true   } } ```  **展開後**  ``` <div class="active text-danger"></div>```  ### computed プロパティとのバインド  条件は `data` プロパティ以外に、`computed` プロパティとバインドすることもできます。  ``` <div v-bind:class="classObject"></div>```  ``` data: {   isActive: true,   error: null }, computed: {   classObject: function () {     return {       active: this.isActive && !this.error,       'text-danger': this.error && this.error.type === 'fatal'     }   } } ```  **展開後**  ``` <div class="active"></div>```  ## 静的フィールドとの共存  既に静的に `class` が記述してあっても、Vue.js の `v-bind` と共存できます。  ``` <div class="static" v-bind:class="status"></div>```  ``` data: {   status: 'active', } ```  **展開後**  ``` <div class="static active"></div>```  ## 配列構文  配列を渡してクラスのリストを適用することもできます。  ``` <div v-bind:class="[activeClass, errorClass]"></div>```  ``` data: {   activeClass: 'active',   errorClass: 'text-danger' } ```  **展開後**  ``` <div class="active text-danger"></div>```

[Vue.js] click イベントの記述

Vue.js

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6AEiMOGaqyr2JfQouIBGV6tFwqOxpD8sbaItyqw49Jy-oZ1yGEZ6_1F6BhRIm_qdGvzqWgbKQzjl5vPXKu5omKpFqhnhKFB8UR8ssuk4Nz12dPA7tTsLSPG6mKrtUAIx9zup9E74Anes/s1600/vuejs.png" imageanchor="1" hidden><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6AEiMOGaqyr2JfQouIBGV6tFwqOxpD8sbaItyqw49Jy-oZ1yGEZ6_1F6BhRIm_qdGvzqWgbKQzjl5vPXKu5omKpFqhnhKFB8UR8ssuk4Nz12dPA7tTsLSPG6mKrtUAIx9zup9E74Anes/s320/vuejs.png" width="320" height="320" data-original-width="400" data-original-height="400" /></a> 例えば以下のように記述します。  ``` <div id="app">    {{count}}<br>    <button v-on:click="increment">Increment</button></div>```  ``` new Vue({     el: '#app',     data: {         count: 0     },     // `methods` オブジェクトの下にメソッドを定義する     methods: {         increment: function () {             this.count++;         }     } }); ```  `v-on:click` でクリック時のイベントハンドラを指定します。  イベントハンドラ `increment` は `methods` プロパティの下に定義します。   `this` で `data` プロパティにアクセスできます。  ## 引数の渡し方  引数も普通に渡せばいいだけです。  ``` <div id="app">    {{count}}<br>    <button v-on:click="increment(2)">Increment</button></div>```  ``` new Vue({     el: '#app',     data: {         count: 0     },     // `methods` オブジェクトの下にメソッドを定義する     methods: {         increment: function (value) {             this.count += value;         }     } }); ```  ## イベント引数  引数なしのイベントハンドラに引数を１つ指定すると、イベント引数が渡されます。  ``` <div id="app">    <button v-on:click="helloWorld">Hello World</button></div>```  ``` new Vue({     el: '#app',     // `methods` オブジェクトの下にメソッドを定義する     methods: {         helloWorld: function (event) {             alert('Hello World!')             // `event` は、ネイティブ DOM イベントです             if (event) {                 alert(event.target.tagName)             }         }     } }); ```  ### 引数ありのイベントハンドラでイベント引数を受け取る  引数ありのイベントハンドラでイベント引数を受け取りたい場合は、`$event` を渡します。  ``` <div id="app">    <button v-on:click="helloWorld('Taro', $event)">Hello World</button></div>```  ``` new Vue({     el: '#app',     // `methods` オブジェクトの下にメソッドを定義する     methods: {         helloWorld: function (name, event) {             alert(`Hello ${name}!`)             // `event` は、ネイティブ DOM イベントです             if (event) {                 alert(event.target.tagName)             }         }     } }); ```

[Vue.js] とにかく簡単に試してみたい

Vue.js

2019/12/03

NO IMAGE

ASP.NET Core の RedirectToAction でデータを保持する

ASP.NET Core

テンプレートテスト

2019/12/27

Docker Desktop for Windows のデータの格納場所を変更（移動）する

2019/12/23

[.NET Core] PublishSingleFile 有効時の実行パス

2019/12/20

[Vue.js] select を使用するときに文字列ではなくブール値を返す方法

2019/12/19

electronize start でエラーになる

2019/12/18

.NET Core の Publish Single File から除外するファイルを指定

2019/12/17

Visual Studio 2019 用の .gitignore を自動生成する

2019/12/11

[.NET Core] 同じインターフェイスで異なる実装を DI コンテナに登録し、区別して取り出す

2019/12/10

[Vue.js] チェックボックスを変更したときの処理を実装

2019/12/09

[C#] 用途に応じた特殊文字のエスケープ・エンコード

2019/12/06

[Vue.js] HTML の属性を変更する

2019/12/05

[Vue.js] click イベントの記述

[Vue.js] とにかく簡単に試してみたい

2019/12/03

ASP.NET Core の RedirectToAction でデータを保持する

Translate

Popular Posts

Labels

Blog Archive