yyx990803

const marky = require('marky')
const render = Vue.prototype._render
const update = Vue.prototype._update
const camelize = str => str && Vue.util.camelize(str)

function getName (vm) {
  if (!vm.$parent) return 'root'
  return (
    camelize(vm.$options.name) ||
    camelize(vm.$options._componentTag) ||

yyx990803

• New Features
• Dist Files Adjustments
• vue-loader@10.0.0
• JSX Improvements
• vue-server-renderer
• vue-template-compiler
• Fixed

New Features

yyx990803

<script src="https://npmcdn.com/vue@next/dist/vue.js"></script>
<script src="https://npmcdn.com/vuex@next"></script>

<div id="app">
  {{ count }}
  <button @click="increment"> + </button>
  <button @click="decrement"> - </button>
</div>

<script>

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>

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

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

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

<!-- MyComponent.vue -->

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

<!-- template -->

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

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

// fesfesf
// fesfsef