simics-ja/01-v-once.html

## 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>

## 01-v-once.js
var app = new Vue({
	el: '#app',
  data: {
  	message: 'Yeah'
  },
  methods: {
  	clickHandler: function(){
    	this.message = this.message + "h";
    }
  }
})

## 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>

## 02-v-pre.js
var app = new Vue({
	el: '#app',
  data: {
  	message: 'Yeah'
  }
})

## 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>

## 03-v-html.js
var app = new Vue({
	el: '#app',
  data: {
  	message: 'Yeah <span style="color:red;">Yeah</span>'
  }
})

## 04-v-cloak.css
[v-cloak] {
  display: none;
}

## 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>

## 04-v-cloak.js
var app = new Vue({
	el: '#app',
  data: {
  	message: 'Yeah'
  }
})

## 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>

## 05-v-text.js
var app = new Vue({
	el: '#app',
  data: {
  	message: 'Yeah'
  }
})

## 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>

## 06-javascript-fomula.js
var app = new Vue({
	el: '#app',
  data: {
  	message: 'Yeah',
    number: 99,
    bool: false
  }
})

## 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>

## 07-local-filter.js
var app = new Vue({
	el: '#app',
  data: {
  	price: 59800
  },
  filters: {
  	numberFormat: function(value){
      	//このフィルタはローカルなVueインスタンスの中でしか使えない．
    	return value.toLocaleString();
    }
  }
})

## 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>

## 08-global-filter.js
//グローバルで定義する．

Vue.filter('numberFormat', function(value){
	return value.toLocaleString()
})

var app = new Vue({
	el: '#app',
  data: {
  	price: 59800
  }
})

## 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>

## 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! "
  }
})
	<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>
	var app = new Vue({
	el: '#app',
	data: {
	message: 'Yeah'
	},
	methods: {
	clickHandler: function(){
	this.message = this.message + "h";
	}
	}
	})
	<div id="app">
	<!-- Mustacheタグをそのまま表示する． -->
	<!-- htmlのディレクティブを含まない部分のコンパイルをスキップするので高速化できる． -->
	<!-- XSS対策にも使う． -->
	<p v-pre>
	{{ message }}
	</p>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<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>
	<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>
	<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>
	<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>
	//グローバルで定義する．

	Vue.filter('numberFormat', function(value){
	return value.toLocaleString()
	})

	var app = new Vue({
	el: '#app',
	data: {
	price: 59800
	}
	})
	<div id="app">
	<p>
	{{ text \| readMore(25, '...')}}
	</p>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	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! "
	}
	})