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.js

Reactive Components for Modern Web Interfaces

数据驱动的组件,为现代化的 Web 界面而生

最新版本是 2.0

尤小右 Evan You

@youyuxi

多说  / Google / Meteor

发布于 2014 年 2 月

我用 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

这是一个大写的广告

起码也要给我 1 分钟

🔥 Thanks for your time 🔥

🔞 ming@xitu.io 🔞

阿当老师在上

Vue.js 2.0 开发实践

By Ming YIN

Vue.js 2.0 开发实践

稀土 Meetup X Coding 线下分享

  • 5,216