vue+node环境搭建

· webpack：代码模块化构建打包工具
· gulp: 基于流的自动化构建工具
· grunt: Javascript世界的构建工具
· babel: 使用最新的规范来写js
· vue: 构建数据驱动的web界面的渐进式框架
·express: 基于node.js平台，快速、开放、极简的web开发框架

1、首先下载安装node.js，去官网下载安装即可

可以使用淘宝镜像完成各种包的下载，在命令行内输入
npm install -g cnpm --registry=https://registry.npm.taobao.org

2、在项目目录下，打开命令行工具，输入cnpm install vue --save
3、vue-cli构建spa应用

cnpm install -g vue-cli
vue init webpack-simple demo/vue init webpack(完整的webpack项目)

下载按章完成以后，系统会提示cd demo(打开demo文件夹)，npm install(安装依赖)，npm run dev(运行)，则会在浏览器中打开项目
4、vue的配置

5、语法简介

模板语法
· Mustache语法： {{msg}}
· Html赋值：v-html=""
· 绑定属性：v-bind:id=""
· 使用表达式： {{ok?"yes":"no"}}
· 文本赋值：v-text=""
· 指令： v-if=""
· 过滤器： {{message|capitalize}} 和 v-bind:id="reward|formatId"

Class和Style绑定
·对象语法： v-bind:class="{ active:isActive,'text-dagner':hasError }"
·数组语法：
<div v-bind:class="[activeClass,errorClass]"></div>
data:{
actveClass:"active",
errorClass:"text-danger"
}
·Style绑定-对象语法： v-bind:style="{{color:activeColor,fontSize:fontSize+'px'}}"

条件渲染
·v-if
·v-else
·v-else-if
·v-show
·v-cloak

vue事件处理器
·v-on:click="greet"或者@click="greet"
·v-on:click.stop->阻止冒泡，v-on:click.prevent ->阻止默认事件，v-on:click.self ->给对象本身绑定事件,v-on:click.once ->只绑定一次事件
·v-on:keyup.enter/tab/delete/esc/space/up/down/left/right

vue组件
·全剧组件和局部组件
·父子组件通讯-数据传递
·slot