vuejs概述

Vue.js是用于构建交互式的Web界面的库。它提供了MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的API。

结合node.js 可以实现前后端开发从物理上的分离。使前端负责View和Controller层,后端负责数据接口,数据存储。

感兴趣可以看淘宝ued 《前后端分离的思考与实践》

vuejs有以下几个特点

1.使用简单, 如:

<body>
<div id="app">
<p>{{ note }}</p>
<input type="text" v-model="note">
</div>
</body>
var vm = new Vue({
el: '#app',
data: {
note: ''
}
})

2.外观优雅

<a @click=”doSomething”></a>

<a :href=”url”></a>

<a @click.stop=”doSomething”></a> //阻止单击事件冒泡

<input @keyup.enter=”submit”> //只在按下回车键的时候触发事件

<input v-model=”msg” lazy> //lazy: 在’change’而不是’input’事件中更新数据

3.小巧灵活

gzip压缩后只有25.11kb。

松耦合,和路由模块, 网络请求模块,数据模块 等相分离,可单独使用。

4.功能强大

  • 模块化,可以直接使用ES6的模块化功能,再结合Webpack进行相应打包是目前最热门的方案。
  • 组件化, 通过将页面上某一组件的html、CSS、js代码放入一个.vue的文件中进行管理可以大大提高代码的维护性。如:
<template>
<div class="box" v-text="note"></div>
</template>
<script>
export default {
data () {
return {
note: '这是一个组件的html模板!'
}
}
}
</script>
<style scoped>
.box {
color: #000;
}
</style>
  • 路由,结合 vue-router 可以实现各个组件的按需加载,轻松构建单页应用。如:
export default (router) => {
router.map({
'*': {component: require('./components/not-found')}, //not found handler
'/': {component: require('./components/index')},
'/login': {component: require('./components/login')},
'/field': {component (resolve) { require(['./components/defconfig/field'], resolve) }},
'/stat': {component (resolve) { require(['./components/defconfig/stat'], resolve) }}
})
}

使用

  1. 装 node 版本: v6.3.0
  2. 装 npm 版本: 3.10.3
  3. 运行命令: npm install 安装插件 、npm run dev 运行项目

相关工具

  1. FQ工具: lantern
  2. Sublime Text3 安装 Package Control 安装插件:EditorConfig、Vue Syntax Highlight
  3. chrome插件 安装 Vue.js devtools(调试vue) Google翻译插件
  4. 抓包工具 fiddler

vuejs 主要参考库:

其他参考库:

一些开源的插件:

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.