Vue 2.0 Hello World

by xu xiaofei

HTML

<script src="https://unpkg.com/vue"></script>
<script src="//unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <p>{{ message }}</p>
  <p>{{ computed_message }}</p>
  <router-link to="/foo">Go to Foo</router-link>
  <router-link to="/bar">Go to Bar</router-link>
  <router-view></router-view>

  <button @click="foo()">
    click
  </button>
  <transition name="animation">
    <p v-if="show">hello</p>
  </transition>
</div>

CSS

@keyframes moveFromLeft {
	from { -webkit-transform: translateX(120%); }
  to { -webkit-transform: none; }
}

  .animation-leave-active{
    animation: moveFromRight .6s ease both;
  }

@keyframes moveFromRight {
	from { -webkit-transform: none; }
  to { -webkit-transform: translateX(120%); }
}

JavaScript

const Foo = {
  template: '<transition name="animation"><div>foo</div></transition>'
}
const Bar = {
  template: '<transition name="animation"><div>bar</div></transition>'
}

const router = new VueRouter({
  routes: [{
    path: '/foo',
    component: Foo
  }, {
    path: '/bar',
    component: Bar
  }]
})

new Vue({
  router,
  el: '#app',
  data: {
    show: false,
    message: 'Hello Vue.js!'
  },
  computed: {
    computed_message: function() {
      return this.message + ' computed'
    }

  },
  watch: {
    message: function() {
      console.log(this.message)
    }
  },
  methods: {
    foo() {
      this.show = !this.show
      this.message = 'Hello watch'
    }
  }
})