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. 【趣事】用 JavaScript 对抗 DDOS 攻击 (下)

    上一篇:http://www.cnblogs.com/index-html/p/js-network-firewall.html 对抗 v2 之前的那些奇技淫巧,纯属娱乐而已,并不能撑多久. 但简单. ...

  2. “.Net 社区虚拟大会”(dotnetConf) 2016 Day 3 Keynote: Scott Hanselman

    美国时间 6月7日--9日,为期三天的微软.NET社区虚拟大会正式在 Channel9 上召开,美国时间6.9 是第三天, Scott Hanselman 做Keynote.今天主题围绕的是.NET ...

  3. django server之间通过remote user 相互调用

    首先,场景是这样的:存在两个django web应用,并且两个应用存在一定的联系.某些情况下彼此需要获取对方的数据. 但是我们的应用肯经都会有对应的鉴权机制.不会让人家随随便便就访问的对吧.好比上车要 ...

  4. document.documentElement.clientHeight 与 document.body.clientHeight(杜绝千篇一律的抄袭!!)

    document.documentElement.clientHeight 与 document.body.clientHeight用来获取页面可视高度我觉得有点问题.这两个应该不是一个东西. 页面中 ...

  5. 8、Struts2 运行流程分析

    1.流程分析: 请求发送给 StrutsPrepareAndExecuteFilter StrutsPrepareAndExecuteFilter 询问 ActionMapper: 该请求是否是一个 ...

  6. GJM ： C#设计模式汇总整理——导航 【原创】

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  7. 编译器开发系列--Ocelot语言6.静态类型检查

    关于"静态类型检查",想必使用C 或Java 的各位应该非常熟悉了.在此过程中将检查表达式的类型,发现类型不正确的操作时就会报错.例如结构体之间无法用+ 进行加法运算,指针和数值之 ...

  8. 初识git版本控制系统

    当下git分布式版本控制系统越来越火,掌握git也是必须的一个技能.因此,对git做了如下学习. Git初级指南 1. 先安装git.(ps:在select cmponents处要勾选Git Bash ...

  9. 【一起学OpenFoam】01 OpenFoam的优势

    CFD技术发展到今天,已经超过了大半个世纪了,已经涌现出非常多的CFD软件可供人们使用.通用商业CFD软件譬如Fluent.CFX.Star CCM+等在工业上得到了广泛的应用,另外一些专用的软件(如 ...

  10. OpenGL shader 中关于顶点坐标值的思考

    今天工作中需要做一个事情: 在shader内部做一些空间距离上的计算,而且需要对所有的点进行计算,符合条件的显示,不符合条件的点不显示. 思路很简单,在vertex shader内知道顶点坐标,进行计 ...