vue

npm install vue
npm install –global vue-cli
vue init webpack exp3
cd exp3
npm install
npm run dev

App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
main.js: 项目的核心文件。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

#文本
数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值：

#html
使用 v-html 指令用于输出 html 代码：

#属性
HTML 属性中的值应使用 v-bind 指令。

#表达式
Vue.js 都提供了完全的 JavaScript 表达式支持。

<div id="app">

    {\{5+5}\}<br>

    {\{ ok ? 'YES' : 'NO' }\}<br>

    {\{ message.split('').reverse().join('') }\}

    <div v-bind:id="'list-' + id">菜鸟教程</div>

</div>

    

<script>

new Vue({

  el: '#app',

  data: {

    ok: true,

    message: 'RUNOOB',

    id : 1

  }

})

</script>

#指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上

#参数
参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

<a v-bind:href="url">菜鸟教程</a>

#修饰符
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

#用户输入
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

#过滤器
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由”管道符”指示

#缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：
v-bind 缩写

<!-- 完整语法 -->

<a v-bind:href="url"></a>

<!-- 缩写 -->

<a :href="url"></a>

v-on 缩写

<!-- 完整语法 -->

<a v-on:click="doSomething"></a>

<!-- 缩写 -->

<a @click="doSomething"></a>

v-if 指令
在元素 和 template 中使用 v-if 指令

v-show
我们也可以使用 v-show 指令来根据条件展示元素

##Vue.js 样式绑定
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

##Vue.js 事件处理器
事件监听可以使用 v-on 指令：

##修饰符
.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步

<!-- 在 "change" 而不是 "input" 事件中更新 -->

<input v-model.lazy="msg" >

.number
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值

.trim
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入

#Vue.js 组件
组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

Prop
prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”：

##Vue.js 组件 - 自定义事件
父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件

###Vue.js 自定义指令
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。

###Vue.js 路由
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

Vue.js 路由需要载入 vue-router 库