update examples to use filters

examples/commits/app.js

@@ -22,14 +22,17 @@ var demo = new Vue({
     currentBranch: 'fetchData'
   },
 
-  methods: {
+  filters: {
     truncate: function (v) {
       var newline = v.indexOf('\n')
       return newline > 0 ? v.slice(0, newline) : v
     },
     formatDate: function (v) {
       return v.replace(/T|Z/g, ' ')
+    }
   },
+
+  methods: {
     fetchData: function () {
       var xhr = new XMLHttpRequest()
       var self = this

examples/commits/index.html

@@ -35,9 +35,9 @@
       <ul>
         <li v-for="record in commits">
           <a :href="record.html_url" target="_blank" class="commit">{{ record.sha.slice(0, 7) }}</a>
-          - <span class="message">{{truncate(record.commit.message)}}</span><br>
+          - <span class="message">{{ record.commit.message | truncate }}</span><br>
           by <span class="author"><a :href="record.author.html_url" target="_blank">{{ record.commit.author.name }}</a></span>
-          at <span class="date">{{formatDate(record.commit.author.date)}}</span>
+          at <span class="date">{{ record.commit.author.date | formatDate }}</span>
         </li>
       </ul>
     </div>

examples/grid/grid.js

@@ -40,10 +40,12 @@ Vue.component('demo-grid', {
       return data
     }
   },
-  methods: {
+  filters: {
     capitalize: function (str) {
       return str.charAt(0).toUpperCase() + str.slice(1)
+    }
   },
+  methods: {
     sortBy: function (key) {
       this.sortKey = key
       this.sortOrders[key] = this.sortOrders[key] * -1

examples/grid/index.html

@@ -16,7 +16,7 @@
             <th v-for="key in columns"
               @click="sortBy(key)"
               :class="{ active: sortKey == key }">
-              {{ capitalize(key) }}
+              {{ key | capitalize }}
               <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
               </span>
             </th>

examples/markdown/index.html

@@ -12,7 +12,7 @@
 
     <div id="editor">
       <textarea :value="input" @input="update"></textarea>
-      <div v-html="marked(input)"></div>
+      <div v-html="compileMarkdown(input)"></div>
     </div>
 
     <script>
@@ -22,7 +22,7 @@
           input: '# hello'
         },
         methods: {
-          marked: marked,
+          compileMarkdown: marked,
           update: _.debounce(function (e) {
             this.input = e.target.value
           }, 300)

examples/svg/index.html

@@ -44,7 +44,7 @@
         <input name="newlabel" v-model="newLabel">
         <button @click="add">Add a Stat</button>
       </form>
-      <pre id="raw">{{json(stats)}}</pre>
+      <pre id="raw">{{ stats }}</pre>
     </div>
 
     <p style="font-size:12px">* input[type="range"] requires IE10 or above.</p>

examples/svg/svg.js

@@ -67,9 +67,6 @@ new Vue({
     stats: stats
   },
   methods: {
-    json: function (val) {
-      return JSON.stringify(val, null, 2)
-    },
     add: function (e) {
       e.preventDefault()
       if (!this.newLabel) return

examples/todomvc/index.html

@@ -38,7 +38,7 @@
 			</section>
 			<footer class="footer" v-show="todos.length" v-cloak>
 				<span class="todo-count">
-					<strong>{{ remaining }}</strong> {{ pluralize(remaining) }} left
+					<strong>{{ remaining }}</strong> {{ remaining | pluralize }} left
 				</span>
 				<ul class="filters">
 					<li><a href="#/all" :class="{selected: visibility == 'all'}">All</a></li>

examples/todomvc/js/app.js

@@ -64,13 +64,15 @@
 			}
 		},
 
-		// methods that implement data logic.
+		filters: {
-		// note there's no DOM manipulation here at all.
-		methods: {
 			pluralize: function (n) {
 			  return n === 1 ? 'item' : 'items'
+			}
 		},
 
+		// methods that implement data logic.
+		// note there's no DOM manipulation here at all.
+		methods: {
 			addTodo: function () {
 				var value = this.newTodo && this.newTodo.trim();
 				if (!value) {