テンプレートテスト

2019/12/11

[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/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