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. Git 子模块 - submodule

    有种情况我们经常会遇到:某个工作中的项目需要包含并使用另一个项目. 也许是第三方库,或者你 独立开发的,用于多个父项目的库. 现在问题来了:你想要把它们当做两个独立的项目,同时又想在 一个项目中使用另 ...

  2. java基础_集合List与Set接口

    List接口继承了Collection的方法  当然也有自己特有的方法向指定位置添加元素   add(索引,添加的元素); 移除指定索引的元素   remove(索引) 修改指定索引的元素   set ...

  3. 常见CSS与HTML使用误区

       误区一.多div症 <div class="nav"> <ul> <li><a href="/home/"> ...

  4. SQL Server常见数据类型介绍

    数据表是由多个列组成,创建表时必须明确每个列的数据类型,以下列举SQL Server常见数据类型的使用规则,方便查阅. 1.整数类型 int 存储范围是-2,147,483,648到2,147,483 ...

  5. 创建 OVS Local Network - 每天5分钟玩转 OpenStack（129）

    上一节我们完成了 OVS 的准备工作,本节从最基础的 local network 开始学习.local network 不会与宿主机的任何物理网卡连接,流量只被限制在宿主机内,同时也不关联任何的 VL ...

  6. 算法与数据结构(十六) 快速排序(Swift 3.0版)

    上篇博客我们主要聊了比较高效的归并排序算法,本篇博客我们就来介绍另一种高效的排序算法:快速排序.快速排序的思想与归并排序类似,都是采用分而治之的方式进行排序的.快速排序的思想主要是取出无序序列中第一个 ...

  7. 【NLP】Python NLTK获取文本语料和词汇资源

    Python NLTK 获取文本语料和词汇资源 作者:白宁超 2016年11月7日13:15:24 摘要:NLTK是由宾夕法尼亚大学计算机和信息科学使用python语言实现的一种自然语言工具包,其收集 ...

  8. spring无法读取properties文件数据

    只讲述异常点,关于怎么配置文件,这里不做说明.   1. controller中无法读取config.properties文件 controller中注入的@Value配置是从servlet-cont ...

  9. Prometheus 系统监控方案 一

    最近一直在折腾时序类型的数据库,经过一段时间项目应用,觉得十分不错.而Prometheus又是刚刚推出不久的开源方案,中文资料较少,所以打算写一系列应用的实践过程分享一下. Prometheus 是什 ...

  10. 第11章 Linux服务管理

    1. 服务分类 (1)Linux的服务 ①Linux中绝大多数的服务都是独立的,直接运行于内存中.当用户访问时,该服务直接响应用户,其好处是服务访问响应速度快.但不利之处是系统中服务越多,消耗的资源越 ...