ゆとりエンジニア

Vue.js で遊ぶ 3日目

Vue.js で遊ぶ 3日目

Tempalte Syntax

Interpolations

覚えれば良さそうなこと

  1. double curly braces を使って text interpolation
  2. v-html directive で plain HTML を挿入 (XSS には注意)
  3. double curly braces は HTML の属性に使うことはできないので,代わりに v-bind を使う
  4. double curly braces には JavaScript の任意の式がかける
<span>Message: {{ msg }}</span>
<div v-html="rawHtml"></div>
<div v-bind:id="dynamicId"></div>

{{ number + 1 }}
{{ collection.length > 0 ? 'Exist' : 'Empty' }}
<div v-bind:id="'list-' + id"></div>

Directives

  1. directive の属性の値は単一の JavaScript の式を期待している.
    • 例外は v-for
      • <li v-for='item in items'>{{ item }}</li> のような書き方をするから?
  2. いくつかの directive は : の後に引数のような形で何か値をとることがある
    • <a v-bind:href='url'></a>href
  3. いくつかの directive は,Modifier とよばれる . の後に特別な postfixes をとることがある
    • <form v-on:submit.prevent='onSubmit'></form>

Filters

double curly braces と v-bind でフィルタを利用できる

Shorthand

v-bind と v-on はそれぞれ,:, @ という省略記法がある

  • 他人の Vue.js のコードを読むときに参考にできそう

感想

完全に飽き始めている,とりあえず飛ばし読みして書いてみたほうが良い気がしてきた.