1。V-Bind略語
<！ - complete syntax-> <a v-bind：href = "url"> </a> <！ - 略語 - > <a：href = "url"> </a> <
2。V-onの略語
<！ - complete syntax-> <a v-on：click = "dosomething"> </a> <！ - 略式 - > <a @click = "dosomething"> </a>
3。フィルター
{{メッセージ|大文字}}4。条件付きレンダリング
v-if <h1 v-if = "ok"> yes </h1> <h1 v-else> no </h1> <div v-if = "math.random（）> 0.5">ごめんなさい</div> <div v-else> div> template-v-if <template v-if = " 2 </p> </template> v-show <h1 v-show = "ok"> hello！</h1>
5。リストレンダリング
v-for <ul id = "example-1"> <li v-for = "item inアイテム"> {{item.message}} </li> </ul> var example1 = new vue（{el： '＃example-1'、data：{item：[{message： 'foo'}、{message：message： 'bar'}}）; <ul id="example-2"> <li v-for="item in items"> {{ parentMessage }} - {{ $index }} - {{ item.message }} </li></ul>var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' }]}}）;配列の変更検出
Vue.jsは、観測された配列の変異した方法をラップするため、ビューの更新をトリガーできます。ラップされたメソッドは、push（）、pop（）、shift（）、unshift（）、splice（）、sort（）、reverse（）です。
example1.Items.Push（{message： 'baz'}）; example1.items = example1.items.filter（function（item）{return item.message.match（/foo/）;}）; template-v-for <ul> <template v-for = "アイテムのアイテム"> <li> {{item.msg}} </li> <li> </li> </template> </ul>オブジェクトv-for
<ul id = "Repeat-Object"> <li v-for = "value in object"> {{$ key}}：{{{value}} </li> </ul> new vue（{el： '＃Repeat-Object'、data：{object：{firstName： 'john'、lastname： 'doe'、er：30}}}）;Value Range V-For
<div> <span v-for = "n in 10"> {{n}} </span> </div>6。メソッドとイベントハンドラー
メソッドプロセッサ
<div id = "example"> <button v-on：click = "greet"> greet </button> </div> var vm = new vue（{el： '＃example'、data：{name： 'vue.js'}、// `methods` object：{greed：function（event）{// to the methos ` 「イベント」はネイティブDOMイベントアラート（event.target.tagname）}}}）// JavaScriptコードのメソッドvm.greet（）を呼び出すこともできます。 //-> 'こんにちはvue.js！'インラインステートメントプロセッサ
<div id = "example-2"> <button v-on：click = "say（ 'hi'）"> say hi </button> <button v-on：click = "say（ 'what'）"
また、インラインステートメントプロセッサでネイティブDOMイベントにアクセスする必要がある場合があります。特別な変数$イベントを使用して、メソッドに渡すことができます
<ボタンv-on：click = "say（ 'hello！'、$ event）">送信</button>メソッド：{function（msg、event）{//ネイティブイベントオブジェクトEvent.preventdefault（）}}にアクセスできます。##イベント修飾子
<！ - クリックイベントが泡立ってからイベントを防ぐ - > <a v-on：click.stop = "dothis"> </a> <！ - イベントを送信しなくなりましたページを過負荷にしなくなります - > <form v-on：submit.prevent = "onsubmit"> </form> <！ - モディファイ因子はcatっています - > <> < v-on：submit.prevent> </form>
##キー修飾子
<
すべてのキーエイリアス：ENTER、TAB、削除、ESC、スペース、アップ、ダウン、左、右
##その他の例
new Vue（{el： '＃demo'、data：{newlabel： ''、stats：stats：stats：stats}、method：{add：function（e）{e.preventdefault（）if（！this.newlabel）{return;} this.stats.push（{label：this.newlabel、valut： '; （stat）{if（this.stats.length> 3）{this.stats。$ remove（stat）;7。遷移
CSS遷移
<div v-if = "show" transition = "Expand"> hello </div>次に、.expand-transition、.expand-enter、and .expand-leave：/* exical*/。拡張トランジション{transition：すべて.3s Ease;高さ：30px;パディング：10px;バックグラウンドカラー：#eee;オーバーフロー：hidden;}/* .expand-enterエントリの開始状態* //* .expand-leave出発の終了状態を定義します*/。拡張エンテル、.expand-leave {height：0;パディング：0 10px;不透明：0;}動的バインディングを介して、同じ要素で異なる遷移を実現できます。
<div v-if = "show"：transition = "transitionname"> hello </div> new vue（{el： '...'、data：{show：false、transitionName： 'fade'}}}さらに、JavaScriptフックを提供できます。
vue.transition（ 'Expand'、{beforeenter：function（el）{el.textcontent = 'before enter'}、enter：function（el）{el.textcontent = 'enter'}、function（el）{el.textcontent = 'afterinter'}、enterceleled：ferfered：unters（el） （el）{el.textcontent = 'beforeleave'}、reave：function（el）{el.textcontent = 'leave'}、alfteLeave：function（el.textcontent = 'afterleave'}、leavecelled：function（el）{// cancellation}）;8。コンポーネント
1.登録
// var mycomponent = vue.extend（{empplate： '<div> a custom Component！</div>'}）; //登録vue.component（ 'my-component'、myComponent）; // root instance new vue（{el： '#example'}）; vue.comPonent（ 'my-component'、{template： '<div> a custom Component！</div>'}）; //ルートインスタンスの作成new vue（{el： '#example'}）; <div id = "example"> <my-component> </my-component> </div>2。プロップを使用してデータを渡します
例1：
vue.component（ 'child'、{// props props：['msg']、// propはテンプレートで使用できます// `this.msg`を使用してテンプレートを設定できます： '<span> {{msg}} </span>'}）例2：
vue.component（ 'child'、{// javascript Props：['mymessage']、テンプレート： '<span> {{mymessage}} </span>'}）; <！ - htmlのkebabケース - > <child my-message = "hello！"> </child>3。ダイナミックな小道具
<div> <入力v-model = "parentmsg"> <br> <child v-bind：my-message = "parentmsg"> </child> </div>
V-bindの略語構文を使用することは通常、より単純です。
<子：my-message = "parentmsg"> </child>
4.プロップバインディングタイプ
プロップはデフォルトで一方向の結合です：親コンポーネントのプロパティが変化すると、子コンポーネントに渡されますが、逆はそうではありません。これは、子コンポーネントが親コンポーネントの状態を誤って変更するのを防ぐためです。これにより、アプリケーションのデータフローが理解しにくいです。ただし、.syncまたは.Once結合修飾子を使用して、双方向または1回の時間の結合を明示的に強制することも可能です。
比較構文：
<！ - デフォルトは一方向のバインディング - > <子：msg = "parentmsg"> </child> <！ - 双方向の結合 - > <子：msg.sync = "parentmsg"> </child> <！ - > <child：msg.once = "parentmsg"> </child slot = "header">カスタムヘッダー</h3> </modal> </div>
5.プロップ検証
コンポーネントは、小道具の検証要件を指定できます。これは、これらの検証要件がコンポーネントのAPIを形成し、他の人がコンポーネントを正しく使用することを保証するため、コンポーネントが他のコンポーネントに与えられた場合に役立ちます。現時点では、プロップの値は、検証要件を含むオブジェクトです。
vue.component（ 'emplement'、{props：{// basic type detection（ `null`は任意のタイプを意味します）propa：number、// expened and string propb：{type：string、exice：true}、// default propc：{type：number、default：100}、//デフォルトの値を返す必要がある：{タイプ：番号、デフォルト：100}、// {msg： 'hello'}}}、//この小道具を双方向のバインディングとして指定//バインディングタイプが正しくない場合、警告はprope：{twoway：true}、//カスタム検証機能propf：{validator：function（value）{return value> 10}}、 CORECE：function（val）{return val + '' //値を文字列に変換}}、proph：{coerce：function（val）{return json.parse（val）// json文字列をオブジェクトに変換}}}}}）;その他の例：
vue.comPonent（ 'Modal'、{template： '＃modal-template'、props：{show：{type：boolean、必須：true、twoway：true}}}）;6.登録
// var mycomponent = vue.extend（{empplate： '<div> a custom Component！</div>'}）; // register vue.component（ 'my-component'、myComponent）; // root instance new vue（{el： '#example'}）;またはそれを直接書きます：
vue.comPonent（ 'my-component'、{template： '<div> a custom Component！</div>'}）; //ルートインスタンスの作成new vue（{el： '#example'}）; <div id = "example"> <my-component> </my-component> </div>7.プロップを使用してデータを渡します
例1：
vue.component（ 'child'、{// props props：['msg']、// propはテンプレートで使用できます// `this.msg`を使用してテンプレートを設定できます： '<span> {{msg}} </span>'}）例2：
vue.component（ 'child'、{// javascript Props：['mymessage']、テンプレート： '<span> {{mymessage}} </span>'}）; <！ - htmlのkebabケース - > <child my-message = "hello！"> </child>8。ダイナミックな小道具
<div> <入力v-model = "parentmsg"> <br> <child v-bind：my-message = "parentmsg"> </child> </div>
V-bindの略語構文を使用することは通常、より単純です。
<子：my-message = "parentmsg"> </child>
9.プロップバインディングタイプ
プロップはデフォルトで一方向の結合です：親コンポーネントのプロパティが変化すると、子コンポーネントに渡されますが、逆はそうではありません。これは、子コンポーネントが親コンポーネントの状態を誤って変更するのを防ぐためです。これにより、アプリケーションのデータフローが理解しにくいです。ただし、.syncまたは.Once結合修飾子を使用して、双方向または1回の時間の結合を明示的に強制することも可能です。
比較構文：
<！ - デフォルトは一方向のバインディング - > <子：msg = "parentmsg"> </child> <！ - 双方向結合 - > <子：msg.sync = "parentmsg"> </child> <！ - 単一のバインディング - > <子：msg.once = "parentmsg"> </child> </child> <
その他の例：
<Modal：show.sync = "showmodal"> <h3 slot = "header">カスタムヘッダー</h3> </modal> </div>
10.プロップ検証
コンポーネントは、小道具の検証要件を指定できます。これは、これらの検証要件がコンポーネントのAPIを形成し、他の人がコンポーネントを正しく使用することを保証するため、コンポーネントが他のコンポーネントに与えられた場合に役立ちます。現時点では、プロップの値は、検証要件を含むオブジェクトです。
vue.component（ 'emplement'、{props：{// basic type detection（ `null`は任意のタイプを意味します）propa：number、// expened and string propb：{type：string、exice：true}、// default propc：{type：number、default：100}、//デフォルトの値を返す必要がある：{タイプ：番号、デフォルト：100}、// {msg： 'hello'}}}、//この小道具を双方向のバインディングとして指定//バインディングタイプが正しくない場合、警告はprope：{twoway：true}、//カスタム検証機能propf：{validator：function（value）{return value> 10}}、 CORECE：function（val）{return val + '' //値を文字列に変換}}、proph：{coerce：function（val）{return json.parse（val）// json文字列をオブジェクトに変換}}}}}）;その他の例：
vue.comPonent（ 'Modal'、{template： '＃modal-template'、props：{show：{type：boolean、必須：true、twoway：true}}}）;11.スロットを使用してコンテンツを配布します
<slot>要素は、コンポーネントテンプレートのコンテンツ配布スロットとして使用されます。この要素自体が交換されます。
名前属性を持つスロットは、名前付きスロットと呼ばれます。スロット属性を持つコンテンツは、一致する名前を持つ名前付きスロットに配布されます。
たとえば、次のようなテンプレートを備えたマルチインドションコンポーネントがあるとします。
<div> <slot name = "one"> </slot> <slot> </slot> <slot name = "2"> </slot> </div>
親コンポーネントテンプレート：
<Multi-Insertion> <P slot = "One"> One </p> <p slot = "2"> 2つのデフォルトa </p> </multi-Insertion>
レンダリング結果は次のとおりです。
<div> <p slot = "one"> one </p> <p>デフォルトa </p> <p slot = "2"> 2 </p> </div>