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 主要参考库：

其他参考库：

一些开源的插件：

Vue1.0 的技术栈的更多相关文章

  1. 前端NEXT实践系列：（一）ECMAScript 6.0技术栈

    随着ECMAScript 6.0(ES6)是JavaScript 语言的下一代标准的普及,各个大公司和大的厂商都推出了自己的前端开发框架,如Angular,React,Vue 等,微软更是锦上添花,开 ...

  2. 用“MEAN”技术栈开发web应用（三）用mongodb搭建数据库

    上一篇介绍了如何用express搭建起服务端MVC的开发架构,本篇我们来详细介绍一下这个Model层,也就是数据库访问层.包含如何使用mongodb搭建数据库,以及如何使用mongoose来访问数据. ...

  3. 非对称技术栈实现AES加密解密

    非对称技术栈实现AES加密解密 正如前面的一篇文章所述,https协议的SSL层是实现在传输层之上,应用层之下,也就是说在应用层上看到的请求还是明码的,对于某些场景下要求这些http请求参数是非可读的 ...

  4. .NET技术大系概览 （迄今为止最全的.NET技术栈）

    从2002年的.NET 1.0开始,1.1,2.x,3.x,4.x,每个新版本的.NET都会增加新的技术,生态圈也在不断壮大. AD: 前言 .Net推出13年了,Visual Studio 2015 ...

  5. 用“MEAN”技术栈开发web应用（一）AngularJs前端架构

    前言 不知何时突然冒出“MEAN技术栈”这个新词,听起来很牛逼的样子,其实就是我们已经熟悉了的近两年在前端比较流行的技术,mongodb.express.angularjs.nodejs,由于这几项技 ...

  6. 细数Javascript技术栈中的四种依赖注入

    作为面向对象编程中实现控制反转(Inversion of Control,下文称IoC)最常见的技术手段之一,依赖注入(Dependency Injection,下文称DI)可谓在OOP编程中大行其道 ...

  7. 快速了解Scala技术栈

    http://www.infoq.com/cn/articles/scala-technology/ 我无可救药地成为了Scala的超级粉丝.在我使用Scala开发项目以及编写框架后,它就仿佛凝聚成为 ...

  8. “MEAN”技术栈开发web应用

    “MEAN”技术栈开发web应用 上一篇我们讲了如何使用angular搭建起项目的前端框架,前端抽象出一个service层来向后端发送请求,后端则返回相应的json数据.本篇我们来介绍一下,如何在no ...

  9. 用react系列技术栈实现的demo整合系统

    引子 学生时代为了掌握某个知识点会不断地做习题,做总结,步入岗位之后何尝不是一样呢?做业务就如同做习题,如果‘课后’适当地进行总结,必然更快地提升自己的水平. 由于公司采用的react+node的技术 ...

随机推荐

  1. Fis3的前端工程化之路[三大特性篇之资源定位]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  2. Recurrent Neural Network系列1--RNN（循环神经网络）概述

    作者:zhbzz2007 出处:http://www.cnblogs.com/zhbzz2007 欢迎转载,也请保留这段声明.谢谢! 本文翻译自 RECURRENT NEURAL NETWORKS T ...

  3. 如何一步一步用DDD设计一个电商网站（二）—— 项目架构

    阅读目录 前言 六边形架构 终于开始建项目了 DDD中的3个臭皮匠 CQRS(Command Query Responsibility Segregation) 结语 一.前言 上一篇我们讲了DDD的 ...

  4. Jexus 5.8.2 正式发布为Asp.Net Core进入生产环境提供平台支持

    Jexus 是一款运行于 Linux 平台,以支持  ASP.NET.PHP 为特色的集高安全性和高性能为一体的 WEB 服务器和反向代理服务器.最新版 5.8.2 已经发布,有如下更新: 1,现在大 ...

  5. 在ASP.NET Core中使用百度在线编辑器UEditor

    在ASP.NET Core中使用百度在线编辑器UEditor 0x00 起因 最近需要一个在线编辑器,之前听人说过百度的UEditor不错,去官网下了一个.不过服务端只有ASP.NET版的,如果是为了 ...

  6. 学习ASP.NET Core,怎能不了解请求处理管道[1]: 中间件究竟是个什么东西？

    ASP.NET Core管道虽然在结构组成上显得非常简单,但是在具体实现上却涉及到太多的对象,所以我们在 "通过重建Hosting系统理解HTTP请求在ASP.NET Core管道中的处理流 ...

  7. 谱聚类（spectral clustering）原理总结

    谱聚类(spectral clustering)是广泛使用的聚类算法,比起传统的K-Means算法,谱聚类对数据分布的适应性更强,聚类效果也很优秀,同时聚类的计算量也小很多,更加难能可贵的是实现起来也 ...

  8. [.NET] 利用 async & await 进行异步 IO 操作

    利用 async & await 进行异步 IO 操作 [博主]反骨仔 [出处]http://www.cnblogs.com/liqingwen/p/6082673.html  序 上次,博主 ...

  9. ajax前后端数据交互简析

    前端-------->后端 方法:POST 将要传递给后台的数据在前端拼接成url字符串,通过request.send()传递给后台,后台php把得到的数据以索引数组的方式存储在$_POST中. ...

  10. 火星坐标、百度坐标、WGS-84坐标相互转换及墨卡托投影坐标转经纬度JavaScript版

    火星坐标 火星坐标是国家测绘局为了国家安全在原始坐标的基础上进行偏移得到的坐标,基本国内的电子地图.导航设备都是采用的这一坐标系或在这一坐标的基础上进行二次加密得到的.火星坐标的真实名称应该是GCJ- ...