实例生命周期钩子
每个 VUE实例在被创建时都要经过一系列的初始化过程--例如，需要设置数据监听，编译模板，将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
1. beforeCreate 在实例初始化之后，数据观测（data obserer）和event/watcher事件配置之前被回调
beforeCreated:function() { console.log('be forecreated') }
2. created 在实例创建完成后被立即调用
在这一步，实例已完成以下的配置：数据观测（data observer），属性和方法的运算，watch/event事件回调。
created:function(){ console.log('created') }
3. beforeMount在挂载开始之前被调用：相关的渲染函数首次被调用
beforeMount:function(){console.log('beforeMount')}
4. mounted 挂载成功之后被调用
mounted:function(){console.log('mounted')}
5. beforeUpdate 数据更新时被调用
beforeUpdate:function(){console.log('beforeUpdate')}
6. updated 组件DOM已经更新，组件更新完毕
updated:function(){console.log('updated')}
7. activated keep-alive组件激活时调用。该钩子在服务器端渲染期间不被调用。
8. deactivated keep-alive组件停用时调用。该钩子在服务器端渲染期间不被调用。
9. beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。
10. destoryed VUE实例销毁后调用。调用后，VUE实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
模板语法
1. 指令
指令（Directives）是带有 v- 前缀的特殊特性。指令特性的值预期是单个Javascript表达式（v-for 是例外情况）。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。
2. Class与Style绑定
操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以使用v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过字符串拼接麻烦且容易出错。因此，在将v-bind用于class和style时，vue.js做了专门的增强。表达式结果的类型除了字符串外，还可以时对象和数组。
3. v-for 维护状态
当VUE正在更新使用v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，VUE将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时DOM状态（例如：表单输入值）的列表渲染输出。
为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一 key 属性：
<div v-for="item in items" v-bind:key="item.id">
</div>
建议尽可能在使用v-for时提供key attribute，除非遍历输出的DOM内容非常简单，或者刻意依赖默认行为以获取性能上的提升。因为它是vue识别节点的一个通用机制，key并不仅是与v-for特别关联。
事件处理
1. 监听事件
可以用 v-on 指令监听DOM事件，并在触发时运行一些Javascript代码
<button v-on:click="方法名"></button>
有时也需要在内联语句处理器中访问原始的DOM事件。可以用特殊变量$event把它传入方法：
<button v-on:click="fun('abc', $event)"></button>
2. 事件修饰符
在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。
为了解决这个问题，vue.js为v-on提供了事件修饰符。修饰符是由点开头的指令后缀表示的。
.stop
.prevent
.capture
.self
.once
.passive
#阻止单击事件继续传播
<a v-on:click.stop="doThis"></a>
#提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>
#修饰符可以串联
<a v-on:click.stop.prevent="doThat"></a>
#只有修饰符
<form v-on:submit.prevent></form>
#添加事件监听器时使用事件捕获模式，即元素自身触发的事件先在此处理，然后才交由内部元素进行处理
<div v-on:click.capture="doThis"></div>
#只当在event.target是在当前元素自身触发处理函数，即事件不是从内部元素触发的
<div v-on:click.self="doThis"></div>
表单输入绑定
基础用法
可以用v-model指令在表单<input>, <textarea>及<select>元素上创建双向数据绑定。它会根据控件数据类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行 一些特殊处理。
v-model会忽略所有表单元素的value, checked, selected特性的初始值，而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值。
v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：
text和textarea元素，使用value属性和input属性
checkbox和radio元素，使用checked属性和change属性
select元素将value作为prop并将change作为事件
单文件组件
在很多vue项目中，使用Vue.component来定义全局组件，紧接着用 new Vue({el: '#container'})在每个页面内指定一个容器元素
这种方式在很多小规模的项目中运作的很好，在这些项目里javaScript只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由Javascript驱动的时候，下面的这些缺点将会变得非常明显：
全局定义（global defintion）强制要求每个component中的命名不得重复
字符串模板（string templates）缺乏语法高亮
不支持CSS
没有构建步骤
文件扩展名为.vue的单文件组件（single-file components）为以上所有问题提供了解决方法，并且 还可以使用webpack或Browserify等构建工具。
1. 安装npm
npm全称为Node Package Manager，是一个基于Node.js的包管理器，也是整个Node.js社区最流行，支持第三方模块最多的包管理器。
npm -v 查看版本
由于网络原因，可以安装cnpm
npm install -g cnpm --registry=https://registry.npm.tabao.org
安装 vue-cli
cnpm install -g @vue/cli
安装 webpack
cnpm install -g webpack
webpack是JavaScript打包器（module bundler）
网友评论