yyx990803

new Vue({
  el: ‘#example’,
  data: object
})

yyx990803

var example = new Vue({
  data: {
    a: 1
  },
  computed: {
    b: function () {
      return this.a + 1
    }
  }
})

yyx990803

var Example = Vue.extend({
  template: '<div>{{ message }}</div>',
  data: function () {
    return {
      message: 'Hello Vue.js!'
    }
  }
})

// register it with the tag <example>

yyx990803

export default {
  render () {
    return <App><Text></Text></App>
  }
}

// fesfesf
// fesfsef

yyx990803

// App.js
// using .jsx extension because gist syntax
// highlighting chokes on `export default`
import ComponentA from './ComponentA'

export default {
  // use another component, in this scope only.
  // ComponentA maps to the tag <component-a>
  components: { ComponentA },
  template: `

yyx990803

<!-- MyComponent.vue -->

<!-- css -->
<style>
.message {
  color: red;
}
</style>

<!-- template -->

yyx990803

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './app.vue'
import ViewA from './view-a.vue'
import ViewB from './view-b.vue'

Vue.use(VueRouter)

const router = new VueRouter()

yyx990803

The Vue Stack

Opinionated stack for building large-scale, production grade applications

Application

• View layer: Vue.js
  • Intuitive, smooth learning curve
  • Performant reactive system that is optimized by default
• Built-in animation/transition system

yyx990803

<script src="https://npmcdn.com/vue@next/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/animatecss/3.5.2/animate.min.css">
<style>
.done {
  text-decoration: line-through;
}

.todo {
  transition: all 0.5s ease;
  height: 30px;

yyx990803

<script src="https://npmcdn.com/vue@next/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router@next"></script>
<style>
.router-link-active {
  color: red;
}
</style>

<div id="app">
  <side-bar></side-bar>