Vue.js 2.0 开发实践

@kalasoo

1. Vue.js Basics
2. Vue.js 掘金
3. Vue.js 2.0

阴明

Ming Yin

稀土创始人 🙄

前端工程师 🐶

九流设计师 🙀

ming@xitu.io

@kalasoo

Vue.js Basics

我用 Vue 做的第一个东西

coder-price

http://xitu.github.io/coder-price/

Vue.js 主要是干啥的？

它是一个 MVVM 前端框架

Model / View / ViewModel

 UI = VM(State)

Example

<div id="demo">
  <p>{{message ? message : "no content"}}</p>
  <input v-model="message">
</div>

var demo = new Vue({
  el: '#demo',
  data: {
    message: '喜欢前端技术，竟然不上掘金？'
  }
})

CodePen 加载中

Vue.js 怎么实现的？

// Object.defineProperty
// getter / setter / watcher object

var a = {}
Object.defineProperty(a, 'b', {
  enumerable: false,
  value: "static",
  get: () => { ... },
  set: () => { ... }
})

任何能拿 Vue.js 重构的前端

都应该用 Vue.js 重写一遍！

在现在的前端开发时代

选择一个框架就像是选择一个老婆

错了是一辈子的事情！➡️ 微信小程序

🔥 Vue.js 🔥

Google，Facebook，Airbnb，

掘金，阿里巴巴，百度，饿了么，58

超过11万次NPM下载／月

掘金 ❤️ Vue.js

选择一个框架的目的？

• 开发效率：现在 1 个人顶过去 3 个人

• 代码维护：代码可扩展，易于管理

• 速度性能：要能满足需求

业务进展 > 代码维护成本

组件化

人同时可以处理的信息是有限的

这是你搞不定的

一大堆东西

这是你搞得定的一堆小东西

和你能搞得定的一个关系网

Vue 的组件化编程

Single File Components

// comment.vue
<style lang="sass">
button {
    border: 1px solid gray;
    &.blue { border-color: blue; }
}
</style>

<template lang="jade">
avatar(:user='user')
input(type='text', v-model='content')
button.blue(@click='submitComment')
</template>

<script>
import Comment from '../models'
import avatar  from './components/avatar.vue'

export default {
    props: ['user'],
    components: {
        avatar
    },
    data () {
        return {
            content: ''
        }
    },
    methods: {
        submitComment (e) {
            e.preventDefault();
            var comment = new Comment(this.content)
            comment.save().then(() => {
                alert('评论成功')
                this.content = ''
            })
        }
    }
}
</script>

✌

.vue: 一个文件来管理一个组件

1. 样式：<style>
2. 内容：<template>
3. 行为：<script>
4. 扩展：lang=" ... "
5. 合作：彼此间源引

What if 我们要做一个更复杂的网站？

有很多数据需要多个组件访问和调用？

vuex

一个基于  Vue.js 的 State Management 工具

管理那些应用级的共享数据

🐢 性能 🐰

Vue.js 1.+ is Fast but not enough

Vue.js 2.0 

代码示例

• vue-hackernews
• todoMVC

开发效率

• vue-devtools
• vue-cli
• vue-validator

前端组建库

• vux
• mint-ui / element
• vue-mdl
• vueStrap

功能业务

• vue-loader
• vue-router
• vue-resource
• vuex
• vue-i18n

我们是怎么做 Vue 开发的

Vue.js 2.0

http://rc.vuejs.org/

语法变化
函数收敛
模版渲染

重要的语法变化

<li v-for="item in items" :key="item.id">{{ item.text }}</li>

<button @click="sayHi">Click Me!</button>
<button v-on:click.prevent="sayHi">Click Me!</button>

<button v-if="iLoveYou">Show 🎁</button>
<button v-else>🙄️</button>

<Component v-bind:user="ym"></Component>

<button v-if="iLoveYou">Show 🎁</button>
<button v-else>🙄️</button>

<div v-bind:class="[activeClass, errorClass]">

<div v-bind:style="styleObject"></div>

<input
  type="checkbox"
  v-model="toggle"
  v-bind:true-value="a"
  v-bind:false-value="b">

<!-- synced after "change" not "input" -->
<input v-model.lazy="msg" >
<input v-model.number="age" type="number">
<input v-model.trim="msg">

重要的语法变化

语法收敛

// Vue.transition stagger

// ready, activate, beforeCompile, compiled, attached, detached

// v-for $index, $key

(value, index) in arr; (value, key, index) in obj;

// vm.$dispatch, vm.$broadcast

// .once, .sync => props are only one-way down

computedProperties > watcher

// filter only in {{}}

... ...

语法更加简单，直白

模版渲染

• 使用 Virtual DOM

• render function 官方建议全套使用 JS 生成 HTML/DOM

• Server-side Render

  • vue-server-renderer

  • Streaming

  • Component Caching

// Step 1: Create a Vue instance
var Vue = require('vue')
var app = new Vue({
  render: function (h) {
    return h('p', 'hello world')
  }
})
// Step 2: Create a renderer
var renderer = require('vue-server-renderer').createRenderer()
// Step 3: Render the Vue instance to HTML
renderer.renderToString(app, function (error, html) {
  if (error) throw error
  console.log(html)
  // => <p server-rendered="true">hello world</p>
})

Vue.js Resources

• 官网：http://vuejs.org/
• 论坛：http://forum.vuejs.org/
• Vue.js 2.0：http://rc.vuejs.org/
• 资源：Awesome
• 掘金：http://gold.xitu.io/tag/Vue.js

阿当老师在上