Vue简介

Vue

项目地址: Github官网

作者:yyx990803

关于作者

为什么叫Vue

Vue取自法语,其意思其实就是英语的View,即视图,由此也表明了Vue是专注于前端界面的一个库,他本身不是一个全能框架,和React一样只专注视图层。

兼容性

Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性。

Vue.js 支持所有兼容 ECMASCript 5 的浏览器。

安装

npm install vue
  • Bower
bower install vue
  • AMD:可直接使用上述版本

注:在开发需要强制应用内容安全策略 (CSP) 的应用时,请使用CSP兼容版本,即vue@csp

特点

  • 简洁。 HTML 模板 + JSON 数据 + 一个 Vue 实例 = 一个组件
  • 数据驱动。 自动追踪依赖的模板表达式和计算属性。
  • 组件化。 用解耦、可复用的组件来构造界面。
  • 轻量级。 ~24kb min+gzip,无依赖。
  • 快速。 精确有效的异步批量 DOM 更新。
  • 模块友好。 通过 NPM 或 Bower 安装,无缝融入你的工作流。

对比其他框架

参见这里(官网)以及知乎上的一些零零散散的问题的答案

一个简单的Vue组件

  • HTML代码
<p id="demo"></p>
  • JavaScript 代码
var exampleVM = new Vue({
  el: '#demo',
  data: {
    msg: 'Hello world'
  }
})

何谓数据驱动

核心:

  • 相对于程序逻辑,人类更擅长于处理数据。

优势:

  • 可读性更强,处理流程一目了然。
  • 更容易修改,只需要更新数据即可修改内容,不需要修改流程。
  • 可重用
// 普通处理

if (msg.type === 'Hello') {
  console.log('hello')
} else if (msg.type === 'world') {
  console.log('world')
} else if (msg.type === 'wow') {
  console.log('wow')
}
// ........
else {
  console.log('我不知道你在说什么')
}

// 数据驱动

const msgType = {
  hello: 'hello',
  world: 'world',
  wow: 'wow',
  .......
}

if (msgType.hasOwnProperty(msg.type)) {
  console.log(msgType(msg.type))
} else {
  console.log('我不知道你在说什么')
}


Vue 中的数据驱动

data-drive

通过特殊的语法将DOM绑定到底层数据。一旦创建绑定,DOM将会同步数据的更新而更新

组件化

组件化

React一样,Vue也推荐一切皆组件的思维,这不只是框架的思想,更是一种趋势。在WebComponent还没有开始使用的现在,我们应当去推动这个趋势。通过封装可重用的代码,使之成为一个组件,多处复用,减少代码量,尤其是重复代码

组件化代码

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

相对于WebComponent,UI库提供的组件化的优势:

  • 首先规范尚未完成且实现可能不一,而奇葩IE你不知道他该怎么办
  • 提供组件间数据传递
  • 动态替换

异步更新

Vue在内部实现的是一套异步更新DOM的机制。每当观察到数据变化时,Vue 就开始一个队列,将同一事件循环内所有的数据变化缓存起来。如果一个 watcher 被多次触发,只会推入一次到队列中。等到下一次事件循环,Vue 将清空队列,只进行必要的 DOM 更新。

也就是说Vue不会因为数据的改变而立即更新DOM,一个数据的多次更新也只会更新最后一次。这样所带来的是一个性能的提升。而通过合理的使用track-by属性还能得到一定的提高。

Vue 的一些实例

构建Vue 实例

  • 新的Vue 实例

      var vm = new Vue({
        // 选项
      })
    
  • 可复用的组件

    var MyComponent = Vue.extend({
      // 扩展选项
    })
    
    // 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建
    var myComponentInstance = new MyComponent()
    

属性和方法

Vue实例会代理其data对象中在构建时所有的属性,而在后续新添加的则不会代理

  var data =
  var vm = new Vue({
    data: data
  })

  vm.a === data.a // -> true

  // 设置属性也会影响到原始数据
  vm.a = 2
  data.a // -> 2

  // ... 反之亦然
  data.a = 3
  vm.a // -> 3

除此之外,其他的一些方法和属性都会暴露出来,都带有$前缀。

生命周期函数

实例化:

created —> beforeCompile —> compiled —> ready

销毁:

beforeDestroy —> destroyed

还有更多

还有很多诸如此类的东西,就不一一赘述,可在官方的文档上找到更为完善的例子和说明。

生态

相较于ReactVue目前的生态圈还是很。 但是….

插件

可以通过开发插件的形式,来补充功能,是他从一个完成到框架的进化

  • 添加全局方法或属性
  • 添加全局资源:指令/过滤器/过渡等
  • 添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。
  • 一个库,提供自己的 API,同时提供上面提到的一个或多个功能

开发单页应用? 路由是必须的

vue-router

安装:

npm install vue-router --save

使用:

  • HTML或Template
<!--主页面-->
<div id="app">
  <router-view></router-view>
</div>
<!--路由跳转-->
<h2>Go To <a v-link="">Demo0</a></h2>
  • 加载插件
import VueRouter from 'vue-router'

Vue.use(VueRouter)
  • 启动路由
import Vue from 'vue'
import Router from './routes/index'
const App = Vue.extend({})

Router.start(App, '#app')

需要像Flux一样管理数据?

官方根据Flux架构实现了一套为Vue所能使用: Vux

具体使用参见Demo

And More

你可以在awesome-vue中找到你想要的插件。

UI 组件

还有很多可在awesome-vue中找到

开发工具

文章均采用 CC BY-NC-SA 3.0 许可协议,转载请注明出处。
本文链接:https://blog.kingsongao.com/2016/04/13/Vue简介/