Vue.js 2 template

by kuonyuu

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="app">
  <p>{{ msg }}</p>
  <ul>
    <li v-for="item in items">
      <!-- Adding v-once to the pre breaks it -->
      <custom-item :item="item"></custom-item>
    </li>
  </ul>
  <button @click="changeUrl">Change the URL</button>
</div>

Babel + JSX

new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue.js!',
    items: [{
      message: 'Hello',
      url: 'https://unsplash.it/200/300/?random',
			u: 'https://unsplash.it/200/300/?random'
    }]
  },
  methods: {
    changeUrl() {
      this.items[0].url = `https://unsplash.it/200/300/?random?rand=${Math.random()}`
    }
  },
  components: {
  	CustomItem: {
	  	template: '<div><p>{{ item.url }}</p><p v-once>{{ item }}</p></div>',
  	  props: ['item']
    }
  }
})