Skip to content

Instantly share code, notes, and snippets.

@simics-ja

simics-ja/01-v-once.html

Last active March 21, 2019 09:45
Show Gist options
  • Save simics-ja/f45670fdb19ff5bb0dcfa220f0598cda to your computer and use it in GitHub Desktop.
Save simics-ja/f45670fdb19ff5bb0dcfa220f0598cda to your computer and use it in GitHub Desktop.
Download ZIP
[Vue.jsのテンプレート構文まとめ] JS Fiddleで動作確認だ！ #vuejs
Raw
01-v-once.html
<body>
<div id="app">
<!-- messageを描画するのは最初のみで変更はできない． -->
<!-- 表示を高速化したいときに使う． -->
<p v-once>
{{ message }}
</p>
<button v-on:click="clickHandler">
Click me!
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
Raw
01-v-once.js
var app = new Vue({
el: '#app',
data: {
message: 'Yeah'
},
methods: {
clickHandler: function(){
this.message = this.message + "h";
}
}
})
Raw
02-v-pre.html
<div id="app">
<!-- Mustacheタグをそのまま表示する． -->
<!-- htmlのディレクティブを含まない部分のコンパイルをスキップするので高速化できる． -->
<!-- XSS対策にも使う． -->
<p v-pre>
{{ message }}
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Raw
02-v-pre.js
var app = new Vue({
el: '#app',
data: {
message: 'Yeah'
}
})
Raw
03-v-html.html
<div id="app">
<!-- htmlとして描画したいときに使う．-->
<!-- XSSを起こす可能性があるので慎重に使おう． -->
<p>
{{ message }}
</p>
<p v-html="message">
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Raw
03-v-html.js
var app = new Vue({
el: '#app',
data: {
message: 'Yeah <span style="color:red;">Yeah</span>'
}
})
Raw
04-v-cloak.css
[v-cloak] {
display: none;
}
Raw
04-v-cloak.html
<div id="app">
<!-- v-cloakを使わない場合，生のMustacheタグが一瞬表示されてしまう． -->
<!-- Vueインスタンスの準備ができるまでその要素を描画しなくなる． -->
<h2>
v-cloak
</h2>
<p v-cloak>
{{ message }}
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Raw
04-v-cloak.js
var app = new Vue({
el: '#app',
data: {
message: 'Yeah'
}
})
Raw
05-v-text.html
<div id="app">
<p>
{{ message }}
</p>
<!-- Mustache構文と同様に表示される． -->
<!-- 基本的にMustache構文で統一したほうが良さげ． -->
<p v-text="message">
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Raw
05-v-text.js
var app = new Vue({
el: '#app',
data: {
message: 'Yeah'
}
})
Raw
06-javascript-fomula.html
<div id="app">
<!-- Mustache構文の中でもJSの計算式は使える． -->
<!-- 有効なのは式だけ．var x = 1;やifは文なので動作しない．-->
<p>
{{ message }}
</p>
<p>
{{ number + 1 }}
</p>
<p>
{{ message + "hhh!" }}
</p>
<p>
{{ bool ? "Yeah" : "Ohh..." }}
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Raw
06-javascript-fomula.js
var app = new Vue({
el: '#app',
data: {
message: 'Yeah',
number: 99,
bool: false
}
})
Raw
07-local-filter.html
<div id="app">
<!-- filtersで定義したがパイプで使えるようになる． -->
<!-- 複数のフィルタをパイプで連結していくことが可能． -->
<h2>
Mustache
</h2>
<p>
{{ price | numberFormat }}
</p>
<h2>
v-bind
</h2>
<input type="text" v-bind:value="price | numberFormat">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Raw
07-local-filter.js
var app = new Vue({
el: '#app',
data: {
price: 59800
},
filters: {
numberFormat: function(value){
//このフィルタはローカルなVueインスタンスの中でしか使えない．
return value.toLocaleString();
}
}
})
Raw
08-global-filter.html
<div id="app">
<h2>
Mustache
</h2>
<p>
{{ price | numberFormat }}
</p>
<h2>
v-bind
</h2>
<input type="text" v-bind:value="price | numberFormat">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Raw
08-global-filter.js
//グローバルで定義する．
Vue.filter('numberFormat', function(value){
return value.toLocaleString()
})
var app = new Vue({
el: '#app',
data: {
price: 59800
}
})
Raw
09-filter-args.html
<div id="app">
<p>
{{ text | readMore(25, '...')}}
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Raw
09-filter-args.js
Vue.filter('readMore', function(text, length, suffix){
return text.substring(0, length) + suffix;
})
var app = new Vue({
el: '#app',
data: {
text: "No, I am your Father. – No, that's not true. That's impossible! "
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment