vue-cli-master 学习

学习曲线

开始使用 Vue，你使用的是熟悉的 HTML、符合 ES5 规则的 JavaScript（也就是纯 JavaScript）。有了这些基本的技能，你可以快速地掌握它(指南)并投入开发 。

Angular 2 的学习曲线是非常陡峭的。即使不包括 TypeScript，它的开始指南中所用的就有 ES2015 标准的 JavaScript，18个 NPM 依赖包，4 个文件和超过 3 千多字的介绍，这一切都是为了完成个 Hello World。而Vue’s Hello World就非常简单。甚至我们并不用花费一整个页面去介绍它。

Vue 提供官方支持Webpack 和 Browserify

原文：http://vuejs.org/guide/comparison.html

下载安装包：https://github.com/vuejs/vue-cli

A simple CLI for scaffolding Vue.js projects.

Installation

Prerequisites: Node.js (>=4.x, 6.x preferred), npm version 3+ and Git.

$ npm install -g vue-cli

Usage

$ vue init <template-name> <project-name>

Example:

$ vue init webpack my-project

然后按照提示向导进行配置即可。

声明式渲染

1.  {{}}

2. v-bind

e.g. <spanv-bind:title="message"></span>v-bind 属性被称为指令.这个指令的简单含义是说：将这个元素节点的 title 属性和 Vue 实例的 message 属性绑定到一起。

条件与循环

注：在chrome浏览器中实测发现v-if 是把对应了删除的节点，并不是简单地显示或隐藏。

v-model 双向数据绑定; 

用组件构建（应用）

组件系统是 Vue.js 另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。

<div id="app-7">
  <ol>
    <todo-item v-for="A in Arr" v-bind:todo="A"></todo-item>
  </ol>
</div>
<hr/>
<div id="example-2">
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
</div>

Vue.component('todo-item',{
props: ['todo'], //子元素通过 props 接口实现了与父亲元素很好的解耦。
template: '<li><label>name:</label>{{todo.text}}, <label>price:</label> {{ todo.price}}</li>'
});
var app7 = new Vue({
el: '#app-7',
data: {
Arr: [
      {text: 'apple', price: 120},
      {text: 'pear' , price: 130},
      {text: 'potato', price: 135}
]
}
});


var data = {counter:0};
Vue.component('simple-counter',{
template: '<button v-on:click="counter+=1">{{counter}}</button>',
  data: function(){ return {counter:0}}
});
new Vue({
el: '#example-2'
});

结果：