ライトコードの宮田です。文字列を表示するプログラムを作成しました。Webエンジニアの宮田です。付いたVue.jsの特別な属性のことを指します。対してリアクティブに特殊な動作を適用することができます。index.htmlファイルを用意しましょう。読み込むところまでで、下記のように記述しておきます。src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script></script></body></html>それでは順番にみていきましょう!v-bindv-bindディレクティブを利用すると、要素の属性を束縛(バインディング)することができます。これだけ聞いてもピンとこないかもしれません。使用したテキスト展開を学習しました。下記のように、開始タグと終了タグの間の位置に記述しましたね。利用したいこともあると思います。いうプロパティの値を展開したい場合を考えます。--->ですが、残念ながらこの書き方では使用することができません。使って書き換えると、下記のようになります。囲まず、プロパティ名をそのまま記述します。内を上記のコードになるようにして実行した結果が下の画像です。値がちゃんと展開されていますね。下記の例のように省略して記述することもできます。簡単に行うことができます!言葉で説明するよりも実際に動かしてみてみましょう。''}})</script></body>上記のコードを実際に動かしてみると、テキストボックスで入力した値が上部にテキストとして即座に反映されていますね。値に自動的に反映される仕組みをv-modelディレクティブが備えているからなんです。属性に初期値を設定しておきたい場合があると思います。上記にある属性の初期値を無視するという特徴があります。下記のように属性に初期値を記述する方法では失敗します。初期値を持たせておくか、カスタムディレクティブで独自に実装を追加する必要があります。インスタンスのメソッドを呼び出すことができます。メソッドが呼び出されるということですね。function(){this.count++}}})</script></body>上記コードを実行してみると、クリック回数のテキストとボタンが表示されたと思います。いうプロパティが登場しています。呼び出したいメソッドを定義することができます。下記の例のように省略して記述することもできます。ディレクティブをみてきました。使用するディレクティブは他にもまだあります。Webエンジニアの宮田です。社長と一杯飲みながらお話してみたい方はこちらミツオカフリーランスエンジニア様の募集はこちらにゃんこ師匠その他、お問い合わせはこちらミツオカお気軽にお問い合わせください!せっかくなので、別の記事もぜひ読んでいって下さいね!一緒に働いてくれる仲間を募集しております!ライトコードでは、仲間を募集しております!当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。rightcodeエンジニア大募集中!私たちライトコードでは、エンジニアを募集しております。私服大歓迎のカジュアルな職場なので、お気軽にご応募ください!また、フリーエンジニアの方も募集しております。