colynb · September 28, 2016 20:59
diff --git a/index.html b/index.html
 <div id="app">

  <ul>
    <li v-for="option in options">
      <span class="red">{{ option.text }}</span>
    </li>
  </ul>
  <ul v-if="!fetched">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>

 </div>
diff --git a/script.babel b/script.babel
 new Vue({
  el: '#app',
  created: function() {
    this.fetchData()
  },
  
  methods: {
    fetchData: function(cb) {
      
      // simulate ajax call
      setTimeout(function() {
        this.fetched = true
        this.options = [
            {
              text: "One"
            },
            {
              text: "Two"
            },
            {
              text: "Three"
            }
          ];
      }.bind(this), 1000);
    }
  },
  data: {
    fetched: false,
    options: []
  }
 })
diff --git a/scripts b/scripts
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.27/vue.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
diff --git a/style.css b/style.css
 .red {
  color: #f00;
 }
diff --git a/vuejs-server-rendering-test.markdown b/vuejs-server-rendering-test.markdown
	<div id="app">

	<ul>
	<li v-for="option in options">
	<span class="red">{{ option.text }}</span>
	</li>
	</ul>
	<ul v-if="!fetched">
	<li>One</li>
	<li>Two</li>
	<li>Three</li>
	</ul>

	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.27/vue.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>